<template>
	<view>
		<uni-nav-bar :statusBar="true" left-icon="left" title=" Cart" color="#000000" :fixed="true" @clickLeft="back">
			<block slot="right">
				<view class="nav_right">
					<image src="../../static/img/delete1.png" mode="" @click="deleteCart"></image>
				</view>
			</block>
		</uni-nav-bar>
		<view class="empty" v-if="inlist.length==0">
			<image src="/static/img/cart3.png" mode=""></image>
			<text>Your cart is empty</text>
			<navigator url="/pages/category/index" open-type="switchTab">
				<button>Shop Now</button>
			</navigator>

		</view>
		<template v-else>
			<view class="cart_info">
				<image src="/static/img/Shipped.png" mode=""></image>
				<view class="cart_title_content">Buy US$32.00 more to enjoy FREE STANDARD SHIPPING!</view>
				<view class="cart_title_right" @click="gotAdd()">Add</view>
			</view>
			<view class="cart">
				<view class="cart_content">
					<view class="good_info" v-for="(gitem,index) in  inlist" :key="gitem.rec_id">
						<image src="../../static/img/select1.png" mode="" class="cart_select" v-show="gitem.is_check==1"
							@click="cartCheck(1,0,gitem.rec_id,gitem)"></image>
						<image src="../../static/img/select2.png" mode="" class="cart_select" v-show="gitem.is_check==0"
							@click="cartCheck(1,1,gitem.rec_id,gitem)"></image>
						<view class="good_info_left ">
							<view class="good_info_image" @click="goDetails(gitem.goods_id)">
								<image :src="gitem.goods_thumb" mode=""></image>
							</view>
							<view class="left_info">
								<view class="info_name">{{gitem.goods_name}}</view>
								<view class="left_info_bottom" v-if="gitem.goods_attr">
									<view class="info_lable">
										<text>{{gitem.goods_attr}}</text>       
									</view>
									<view class="image-v"><image src="/static/img/bottom.png" mode="" @click="ChangeAttr(gitem)"></image></view>
								</view>
								<view class="left_info_bottom2" v-if="!gitem.goods_attr"></view>
								<view class="info_price">
									<text>US${{gitem.goods_price}}</text>
									<uni-number-box background="#FFFFFF" :min="1" :value="gitem.goods_number"
										@change="updateCart($event,gitem.rec_id)"></uni-number-box>

								</view>
							</view>
						</view>
					</view>

				</view>
			</view>

			<!-- <view class="cart">
				<view class="cart_content">
					<view class="good_info" v-for="(item,index) in 3 " :key="index">
						<image src="../../static/img/select.png" mode="" class="cart_select"></image>
						<view class="good_info_left ">
							<view class="good_info_image">
								<view class="good_info_image_tips">sold out</view>
							</view>
							
							<view class="left_info left_info1">
								<view class="info_name">Adidas Yeezy Boost 350 V2  DazzlingBlue Black GY7164 Men's</view>
								<view class="left_info_bottom">
									<view class="info_lable">
										<text>Multicolor;41</text>
										<image src="/static/img/bottom.png" mode=""></image>
									</view>
									<text>x1</text>
								</view>
								<view class="info_price">
									<text>US$314.00</text>
									<image src="../../static/img/delete2.png" mode="" class="delete"></image>
								</view>
							</view>
						</view>
					</view>
						
				</view>
			</view> -->
			<!-- //失效商品 -->
			<view v-if="outlist.length>0">
				<view class="flex outdate">
					<text>Out of stock</text>
					<text @click="deleteoOutCart(0)">Delete them all</text>
				</view>
				<view class="cart">
					<view class="cart_content">
						<view class="good_info" v-for="(item,index) in outlist" :key="item.rec_id">
							<!-- <image src="../../static/img/select1.png" mode="" class="cart_select"
								v-show="item.is_check==1" @click="cartCheck(0,0,item.rec_id,item)"></image> -->
							<image src="../../static/img/select2.png" mode="" class="cart_select"></image>
							<view class="good_info_left ">
								<view class="good_info_image"
									:style="{background: 'url(' + item.goods_thumb + ') ', backgroundSize: '100%'}">

									<!-- <image :src="item.goods_thumb" mode=""></image> -->
									<view class="delete_tu">sold out</view>
								</view>

								<view class="left_info ">
									<view class="info_name outcat">{{item.goods_name}}</view>
									<view class="left_info_bottom outcat"v-show="item.goods_attr">
										<view class="info_lable">
											<text>{{item.goods_attr}}</text>
											<image src="/static/img/bottom.png" mode=""></image>
										</view>
									</view>
									<!-- <view class="left_info_bottom2" v-if="!item.goods_attr"></view> -->
									<view class="info_price">
										<text class="outcat">US${{item.goods_price}}</text>
										<view class="imgsize">
											<image src="../../static/img/delete1.png" mode=""
												style="height:100%;width:100%" @click="deleteoOutCart(1,item)"></image>
										</view>

									</view>
								</view>
							</view>
						</view>

					</view>
				</view>
			</view>
		</template>


		<view class="recommend">
			<view class="recommend_title">RECOMMEND</view>
			<view class="recommend_content">
				<view class="recommend_content_item" v-for="(item,index) in catList " :key="index"
					@click="goDetails(item.id)">
					<view class="recommend_content_item_image">
						<image :src="item.thumb" mode=""></image>
					</view>
					<!-- <view class="recommend_content_item_image_name">{{item.short_name}}</view> -->
					<view class="recommend_content_item_pric">
						US${{item.is_promote==0? item.shop_price :item.promote_price}}</view>
				</view>
			</view>
		</view>

		<view class="footer">
			<view class="footer_left">
				<image src="../../static/img/select1.png" mode="" v-if="all_allno==1 && inlist.length>0"
					@click="cartCheck(0,0)"></image>
				<image src="../../static/img/select2.png" mode="" v-else @click="cartCheck(0,1)"></image>
				<text>All</text>
			</view>
			<view class="footer_right">
				<text>US${{total.goods_price}}</text>
				<button @click="cartCheckOut">CHECKOUT({{total.goods_count}})</button>
			</view>
		</view>
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog type="error" cancelText="Close" confirmText="Delete" title="Tips"
				content="Whether to delete goods?" @confirm="dialogConfirm"></uni-popup-dialog>
		</uni-popup>

		<!-- 规格弹出层 -->
		<view class="mask" @click="isCahnge=false" v-show="isCahnge"></view>
		<view v-show="isCahnge" class="addCard">
			<image src="/static/img/close1.png" mode="" class="addCard_close" @click="isCahnge=false"></image>
			<!-- <view class="change_img"><image :src="Attr_img" mode=""></image></view> -->
			<scroll-view class="spike1" scroll-x="true" >
				<image :src="item.img_url" mode="" class="addCard_scroll" v-for="(item,index) in gallery_list" ></image>
			</scroll-view>
			<scroll-view class="addCard_body" scroll-y="true">
				<view >{{ goodsDate.goods_name}}</view>
				<view class="addCard_price">US${{goodsDate.is_promote==0? goodsDate.shop_price :goodsDate.promote_price}}</view>
				<view  v-for="(item,index) in goods_attr_list" :key="item.attr_id">
					<view >{{item.name}}</view>
					<view class="color_select variations_select_size">
						<view class="color_select_item" v-for="(item1,index1) in item.list"  :key="item1.attr_value"
						:class="str_select[index].goods_attr_id==item1.goods_attr_id?'active_color':''" @click="selectAttr(item.attr_id,item1.goods_attr_id,index1)">
						<view class="color_select_item_zoom" v-if="item1.attr_img!=''">
							<image src="/static/icon/big2.png" mode=""></image>
						</view>
						<image :src="item1.attr_img"  mode="" v-if="item1.attr_img!=''"></image>
						<view class="color_select_item_bottom" v-if="item1.attr_img!=''">【{{ item1.attr_value}}】</view>
						<view  class="color_select_item_bottom" v-if="!item1.attr_img">{{ item1.attr_value}}</view>
						</view>
					
					</view>
				</view>	
			</scroll-view>
			<view class="quantity">
				<text>Quantity</text>
				<uni-number-box background="#fff" v-model="num" :min="1"></uni-number-box>
			</view>
			<button @click ="AddtoCart">ADD TO CART</button>
		</view>


	</view>
</template>

<script>
	import {
		defaultRequest,
		defaultRequest2,
		defaultRequest4
	} from '../../api/index.js'
	export default {
		data() {
			return {
				isEmpty: false,
				isCahnge: false,
				backButtonPress: 0,
				// 购物车数据
				total: {
					goods_price: 0,
					goods_count: 0
				},
				// 商品数据
				goods_list: [],
				// 全选标识。1-全部选中，2-全部未选，3-部分选中。
				all_allno: 2,
				deleteQuery: {
					_action: 'removecart'
				},
				// 获取该分类的其他商品的请求参数
				catQuery: {
					_action: 'getgoods',
					page_index: 1,
					page_size: 30,
					type: 'new'
				},
				addQuery:{
					_action:'addtocart',
					goods_id:'',
					goods_parent_id:'',
					goods_number:'',
					goods_attr_id:'',
					goods_is_package:0
				},
				catList: [],
				isReachBottom: true,
				outlist: [],
				inlist: [],
				goodsDate: {
					comment_summary: [{
						comment_summary: '',
						commentlabel: ""
					}],
					gallery_list: [{
						content: ''
					}],

				},
				gallery_list: [],
				goods_attr_list: [],
				Attr_img:'',
				gotoPay:0,
				num:1.,
				str_select:[]
			}
		},
		onBackPress(options) {
			this.backButtonPress++;
			if (this.backButtonPress > 1) {
				plus.runtime.quit();
			} else {
				plus.nativeUI.toast('Click again to exit');
			}
			setTimeout(function() {
				this.backButtonPress = 0;
			}, 1000);
			return true;
		},

		methods: {
			goDetails(id) {
				uni.navigateTo({
					url: '/pages/productDetails/index?goodid=' + id
				})
			},
			// 获取的其他商品
			getCatList(type) {
				defaultRequest4(this.catQuery).then(res => {
					console.info(res)
					if (res.error == 0) {
						if (res.data) {
							if (type == 0) {
								this.catList = res.data
							} else {
								this.catList = this.catList.concat(res.data)
							}
						} else {
							this.isReachBottom = false
							uni.showToast({
								title: 'No more data yet',
								icon: 'none'
							})
							this.catQuery.page_index--
						}
					}
					uni.hideNavigationBarLoading();
				})
			},
			//获取地址
			getAddress(){
				let data ={
					_action:'getdefaultconsignee'
				}
				defaultRequest(data).then(res => {
					if(res.error == 0){
						if(res.data.address_id!=' '){
							this.gotoPay = 1
						}
					}
					
				})
			},
			// 修改商品数量
			updateCart(e, id) {
				let data = {
					_action: 'updatecart',
					rec_id: id,
					goods_number: e
				}
				defaultRequest4(data).then(res => {
					console.info(res)
					if (res.error == 0) {
						this.getList()
					}
				})
			},
			// 提交订单
			cartCheckOut() {
				if (this.inlist.length == 0) return
				if (this.all_allno == 2) {
					uni.showToast({
						icon: 'none',
						title: 'Please select the product'
					})
					return
				}
				let data = {
					_action: 'cartcheckout',
					is_new: 1,
					direct_shopping: 0,
					consignee:''
				}
				uni.navigateTo({
					url: '../order/confirmation?query=' + JSON.stringify(data)
				})

			},
			// 删除商品
			deleteCart() {
				console.log(this.inlist, '/////')
				if (this.inlist.length == 0) return
				//未选
				this.deleteQuery.rec_id = ''
				if (this.all_allno == 2) {
					uni.showToast({
						icon: 'none',
						title: 'Please select the product to delete'
					})
					return
				}
				//有选中的数量
				else if (this.all_allno == 3) {
					let selectNum = 0,
						rec_id = ''
					let total = 0

					this.inlist.map(item => {
						if (item.is_check == 1) {
							rec_id = item.rec_id
							selectNum++

						}

					})
					//单选大于1
					if (selectNum > 1) {
						uni.showToast({
							icon: 'none',
							title: 'Only one or all items can be deleted'
						})
						return
					} else if (selectNum == 1) {

						this.deleteQuery.rec_id = rec_id
					}

				} else {
					this.deleteQuery._action = 'removecart'
				}

				this.$refs.alertDialog.open()

			},
			dialogConfirm() {
				var that = this

				defaultRequest(this.deleteQuery).then(res => {

					if (res.error == 0) {
						if (!this.deleteQuery.rec_id) {
							this.inlist = []
							this.outlist = []
							this.goods_list = []
							this.total = 0

						} else {

							this.getList()
						}
						setTimeout(() => {
							uni.showToast({
								icon: 'none',
								title: 'Successfully deleted!'
							})
						}, 500)
					}




				})
			},
			// 购物车-商品勾选-单个记录 type: 1为单选 、0为全选
			cartCheck(type, e, id, item) {
				if (this.inlist.length == 0) return;
				let data = {}
				if (type == 1) {
					data = {
						_action: 'cartcheck',
						rec_id: id,
						is_check: e
					}
				} else if (type == 0) {
					data = {
						_action: 'cartcheckall',
						is_check: e
					}

				}
				defaultRequest4(data).then(res => {
					if (res.error == 0) {
						this.getList()
					}
				})
			},
			//检测商品是否过期
			async test(list) {
				let goods = []
				let outlist = []
				let inlist = []
				let ids = []

				for (let i of list) {
					ids.push(i.goods_id)
				}
				let res = await Promise.all(ids.map(async (item) => {
					// 等待异步操作完成，返回执行结果 
					return await defaultRequest({
						_action: 'getgoodsdetail',
						goods_id: item
					})
				}));

				res.map(item => {
					goods.push(item.data)
				})
				goods.map(item => {
					for (let i of list) {
						if (i.goods_id == item.goods_id && item.is_on_sale == 0) {
							if (!outlist.includes(i)) {
								outlist.push(i)
								this.outlist = outlist
							}
						} else if (i.goods_id == item.goods_id && item.is_on_sale != 0) {
							if (!inlist.includes(i)) {
								inlist.push(i)
								this.inlist = inlist


							}
						}
					}

				})


			},
			getList() {
				let data = {
					_action: 'getcartgoods'
				}

				defaultRequest(data).then(res => {
					console.info(res)

					if (res.error == 0) {
						this.total = res.data.total
						this.all_allno = res.data.all_allno

						if (res.data.goods_list) {
							res.data.goods_list.map(item => {
								item.goods_attr = item.goods_attr.replace(/\s\n/g, ';');
							})
							this.goods_list = res.data.goods_list
						}
						let goodlist = this.goods_list
						this.test(goodlist)
					}
				})




			},
			back() {
				uni.switchTab({
					url: '/pages/index/index'
				});
			},
			//删除购物车失效的商品
			async deleteoOutCart(e, item) {
				let rec_ids = []
				if (e == 1) {
					let data = {
						_action: 'removecart',
						rec_id: item.rec_id
					}
					defaultRequest2(data).then(res => {
						if (res.error == 0) {
							this.getList()
							uni.startPullDownRefresh()
							uni.showToast({
								icon: 'none',
								title: 'ok!'
							})


						}
					})
				} else {
					// console.log(this.outlist,'删除完了')
					this.outlist.map(item => {
						rec_ids.push(item.rec_id)
					})
					rec_ids.map(item => {
						console.log(item)
					})
					let res = await Promise.all(rec_ids.map(async (item) => {
						// 等待异步操作完成，返回执行结果 
						return await defaultRequest2({
							_action: 'removecart',
							rec_id: item
						})
					}));
					console.log(res)
					if (res[0].error == 0) {
						uni.showToast({
							icon: 'none',
							title: 'ok!'
						})
						this.outlist = []

					}


				}

			},
			gotAdd() {
				let data = {
					_action: 'getpagedata',
					pagecode: 'CART'
				}
				defaultRequest(data).then(res => {
					if (res.error == 0) {
						let list = res.data.zones
						let url = ''
						list.map(item => {
							if (item.zone_name == 'Add Items') {
								let listdata = item.blocks
								url = listdata[0].block_link

							}
						})

						const i = url.indexOf('?')
						const src = url.substring(i)

						if (url.includes('goodslist')) {
							uni.navigateTo({
								url: '../category/productList' + src
							})
						}
					}
				})

			},

			// 更改购物车规格
			ChangeAttr(item) {
				console.log(item)
				this.deleteQuery.rec_id = item.rec_id
				this.addQuery ={
					_action:'addtocart',
					goods_id:item.goods_id,
					goods_parent_id:item.goods_parent_id,
					goods_number:'',
					goods_attr_id:'',
					goods_is_package:0
				}
				this.goods_attr_list = []
				this.str_select =[]
				this.Attr_img = item.goods_thumb
				this.num  = item.goods_number
				let str_select = item.goods_attr_id.split(',')
				console.log(str_select)
				str_select.map(item =>{
					this.str_select.push({
						goods_attr_id:item
					})
				})
				 console.log(this.str_select)
				this.isCahnge = true
				let data = {
					_action: 'getgoodsdetail',
					goods_id: item.goods_id
				}
				
				defaultRequest(data).then( res =>{
					if(res.error==0){
						this.goodsDate = res.data
						this.gallery_list = res.data.gallery_list
						if(this.goodsDate.attr_list){
							this.goodsDate.attr_list.map(item=>{
								if(item.attr_name=="Color"){
									this.colorNum=item.goods_attrs.length
								}
								let data={name:item.attr_name,goods_attr_id:'',attr_id:item.attr_id,list:item.goods_attrs}
								this.goods_attr_list.push(data)
								
							})
						}else if (this.goodsDate.attr_list==undefined){
							 this.goods_attr_list =[] //无规格
							this.Is_attr = 0
							console.log(this.goods_attr_list)
						}
					}
				})
			},
			// 选择规格
		selectAttr(attr_id,goods_attr_id,index){
			this.current = index
			let data={attr_id:attr_id,goods_attr_id:goods_attr_id}
			if(this.goods_attr_list.length==0){
				this.goods_attr_list.push(data)
			}else{
				// 判断是否有新的规格加入
				let isNew=false
				for(let i in this.goods_attr_list){
					let item=this.goods_attr_list[i]
					if(item.attr_id==attr_id){
						if(item.goods_attr_id==goods_attr_id){
							this.str_select[i].goods_attr_id=''
						}else{
							this.str_select[i].goods_attr_id=goods_attr_id
							console.log(this.str_select)
							
						}
						isNew=false
						break
					}else{
						isNew=true
					}
				}
				if(isNew){
					this.goods_attr_list.splice(index,0,data)
				}
			}
		},
		//1选择规格确定后 2先删除原来商品 3再加入购物车
		AddtoCart(){
			console.log(this.deleteQuery)
			console.log(this.addQuery)
			this.addQuery.goods_attr_id =''
			this.addQuery.goods_number = this.num
			console.log(this.str_select)
			this.str_select.map(item=>{
			if(item.goods_attr_id!=''){
				this.addQuery.goods_attr_id+=item.goods_attr_id+','
			}	
					})
			console.log(this.addQuery)
			let tag = 0 
			defaultRequest(this.deleteQuery).then(res =>{
				console.log(res)
				if(res.error==0){
					tag = 1
					// setTimeout(() =>{
						defaultRequest(this.addQuery).then(res =>{
							if(res.error ==0){
								this.getList()
								this.isCahnge = false
							}
						})
					// },3000)
				}
			})
			// if(tag ==1){
			// 	defaultRequest(this.addQuery).then(res =>{
			// 		if(res.error ==0){
			// 			this.getList()
			// 		}
			// 	})
			// }
		}

		},
		onLoad() {
			uni.startPullDownRefresh()
			uni.hideTabBar()
			this.getList()
			this.getCatList(0)
            this.getAddress()


		},
		onShow() {
			this.getList()

		},
		onPullDownRefresh() {
			this.getList()
			this.getCatList(0)

			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 2000);
		},

		onHide() {
			uni.showTabBar()
		},
		// 上拉加载
		onReachBottom() {
			if (!this.isReachBottom) return
			this.catQuery.page_index++
			this.getCatList(1)
		},
		onPullDownRefresh() {
			uni.stopPullDownRefresh()
		}

	}
</script>
<style>
	page {
		background-color: #F6F5FA;
		padding-bottom: 150rpx;
	}
</style>
<style lang="scss" scoped>
	.uni-navbar {
		font-size: 32rpx;
		font-weight: bold;
	}

	.uni-numbox {
		border: 1px solid #999999;
		border-radius: 14rpx;
		height: 42.67rpx;

		/deep/ .uni-numbox__minus {
			border-radius: 14rpx;
		}

		/deep/.uni-numbox__plus {
			border-radius: 14rpx;
		}

		/deep/.uni-numbox__value {
			border-left: 1px solid #999999;
			border-right: 1px solid #999999;
			height: 100%;
			width: 63.33rpx;
			font-size: 21.33rpx;
		}
	}

	.nav_right {
		image {
			width: 36rpx;
			height: 36rpx;
		}
	}

	.empty {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding-top: 136rpx;
		font-size: 30.67rpx;
		font-weight: 400;

		image {
			width: 125.33rpx;
			height: 125.33rpx;
			margin-bottom: 49.33rpx;
		}

		button {
			font-size: 29.33rpx;
			font-weight: 500;
			background-color: black;
			color: white;
			height: 45.67rpx;
			line-height: 45.67rpx;
			border-radius: 0;
			margin-top: 33.33rpx;
		}
	}

	.recommend {
		margin-top: 124rpx;
	}

	.cart_info {
		background-color: white;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 36.67rpx 32rpx;
		font-size: 24rpx;
		font-weight: 400;

		image {
			width: 41.33rpx;
			height: 41.33rpx;
		}

		.cart_title_content {
			width: 510.67rpx;
		}

		.cart_title_right {
			font-size: 26rpx;
			font-weight: bold;
		}
	}

	.cart {
		background-color: white;
		margin: 0 18rpx;
		padding: 42rpx 12.67rpx;
		margin-top: 16.67rpx;

		.cart_title {
			padding-left: 12.67rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 28rpx;
			margin-bottom: 76rpx;
		}

		.cart_content {

			.good_info {
				display: flex;
				align-items: center;
				color: #000000;
				justify-content: space-between;
				border-bottom: none;
				padding: 0;
				margin-bottom: 78.67rpx;

				&:last-child {
					margin-bottom: 0;
				}

				.good_info_image {
					position: relative;

					image {
						width: 100%;
						height: 100%;
					}

					.good_info_image_tips {
						width: 117.33rpx;
						height: 117.33rpx;
						border-radius: 50%;
						background: rgba(0, 0, 0, 0.3);
						color: white;
						font-size: 22rpx;
						font-weight: 800;
						display: flex;
						align-items: center;
						justify-content: center;
						z-index: 99;
						position: absolute;
						top: 50%;
						margin-top: -60rpx;
						left: 50%;
						margin-left: -60rpx;
					}
				}
                   .left_info_bottom2{
					    width: 250rpx;
						margin-right: 10rpx;
						height: 30rpx;
						// padding: 0 3rpx  10rpx;
						padding: 5.37rpx;
						margin-top: 20rpx;
				   }
					.left_info_bottom {
						 color: #C4C4C4;
                         
						 width: 250rpx;
						 display: flex;
						 padding: 0 3rpx  10rpx;
						 border: 1px solid #C4C4C4;
						 border-radius:25rpx;
						 margin-right: 10rpx;
						 height: 30rpx;
						 align-items: center;
						 text-align: start;
						 line-height: 40rpx;
						 padding: 5.37rpx;
						 .image-v{
							 height: 20rpx;
							 width: 20rpx;
							 margin-right: 10rpx;
							 margin-bottom: 20rpx;
							 image{
								 height: 100%;
								 width: 100%;
							 }
						 }
						 
						.info_lable {
							width: 200rpx;
							height: 40rpx;
							// max-width: 200rpx;
							 // background-color: #B22234;
							
							overflow: hidden;
							border: none !important;
							
						}
					}

					.info_price {
						color: #000000;
				}
				

				.cart_select {
					width: 34.67rpx;
					height: 34.67rpx;
				}

				.info_name {
					width: 406.67rpx;
					text-overflow: -o-ellipsis-lastline;
					overflow: hidden; //溢出内容隐藏
					text-overflow: ellipsis; //文本溢出部分用省略号表示
					display: -webkit-box; //特别显示模式
					-webkit-line-clamp: 2; //行数
					line-clamp: 2;
					-webkit-box-orient: vertical;
				}

				.delete {
					width: 36rpx;
					height: 36rpx;
				}
			}


		}
	}

	.footer {
		padding: 42rpx 0;
		padding-left: 27.33rpx;
		padding-right: 19.33rpx;
		background-color: white;
		position: fixed;
		bottom: 0;
		width: 100%;
		box-sizing: border-box;
		border-top: 2px solid #F6F5FA;
		z-index: 100;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 36rpx;

		.footer_left {
			font-weight: 400;
			display: flex;
			align-items: center;

			image {
				width: 34.67rpx;
				height: 34.67rpx;
				margin-right: 10rpx;
			}
		}

		.footer_right {
			display: flex;
			align-items: center;
			font-weight: 600;

			button {
				height: 73.33rpx;
				line-height: 73.33rpx;
				background-color: #191919;
				margin: 0;
				font-size: 26.67rpx;
				font-weight: bold;
				color: white;
				margin-left: 23.33rpx;
				border-radius: 0;
			}
		}
	}

	.flex {
		display: flex;
	}

	.outdate {
		justify-content: space-between;
		margin: 30rpx 18rpx;
		font-weight: 400;

	}

	.imgsize {
		height: 40rpx;
		width: 40rpx;
	}

	.delete_tu {
		position: absolute;
		width: 100rpx;
		height: 100rpx;
		margin: 25rpx;
		padding: 25rpx;
		text-align: center;
		background-color: #eef;
		background-color: rgba(0, 0, 0, 0.2);
		color: #fff;
		font-size: 26rpx;
		line-height: 100rpx;
		border-radius: 50%;
		z-index: 99;
		font-weight: 700;

	}

	.outcat {
		filter: blur(2px);
	}
.addCard{
		z-index: 999;
		position: fixed;
		bottom: 0;
		left: 0;
		background-color: white;
		padding-left: 29.33rpx;
		padding-right: 29.33rpx;
		box-sizing: border-box;
		padding-top: 77.67rpx;
		width: 100%;
		font-size: 30.67rpx;
		font-weight: 400;
		padding-bottom: 44.67rpx;
		
		.addCard_close{
			width: 21.33rpx;
			height: 21.33rpx;
			position: absolute;
			right: 24.67rpx;
			top: 18.67rpx;
		}
		.spike1{
			margin-top: 0;
			margin-bottom: 34rpx;
			padding-bottom: 0;
			border-bottom: none;
			.addCard_scroll{
				width: 286.67rpx;
				height: 286.67rpx;
				margin-left: 10.67rpx;
				&:first-child{
					margin-left: 0;
				}
				&:last-child{
					margin-right: 15rpx;
				}
			}
		}
		.addCard_body{
			padding-right: 31.33rpx;
			max-height: 600rpx;
			min-height: 400rpx;
			.addCard_price{
				font-size: 44rpx;
				font-weight: 500;
				margin-top: 27.33rpx;
				margin-bottom: 51.33rpx;
			}
			.color_select{
				
				display: flex;
				font-size: 16.67rpx;
				color: #666666;
				flex-wrap: wrap;
				margin-bottom: 59.33rpx;
				.color_select_item{
					margin-top: 22rpx;
					position: relative;
					background-color: #F9F7FA;
					border-radius: 6.67rpx;
					margin-right: 12.67rpx;
					width: 134.67rpx;
					image{
						width: 134.67rpx;
						height: 133.33rpx;
						border-radius: 6.67rpx 6.67rpx 0 0; 
					}
					.color_select_item_zoom{
						width: 20.33rpx;
						height: 20.33rpx;
						// background-color: rgba(0, 0, 0, 0.3);
						display: flex;
						align-items: center;
						justify-content: center;
						position: absolute;
						right: 12.67rpx;
						top: 9.33rpx;
						z-index: 99;
						image{
							width: 100%;
							height: 100%;
						}
					}
					.color_select_item_bottom{
						padding: 10rpx 0rpx;
						font-size: 24rpx;
						text-align: center;
						
					}
				}
				.active_color{
					color: #B22234;
					background-color: white;
					border: 1px solid #000000;
				}
			}
			.variations_select_size{
				margin-left: 0;
				margin-top: 26.67rpx;
				margin-bottom: 40.67rpx;
				.select_size_item{
					margin-bottom: 16.67rpx !important; 
					&:nth-child(4n+4){
						margin-right: 0;
					}
				}
			}
			
		}
		
		.quantity{
			display: flex;
			align-items: center;
			background-color: white;
			justify-content: space-between;
			margin-bottom: 43.33rpx;
			.uni-numbox{
				border: 1px solid #999999;
				border-radius: 14rpx;
				height: 42.67rpx;
				
				
				/deep/ .uni-numbox__minus{
					border-radius: 14rpx;
				}
				/deep/.uni-numbox__plus{
					border-radius: 14rpx;
				}
				/deep/.uni-numbox__value{
					border-left: 1px solid #999999;
					border-right: 1px solid #999999;
					height: 100%;
					width: 63.33rpx;
					font-size: 21.33rpx;
				}
			}
		}
		button{
			width: 100%;
			height: 73.33rpx;
			line-height: 73.33rpx;
			background-color: #191919;
			color: white;
			font-weight: bold;
			font-size: 26.67rpx;
		}
	}
	
	.spike1{
		white-space: nowrap;
		width: 100%;
		margin-top: 36.67rpx;
		padding-bottom: 34rpx;
		border-bottom: 1px solid #E2E2E2;
		::-webkit-scrollbar {
			width: 0;
			height: 0;
			background-color: transparent;
		} 
		.spike1_item{
			width: 410rpx;
			background-color: #F6F6F6;
			padding: 21.33rpx 24.67rpx;
			margin-right: 19.33rpx;
			font-size: 20rpx;
			display: inline-block;
			color: #737373;
			&:last-child{
				margin-right: 0;
			}
			view{
				margin-bottom: 10rpx;
			}
			.spike1_item_title{
				font-weight: bold;
				
				.text_black{
					color: black;
					display: inline-block;
					margin-left: 10rpx;
				}
				.text_red{
					color: #B22234;
					display: inline-block;
					margin-left: 10rpx;
				}
			}
		}
		.spike1_item1{
				color: #191919;
				font-size: 29.33rpx;
				margin-right: 16.67rpx;
				width: 200rpx;
				display: inline-block;
				font-weight: bold;
				.spike1_item_img{
					width: 200rpx;
					height: 200rpx;
					
					background-color: #999999;
				}
				.spike1_item_bottom{
					padding-left: 9.33rpx;
					margin-top: 22.67rpx;
					
					.spike1_item_text{
						color: #9D9D9D;
						font-size: 21.33rpx;
						text-decoration: line-through;
					}
					.spike1_item_text1{
						color: #9D9D9D;
						font-size: 21.33rpx;
					}
				}
				.spike1_item_bottom1{
					padding-left: 9.33rpx;
					margin-top: 19.33rpx;
					font-weight: bold;
					
					.spike1_item_text{
						color: #000000;
						font-size: 16rpx;
						font-weight: 400;
						margin-bottom: 20.67rpx;
						white-space: break-spaces;
						
					}
				}
				
			}
			.spike1_item:last-child{
				margin-right: 0;
			}
	}
</style>
