<template>
	<view id="wrapper">
		<view v-if="fixedtrue"
			style="height: 100vh; width: 100%; position: fixed; z-index: 999; top: 0; left: 0; background-color: #fff; display: flex; justify-content: center; align-items: center;">
			<image style="width: 140rpx; height: 140rpx;" src="@/static/1.gif" mode="aspectFill"></image>
			<text style="margin-left10rpx;font-size: 40rpx;color: #7d7d76;">加载中</text>
			<!-- <u-loadmore status="loading" fontSize="50" iconSize="30"/> -->
		</view>
		<view class="nav-wrap" :class="{ 'is-fixed': isFixed }"
			:style="{ paddingTop: `${menuInfo.top}px`, paddingBottom: `${paddingBtmSize}px` }">
			<view class="content" :style="{ height: `${menuInfo.height}px`, paddingLeft: `${paddingBtmSize}px` }">
				<view class="left-btn">
					<view class="btn" :style="{ width: `${menuInfo.height}px`, height: `${menuInfo.height}px` }"
						@click="navClickHandle(1)">
						<u-icon name="arrow-left" :color="isFixed ? '#333' : '#fff'" size="28"></u-icon>
					</view>
					<view class="btn" :style="{ width: `${menuInfo.height}px`, height: `${menuInfo.height}px` }"
						@click="navClickHandle(2)">
						<u-icon name="kefu-ermai" :color="isFixed ? '#333' : '#fff'" size="28"></u-icon>
					</view>
				</view>
			</view>
		</view>
		<view class="shop-cover" :style="{ height: `${menuInfo.top + menuInfo.height + paddingBtmSize * 8}px` }">
			<image class="img" :src="shopList.storeInfo.coverImg" mode="aspectFill"></image>
		</view>
		<view class="list-container">
			<view class="header-wrap">
				<text class="title">
					<text class="t">{{ shopList.storeInfo.shopName }}</text>
				</text>
				<view class="cover">
					<image class="img" :src="shopList.storeInfo.logo" mode="aspectFill"></image>
				</view>
			</view>
			<view class="tab-header"
				:style="{ height: `${tabHeadHeight}px`, top: `${menuInfo.top + menuInfo.height + paddingBtmSize}px` }">
				<view class="left">
					<text class="t">选择</text>
				</view>
				<view class="right">
					<text class="t">商家</text>
					<text class="d">{{ shopList.shopTableInfo.name }}</text>
				</view>
			</view>
			<view class="tab-content">
				<view class="left-wrap">
					<view class="left"
						:style="{ top: `${menuInfo.top + menuInfo.height + paddingBtmSize + tabHeadHeight}px` }">
						<view class="item" v-for="(item, index) in shopList.productInfo" :key="item.id"
							:class="{ active: titleTopNumIndex == index }" @click="titleClickHandle(item.id)">
							<text>{{ item.name }}</text>
						</view>
					</view>
				</view>
				<view class="list-wrap">
					<view class="item-wrap" v-for="(item,index) in shopList.productInfo" :key="item.id">
						<view class="title-wrap" :id="`title${item.id}`"></view>
						<view class="title"
							:style="{ top: `${menuInfo.top + menuInfo.height + paddingBtmSize + tabHeadHeight}px` }">
							<!--  -->
							<text>{{ item.name }}</text>
						</view>
						<view class="" v-if="item.products.length == 0">
							空
						</view>
						<view class="shop-item" v-for="(item1,index1) in item.products" :key="item1.id">
							<view class="cover langcover" style="width:180rpx; height: 180rpx;"
								@click.stop="clickspecifications(item1,index,index1)">
								<!-- <c-image style="position: absolute;z-index:2;"
									:src="`${item1.coverImg}?x-oss-process=image/resize,m_lfit,w_90,h_90`" width="180"
									height="180"></c-image> -->
								<image style="position: absolute;z-index:2;width: 180rpx; height: 180rpx;"
									:src="`${item1.coverImg}?x-oss-process=image/resize,m_lfit,w_90,h_90`"
									:lazy-load='true'></image>
							</view>
							<view class="info" style="display: flex;flex-direction: column;justify-content: center;">
								<view class="name">
									{{ item1.name }}
								</view>
								<view class="namess" v-if="item1.suit>1">
									{{ item1.suit }}
								</view>
								<view class="price-wrap">
									<view class="price">
										<text class="i">￥</text>
										<text class="num">{{ item1.lowPrice }}</text>
										<text class="i">起</text>
									</view>
									<view class="sku-wrap" v-if="item1.productSkuResult != null"
										@click.stop="clickspecifications(item1,index,index1)">
										<text class="t">选规格</text>
										<text class="dot num" v-if="item1.cartNumber != '0'">{{item1.cartNumber}}</text>
									</view>
									<view class="operation-wrap" v-else>
										<view class="btn" v-if="item1.cartNumber != '0'"
											@click.stop="cartadd(item1,index,index1,'-',item1.productSkuResult == null ? '单规格':'')">
											<u-icon :name="require('@/static/icon_sub.png')" size="36"></u-icon>
										</view>
										<text class="num">{{ item1.cartNumber }}</text>
										<view class="btn"
											@click.stop="cartadd(item1,index,index1,'+',item1.productSkuResult == null ? '单规格':'')">
											<u-icon :name="require('@/static/icon_add.png')" size="36"></u-icon>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="cart-wrap" v-if="cartListsdatashow">
			<view class="cart-content">
				<view class="left">
					<image class="icon" src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/drder/icon_cart.png"
						mode="aspectFit" @click="showCart = !showCart">
					</image>
					<text class="i">￥</text>
					<text class="num">{{cartLists.amount||'0.00'}}</text>
				</view>
				<view class="btn" @tap="$u.debounce(orderdetail, 500)">
					<text class="t">提交订单</text>
				</view>
			</view>
		</view>
		<u-popup :show="showCart" :round="20" :zIndex="98" :overlayStyle="{ zIndex: 98 }" @close="showCart = false">
			<view class="cart-list-wrap">
				<view class="cart-header">
					<view class="clear" @click="cartclear">
						<u-icon name="trash" color="#999"></u-icon>
						<text class="t">清空购物车</text>
					</view>
				</view>
				<scroll-view scroll-y class="scroll-view">
					<view class="list-wrap">
						<view class="shop-item" v-for="(item,index) in cartLists.data" :key="item.id">
							<view class="cover">
								<c-image :src="item.coverImg" width="120" height="120"></c-image>
							</view>
							<view class="info">
								<view class="name">
									{{ item.name }}
								</view>
								<view class="select-sku-wrap">
									<text class="t">{{ item.skuName }}</text>
								</view>
								<view class="price-wrap" style="padding-top: 0;">
									<view class="price">
										<text class="i">￥</text>
										<text class="num">{{ item.salePrice }}</text>
										<text class="i">起</text>
									</view>
									<view class="operation-wrap">
										<view class="btn" v-if="item.number" @click="cartListadd(item,index,'-')">
											<u-icon :name="require('@/static/icon_sub.png')" size="34"></u-icon>
										</view>
										<text class="num" v-if="item.number">{{ item.number }}</text>
										<view class="btn" @click="cartListadd(item,index,'+')">
											<u-icon :name="require('@/static/icon_add.png')" size="34"></u-icon>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</u-popup>
		<u-popup :show="showShopInfo" :round="20" @close="showShopInfo = false">
			<view class="shop-info-wrap">
				<view class="info-wrap">
					<image :src="shopList.storeInfo.coverImg" mode="aspectFill" class="img"></image>
					<text class="t">{{ shopList.storeInfo.shopName }}</text>
				</view>
				<view class="row">
					<view class="col">
						<text class="t">{{ shopList.storeInfo.businessTime }}</text>
					</view>
					<view class="col" @click="makePhoneCall(shopList.storeInfo.phone)">
						<text class="t">{{ shopList.storeInfo.phone }}</text>
					</view>
					<view class="col">
						<text class="t">{{ shopList.storeInfo.address }}</text>
					</view>
				</view>
				<view class="line"></view>
				<view class="close" @click="showShopInfo = false">
					<text class="t">关闭</text>
				</view>
			</view>
		</u-popup>
		<u-popup :show="showShopsku" :round="20" mode="center" @close="showShopsku = false"
			:safeAreaInsetBottom='false'>
			<view class="shop_sku">
				<view class="positionabsolute">
					<u-icon name="close-circle-fill" @click="showShopsku = false" color="#a3aaa3" size="60"></u-icon>
				</view>
				<image class="shop_skucimage" :src="specifications.coverImg" mode="widthFix"></image>
				<view class="shop_sku_name">
					{{specifications.name}}
				</view>
				<view class="shop_sku_box" v-for="(item,index) in specifications.tagSnap" :key="index"
					v-if="specifications.tagSnap">
					<view class="shop_sku_box_name">
						{{item.name}}
					</view>
					<view class="flex-start">
						<view class="shop_sku_box_item" v-for="(item1,index1) in item.children" :key="index1"
							@click="morloe(item1,index,index1,item)"
							:class=" item.start === index1 ?'shop_sku_box_item_selected':'' ">
							{{item1}}
						</view>
					</view>
				</view>
				<view class="shop_skuselect flex-start" v-if="specifications.tagSnap">
					已选规格：<view class="shop_skuselectname">{{skuidname.toString()}}</view>
				</view>
				<view class="shop_bottom flex-between">
					<view class="price">
						<text class="i">￥</text>
						<text class="num">{{salePrice}}</text>
						<text class="i">起</text>
					</view>
					<view class="operation-wrap">
						<view class="btn"
							@click="cartadd(specifications,specifications.indexa,specifications.indexb,'-',specifications.tagSnap == null ? '单规格':'')">
							<u-icon :name="require('@/static/icon_sub.png')" size="34"></u-icon>
						</view>
						<text class="num">{{amountcartNumber}}</text>
						<view class="btn"
							@click="cartadd(specifications,specifications.indexa,specifications.indexb,'+',specifications.tagSnap == null ? '单规格':'')">
							<u-icon :name="require('@/static/icon_add.png')" size="34"></u-icon>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
		<l-barrage ref="lBarrage" @end="onEnd" :minTop='8' :maxTop='20' :avatar='barrageavatar'></l-barrage>
	</view>
</template>

<script>
	import _ from 'lodash';
	import webSocketUtils from '@/common/js/websocket.js';
	import orderdetail from '@/pages/order_detail/index';
	import lBarrage from '@/components/l-barrage/l-barrage.vue'
	export default {
		components: {
			orderdetail,
			lBarrage
		},
		data() {
			return {
				userInfo: uni.cache.get('userInfo'), //个人信息
				// #ifndef MP-WEIXIN
				menuInfo: uni.getSystemInfo(),
				// #endif
				// #ifdef MP-WEIXIN
				menuInfo: uni.getMenuButtonBoundingClientRect(),
				// #endif
				paddingBtmSize: 6,
				tabHeadHeight: 50,
				isFixed: false,
				shopList: {}, //数据类型
				active: 0,
				showShopInfo: false,
				showShopsku: false,
				titleTopNumIndex: 0,
				titleTopNums: [],
				showCart: false,
				tableCode: '', //code，
				specifications: {},
				skuidname: [],
				cartLists: {}, //购物车
				orderdetailcartLists: {}, //提交订单
				socketTicket: null,
				amountcartNumber: 0,
				skuidsearch: '', //
				salePrice: '', //钱数
				fixedtrue: true,
				datasocket: {}, //储存传参数据
				radiovalue: '1', //选择支付方式
				amountVIP: null, //余额
				barrageavatar: '', //弹幕头像
				cartListsdatashow: false //是否显示购物车
			};
		},
		onPageScroll(e) {
			if (e.scrollTop >= (this.menuInfo.top + this.menuInfo.height + this.paddingBtmSize) / 2) {
				this.isFixed = true;
				uni.setNavigationBarColor({
					frontColor: '#000000',
					backgroundColor: '#ffffff'
				});
			} else {
				this.isFixed = false;
				uni.setNavigationBarColor({
					frontColor: '#ffffff',
					backgroundColor: '#000000'
				});
			}
			this.countScrollTitle(e.scrollTop);
		},
		onLoad(e) {
			if (e.q) {
				this.tableCode = this.getQueryString(decodeURIComponent(e.q), 'code')
				uni.cache.set('tableCode', this.tableCode)
			}
			uni.cache.set('types', 'types');
			this.$nextTick(() => {
				this.countTitleTopNum(); //导航栏
			});
		},
		onUnload() {
			this.socketTicket.Close()
			uni.$off('message')
		},
		onHide() {
			this.socketTicket.Close()
			uni.$off('message')
			this.fixedtrue = true
		},
		onShow() {
			uni.$on('message', this.getMessage)
			this.productqueryShopIdByTableCode() //获取shop User id
		},
		methods: {
			onEnd() { //回调弹幕
				console.log('一波结束')
			},
			// 单独获取他的shopUserid
			async productqueryShopIdByTableCode() {
				let res = await this.api.productqueryShopIdByTableCode({
					code: uni.cache.get('tableCode')
				})
				if (res.code == 0) {
					uni.cache.set('shopUser', res.data)
					this.handlemessage() //监听websocket返回
					// this.productqueryProduct() //list  数据
				} else {
					setTimeout(() => {
						uni.pro.switchTab('index/index')
					}, 1000)
				}
			},
			getMessage(msg) { //wss  回显数据
				if (msg == 1) { // 网络在连接
					this.fixedtrue = true
					return false
				}
				this.fixedtrue = false
				if (msg.type == 'heartbeat') { //后台心跳  处理返回  不然控制台一直报错
					return false
				}
				try {
					if (msg.status != 'success') {
						uni.showToast({
							title: msg.msg,
							icon: "none",
						})
						if (msg.msg == '桌码不存在') { //卓码不存在直接退出
							this.socketTicket.Close()
							uni.$off('message')
							uni.navigateBack()
							return false;
						}
					} else {
						this.cartListsdatashow = msg.data.length == 0 ? false : true
						switch (msg.type) {
							case 'sku': // sku  数量 查询这个商品的价格和数量
								this.$set(this, 'amountcartNumber', msg.amount)
								this.productqueryProduct() //list  数据
								break;
							case 'clearCart':
								this.cartLists = msg
								this.productqueryProduct() //list  数据
								this.skuidname = []
								this.showCart = false
								setTimeout(() => {
									uni.showToast({
										title: msg.msg,
										icon: "none",
									})
								}, 500)
								break;
							case 'order':
								this.skuidname = []
								this.showCart = false
								this.cartLists = msg
								this.productqueryProduct() //list  数据
								break;
							case 'addCart': //初始化add
								this.cartLists = msg
								this.productqueryProduct() //list  数据
								break;
							case 'addcart':
								this.cartLists = msg
								console.log(msg, 1111)
								this.productqueryProduct() //list  数据
								try {
									if (msg.data.length != 0) {
										let nums = 0
										msg.data.forEach((item, index, arr) => { //初始化skuidname的数据  选择第一个
											if (item.skuId == this.skuidsearch) {
												nums = item.number
											}
										})
										this.$set(this, 'amountcartNumber', nums)
									} else {
										this.$set(this, 'amountcartNumber', 0)
									}
								} catch (e) {
									//TODO handle the exception
								}
								try {
									this.barrageavatar = msg.reqData.headImg
									/*插入一条弹幕*/
									this.$refs.lBarrage.add(
										`${msg.reqData.nickName?msg.reqData.nickName:'微信用户'}${msg.reqData.num==-1?'取消了':'添加了'}${msg.reqData.name}(${msg.reqData.num})`
									);
								} catch (e) {
									//TODO handle the exception
								}
								break;
						}
					}
				} catch (e) {
					//TODO handle the exception
				}
			},
			handlemessage() {
				this.socketTicket ? this.socketTicket.Close() : null //调用前先判断是否有socket正在进行 先关闭后链接
				this.socketTicket = new webSocketUtils(`${uni.conf.baseUrlwws}`, 5000, {
					tableId: uni.cache.get('tableCode'),
					shopId: uni.cache.get('shopUser'),
					userId: uni.cache.get('userInfo').id,
					"type": "connect",
				})
			},
			// 数据处理
			socketSendMsg(data) {
				if (this.socketTicket) {
					this.socketTicket.send(data);
				}
			},
			getQueryString(url, name) { //解码
				var reg = new RegExp('(^|&|/?)' + name + '=([^&|/?]*)(&|/?|$)', 'i')
				var r = url.substr(1).match(reg)
				if (r != null) {
					return r[2]
				}
				return null;
			},
			async cartadd(item, index, index1, a, b) { //列表添加 a传参加减号   b是判断单规格多规格
				if (b == '单规格') { //没有规格为空
					this.skuidname = []
				}
				this.hodgepodge(item, 1, a) //获取skuid  /1添加购物车
			},
			async cartListadd(item, index, a) { //购物车加减
				try {
					const data = { //定义socket数据传参
						"name": item.name,
						"skuId": item.skuId,
						"num": a == '-' ? -1 : 1, //skuId
						"type": "addcart", //“addcart:添加购物车，create0rder:生成订单，clearCart:清空购物车”，
						"productId": item.productId, //商品id
						"shopId": uni.cache.get('shopUser'),
						"userId": uni.cache.get('userInfo').id
					};
					this.datasocket = data
					uni.$u.debounce(this.socketSendMsg(data), 500)
				} catch (e) {
					//TODO handle the exception
				}
			},
			async productqueryProduct() { //list  数据
				let res = await this.api.productqueryProduct({
					code: uni.cache.get('tableCode'),
					productGroupId: ''
				})
				if (res.code == 0) {
					this.shopList = res.data
					this.$nextTick(() => {
						this.countTitleTopNum();
					});
				}
			},
			clickspecifications(item1, index, index1) {
				this.skuidname = []
				this.specifications = item1
				this.specifications.indexa = index
				this.specifications.indexb = index1
				try {
					if (item1.productSkuResult == null) {
						// 但但单个规格弹框的处理
						this.hodgepodge(this.specifications, 2) //获取skuid /2查找价格和数量
					} else {
						// 多规格数据处理
						this.specifications.tagSnap = JSON.parse(item1.productSkuResult.tagSnap).map((item) => {
							let res = {
								id: item1.id, //商品id
								name: item.name,
								start: 0,
								children: item.value.split(",")
							}
							return res
						})
						this.specifications.tagSnap.forEach((val, index, arr) => { //初始化skuidname的数据  选择第一个
							this.skuidname.push(val.children[0])
						})
						this.hodgepodge(this.specifications.tagSnap[0], 2) //获取skuid /2查找价格和数量
					}

				} catch (e) {
					//TODO handle the exception
				}
			},
			async morloe(e, index, index1, item) {
				this.specifications.tagSnap[index]['start'] = index1
				this.skuidname.splice(index, 1, e) //替换skuidname的数据
				this.hodgepodge(item, 2)
			},
			async hodgepodge(item, a, c) { //此接口去获取商品id ！！！赋值库存  数量  价格等
				try {
					let res = await this.api.productqueryProductSku({
						shopId: uni.cache.get('shopUser'),
						productId: item.id, //商品id
						spec_tag: this.skuidname.join(",")
					})
					if (res.stockNumber == 0) {
						uni.showToast({
							title: '暂无库存',
							icon: "none",
						})
					} else {
						this.skuidsearch = res.data.id // 储存skuid   用于筛选数量
						this.salePrice = res.data.salePrice // 价格
						let data = null
						if (a == 1) { //1添加购物车  2是websocket返回这个商品的价格(应为不同的多规格商品返回不同的价格)
							data = { //定义socket数据传参
								"nickName": this.userInfo.nickName,
								"barrageavatar": this.userInfo.headImg,
								'name': item.name,
								"skuId": res.data.id,
								"num": c == '-' ? -1 : 1, //数量
								"type": "addcart", //“addcart:添加购物车，create0rder:生成订单，clearCart:庆康购物车”，
								"productId": item.id, //商品id
								"shopId": uni.cache.get('shopUser'),
								"userId": uni.cache.get('userInfo').id
							};
						} else {
							data = { //查询这个商品的价格
								"name": item.name,
								"skuId": res.data.id,
								"num": '', //数量
								"type": "sku", //“addcart:添加购物车，create0rder:生成订单，clearCart:庆康购物车”，
								"productId": item.id, //商品id
								"shopId": uni.cache.get('shopUser'),
								"userId": uni.cache.get('userInfo').id
							};
							this.showShopsku = true //打开弹框
						}
						this.datasocket = data
						uni.$u.debounce(this.socketSendMsg(data), 500)
					}
				} catch (e) {}
			},
			orderdetail() { // 直接生成订单
				if (this.cartLists.data.length == 0) {
					uni.showToast({
						title: '请先添加商品',
						icon: 'none'
					})
					return false
				}
				uni.navigateTo({
					url: '/pages/order_detail/indexs?tableId=' + JSON.stringify(this.cartLists)
				});
				// let data = {
				// 	"skuId": '',
				// 	"num": '', //数量
				// 	"type": "createOrder", //“addcart:添加购物车，create0rder:生成订单，clearCart:庆康购物车”，
				// 	"couponsId": '', //优惠券ID,
				// 	"isYhq": 0, // 是否使用优惠券（ 1： 使用， 0： 不使用）,
				// 	"isBuyYhq": 0, // 是否购买优惠券（ 1： 购买， 0： 不够买）
				// 	"productId": '', //商品id
				// 	"shopId": uni.cache.get('shopUser'),
				// 	"userId": uni.cache.get('userInfo').id,
				// }
				// this.datasocket = data
				// uni.$u.debounce(this.socketSendMsg(data), 500)
			},
			async cartclear() { //清空购物车
				try {
					const data = { //定义socket数据传参
						"skuId": '',
						"num": '', //skuId
						"type": "clearCart", //“addcart:添加购物车，create0rder:生成订单，clearCart:清空购物车”，
						"productId": '', //商品id
						"shopId": uni.cache.get('shopUser'),
						"userId": uni.cache.get('userInfo').id
					};
					this.datasocket = data
					uni.$u.debounce(this.socketSendMsg(data), 500)
				} catch (e) {
					//TODO handle the exception
				}
			},
			// 导航栏点击
			navClickHandle(t) {
				switch (t) {
					case 1:
						// 返回
						this.socketTicket.Close()
						uni.switchTab({
							url: '/pages/index/index'
						})
						break;
					case 2:
						// 显示商家信息
						this.showShopInfo = true;
						break;
					default:
						break;
				}
			},
			//打电话
			makePhoneCall(phone) {
				uni.makePhoneCall({
					phoneNumber: phone //仅为示例
				});
			},
			// 点击菜单商品滚动到指定为止
			titleClickHandle(id) {
				uni.createSelectorQuery()
					.select('#wrapper')
					.boundingClientRect((data) => {
						//目标节点
						uni.createSelectorQuery()
							.select(`#title${id}`)
							.boundingClientRect((res) => {
								const scrollTop = res.top - data.top;
								const offsetNum = this.menuInfo.top + this.menuInfo.height + this
									.paddingBtmSize +
									this.tabHeadHeight - 1;
								//最外层盒子节点
								uni.pageScrollTo({
									scrollTop: scrollTop - offsetNum
								});
							})
							.exec();
					})
					.exec();
			},
			// 计算滚动到那个标题
			countScrollTitle: _.throttle(function(top) {
				if (this.titleTopNums.length > 1) {
					for (let i = 0; i <= this.titleTopNums.length - 1; i++) {
						if (top >= this.titleTopNums[i] && top < this.titleTopNums[i + 1]) {
							this.titleTopNumIndex = i;
						}
					}
					if (top >= this.titleTopNums[this.titleTopNums.length - 1]) {
						this.titleTopNumIndex = this.titleTopNums.length - 1;
					}
				}
			}, 100),
			// 统计每个标题到顶部的距离
			countTitleTopNum() {
				let topNums = [];
				for (let i of this.shopList.productInfo) {
					uni.createSelectorQuery()
						.select(`#title${i.id}`)
						.boundingClientRect((res) => {
							topNums.push(res.top + this.menuInfo.top + this.menuInfo.height + this
								.paddingBtmSize -
								this.tabHeadHeight - this.tabHeadHeight / 2);
						})
						.exec();
				}
				this.titleTopNums = topNums;
			},
		}
	};
</script>

<style scoped lang="scss">
	$bg: #fafafa;
	$tabLeft: 200upx;
	$itemH: 100upx;
	$cartH: 90upx;

	.nav-wrap {
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 97;

		&.is-fixed {
			background-color: #fff;
		}

		.content {
			.left-btn {
				display: flex;

				.btn {
					display: flex;
					align-items: center;
					justify-content: center;
					// margin-right: $paddingSize;
				}
			}
		}
	}

	.shop-cover {
		position: relative;

		&::after {
			content: '';
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 2;
			background-color: rgba(0, 0, 0, 0.3);
		}

		.img {
			width: 100%;
			height: 100%;
			position: relative;
			z-index: 1;
		}
	}

	.list-container {
		background-color: #fff;
		border-radius: 20upx;
		position: relative;
		z-index: 96;
		margin-top: -40upx;

		.header-wrap {
			$h: 120upx;
			height: $h;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 $paddingSize;

			.title {
				font-weight: bold;

				.t {
					font-size: 42upx;
				}
			}

			.cover {
				width: $h;
				height: $h;
				margin-top: -40upx;
				background: #999;
				position: relative;

				.img {
					width: 100%;
					height: 100%;
					border-radius: 12upx;
				}
			}
		}

		.tab-header {
			display: flex;
			align-items: center;
			background-color: $bg;
			position: sticky;
			z-index: 999;

			.t {
				font-size: 32upx;
			}

			.left {
				width: $tabLeft;
				display: flex;
				padding-left: $paddingSize;

				.t {
					font-weight: bold;
				}
			}

			.right {
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 $paddingSize;

				.d {
					padding: 12upx 16upx;
					background-color: #faf2b6;
					border-radius: 12upx;
				}
			}
		}

		.tab-content {
			display: flex;
			position: relative;

			.left-wrap {
				width: $tabLeft;
				background-color: $bg;
				padding: 0 0 $paddingSize * 3 + $cartH 0;

				.left {
					width: $tabLeft;
					position: sticky;

					.item {
						height: $itemH;
						display: flex;
						align-items: center;
						padding: 0 $paddingSize;
						justify-content: center;

						&.active {
							background-color: #fff;
							font-weight: bold;
						}
					}
				}
			}

			.list-wrap {
				flex: 1;
				padding-left: $paddingSize;
				padding-bottom: $paddingSize * 3 + $cartH;

				.item-wrap {
					.title {
						height: $itemH;
						display: flex;
						align-items: center;
						position: sticky;
						z-index: 10;
						background-color: #fff;
					}
				}
			}
		}
	}

	.shop-item {
		display: flex;
		padding-bottom: $paddingSize;

		.langcover {
			position: relative;
		}

		.langcover::after {
			content: '加载中..';
			position: absolute;
			top: 0;
			left: 0;
			height: 100%;
			width: 100%;
			background-color: #e8e8e8;
			color: #6b6b6b;
			border-radius: 10rpx;
			text-align: center;
			line-height: 180rpx;
			z-index: 1;
		}

		.info {
			flex: 1;
			padding-left: 20upx;
			padding-right: $paddingSize;

			.name {
				font-size: 28upx;
				font-weight: bold;
			}

			.namess {
				margin-top: 16rpx;
				font-size: 24upx;
				font-weight: 300;
			}

			.select-sku-wrap {
				.t {
					color: #999;
					font-size: 24upx;
				}
			}

			.price-wrap {
				margin-top: 16rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.price {
					display: flex;
					align-items: flex-end;

					.i {
						font-size: 20upx;
						color: $numColor;
						position: relative;
						bottom: 4upx;
						font-weight: bold;
					}

					.num {
						font-size: 42upx;
						color: $numColor;
						position: relative;
						top: 6upx;
						padding: 0 4upx;
					}
				}

				.sku-wrap {
					padding: 6upx 16upx;
					background-color: $color-priamry;
					border-radius: 12upx;
					display: flex;
					align-items: center;
					justify-content: center;
					position: relative;

					.t {
						font-size: 24upx;
						font-weight: bold;
					}

					.dot {
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 20upx;
						position: absolute;
						padding: 2upx 12upx;
						border-radius: 8upx;
						background-color: $numColor;
						color: #fff;
						position: absolute;
						top: -14upx;
						right: -8upx;
					}
				}

				.operation-wrap {
					display: flex;
					align-items: center;

					.num {
						font-size: 32upx;
						padding: 0 16upx;
					}

					.btn {
						position: relative;
						padding: 6upx 10upx;
						background-color: $color-priamry;
						border-radius: 12upx;
						display: flex;
						align-items: center;
						justify-content: center;

						&::after {
							content: "";
							position: absolute;
							left: -10px;
							top: -10px;
							right: -10px;
							bottom: -10px;

						}
					}
				}
			}
		}
	}

	.cart-wrap {
		width: 100%;
		padding: $paddingSize;
		position: fixed;
		bottom: $paddingSize;
		left: 0;
		z-index: 99;

		.cart-content {
			display: flex;
			height: $cartH;
			border-radius: $cartH;

			.left {
				flex: 1;
				display: flex;
				align-items: center;
				background-color: #111;
				padding-left: 120upx;
				position: relative;
				border-radius: $cartH 0 0 $cartH;

				.icon {
					width: 80upx;
					height: 120upx;
					position: absolute;
					left: $paddingSize;
					bottom: 20upx;
				}

				.i,
				.num {
					color: #fff;
				}

				.i {
					font-size: 20upx;
					position: relative;
					top: 4upx;
				}

				.num {
					font-size: 42upx;
				}
			}

			.btn {
				width: 200upx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-weight: bold;
				background: $linear-color-priamry;
				border-radius: 0 $cartH $cartH 0;
			}
		}
	}

	.cart-list-wrap {
		.cart-header {
			display: flex;
			justify-content: space-between;
			background-color: #f4eddf;
			padding: 20upx $paddingSize;
			border-radius: 20upx 20upx 0 0;

			.clear {
				display: flex;
				align-items: center;

				.t {
					font-size: 24upx;
					color: #999;
					margin-left: 4upx;
				}
			}
		}

		.scroll-view {
			max-height: 50vh;
		}

		.list-wrap {
			padding: $paddingSize 0 $paddingSize * 2 + $cartH $paddingSize;
		}
	}

	.shop_sku {
		position: relative;
		width: 700rpx;
		border-radius: 20rpx;
		background: #fff;

		.positionabsolute {
			position: absolute;
			top: 10rpx;
			left: 10rpx;
		}

		.shop_skucimage {
			width: 100%;
			height: 440rpx;
			border-radius: 20rpx 20rpx 0 0;
		}

		.shop_sku_name {
			padding: 0 $paddingSize;
			margin-top: 20rpx;
			font-weight: bold;
			font-size: 32upx;
		}

		.shop_sku_box {
			padding: 0 $paddingSize;

			.shop_sku_box_name {
				margin-top: 20rpx;
				font-weight: 500;
				font-size: 28upx;
				color: #999;
			}

			.flex-start {
				.shop_sku_box_item {
					margin-top: 16rpx;
					padding: 8rpx 24rpx;
					border-radius: 24rpx;
					font-size: 24upx;
					margin-left: 16rpx;
					background: #fbe3e3;
				}

				.shop_sku_box_item:nth-child(1) {
					margin-left: 0;
				}

				.shop_sku_box_item_noselected {
					color: #000;
				}

				.shop_sku_box_item_selected {
					border: 1rpx solid red;
					color: red;
				}
			}

		}

		.shop_skuselect {
			padding: 10rpx $paddingSize;
			margin-top: 28rpx;
			width: 100%;
			background: #f7f7f7;
			color: #ada7a7;
			font-size: 24upx;

			.shop_skuselectname {
				color: #000;
				font-size: 26upx;
			}
		}

		.shop_bottom {
			box-sizing: border-box;
			padding: 10rpx $paddingSize;
			margin: 28rpx 0;

			.price {
				display: flex;
				align-items: flex-end;

				.i {
					font-size: 20upx;
					color: $numColor;
					position: relative;
					bottom: 4upx;
					font-weight: bold;
				}

				.num {
					font-size: 42upx;
					color: $numColor;
					position: relative;
					top: 6upx;
					padding: 0 4upx;
				}
			}

			.operation-wrap {
				display: flex;
				align-items: center;

				.num {
					font-size: 32upx;
					padding: 0 16upx;
				}

				.btn {
					position: relative;
					padding: 16upx 20upx;
					background-color: $color-priamry;
					border-radius: 12upx;
					display: flex;
					align-items: center;
					justify-content: center;

					&::after {
						content: "";
						position: absolute;
						left: -10px;
						top: -10px;
						right: -10px;
						bottom: -10px;

					}
				}
			}
		}
	}


	.classorderdetailshow {
		position: relative;

		.orderdetailuicon {
			position: absolute;
			top: 10rpx;
			left: 10rpx;
		}

		.payType {
			padding: 32rpx 34rpx;
			margin-top: 48rpx;
			background-color: #fff;

			>view:first-child {
				font-weight: 500;
				font-size: 28rpx;
				color: #333333;
			}

			>view:last-child {
				margin-top: 32rpx;
			}

			.dfs {
				display: flex;
				align-items: center;
			}

		}

		.fixedview {
			position: relative;
			width: 100%;

			.flex-between {
				width: 100%;
				padding: 24rpx 28rpx;
				background: #FFFFFF;
				flex-wrap: nowrap;

				.fixedview_one {
					.fixedview_oneone {
						font-size: 28rpx;
						font-family: SourceHanSansCN-Bold-, SourceHanSansCN-Bold;
						font-weight: normal;
						color: #333333;
					}

					.fixedview_onetow {
						font-size: 44rpx;
						font-family: SourceHanSansCN-Bold-, SourceHanSansCN-Bold;
						font-weight: normal;
						color: #F45C4C;
						font-weight: bold;

						text {
							font-size: 28rpx;
						}
					}

					.fixedview_onethere {
						font-family: Source Han Sans CN, Source Han Sans CN;
						font-weight: 400;
						font-size: 24rpx;
						color: #999999;
					}
				}

				.fixedview_tow {
					background: red;
					border-radius: 34rpx;
					padding: 10rpx 44rpx;
					font-size: 32rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
					color: #FFFFFF;
				}
			}
		}
	}

	.shop-info-wrap {
		.info-wrap {
			padding: $paddingSize * 2 0;
			display: flex;
			align-items: center;
			flex-direction: column;
			border-bottom: 1upx solid #f2f2f2;

			.img {
				width: 100upx;
				height: 100upx;
				border-radius: 12upx;
			}

			.t {
				font-size: 32upx;
				padding-top: 8upx;
			}
		}

		.row {
			padding: 0 $paddingSize $paddingSize;

			.col {
				padding-top: $paddingSize;

				.t {
					color: #999;
				}
			}
		}

		.line {
			height: 12upx;
			background-color: #f2f2f2;
		}

		.close {
			padding: $paddingSize 0;
			display: flex;
			justify-content: center;
		}
	}
</style>