<template>
	<view class="content">
		<checkbox-group name="">
			<label>
				<view class="card">
					<view class="cardHeader">
						<checkbox color="#FF6B4A" :value="totalPrice"  style="transform:scale(0.7)"/>
						<image src="../../static/customerService-btn.png" mode="aspectFill"></image>
						<text>非常戴镜</text>
					</view>
					<view class="cardBody">
						<checkbox color="#FF6B4A" :value="totalPrice" style="transform:scale(0.7)" />
						<view class="goodInfo">
							<view class="imageWrap">
								<image src="../../static/img/detail/d1.png" mode="aspectFill" style="width: 188rpx;height: 168rpx;"></image>
							</view>
							<view class="infoRight">
								<text class="goodName">商品名称商品名称商品名称名称名称商品名称名商品名称名</text>
								<view class="describ"><text>支持7天无理由退货 顺丰发货支持7天无理由退货 顺丰发货支持7天无理由退货 顺丰发货</text>
								<!-- <text class="icon">></text> -->
								</view>
								<view class="priceBox">
									<view class="price">￥198</view>
									<text>(限购{{maxCount}}副)</text>
									<view class="counter">
										<view class="btn" disabled="this.addDisabled" type="default" @click="counter(false)">-</view>
										<text>{{count}}</text>
										<view class="btn" disabled="this.desDisabled" type="default" @click="counter(true)">+</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</label>
		</checkbox-group>
		
		
		<view class="footer">
			<view class="footerLeft">实付金额:<text>￥{{totalPrice}}</text></view>
			<view class="footerRight">
				<view class="paybtn">立即支付</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				totalPrice: 360,
				count:1,
				maxCount:20,
			}
		},
		onLoad() {

		},
		methods: {
			counter(isadd){
				if(isadd){
					this.count >= this.maxCount? this.addDisabled = true:this.count++;
				}else{
					this.count <= 1? this.desDisabled = true:this.count--;
				}
			},
		}
	}
</script>

<style lang="scss">
	.content {
		min-height: 100vh;
		background-color: #F7F6F6;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 40rpx;
		box-sizing: border-box;
		
		.card{
			background-color: #FFFFFF;
			border-radius: 16rpx;
			box-sizing: border-box;
			padding: 36rpx 36rpx 36rpx 18rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-between;
			.cardHeader{
				width: 100%;
				height: 36rpx;
				display: flex;
				align-items: center;
				justify-content: flex-start;
				image{
					height: 32rpx;
					width: 32rpx;
				}
			}
			.cardBody{
				width: 100%;
				height: 300rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.goodInfo{
					width: 95%;
					display: flex;
					flex-direction: row;
					justify-content: flex-start;
					.imageWrap{
						height: 188rpx;
						width: 188rpx;
							margin-right: 28rpx;
						image{
							height: 188rpx;
							width: 188rpx;
						}
					}
					.infoRight{
						display: flex;
						flex-direction: column;
						align-items: flex-start;
						justify-content: space-between;
						height: 220rpx;
						.goodName{
							font-size: 28rpx;
							color: #333333;
						}
						.describ{
							width: 100%;
							height: 80rpx;
							box-sizing: border-box;
							padding: 10rpx;
							font-size: 20rpx;
							color: #999999;
							background: #F2F2F2;
							text{
								 text-overflow: -o-ellipsis-lastline;
								  overflow: hidden;
								  text-overflow: ellipsis;
								  display: -webkit-box;
								  -webkit-line-clamp: 2;
								  line-clamp: 2;
								  -webkit-box-orient: vertical;
							}
							// .icon{
							// 	transform: rotate(90deg);
							// }
						}
						.priceBox{
							display: flex;
							justify-content: space-between;
							align-items: center;
							width: 100%;
							font-size: 14px;
							color: #999999;
							.price{
								color: #FF6B4A;
								font-size: 28rpx;
							}
							.counter{
								display: flex;
								flex-direction: row;
								justify-content: space-between;
								align-items: center;
								font-size: 28rpx;
								color: #333333;
								width: 122rpx;
								.btn{
									display: flex;
									justify-content: center;
									line-height: 32rpx;
									height: 32rpx;
									width: 32rpx;
									background-color: #F2F2F2;
									color: #CFCFCF;
								}
							}
						}
					}
				}
			}
		}
		
		.footer{
			position: fixed;
			left: 0;
			bottom: 0;
			height: 112rpx;
			width: 100%;
			background-color: #FFFFFF;
			font-size: 16px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.footerLeft{
				display: flex;
				justify-content: center;
				align-items: center;
				width: 50%;
				color: #333333;
				text{
					color: #FF6B4A;
				}
			}
			.footerRight{
				display: flex;
				justify-content: flex-end;
				align-items: center;
				width: 50%;
				margin-right: 26rpx;
				.paybtn{
					display: flex;
					justify-content: center;
					align-items: center;
					background: #FF6B4A;
					border-radius: 20px;
					border-radius: 20px;
					color: #FFFFFF;
					width: 204rpx;
					height: 80rpx;
				}
			}
				
		}
	}
	
</style>
