<template>
	<view class="mainContainer">
		<!-- 商品 -->
		<view v-if="csListArrl.length > 0">
			<!-- 商品数量 -->
			<view class="allGoodsNum size26">
				共{{csListArrl.length}}件商品
			</view>
			<!-- 商品列表 -->
			<view v-if="csListArrl">
				<view class="order-itemHidden" v-for="(item, index) in csListArrl" :key="index">
					<view :data-index="index" class="order-item" @touchstart="drawStart" @touchmove="drawMove"
						@touchend="drawEnd" :style="'right:'+item.right+'px'" :data-cardid="item.id"
						:data-upstop="item.goods_spec_id.stock_num" :data-specid="item.goods_spec_id.goods_spec_id">
						<view class="contents flex alignC">
							<!-- 是否选中 -->
							<view class="selectItem" @click="itemActives(index)">
								<image v-if="item.isActive" src="../../static/order/changeAddress.png" mode="widthFix">
								</image>
								<image v-else src="../../static/order/changeAddressDefault.png" mode="widthFix"></image>
							</view>
							<!-- 商品图片 -->
							<view class="goodsImg">
								<image :src="item.goods_spec_id.spec_image" mode="widthFix"></image>
							</view>
							<!-- 商品详情 -->
							<view class="goodsDetail">
								<view class="goodsName">
									{{item.goods_id.name}}
								</view>
								<!-- 商品规格 -->
								<view class="goodsNorms" @click="norms(item)">
									<text v-for="(ite,inde) in item.goods_spec_id.goods_spec">
										{{ite.spec_value}}
									</text>
								</view>
								<view class="priceNum flex">
									<view class="goodsPrice">
										<text class="size24">¥</text>{{item.goods_spec_id.goods_price}}
									</view>
									<view class="goodsNum flex">
										<view class="numBtnRemove" @click="changeNum(item,0)"></view>
										<view class="numBtn numBtnIpt flex alignC size28">
											<input type="number" disabled="true" @click="monitorItem(index)"
												:value="item.num" @change="monitorNumLive" @input="monitorNum" />
										</view>
										<view class="numBtnRemove numBtnAdd" @click="changeNum(item,1)"></view>
									</view>
								</view>
							</view>
						</view>
						<view class="remove" @click="delData">删除</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 库存为0商品 -->
		<view v-if="emptyList.length > 0">
			<!-- 失效商品数量 -->
			<view class="allGoodsNum size26">
				失效宝贝{{emptyList.length}}件<text class="defAllGoods" @click="delDefGoods">清空失效宝贝</text>
			</view>
			<!-- 商品列表 -->
			<view class="goodsList">
				<view class="order-itemHidden" v-for="(item, index) in emptyList" :key="index">
					<view :data-index="index" class="order-item" @touchstart="drawStart" @touchmove="drawMoves"
						@touchend="drawEnds" :style="'right:'+item.right+'px'" :data-cardid="item.id"
						:data-upstop="item.goods_spec_id.stock_num" :data-specid="item.goods_spec_id.goods_spec_id">
						<view class="contents flex alignC">
							<!-- 商品图片 -->
							<view class="goodsImg relative">
								<view class="goodsImgs absolute">
									<image src="/static/order/invalidImg.png" mode="widthFix"></image>
								</view>
								<image :src="item.goods_id.image" mode="widthFix"></image>
							</view>
							<!-- 商品详情 -->
							<view class="goodsDetail">
								<view class="goodsName">
									{{item.goods_id.name}}
								</view>
								<view class="goodsNorms"></view>
								<view class="priceNum flex">
									<view class="goodsPrice">
										<text class="size24">¥</text>{{item.goods_spec_id.goods_price}}
									</view>
								</view>
							</view>
						</view>
						<view class="remove" @click="delData">删除</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 底部支付模块 -->
		<view class="bottomBtn flex alignC justifyBetween">
			<view class="allActiveBtn" @click="allGoods">
				<image v-if="!allActive" src="../../static/order/changeAddressDefault.png" mode="widthFix"></image>
				<image v-else src="../../static/order/changeAddress.png" mode="widthFix"></image>
			</view>
			<view class="allActiveText size26">
				全选
			</view>
			<view class="size20 activeNum">
				已选{{ActiveNum.length}}件
			</view>
			<view class="size26 allNum">
				合计:
			</view>
			<view class="size28 allNumPrice weight700">
				￥{{sunVal}}
			</view>
			<view class="toPay" @click="toPay">
				去结算
			</view>
		</view>
		<!-- 弹框 -->
		<view class="mask" v-if="maskShow">
			<view class="maskContent">
				<view class="maskTitle size32 weight600">
					确认要删除该商品吗？
				</view>
				<view class="flex cancelSure absolute">
					<view class="maskCancel" @click="maskBtn(0)">
						取消
					</view>
					<view class="maskSure" @click="maskBtn(1)">
						删除
					</view>
				</view>
			</view>
		</view>
		<!-- 商品规格 -->
		<view v-if="goodDetail_guigelist">
			<u-popup v-model="cartShow" mode="bottom" width="750rpx" height="976rpx">
				<view class="goodDetailPopup" v-if="goodDetail_guigelist.form">
					<view class="goodsinfo flex" v-if="goodDetail_guigelist.form.goods_price">
						<image :src="goodDetail_guigelist.form.spec_image" class="goodsinfoImage"></image>
						<view class="goodsinfoMessage">
							<!-- 判断是否有活动价格 -->
							<view class="jiaqian" v-if="goodDetail_guigelist.form.goods_price == 0">
								<view class="activePrice">
									<text class="dollorS">￥</text>
									{{ goodDetail_guigelist.form.line_price }}
								</view>
							</view>
							<view class="jiaqian flex" v-else>
								<view class="activePrice">
									<text class="dollorS">￥</text>
									{{ goodDetail_guigelist.form.goods_price }}
								</view>
								<view class="price" style="margin: 12rpx 0 0 4rpx;">
									￥
									<text class="td">{{ goodDetail_guigelist.form.line_price }}</text>
								</view>
							</view>
							<view class="kucunBox">库存：{{ goodDetail_guigelist.form.stock_num }}</view>
						</view>
					</view>
					<!-- 商品规格 -->
					<view v-if="spec_attr">
						<template v-for="(item, i) in spec_attr">
							<Bro-List :key="i" :ay="i" :datas="item" @ItemList="ItemList"></Bro-List>
						</template>
					</view>
					<view class="bottomNum flex justifyBetween alignC" v-if="goodDetail_guigelist">
						<view class="numText">数量</view>
						<view class="numNum">
							<u-number-box disabled-input :input-width="72" :input-height="56" v-model="value" :min="1"
								:max="goodDetail_guigelist.form.stock_num" @change="valChange"></u-number-box>
						</view>
					</view>
					<view class="goods_bt" @click="addgoodsCart">确定</view>
					<view class="icout" @click="closeCart">
						<image src="/static/goods/ic_out.png" mode=""></image>
					</view>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	import Login from '../../login.js'
	import BroList from '@/components/Bro-List';
	export default {
		components: {
			BroList
		},
		data() {
			return {
				cartShow: false, // 规格弹窗显示
				maskShow: false, // 删除商品弹窗
				allActive: false, // 全选按钮
				itemActive: false, // 商品当前项
				goodsItemNum: '', //选中商品
				normNumDefault: 1, // 规格初始数量
				csListArrl: [], // 列表数据
				emptyList: [], // 空库存数据
				delBtnWidth: 80, // 左滑默认宽度
				ActiveNum: [], // 已选商品数量
				sunVal: 0, // 合计全额
				URL: '', // 图片头
				// 规格
				spec_attr: [],
				spec_list: [],
				// 规格组成的新数组
				guileList: [],
				// new 规格函数
				goodDetail_guigelist: [],
				product_list: {},
				//步进器
				value: 1,
			}
		},
		onLoad() {
			this.URL = getApp().globalData.url;
		},
		onShow() {
			this.ActiveNum = [];
			this.allActive = false;
			this.allGoodsContent();
			this.$loginCustom();
		},
		methods: {
			// 清空全部失效宝贝
			delDefGoods() {
				let data = {
					cart_ids: '',
				}
				this.emptyList.map(item => {
					data.cart_ids += item.id + ','
				})
				this.$rqs('/api/cart/del', data).then((res) => {
					if (res.data.code == 1) {
						this.allGoodsContent();
					}
					uni.showToast({
						title: res.data.msg,
						icon: 'none'
					})
				})
			},
			// 获取购物车商品列表
			allGoodsContent() {
				if (uni.getStorageSync('token')) {
					this.$rqs('/api/cart/index').then((res) => {
						let r = res.data.data
						r.map(item => {
							item.isActive = false
							if (item.goods_id.spec_type == 10) {
								item.goods_spec_id.spec_image = item.goods_id.image
							}
							// 是否拼接参数
							(item.goods_spec_id.spec_image.slice(0, 4) != 'http') && (item.goods_spec_id
								.spec_image = this.URL + item.goods_spec_id.spec_image)
						})
						r.forEach((item, index) => {
							if (item.goods_spec_id.stock_num == 0) {
								this.emptyList.push(r.splice((index), 1))
							}
						})
						this.emptyList = this.emptyList.flat(Infinity);
						this.csListArrl = r;
					})
				} else {
					this.$loginCustom(1);
				}
			},
			// 全选
			allGoods(e) {
				this.allActive = !this.allActive
				this.csListArrl.map((item, index) => {
					item.isActive = this.allActive
				})
				this.countNum();
			},
			// 商品列表按钮
			itemActives(e) {
				let arr = this.csListArrl
				arr[e].isActive = !arr[e].isActive
				this.allActive = arr.every((item, index) => {
					return item.isActive == true
				})
				this.countNum();
			},
			// 已选中商品
			countNum() {
				this.ActiveNum = this.csListArrl.filter(item => {
					return item.isActive == true
				})
				// 已选全额
				this.countSun = this.ActiveNum.map(item => {
					return item.goods_spec_id.goods_price * item.num
				})
				console.log(this.countSun + '选中商品金额');
				if (this.countSun.length > 0) {
					this.sunVal = this.countSun.reduce((pre, now) => {
						return pre + now
					}).toFixed(2);
				} else {
					this.sunVal = 0
				}
			},
			// 监听点击当前商品
			monitorItem(e) {
				this.goodsItemNum = e
			},
			// 监听商品数量
			monitorNum(e) {
				e.detail.value <= 0 && e.detail.value ? this.$set(this.csListArrl[this.goodsItemNum], 'num', 1) : this
					.csListArrl[this.goodsItemNum].num = e.detail.value
				let data = {
					cart_id: this.card_id,
					num: e.detail.value
				}
				this.$rqs('/api/cart/inc', data).then((res) => {
					if (res.data.data == 1) {
						this.countNum();
					}
				})
			},
			// 监听商品数量
			monitorNumLive(e) {
				(e.detail.value == '') && this.$set(this.csListArrl[this.goodsItemNum], 'num', 1);
				if (e.detail.value >= this.upStop) {
					this.$set(this.csListArrl[this.goodsItemNum], 'num', this.upStop)
				}
			},
			// 加减商品数量 
			changeNum(item, e) {
				if (item.num >= this.upStop) {
					uni.showToast({
						title: '已达库存上限',
						icon: 'none'
					})
				}
				e ? item.num < this.upStop && item.num++ : item.num > 1 && item.num--
				let data = {
					cart_id: this.card_id,
					num: item.num
				}
				this.$rqs('/api/cart/inc', data).then((res) => {
					if (res.data.code == 1) {
						this.countNum();
					}
				})
			},
			// 确认删除商品弹窗
			maskBtn(e) {
				if (e) {
					let data = {
						cart_ids: this.card_id,
					}
					this.$rqs('/api/cart/del', data).then((res) => {
						if (res.data.code == 1) {
							this.allGoodsContent();
							this.maskShow = !this.maskShow;
						}
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
					})
				} else {
					this.maskShow = !this.maskShow;
				}
			},
			// 商品规格弹窗
			norms(e) {
				let data = {
					id: e.goods_id.id
				};
				this.$rqs('/api/goods/detail', data).then(res => {
					this.product_list = res.data.data.detail;
					// 规格
					this.spec_attr = res.data.data.specData.spec_attr;
					//规格商品详情
					this.spec_list = res.data.data.specData.spec_list
					// 规格默认值
					this.spec_attr.map(item => {
						this.guileList.push(item.spec_items[0].item_id);
					})
					var i = this.spec_list.findIndex((x) => x.spec_sku_id == this.guileList.join('_'))
					this.goodDetail_guigelist = this.spec_list[i]
					this.cartShow = !this.cartShow;
				});
			},
			// 组件点击
			ItemList(id, index) {
				this.guileList[index] = id;
				var i = this.spec_list.findIndex((x) => x.spec_sku_id == this.guileList.join('_'))
				this.goodDetail_guigelist = this.spec_list[i]
			},
			// 修改商品规格按钮
			addgoodsCart() {
				let data = {
					cart_id: this.card_id,
					goods_spec_id: this.goodDetail_guigelist.goods_spec_id
				}
				this.$rqs('/api/cart/updateSpec', data).then(res => {
					if (res.data.code == 1) {
						this.cartShow = !this.cartShow;
					}
					this.allGoodsContent();
					uni.showToast({
						title: res.data.msg,
						icon: 'none'
					})
				});
			},
			// 关闭规格详情
			closeCart() {
				this.cartShow = !this.cartShow;
			},
			// 监听规格数量
			valChange(e) {
				console.log(e.value + '--规格数量');
			},
			// 去结算按钮
			toPay() {
				console.log(this.ActiveNum);
				if (uni.getStorageSync('token')) {
					if (this.ActiveNum.length > 0) {
						console.log('truetruetruetruetruetruetruetruetruetrue');
						let r = []
						this.ActiveNum.map(item => {
							r.push(item.id)
						})
						console.log(r.join() + '--购物车id');
						/**
						 * @携带购物车id和商品信息跳转购物车
						 * */
						uni.navigateTo({
							url: '/pages/order/order?ActiveNum=' + r.join() + "&goods=" + JSON.stringify(this
								.ActiveNum)
						})
					} else {
						uni.showToast({
							title: '请选择商品~',
							icon: 'none'
						})
					}
				} else {
					this.$loginCustom(1);
				}
			},
			//开始触摸滑动
			drawStart(e) {
				var touch = e.touches[0];
				this.startX = touch.clientX;
				this.card_id = e.currentTarget.dataset.cardid; // 购物车id
				this.upStop = e.currentTarget.dataset.upstop; // 商品库存
				// this.goods_spec_id = e.currentTarget.dataset.specid; // 商品规格id
				console.log(this.card_id + '--当前触摸购物车商品id');
			},
			//触摸滑动    
			drawMove(e) {
				for (var index in this.csListArrl) {
					this.$set(this.csListArrl[index], 'right', 0);
				}
				for (var index in this.emptyList) {
					this.$set(this.emptyList[index], 'right', 0);
				}
				var touch = e.touches[0];
				var item = this.csListArrl[e.currentTarget.dataset.index];
				var disX = this.startX - touch.clientX;
				if (disX >= 20) {
					if (disX > this.delBtnWidth) {
						disX = this.delBtnWidth;
					}
					this.$set(this.csListArrl[e.currentTarget.dataset.index], 'right', disX);
				} else {
					this.$set(this.csListArrl[e.currentTarget.dataset.index], 'right', 0);
				}
			},
			//触摸滑动结束
			drawEnd(e) {
				var item = this.csListArrl[e.currentTarget.dataset.index];
				if (item.right >= this.delBtnWidth / 2) {
					this.$set(this.csListArrl[e.currentTarget.dataset.index], 'right', this.delBtnWidth);
				} else {
					this.$set(this.csListArrl[e.currentTarget.dataset.index], 'right', 0);
				}
			},
			drawEnds(e) {
				var item = this.emptyList[e.currentTarget.dataset.index];
				if (item.right >= this.delBtnWidth / 2) {
					this.$set(this.emptyList[e.currentTarget.dataset.index], 'right', this.delBtnWidth);
				} else {
					this.$set(this.emptyList[e.currentTarget.dataset.index], 'right', 0);
				}
			},
			drawMoves(e) {
				for (var index in this.emptyList) {
					this.$set(this.emptyList[index], 'right', 0);
				}
				for (var index in this.csListArrl) {
					this.$set(this.csListArrl[index], 'right', 0);
				}
				var touch = e.touches[0];
				var item = this.emptyList[e.currentTarget.dataset.index];
				var disX = this.startX - touch.clientX;
				if (disX >= 20) {
					if (disX > this.delBtnWidth) {
						disX = this.delBtnWidth;
					}
					this.$set(this.emptyList[e.currentTarget.dataset.index], 'right', disX);
				} else {
					this.$set(this.emptyList[e.currentTarget.dataset.index], 'right', 0);
				}
			},
			//删除方法
			delData() {
				this.maskShow = !this.maskShow
			},

		},
		watch: {
			// 监听规格弹出框 是不弹出
			cartShow: {
				handler(newVal, oldVal) {
					if (newVal) {
						uni.hideTabBar();
					} else {
						uni.showTabBar();
						this.guileList = []
					}
					newVal ? uni.hideTabBar() : uni.showTabBar();
				},
				immediate: true
			}
		}
	}
</script>

<style>
	.allGoodsNum {
		color: #646566;
		margin: 26rpx 0 28rpx 32rpx;
		display: flex;
		justify-content: space-between;
	}

	.bottomBtn {
		width: 100%;
		height: 96rpx;
		background-color: #fff;
		padding: 12rpx 32rpx;
		box-sizing: border-box;
		position: fixed;
		bottom: 50px;
		left: 0;
		z-index: 100;
	}
 
	.allActiveBtn {
		width: 32rpx;
		height: 32rpx;
	}

	.allActiveText {
		color: #646566;
		margin-left: 10rpx;
	}

	.activeNum {
		margin-top: 6rpx;
		color: #C2C2C2;
		margin-left: 8rpx;
	}

	.allNum {
		color: #323233;
		margin-left: 46rpx;
		transform: translateY(-2rpx);
	}

	.allNumPrice {
		max-width: 146rpx;
		overflow: hidden;
		color: #DC9E5E;
		margin-left: 10rpx;
		transform: translateY(-2rpx);
		display: -webkit-box;
		/** 对象作为伸缩盒子模型显示 **/
		overflow: hidden;
		word-break: break-all;
		/* break-all(允许在单词内换行。) */
		text-overflow: ellipsis;
		/* 超出部分省略号 */
		-webkit-box-orient: vertical;
		/** 设置或检索伸缩盒对象的子元素的排列方式 **/
		-webkit-line-clamp: 1;
		/** 显示的行数 **/
	}

	.toPay {
		margin-left: 16rpx;
		width: 236rpx;
		height: 72rpx;
		background: linear-gradient(119.1deg, rgba(52, 94, 71, 1) 0%, rgba(62, 85, 78, 1) 100%);
		line-height: 72rpx;
		text-align: center;
		color: #fff;
	}

	/* 滑动删除 */
	.main {
		width: 90%;
		height: auto;
		margin: 10px auto;
		overflow: hidden
	}

	.order-item {
		width: 686rpx;
		height: 250rpx;
		display: flex;
		position: relative;
		align-items: right;
		flex-direction: row;
	}

	.contents {
		width: inherit;
		height: inherit;
		background-color: #fff;
		padding: 32rpx 24rpx 24rpx 26rpx;
		box-sizing: border-box;
	}

	.selectItem {
		width: 32rpx;
		height: 32rpx;
	}

	.goodsImg {
		width: 180rpx;
		height: 180rpx;
		margin-left: 26rpx;
	}

	.goodsNum {
		position: absolute;
		bottom: 24rpx;
		right: 24rpx;
	}

	.goodsDetail {
		height: 184rpx;
		margin-left: 24rpx;
	}

	.goodsName {
		color: #1F1F1F;
		font-size: 28rpx;
		height: 76rpx;
		width: 392rpx;
		line-height: 38rpx;
		display: -webkit-box;
		/** 对象作为伸缩盒子模型显示 **/
		overflow: hidden;
		word-break: break-all;
		/* break-all(允许在单词内换行。) */
		text-overflow: ellipsis;
		/* 超出部分省略号 */
		-webkit-box-orient: vertical;
		/** 设置或检索伸缩盒对象的子元素的排列方式 **/
		-webkit-line-clamp: 2;
		/** 显示的行数 **/
	}

	.goodsNorms {
		width: 392rpx;
		height: 32rpx;
		margin-top: 8rpx;
		font-size: 26rpx;
		color: #C2C2C2;
		display: -webkit-box;
		/** 对象作为伸缩盒子模型显示 **/
		overflow: hidden;
		word-break: break-all;
		/* break-all(允许在单词内换行。) */
		text-overflow: ellipsis;
		/* 超出部分省略号 */
		-webkit-box-orient: vertical;
		/** 设置或检索伸缩盒对象的子元素的排列方式 **/
		-webkit-line-clamp: 1;
		/** 显示的行数 **/
	}

	.goodsPrice {
		font-size: 28rpx;
		color: #DC9E5E;
	}

	.priceNum {
		height: 56rpx;
		margin-top: 16rpx;
	}

	.numBtnRemove,
	.numBtn {
		width: 56rpx;
		height: 56rpx;
		background-color: #F2F3F5;
		position: relative;
	}

	.numBtn {
		color: #333333;
		text-align: center;
	}

	.numBtnIpt,
	.numBtnAdd {
		margin-left: 4rpx;
	}

	.numBtnRemove::before {
		content: '';
		width: 24rpx;
		height: 2rpx;
		background-color: #323233;
		position: absolute;
		z-index: 0;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.numBtnAdd::after {
		content: '';
		width: 2rpx;
		height: 24rpx;
		background-color: #323233;
		position: absolute;
		z-index: 0;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.remove {
		margin-left: -5%;
		width: 120rpx;
		height: 250rpx;
		background-color: red;
		color: #FFFFFF;
		position: absolute;
		top: 0;
		right: -80px;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 16px;
	}

	/* 弹框 */
	.mask {
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.6);
		position: fixed;
		z-index: 150;
	}

	.maskContent {
		position: absolute;
		padding: 24rpx 32rpx;
		box-sizing: border-box;
		background-color: #fff;
		border-radius: 32rpx;
		height: 264rpx;
		width: 622rpx;
		top: 40%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.maskTitle {
		width: 100%;
		margin-top: 26rpx;
		text-align: center;
		color: #1F1F1F;
	}

	.cancelSure {
		bottom: 24rpx;
		left: 32rpx;
	}

	.maskCancel,
	.maskSure {
		width: 264rpx;
		height: 76rpx;
		background-color: #F5F5F5;
		line-height: 76rpx;
		text-align: center;
		font-size: 28rpx;
		font-weight: 600;
		color: #1F1F1F;
	}

	.maskSure {
		background-color: #3E554E;
		margin-left: 30rpx;
		color: #fff;
	}

	/* 商城详情弹窗*/
	.goodDetailPopup {
		padding: 32rpx 16rpx 0;
		position: relative;
	}

	.goodsinfo {
		padding: 0 16rpx;
		box-sizing: border-box;
		margin-bottom: 38rpx;
	}

	.mainContainer {
		padding-bottom: 96rpx;
	}

	.goodsinfoImage {
		width: 200rpx;
		height: 200rpx;
	}

	.goodsinfoMessage {
		margin-left: 24rpx;
		padding-top: 30rpx;
	}

	.kucunBox {
		margin-top: 40rpx;
		height: 32rpx;
		color: rgba(194, 194, 194, 1);
		font-size: 24rpx;
		font-weight: 500;
		font-family: 'PingFang SC';
		text-align: left;
		line-height: 32rpx;
	}

	.goods_bt {
		position: fixed;
		bottom: 20rpx;
		width: 686rpx;
		height: 80rpx;
		background: linear-gradient(119.1deg, rgba(52, 94, 71, 1) 0%, rgba(62, 85, 78, 1) 100%);
		color: rgba(255, 255, 255, 1);
		font-size: 32rpx;
		font-weight: 600;
		text-align: center;
		line-height: 80rpx;
		left: 32rpx;
	}

	.otherNorms {
		height: 450rpx;
		box-sizing: border-box;
	}

	.norderDetailBox {
		margin-bottom: 34rpx;
		flex-wrap: wrap;
		margin-top: 16rpx;
	}

	.norderDetailBox:last-child {
		margin-bottom: 0;
	}

	.norms {
		color: #5c5c5c;
		padding-left: 16rpx;
		box-sizing: border-box;
	}

	.bottomNum {
		border-top: 2rpx solid #f2f3f5;
		height: 144rpx;
		padding: 0 16rpx;
		box-sizing: border-box;
	}

	.normDetail {
		padding: 8rpx 32rpx;
		box-sizing: border-box;
		border-radius: 24rpx;
		background-color: #f1f1f3;
		margin-left: 16rpx;
		margin-bottom: 16rpx;
		color: #5c5c5c;
		font-size: 24rpx;
	}

	.normDetailActive {
		padding: 8rpx 32rpx;
		box-sizing: border-box;
		border-radius: 24rpx;
		background-color: #f4fffc;
		margin-left: 16rpx;
		margin-bottom: 16rpx;
		color: #3e554e;
		font-size: 24rpx;
		border: 2rpx solid #3e554e;
	}

	.numText {
		color: #5c5c5c;
	}

	.mumBox {
		width: 56rpx;
		height: 56rpx;
		background-color: #f2f3f5;
		border-radius: 8rpx;
		margin-left: 4rpx;
	}

	.icout {
		width: 48rpx;
		height: 48rpx;
		position: absolute;
		top: 32rpx;
		right: 32rpx;
		transform: rotate(45deg);
	}

	.icout::after {
		content: '';
		width: 30rpx;
		height: 2rpx;
		background-color: #000000;
		position: absolute;
		z-index: 1;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.icout::before {
		content: '';
		width: 2rpx;
		height: 30rpx;
		background-color: #000000;
		position: absolute;
		z-index: 1;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.order-itemHidden {
		margin: 10px auto;
		width: 686rpx;
		height: 250rpx;
		overflow: hidden;
	}

	.goodsImgs {
		width: 100%;
		height: 100%;
		z-index: 1;
		position: absolute;
	}

	.goodsImgs>image {
		width: 100%;
		height: 100%;
	}

	.defAllGoods {
		display: inline-block;
		margin-right: 32rpx;
	}
</style>