<template>
	<view class="whole">
		<view class="topHead" id="topHead" :style="'padding:' + statusBarHeight + 'px 24rpx 10px;'">
			<view class="box">
				<view class="item" v-for="item in itemList" :key="item.id" :class="tabType === item.id ? 'active' : ''" @click="changeTop(item.id)">{{item.text}}</view>
			</view>
		</view>
		
		<view class="listBox" :style="'height: calc(100% - ' + (statusBarHeight + 50) + 'px);'">
			<template v-if="tabType == 'cart'">
				<scroll-view scroll-y="true" style="height: calc(100% - 100rpx); overflow: auto;">
					<view class="cartBox">
						<view class="cart_item" v-for="item in cartList" :key="item.id">
							<view class="check flex" @click="chooseGood(item)">
								<up-checkbox :checked="item.checked" :activeColor="Color" shape="circle" :disabled="item.disabled" usedAlone></up-checkbox>
							</view>
							<image :src="item.goods.pic_url + '?x-oss-process=image/format,webp'" :webp="true" @click="hanlejump(item)" mode="aspectFill"></image>
							<view class="cart_info" @click="hanlejump(item)">
								<view class="name" :class="item.disabled ? 'disabled' : ''">
									<view class="kuajing" v-if="item.goods.is_cross_border === 1">跨境包税</view>
									<view class="kuajing" v-else-if="item.goods.overseas_direct_mail === 1">海外直邮</view>{{item.goods.title}}
								</view>
								<view v-if="item.goods.limit_type == 1" class="box_number">{{item.goods.start_sale_num}}件起购</view>
								<view v-if="item.goods.limit_type == 2" class="box_number">限购{{item.goods.limit}}件</view>
								<view class="price flex1" @click.stop>
									<view class="sku" @click.stop="getShopGoodsSku(item)"
										v-if="(item.shop_goods_sku_id !== 0 && item.goods.sku && item.goods.status == 1 && item.shop_group_goods_id != 0 && item.goods.sold_status === 1) || (item.shop_goods_sku_id !== 0 && item.goods.sku && item.goods.status == 1 && item.shop_group_goods_id ==0 )">
										<view class="text" v-if="(item.goods.sku && item.goods.sku.stock > 0)">
											<text>{{item.goods.sku.v1}}</text>
											<text v-if="item.goods.sku.v2">-{{item.goods.sku.v2}}</text>
											<text v-if="item.goods.sku.v3">-{{item.goods.sku.v3}}</text>
											<text v-if="item.goods.sku.v4">-{{item.goods.sku.v4}}</text>
										</view>
										<view v-else class="text">所选规格暂时缺货</view>
										<up-icon name="arrow-down" size="12"></up-icon>
									</view>
									<view v-else-if="item.goods.status !== 1 || item.goods.sold_status == 0"
										style="font-size: 26rpx; margin-bottom: 50rpx;width: 100%;">
										该商品暂未开始售卖
										<div style="font-size: 28rpx;border: 2rpx solid #D1D1D1;padding: 0 5rpx;border-radius: 8rpx;display: inline-block;float: right;">
											x{{item.num}}
										</div>
									</view>
									<view v-else-if="item.goods.status !== 1 || item.goods.sold_status == 2"
										style="font-size: 26rpx; margin-bottom: 50rpx;">
										宝贝已经不能购买
									</view>
									<view v-else></view>
									<view @click.stop="delItem(item.id)"><up-icon name="trash"></up-icon></view>
								</view>
								<template v-if="item.goods.status !== 1 && item.goods.sold_status === 1">
									<view class="price again flex1" v-if="item.goods.stock <= 0"
										@click.stop="getShopGoodsSku(item)">
										<text>请重新选择商品规格</text>
										<text class="btn" @click.stop="getShopGoodsSku(item)">重新选择</text>
									</view>
								</template>
								<template v-if="!item.goods.sku && item.goods.stock <= 0">
									<view class="price again flex1">
										<text>当前商品暂时缺货</text>
									</view>
								</template>
								<view class="price flex1" style="height: 50rpx;"
									v-if=" (item.goods.status === 1 && item.shop_group_goods_id != 0 && item.goods.sold_status === 1 ) || (item.goods.status === 1 && item.shop_group_goods_id == 0)">
									<view class="price-left">
										<text class="icon">￥</text>
										<text class="text" v-if="is_vip && vip_on === 1 && item.goods.vip_price > 0">{{item.goods.vip_price}}</text>
										<text class="text" v-else>{{item.goods.price}}</text>
									</view>
									<!-- <view @click.stop v-if="(item.goods.sku && item.goods.sku.stock != 0)"> -->
									<view @click.stop>
										<up-number-box
											v-model="item.num"
											:name="'step' + item.id"
											:ref="'step' + item.id"
											:min="item.goods.limit_type == 1 ? parseInt(item.goods.start_sale_num) : item.goods.limit_type === 0 ? (item.goods.stock <= 0 ? item.num : 1) : 1"
											:max="item.goods.limit_type == 2 ? parseInt(item.goods.limit) : item.goods.limit_type == 0 ? (item.goods.stock <= 0 ? 0 : item.goods.stock) : (item.goods.stock <= 0 ? 0 : item.goods.stock)"
											disabledInput
											bgColor="#f2f3f5"
											:longPress="false"
											@change="changeNum($event, item)"
											@overlimit="plusBtn($event, item.goods.limit_type, item.num, item.goods.limit, (item.goods.stock <= 0 ? 0 : item.goods.stock))">
										</up-number-box>
									</view>
								</view>
							</view>
						</view>
						
						<view v-if="cartList.length">
							<cf-cloud></cf-cloud>
						</view>
											
					</view>

					<view class="cart-none" v-if="!loading">
						<image src="https://ct-upimg.yx090.com/ju8hn6/shop/image/2024/04/09/1kIIfrF0fGTsYIQ4K5Jl8CSPMwMsiQJYeU9H9aWQ.png" mode="widthFix"></image>
						<text>小车大容量，喜欢的都加进来吧</text>
						<text class="text">再忙，也要记得买点什么犒劳自己~</text>
					</view>
				</scroll-view>
				
				<view class="cart-bottom flex1">
					<up-checkbox :checked="checkAll" class="check" :activeColor="Color" @change="checkAllBtn" shape="circle" usedAlone label="全选"></up-checkbox>
					<view class="cart-bottom-info flex1">
						<view>
							<view>
								<text style="color: #555;">合计：</text>
								<text class="icon">￥</text>
								<text class="price">{{total_price}}</text>
							</view>
							<view v-if="checked && checked.length > 0 && active_discount_amounts && active_discount_amounts != 0" style="font-size: 26rpx;">
								优惠减：<text class="icon">￥</text>{{active_discount_amounts}}元
							</view>
						</view>
						
						<view class="btn" @click="toOrder" :class="checked.length === 0 ? 'disabled' : ''">
							结算<text v-if="checked.length > 0">({{checked.length}})</text>
						</view>
						<!-- <button v-else class="btn" :style="checked.length === 0 ? 'background: #eb837b' : ''" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber($event)">
							结算<text v-if="checked.length > 0">({{checked.length}})</text>
						</button> -->
					</view>
				</view>
			</template>
		
			<view v-else style="height: 100%; overflow: hidden;">
				<scroll-view :scroll-y="true" style="height: 100%;" @scrolltolower="scorllBottom">
					<view class="cartBox">
						<view class="cart_item" v-for="item in oftenList" :key="item.id">
							<image :src="item.goods.face_img + '?x-oss-process=image/format,webp'" :webp="true" @click="hanlejump(item)" mode="aspectFill"></image>
							<view class="cart_info" @click="hanlejump(item)" style="display: flex;">
								<view>
									<view class="name">
										<view class="kuajing" v-if="item.goods.is_cross_border === 1">跨境包税</view>
										<view class="kuajing" v-else-if="item.goods.overseas_direct_mail === 1">海外直邮</view>{{item.goods.title}}
									</view>
									<view class="sku" v-if="item.shop_sku_id && item.sku" style="display: inline-block;">
										<view class="text">
											<text>{{item.sku.v1}}</text>
											<text v-if="item.sku.v2">-{{item.sku.v2}}</text>
											<text v-if="item.sku.v3">-{{item.sku.v3}}</text>
											<text v-if="item.sku.v4">-{{item.sku.v4}}</text>
										</view>
									</view>
								</view>
								
								<view class="price flex1">
									<view class="price-left">
										<text class="icon">￥</text>
										<text class="text" v-if="is_vip && vip_on === 1 && item.goods.vip_price > 0">{{item.goods.vip_price}}</text>
										<text class="text" v-else>{{item.goods.price}}</text>
									</view>
									<view class="once flex" @click.stop="againBuy(item)" v-if="item.stock_type">再来一单</view>
									<template v-else>
										<view class="once flex hui man" @click.stop="arrivalNotice(item)" v-if="item.isSubscribed">取消提醒</view>
										<view class="once flex man" @click.stop="arrivalNotice(item)" v-else>到货提醒</view>
									</template>
									
								</view>
							</view>
						</view>
						<view v-if="!oftenList.length">
							<up-empty mode="list" icon="https://ct-upimg.yx090.com/g.ii090/images/sprite/empty/order.png" text="您还没有常买商品喔"></up-empty>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		
		
		<choose-sku
			:show-sku="showSku"
			:sku-info="skuInfo"
			:sku="sku"
			:show1="true"
			@close="showSku = false"
			:type="1"
			isTabbar
			:showDetail="false"
			@changeChoose="changeChoose"
			:groupId="groupId"
			:sourceId="source_id"
			:sourceType="source_type"
			:fenxiang="true" />
			
		<tabbar :chooseIndex="3" :num="num" :msgNum="msgNum" />
		
	</view>
</template>

<script>
	import { ref, reactive, toRefs, watch, nextTick } from 'vue'
	import chooseSku from '@/components/sku/ChooseSku.vue'
	import { get, post } from '@/api/request.js'
	import { showToast, goodsItem, getUserPhone, toMiniProgram } from '@/components/common.js'
	import tabbar from '@/components/tabbar/index.vue'
	import { Style } from '@/utils/list.js'
	import cfCloud from '@/components/cfCloud/index.vue'
	
	export default {
		components: {
			chooseSku,
			tabbar,
			cfCloud
		},
		setup() {
			const data = reactive({
				statusBarHeight: 40,
				cartList: [],
				price: 0,
				total_price: 0,
				shop_goods: [],
				loading: false,
				is_vip: uni.getStorageSync('is_vip'),
				vip_on: uni.getStorageSync('vip_on'),
				active_discount_amounts: '0.00',
				groupId: 0,
				is_authorized: uni.getStorageSync('is_authorized'),
				msgNum: 0,
				Color: uni.getStorageSync('theme_color'),
				priceColor: Style[uni.getStorageSync('theme_index') * 1].priceColor,
				bgColor: Style[uni.getStorageSync('theme_index') * 1].bgColor,
				source_id: 0,
				source_type: '',
				itemList: [
					{ id: 'cart', text: '购物车' },
					{ id: 'often', text: '我常买' }
				],
				tabType: 'cart',
				oftenList: [],
				page: 1,
				last_page: 0,
				remindTmplId: '',
				canClick: true
			})
			
			const hanlejump = (item) => {
				if (item.shop_group_goods_id) {
					uni.navigateTo({
						url: '/pages/groups/index?id=' + item.shop_group_goods_id
					})
				} else {
					uni.navigateTo({
						url: '/pages/productDetails/index?id=' + item.shop_goods_id
					})
				}
			}
			async function getList() {
				data.active_discount_amounts = ''
				await get('/api/v1/carts').then((res) => {
					data.loading = res.data.length ? true : false
					data.active_discount_amounts = res.active_discount_amount
					res.data.forEach((item) => {
						item.checked = checked.value.indexOf(item.id.toString()) == -1 ? false : true
						if (item.goods.status !== 1 || item.goods.sold_status == 2 || (item.goods.sku && item.goods.sku.stock <= 0) || (!item.goods.sku && item.goods.stock <= 0)) {
							item.disabled = true
						} else {
							item.disabled = false
						}
					})
					data.cartList = res.data
					getCardList()
				})
			}
			const checked = ref([])
			const checkAll = ref(false)
			// 单选
			function changeGroup(e) {}
			
			const chooseGood = (item) => {
				if (item.shop_group_goods && item.shop_group_goods.sold_status == 0) {
					showToast('该商品尚未开团')
					return
				}
				if(item.disabled) {
					return
				}
				let list = checked.value
				if (!item.disabled) {
					item.checked = item.checked ? false : true
					let index = checked.value.indexOf(item.id.toString())
					if (index === -1) {
						checked.value.push(item.id.toString())
					} else {
						checked.value.splice(index, 1)
					}
					// checked.value = list.map((i) => {
					// 	return i
					// })
					
					if (checked.value.length == data.cartList.length) {
						checkAll.value = true
					} else {
						checkAll.value = false
					}
					getCardList()
				}
			}

			// 全选
			function checkAllBtn(e) {
				checkAll.value = e
				if (e) {
					let list = []
					data.cartList.forEach((it) => {
						if (it.shop_group_goods && it.shop_group_goods.sold_status == 0) {
							showToast('列表中有未开团商品，无法全选')
							return
						}
						if (!it.disabled) {
							it.checked = true
							list.push(it.id.toString())
						}
					})
					checked.value = list.map((it) => {
						return it
					})
				} else {
					data.cartList.forEach((it) => {
						it.checked = false
					})
					checked.value = []
				}
				getCardList()
			}
			
			const getCardList = () => {
				const parmas = {
					cart_ids: JSON.stringify(checked.value)
				}
				data.active_discount_amounts = ''
				get('/api/v1/carts', parmas).then(res => {
					if (checked.value.length > 0) {
						data.total_price = res.total_price
					} else {
						data.total_price = 0
					}
					data.active_discount_amounts = res.active_discount_amount
				})
			}

			// 计算价格
			let price = 0
			let goods = []
			watch(
				[checked, () => data.cartList],
				([newValue, newList]) => {
					price = 0
					goods = []
					newValue.forEach((i) => {
						newList.forEach((item) => {
							if (i == item.id) {
								let number = item.num
								if(item.goods.limit_type == 0 && item.goods.stock < item.num) {
									number = item.goods.stock
								} else if(item.goods.limit_type == 1) {
									if(item.num < item.goods.start_sale_num) {
										number = item.goods.start_sale_num
									}
									if(item.num > item.goods.stock) {
										number = item.goods.stock
									}
								} else if(item.goods.limit_type == 2) {
									if(item.num > item.goods.limit) {
										number = item.goods.limit
									}
									if(item.num > item.goods.stock) {
										number = item.goods.stock
									}
								}
								goods.push({
									shop_goods_id: item.shop_goods_id,
									shop_goods_sku_id: item.shop_goods_sku_id,
									num: number,
									shop_group_goods_id: item.shop_group_goods_id,
									source_id: item.source_id || 0,
									source_type: item.source_type || 'normal',
								})
								let p =
									data.is_vip && data.vip_on === 1 && item.goods.vip_price > 0 ?
									item.goods.vip_price :
									item.goods.price
								price += p * 100 * item.num
							}
						})
					})
					data.price = (price / 100).toFixed(2)
					data.shop_goods = goods
				}, {
					deep: true
				}
			)


			// 结算
			async function toOrder() {
				if (checked.value.length > 0) {
					toPay()
				}
			}

			const toPay = () => {
				uni.setStorageSync('shopGoods', data.shop_goods)
				uni.navigateTo({
					url: '/pages/pay/index?type=1'
				})
			}

			const { toGoods, showSku, getGoodsSku, skuInfo, sku, getNum, num, skuId } = goodsItem()
			// 修改数量
			async function changeNum(e, item) {
				item.num = e.detail
				await updataItem(item)
				await getNum()
			}
			
			const plusBtn = (event, limit_type, num, limit, stock) => {
				if(event.detail == 'plus') {
					// 点击了不可用的 + 按钮（两种情况：1.超过库存 2.商品限购）
					if(num == stock) {
						showToast('已达到商品库存量')
					} else if(limit_type == 2 && num == limit) {
						showToast('每人限购' + limit + '件')
					}
				} else {
					// 点击了不可用的 - 按钮（两种情况：1.不能低于1件 2.不能低于起购件数）
					if(limit_type == 1) {
						showToast('该商品不能低于起购数量')
					} else {
						// showToast('该商品不能低于1件')
					}
				}
			}
			
			// 修改规格
			async function changeChoose(item) {
				await updataItem(item)
				getNum()
			}
			
			// 更新数据
			async function updataItem(item) {
				let shop_goods_sku_id = item.shop_goods_sku_id || skuId.value
				if(item.shop_goods_sku_id === 0) {
					shop_goods_sku_id = 0
				}
				let res = await post('/api/v1/carts/' + item.id, {
					shop_goods_id: item.shop_goods_id,
					shop_goods_sku_id: shop_goods_sku_id,
					num: item.num,
					shop_group_goods_id: item.shop_group_goods_id,
					source_id: item.source_id || 0,
					source_type: item.source_type || 'normal'
				}, 'PUT')
				await getList()
				// await getCardList()
			}
			
			// 删除
			function delItem(id) {
				post('/api/v1/carts/' + id, {}, 'DELETE').then((res) => {
					checked.value.forEach((res, index) => {
						if (res == id) {
							checked.value.splice(index, 1)
						}
					})
					showToast('删除成功', 'success')
					setTimeout(async () => {
						getList()
					}, 500)
					getNum()
				})
			}
			
			function getShopGoodsSku(item) {
				data.groupId = item.shop_group_goods_id
				data.source_id = item.source_id || 0
				data.source_type = item.source_type || 'normal'
				getGoodsSku(item)
			}
			
			// 授权手机号码
			async function getPhoneNumber(e) {
				console.log(e)
				if(e.detail.errMsg == 'getPhoneNumber:ok') {
					await getUserPhone(e.detail).then((res) => {
						data.is_authorized = 1
					})
				}	
			}
			
			const changeTop = (id) => {
				if(id !== data.tabType) {
					data.tabType = id
					if(data.tabType == 'often') {
						data.page = 1
						getOftenList(0)
					}
				}
			}
			
			function getOftenList(val = 0) {
				get('/api/v1/regularBuys', {page: data.page, pageSize: 30}).then((res) => {
					data.oftenList = val == 0 ? res.data : data.oftenList.concat(res.data)
					data.last_page = res.last_page
				})
			}
			
			function scorllBottom() {
				if (data.page < data.lastPage) {
					data.page ++
					getOftenList(1)
				}
			}
			
			async function arrivalNotice(row) {
				if(row.isSubscribed) {
					post(`/api/v1/goods/remind/cancel/${row.shop_group_goods_id}`, {type: 1}).then((res) => {
						row.isSubscribed = 0
						showToast('已取消到货提醒')
					})
				} else {
					toMiniProgram('pages/cart/index')
				}
			}
			
			function getRemindTempId() {
				get(`/api/v1/shop/template`, { type: 22 }).then((req) => {
					data.remindTmplId = req.data.template_id
				})
			}
			
			function againBuy(row) {
				let goods = [{
					shop_goods_id: row.shop_goods_id,
					shop_goods_sku_id: row.shop_sku_id,
					num: row.number,
					shop_group_goods_id: row.shop_group_goods_id,
					source_id: 0,
					source_type: 'normal'
				}]
				post(`/api/v1/carts/batch`, { goods: goods }).then((res) => {
					data.checked = []
					data.checkAll = false
					getList()
					data.tabType = 'cart'
				})
			}

			return {
				toMiniProgram,
				...toRefs(data),
				plusBtn,
				getList,
				toOrder,
				changeNum,
				updataItem,
				changeChoose,
				delItem,
				getNum,
				num,
				checked,
				checkAll,
				checkAllBtn,
				changeGroup,
				chooseGood,
				toGoods,
				showSku,
				getGoodsSku,
				getShopGoodsSku,
				skuInfo,
				sku,
				getCardList,
				hanlejump,
				getPhoneNumber,
				changeTop,
				getOftenList,
				scorllBottom,
				getRemindTempId,
				arrivalNotice,
				againBuy
			}
		},
		onLoad() {
			uni.getSystemInfo({
				success: (res) => {
					this.statusBarHeight = res.statusBarHeight
				}
			})
			// this.getRemindTempId()
		},
		async onShow() {
			await this.getList()
			this.getNum()
			this.msgNum = uni.getStorageSync('msgNum') || 0
		},
		onHide() {
			// this.cartList = []
			this.checked = []
			this.checkAll = false
		}
	}
</script>

<style lang="scss" scoped>
	.flex{
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.flex1{
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.whole{
		position: relative;
		height: calc(100vh - 110rpx - env(safe-area-inset-bottom));
		overflow: hidden;
		.topHead{
			width: 100%;
			z-index: 10;
			background: #fff;
			height: 40px;
			.box{
				width: 100%;
				height: 100%;
				display: flex;
				align-items: center;
			}
			.item {
				font-size: 32rpx;
				color: #111;
				position: relative;
				margin-right: 40rpx;
				&.active{
					font-weight: 600;
					font-size: 38rpx;
					color: v-bind('Color');
					&::before{
						position: absolute;
						width: 40px;
						height: 5px;
						content: '';
						background: linear-gradient(to right , v-bind('bgColor'), v-bind('Color'));
						left: 50%;
						margin-left: -20px;
						bottom: -6px;
					}
				}
			}
		}
		.listBox{
			position: relative;
		}
		.cartBox{
			padding: 24rpx 24rpx 2rpx;
			box-sizing: border-box;
			.cart_item{
				display: flex;
				background-color: #fff;
				border-radius: 10rpx;
				padding: 25rpx 20rpx;
				margin-bottom: 24rpx;
				image{
					width: 170rpx;
					height: 170rpx;
					background: #cbcacb;
					border-radius: 10rpx;
					margin-right: 20rpx;
				}
				.cart_info{
					flex-direction: column;
					justify-content: space-between;
					flex: 1;
					overflow: hidden;
					.disabled{
						color: #bbbbbb;
					}
					.name{
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						overflow: hidden;
						font-size: 28rpx;
						line-height: 36rpx;
						margin-bottom: 6rpx;
					}
					.box_number{
						background: rgba(255, 255, 255, 0.39);
						border: 1px solid #656565;
						color: #656565;
						font-size: 25rpx;
						border-radius: 10rpx;
						display: inline-block;
						margin: 10rpx 0;
						padding: 2rpx 10rpx;
					}
					.sku{
						display: inline-block;
						font-size: 24rpx;
						color: #999999;
						background: #f7f8fa;
						border-radius: 5rpx;
						padding: 4rpx 14rpx;
						max-width: 80%;
						display: flex;
						white-space: nowrap;
						.text{
							margin-right: 6rpx;
							text-overflow: ellipsis;
							white-space: nowrap;
							overflow: hidden;
						}
					}
					.price{
						color: #333;
						margin-bottom: 10rpx;
						&-left{
							.text{
								font-size: 34rpx;
							}
						}
					}
					.again{
						align-items: center;
						font-size: 26rpx;
						.btn{
							font-size: 22rpx;
							color: v-bind('Color');
							border: 2rpx solid v-bind('Color');
							border-radius: 22rpx;
							padding: 2rpx 16rpx;
						}
					}
					.once{
						width: 147rpx;
						height: 50rpx;
						border-radius: 30rpx;
						font-size: 24rpx;
						color: v-bind('Color');
						border: 2rpx solid v-bind('Color');
						&.man{
							color: #fff;
							background-color: v-bind('Color');
						}
						&.hui{
							opacity: 0.6;
						}
					}
				}
			}
			.del{
				font-size: 26rpx;
				color: #fff;
				background-color: #F14939;
				width: 100rpx;
				height: 100%;
				border-radius: 0rpx 10rpx 10rpx 0rpx;
			}
		}

		.cart-none{
			height: 100%;
			background-color: #fff;
			display: flex;
			flex-direction: column;
			padding-top: 40%;
			align-items: center;
			font-size: 28rpx;
			box-sizing: border-box;
			image{
				width: 300rpx;
				margin-bottom: 20rpx;
			}
			text{
				line-height: 46rpx;
			}
			.text{
				color: #999999;
				font-size: 24rpx;
			}
		}
		.cart-bottom{
			position: absolute;
			bottom: 0;
			width: 100%;
			box-sizing: border-box;
			background-color: #fff;
			height: 100rpx;
			padding: 0 30rpx;
			.cart-bottom-info{
				font-size: 30rpx;
				color: v-bind('priceColor');
				width: calc(100% - 150rpx);
				.price{
					font-size: 30rpx;
					margin-right: 30rpx;
				}
				.btn{
					color: #ffffff;
					background: v-bind('Color');
					border-radius: 34rpx;
					padding: 10rpx 30rpx;
					line-height: inherit;
					font-size: inherit;
					&.disabled{
						opacity: 0.65;
					}
				}
			}
		}
		.icon{
			font-size: 24rpx;
		}
	}
</style>

<style scoped>
	.cart_item /deep/.u-checkbox{
		pointer-events: none;
	}
</style>
