<template>
	<page-meta :page-style="'overflow:'+(pagemetashow?'hidden':'visible')"></page-meta>
	<view class="container">
		<!-- 占位符  接口请求完毕才显示 -->
		<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-left:10rpx;font-size: 40rpx;color: #7d7d76;">加载中</text>
		</view>
		<!-- 顶部面板 -->
		<view class="top--panel">
			<navseat :opacity='opacity' :titleshow='true' @navigateBacknav='navigateBacknav'
				:navigateBacknavtitle='true'></navseat>
			<!-- 顶部面板，可添加所需要放在页面顶部的内容代码。比如banner图 -->
			<image class="panelimgbackground"
				:src="shopInfo.storeInfo.coverImg||'https://czg-qr-order.oss-cn-beijing.aliyuncs.com/shopDetails/topBanner.png'"
				mode="aspectFill">
			</image>
			<view class="panelone">
				{{ shopInfo.storeInfo.shopName }}
			</view>
			<view class="paneltow">
				距离您{{ shopInfo.distance }}
			</view>
			<view class="panelthere flex-between">
				<view class="paneltheretext">
					营业时间：{{ (shopInfo.storeInfo.businessStartDay || '——') +'至'+ (shopInfo.storeInfo.businessEndDay || '——') +' '+ (shopInfo.storeInfo.businessTime || '')}}
				</view>
				<view class="flex-start" @click="showShopClick">
					<view style="margin-right: 14rpx;">查看</view>
					<u-icon name="arrow-down" color="#999999" size="28"></u-icon>
				</view>
			</view>
			<view class="panelfour" v-if="shopProductList.hots && shopProductList.hots.length > 0">
				本店招牌菜
			</view>
			<view class="panelfive">
				<scroll-view :scroll-x="true" :scroll-with-animation="false">
					<view class="panelfive_list">
						<view class="panelfiveitem" @click="clickspecifications(item,index,index,'热销')"
							v-for="(item,index) in shopProductList.hots" :key="index">
							<image class="panelfiveitemimage" :src="item.coverImg" mode="aspectFill"></image>
							<view class="panelfiveitemone">
								{{ item.name }}
							</view>
							<view class="panelfiveitemtow">
								本店回头客第{{index+1}}名
							</view>
							<view class="panelfiveitemthere flex-start">
								<text>招牌</text>
							</view>
							<!-- 	<view class="panelfiveitemfour">
								{{item.shortTitle?item.shortTitle:''}}
							</view> -->
							<view class="panelfiveitemfive">
								月售{{item.stockNumber}}
							</view>
							<view class="panelfiveitemsex flex-between">
								<view class="panelfiveitemsex_oen">
									<text>¥</text>
									<text>{{item.lowPrice}}</text>
									<text>/份</text>
									<text v-if="item.suit > 1">「{{item.suit}}份起点」</text>
								</view>
								<!-- <u-icon name="plus-circle-fill" color="#E9AB7A" size="40"></u-icon> -->

							</view>
							<view class="panelfiveitemNum">
								<view class="sku-wrap flex-center" v-if="item.productSkuResult != null"
									@click.stop="clickspecifications(item,index,index1)">
									<text class="t">选规格</text>
									<text class="dot num"
										v-if="item.cartNumber != '0'">{{item.cartNumber<99?item.cartNumber:'99+'}}</text>
								</view>
								<view class="Controls" v-else>
									<view v-if="item.cartNumber != '0'"
										@click.stop="cartadd(item,'-',item.productSkuResult == null ? '单规格':'',$event)">
										<u-icon name="minus-circle-fill" color="#E9AB7A" size="50"></u-icon>
									</view>
									<text class="num"> {{ item.cartNumber }} </text>
									<view @click.stop="cartadd(item,'+',item.productSkuResult == null ? '单规格':'')">
										<u-icon name="plus-circle-fill" color="#E9AB7A" size="50"></u-icon>
									</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<!-- 滚动区域 -->
		<view class="scroll-panel" id="scroll-panel">
			<view class="list-box">
				<view class="left" :style="{top: `${HeighT}px`}">
					<scroll-view :scroll-into-view="leftIntoView" :scroll-with-animation="false" :scroll-y="scrollxleft"
						:style="{height:`${scrollHeight - 90}px`}">
						<view class="item" v-for="(item,index) in shopProductList.productInfo" :key="index"
							:class="{ 'active':index==leftIndex }" :id="'left-'+index" :data-index="index"
							@click="leftTap(index)"><text>{{item.name}}</text></view>
						<!-- <view class="items"></view> -->
					</scroll-view>
				</view>
				<view class="main">
					<view>
						<view class="item main-item" v-for="(item,index) in shopProductList.productInfo" :key="index"
							:id="'item-'+index">
							<view class="title">
								<view>{{item.name}}</view>
							</view>
							<!-- ?x-oss-process=image/resize,m_lfit,w_200,h_200,limit_90 -->
							<view class="goods" @click="clickspecifications(item1,index,index1)"
								v-for="(item1,index1) in item.products" :key="index1">
								<image class="goodsImg" v-if="item1.coverImg!=null" :lazy-load="true"
									@load="imageLoaded(item1,index,index1)"
									:src="`${item1.coverImg}${!item1.imgLoad?'?x-oss-process=image/resize,m_lfit,w_300,h_300':''}`"
									mode="aspectFill"></image>
								<!-- 	<image class="goodsImg" v-if="item1.coverImg!=null" :lazy-load="true"
									:src="`${item1.coverImg}`" mode="aspectFill"></image> -->
								<image class="goodsImg" src="@/static/1.gif" mode="" v-else :lazy-load="true"></image>
								<view v-if="item.name=='热销'" class="topSort" :class="'c'+(index1+1)">TOP{{index1+1}}
								</view>
								<view class="goods_right">
									<view class="name">{{ item1.name }}</view>
									<view class="lookBack" v-if="item.name=='热销'">本店回头客第{{index1+1}}名</view>
									<view class="describe"> {{item1.shortTitle?item1.shortTitle:''}} </view>
									<view class="monthlySale">月售{{item1.stockNumber}}</view>
									<view class="money">￥<text class="money_num">{{ item1.lowPrice }}</text>/份<text
											class="suit" v-if="item1.suit > 1">「{{item1.suit}}份起点」</text></view>

									<view class="flex-end" v-if="item1.productSkuResult != null">
										<view class="sku-wrap flex-center"
											@click.stop="clickspecifications(item1,index,index1)">
											<text class="t">选规格</text>
											<text class="dot num"
												v-if="item1.cartNumber != '0'">{{item1.cartNumber<99?item1.cartNumber:'99+'}}</text>
										</view>
									</view>

									<view class="Controls" v-else>
										<view v-if="item1.cartNumber != '0'"
											@click.stop="cartadd(item1,'-',item1.productSkuResult == null ? '单规格':'',$event)">
											<u-icon name="minus-circle-fill" color="#E9AB7A" size="50"></u-icon>
										</view>
										<text class="num"> {{ item1.cartNumber }} </text>
										<view
											@click.stop="cartadd(item1,'+',item1.productSkuResult == null ? '单规格':'')">
											<u-icon name="plus-circle-fill" color="#E9AB7A" size="50"></u-icon>
										</view>

									</view>
								</view>
							</view>
						</view>
						<view class="fill-last" :style="{ 'height':fillHeight + 'px' }"></view>
					</view>
				</view>
			</view>
		</view>

		<!-- 购物车悬浮条 -->
		<view class="cart-wrap" v-if="cartListsdatashow">
			<view class="cart-content">
				<view class="left">
					<view class="iconBox">
						<image class="icon"
							src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/shopDetails/shopIcon.png"
							mode="aspectFill" @click="showCart = !showCart">
						</image>
						<text class="u-badge"> {{cartLists_count<99?cartLists_count:'99+'}} </text>
					</view>

					<text class="i">￥</text>
					<text class="num">{{cartLists.amount||'0.00'}}</text>
				</view>
				<view class="btn" @tap="orderdetail">
					<text class="t">去结算</text>
				</view>
			</view>
		</view>

		<!-- 购物车 -->
		<u-popup :show="showCart" :round="20" :safeAreaInsetBottom="false" :zIndex="98" :overlayStyle="{ zIndex: 98 }"
			@close="showCart = false">
			<view class="cart-list-wrap">
				<view class="cart-header flex-between">
					<view class="num">已点 {{cartLists_count}} 份</view>
					<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"> {{ item.skuName }} </view>

								<view class="price-wrap" style="padding-top: 0;">
									<view class="price">
										<text class="i">￥</text>
										<text class="num">{{ item.salePrice }}</text>
									</view>
									<view class="operation-wrap">
										<view class="btn" v-if="item.number" @click="cartListadd(item,index,'-')">
											<u-icon name="minus-circle-fill" color="#E9AB7A" size="50"></u-icon>
										</view>
										<text class="num" v-if="item.number">{{ item.number }}</text>
										<view class="btn" @click="cartListadd(item,index,'+')">
											<u-icon name="plus-circle-fill" color="#E9AB7A" size="50"></u-icon>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</u-popup>


		<!-- 店铺详情 -->
		<u-popup :show="showShopInfo" :round="20" mode="bottom" @close="showShopInfo = false" height="500">
			<view class="shop-info-wrap">
				<view class="info-wrap flex-between">
					<view></view>
					<text class="shopName">{{ shopInfo.storeInfo.shopName }}</text>
					<view class="close" @click="showShopInfo = false">
						<u-icon name="close" color="#999999" size="28"></u-icon>
					</view>
				</view>
				<view class="info-wrap-title">商家信息</view>
				<view class="row" style="margin-bottom: 20rpx;">
					<view class="col">
						<text class="l">营业时间：</text>
						<text
							class="t">{{ (shopInfo.storeInfo.businessStartDay || '——') +'至'+ (shopInfo.storeInfo.businessEndDay || '——') +' '+ (shopInfo.storeInfo.businessTime || '')}}</text>
					</view>
					<view class="col">
						<text class="l">商家地址：</text>
						<text class="t">{{ shopInfo.storeInfo.address }}</text>
					</view>
					<view class="col" @click="makePhoneCall(shopInfo.storeInfo.phone)">
						<text class="l">商家电话：</text>
						<text class="t">{{ shopInfo.storeInfo.phone }}</text>
					</view>
				</view>
				<view class="info-wrap-title">商家公告</view>
				<view class="row">
					<view class="col">
						<text class="l">公告：</text>
						<text class="t">{{ shopInfo.storeInfo.detail }}</text>
					</view>
				</view>

			</view>
		</u-popup>

		<!-- 规格 -->
		<u-popup :show="showShopsku" :round="20" mode="bottom" @close="showShopsku = false;pagemetashow=false"
			:safeAreaInsetBottom='false'>
			<view class="shop_sku" :style="{ 'max-height': '80vh;' }">
				<view class="positionabsolute">
					<u-icon name="close-circle" @click="showShopsku = false;pagemetashow=false" color="#000"
						size="50"></u-icon>
				</view>
				<image class="shop_skucimage" :src="specifications.coverImg" mode="aspectFill"></image>
				<view class="shop_sku_name"> {{specifications.name}} </view>
				<view class="shop_sku_returned" v-if="specifications.typeName&&specifications.typeName=='热销'">
					本店回头客第{{specifications.indexb+1}}名 </view>
				<view class="shop_sku_description"> {{specifications.shortTitle?specifications.shortTitle:''}} </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)" :style="{color:!item1.isGrounding?'#999':''}"
							:class=" item.start == index1 ?'shop_sku_box_item_selected':''">
							{{item1.name}}
						</view>
					</view>
				</view>

				<view class="shop_bottom ">
					<view class="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="shopAdd(specifications,specifications.indexa,specifications.indexb,'-',specifications.tagSnap == null ? '单规格':'')">
								<u-icon name="minus-circle-fill" color="#E9AB7A" size="50"></u-icon>
							</view>
							<text class="num">{{amountcartNumber}}</text>
							<view class="btn"
								@click="shopAdd(specifications,specifications.indexa,specifications.indexb,'+',specifications.tagSnap == null ? '单规格':'')">
								<u-icon name="plus-circle-fill" color="#E9AB7A" size="50"></u-icon>
							</view>
						</view>
					</view>
					<view class="shop_skuselect flex-start" v-if="specifications.tagSnap">
						<view class="shop_skuselectname">{{skuidname.toString()}}</view>
					</view>
					<view class="addShopping" :class="(amountcartNumber>0&&isSpec)?'active':''"
						@click="addShopping(specifications,specifications.indexa,specifications.indexb,'+',specifications.tagSnap == null ? '单规格':'')">
						{{skuBtnText}}
					</view>
				</view>
			</view>
		</u-popup>
	</view>

</template>
<script>
	import navseat from '@/components/navseat.vue'
	import webSocketUtils from '@/common/js/websocket.js';
	export default {
		components: {
			navseat
		},
		data() {
			return {
				pagemetashow: false,
				fixedtrue: true,
				userInfo: uni.cache.get('userInfo'), //个人信息
				opacity: false, //是否显示
				scrollTopSize: 0, //距离顶部的高度
				fillHeight: 0, // 填充高度，用于最后一项低于滚动区域时使用
				leftArray: [],
				mainArray: [],
				topArr: [],
				leftIndex: 0,
				isFixed: false,
				showShopInfo: false, //店铺信息弹窗是否显示
				showShopsku: false, //多规格弹窗是否显示
				skuId: null, // 多规格ID
				cartLists: {}, //购物车
				cartLists_count: 0,
				shopInfo: {}, //店铺信息
				shopProductList: {}, //商品信息
				specifications: {}, // 规格信息
				querySpecList: [],
				socketTicket: null,
				amountcartNumber: 0,
				isSpec: false,
				skuBtnText: "添加到购物车",
				skuNumber: 0,
				skuSuit: 0,
				salePrice: '', //钱数
				cartListsdatashow: false, //是否显示购物车
				showCart: false,
				lastbottom: '', //元素最低端的距离
				scrollxleft: true,
				orderdetailFlag: true,
			}
		},
		onPageScroll(e) {
			if (e.scrollTop <= 44) { //搜索导航栏显示影藏
				this.opacity = false
			} else {
				this.opacity = true
			}
			// if (e.scrollTop > this.topArr[0]) {
			// 	this.scrollxleft = true
			// } else {
			// 	this.scrollxleft = false
			// }
			this.mainScroll(e)
		},
		computed: {
			/* 计算左侧滚动位置定位 */
			leftIntoView() {
				return `left-${this.leftIndex? this.leftIndex:0}`;
			},
			HeighT() { //手机类型的尺寸    导航栏高度
				console.log(this.$store.getters.is_BarHeight)
				return this.$store.getters.is_BarHeight.heightBar + this.$store.getters.is_BarHeight.customBar
			},
			scrollHeight() {
				return this.$store.getters.is_BarHeight.info.windowHeight - (this.$store.getters.is_BarHeight.heightBar +
					this.$store.getters.is_BarHeight.customBar)
			}
		},
		onLoad(e) {
			if (e.q) {
				this.tableCode = this.getQueryString(decodeURIComponent(e.q), 'code')
				uni.cache.set('tableCode', this.tableCode)
			}
			uni.cache.set('types', 'types');

		},
		onUnload() {
			if (this.socketTicket) {
				this.socketTicket.Close()
				uni.$off('message')
			}
		},
		onHide() {
			this.socketTicket.Close()
			uni.$off('message')
			this.fixedtrue = true
		},
		async onShow() {
			let _this = this;
			this.orderdetailFlag = true;
			uni.pageScrollTo({
				scrollTop: 0,
				duration: 0
			});
			if (!uni.cache.get('token')) {
				await this.$onLaunched;
			}
			uni.$on('message', this.getMessage)
			_this.getLocation()
		},
		methods: {
			navigateBacknav() {
				uni.pro.switchTab('index/index')
			},
			getQueryString(url, name) { //解码
				var reg = new RegExp('(^|&|/?)' + name + '=([^&|/?]*)(&|/?|$)', 'i')
				var r = url.substr(1).match(reg)
				if (r != null) {
					return r[2]
				}
				return null;
			},
			/**
			 * socket初始化
			 */
			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",
				})
			},

			/**
			 * 获取定位
			 */
			getLocation() {
				try {
					uni.getLocation({
						type: 'wgs84',
						success: async (res) => {
							let successres = await this.api.geocodelocation({
								lng: res.longitude,
								lat: res.latitude,
							})
							if (successres.code == 0) {
								let datastorage = {
									country: successres.data.addressComponent.country, // "中国"
									province: successres.data.addressComponent.province, //province: "陕西省"
									address: successres.data.addressComponent.city, //district: "西安市"
									district: successres.data.addressComponent.district, //district: "未央区"
									lng: res.longitude,
									lat: res.latitude,
								}
								uni.cache.set('getLocationstorage', datastorage);
								this.productqueryShop();
							}
						},
						fail: async (err) => {
							this.productqueryShop();
						}
					});
				} catch (e) {
					this.productqueryShop();
					//TODO handle the exception
				}
			},

			/**
			 * 通过桌码获取店铺信息
			 */
			async productqueryShop() {
				let res = await this.api.productqueryShop({
					code: uni.cache.get('tableCode'),
					lng: uni.cache.get('getLocationstorage').lng ? uni.cache.get('getLocationstorage').lng :
						'',
					lat: uni.cache.get('getLocationstorage').lat ? uni.cache.get('getLocationstorage').lat :
						'',
				})
				if (res.code == 0) {
					uni.cache.set('shopUser', res.data.storeInfo.id)
					this.shopInfo = res.data;
					this.productqueryProduct() //list  数据
					this.handlemessage() //监听websocket返回
				} else {
					setTimeout(() => {
						uni.pro.switchTab('index/index')
					}, 1000)
				}

			},

			/**
			 * 图片加载
			 */
			imageLoaded(item, index, index1) {
				console.log(index)
				console.log(index1)
				console.log(this.shopProductList.productInfo[index])
				this.shopProductList.productInfo[index].products[index1]['imgLoad'] = true;
				// e.currentTarget.src
			},

			/**
			 * 商品数量增加/减少
			 * @param {Object} item
			 * @param {Object} index
			 * @param {Object} index1
			 * @param {Object} a
			 * @param {Object} b
			 */
			async cartadd(item, a, b) { //列表添加 a传参加减号   b是判断单规格多规格\
				if (b == '单规格') { //没有规格为空
					this.skuidname = []
				}
				let cartNumber = a == '+' ? item.cartNumber + 1 : item.cartNumber - 1;
				this.hodgepodge(item, 1, a, cartNumber) //获取skuid  /1添加购物车
			},

			/**
			 * 详情商品增减
			 * @param {Object} item
			 * @param {Object} index
			 * @param {Object} index1
			 * @param {Object} a
			 * @param {Object} b
			 */
			shopAdd(item, index, index1, a, b) {
				if (a == "+") {

					if (this.skuNumber < this.skuSuit && this.amountcartNumber < this.skuSuit) {
						this.amountcartNumber = this.amountcartNumber + (this.skuSuit == 0 ? 1 : this.skuSuit);
					} else {
						this.amountcartNumber++;
					}
				} else {

					if (this.amountcartNumber > 0) {
						console.log(item)
						if (this.skuNumber < this.skuSuit && this.amountcartNumber <= this.skuSuit) {
							this.amountcartNumber = this.amountcartNumber - (this.skuSuit == 0 ? 1 : this.skuSuit);
						} else {
							this.amountcartNumber = this.amountcartNumber - 1;
						}
					}
				}
			},

			/**
			 * 添加购物车
			 */
			addShopping(item, index, index1, a, b) {
				if (this.amountcartNumber <= 0 || !this.isSpec) {
					return;
				}
				let num = 0;
				if (item.typeEnum == "normal") {
					num = item.cartNumber + this.amountcartNumber;
				} else {
					num = this.skuNumber + this.amountcartNumber;
				}
				let params = {
					"skuId": this.skuId,
					"num": num, //数量
					"type": a == '+' ? 1 : 0,
					"productId": item.id, //商品id
					"shopId": uni.cache.get('shopUser'),
					"userId": uni.cache.get('userInfo').id,
					"tableId": uni.cache.get('tableCode'),
				}
				this.addCart(params)
			},

			/**
			 * 购物车加减
			 * @param {Object} item
			 * @param {Object} index
			 * @param {Object} a
			 */
			async cartListadd(item, index, c) {
				try {
					let params = {
						"skuId": item.skuId,
						"num": c == '+' ? item.number + 1 : item.number - 1, //数量
						"type": c == '+' ? 1 : 0,
						"productId": item.productId, //商品id
						"shopId": uni.cache.get('shopUser'),
						"userId": uni.cache.get('userInfo').id,
						"tableId": uni.cache.get('tableCode'),
					}
					this.addCart(params);
				} catch (e) {
					//TODO handle the exception
				}
			},


			/**
			 * 添加到购物车
			 */
			async addCart(data) {
				let res = await this.api.cartAdd(data)
				if (res.code == 0) {
					this.showShopsku = false;
					this.pagemetashow = false;
					this.$set(this, 'amountcartNumber', 0)
				}
			},

			/**
			 * 清空购物车
			 */
			async cartclear() {
				let res = await this.api.cleanCart({
					"shopId": uni.cache.get('shopUser'),
					"tableId": uni.cache.get('tableCode'),
				})
			},


			/**
			 * 商品数量\购物车数量处理
			 */
			setNumber() {
				// 处理购物车相同id的情况下  数量相加
				var summedArray = this.cartLists.data.reduce((acc, current) => {
					const existing = acc.find(item => item.productId === current.productId);
					if (existing) {
						existing.number += current.number;
					} else {
						acc.push({
							...current
						})
					}
					return acc;
				}, []);
				// 购物车总数据与列表页面互通
				this.shopProductList.productInfo.forEach((item) => {
					return item.products.filter(e => {
						e.cartNumber = 0;
						return summedArray.find(i => {
							if (e.id == i.productId) {
								e.cartNumber = i.number
							}
						})
					})
				})
				// 处理招牌菜商品数量
				this.shopProductList.hots.forEach((item) => {
					item.cartNumber = 0;
					return summedArray.find(i => {
						if (item.id == i.productId) {
							item.cartNumber = i.number
						}
					})
				})
				this.cartListsdatashow = this.cartLists.data.length == 0 ? false : true
				if (this.cartLists.data.length > 0) {
					this.cartLists_count = 0;
					this.cartLists.data.forEach((v, e) => {
						this.cartLists_count += v.number;
					})
				} else {
					this.cartLists_count = 0;
				}
			},
			/**
			 * 多规格选择
			 * @param {Object} item1
			 * @param {Object} index
			 * @param {Object} index1
			 */
			async clickspecifications(item1, index, index1, type) {
				this.skuidname = []
				this.specifications = item1
				this.specifications.indexa = index
				this.specifications.indexb = index1
				this.specifications.typeName = type
				try {
					if (item1.productSkuResult == null) {
						this.isSpec = true;
						// 但但单个规格弹框的处理
						this.hodgepodge(this.specifications, 2) //获取skuid /2查找价格和数量
					} else {
						// 多规格数据处理
						this.isSpec = false;
						let obj = await this.api.productquerySpec({
							productId: item1.id, //商品id
						})
						this.querySpecList = obj.data;
						this.specifications.tagSnap = JSON.parse(item1.productSkuResult.tagSnap).map((item) => {
							let res = {
								id: item1.id, //商品id
								name: item.name,
								start: -1,
								children: []
							}
							item.value.split(",").forEach((v, e) => {
								res.children.push({
									name: v,
									isGrounding: false
								})
							})
							return res
						})

						//初始化第一列规格可编辑
						let filteredJson;
						let isSkuidname = [];
						for (let o = 0; o < this.specifications.tagSnap[0].children.length; o++) {
							isSkuidname = JSON.parse(JSON.stringify(this.skuidname));
							isSkuidname.push(this.specifications.tagSnap[0].children[o].name)
							//筛选符合条件的规格列表
							console.log(isSkuidname);
							filteredJson = this.querySpecList.filter(obj => obj.specSnap.indexOf(isSkuidname) == 0);
							console.log(filteredJson);
							for (let i = 0; i < filteredJson.length; i++) {
								console.log(filteredJson[i].isGrounding)
								if (filteredJson[i].isGrounding) {
									this.specifications.tagSnap[0].children[o].isGrounding = true
									break; // 终止循环
								}
							}

						}

						this.skuBtnText = `您还没选择${this.specifications.tagSnap[0].name}哦`

						// this.specifications.tagSnap.forEach((val, index, arr) => { //初始化skuidname的数据  选择第一个
						// 	console.log(val)
						// 	this.skuidname.push(val.children[0].info)
						// })
						console.log(this.specifications.tagSnap)
						this.hodgepodge(this.specifications.tagSnap[0], 2) //获取skuid /2查找价格和数量
					}

				} catch (e) {
					//TODO handle the exception
				}
			},

			/**
			 * 规格选择监听
			 * @param {Object} e
			 * @param {Object} index
			 * @param {Object} index1
			 * @param {Object} item
			 */
			async morloe(e, index, index1, item) {
				if (!e.isGrounding) {
					return;
				}

				let querySpecList = [];
				this.skuBtnText = "添加到购物车";
				this.isSpec = true;
				if (this.specifications.tagSnap[index].start != index1) {
					this.$set(this.specifications.tagSnap[index], 'start', index1)
				} else {
					this.$set(this.specifications.tagSnap[index], 'start', -1)
				}
				this.skuidname = [];
				this.specifications.tagSnap.forEach((val, i, arr) => { //初始化skuidname的数据  选择第一个
					if (i > index) {
						val.children.forEach((v1, e1) => {
							v1.isGrounding = false;
						})
						val.start = -1;
					}
					if (val.start >= 0) {
						this.skuidname.push(val.children[val.start].name)
					}
				})
				// this.skuidname.splice(index, 1, e.info); //替换skuidname的数据

				for (let i = 0; i < this.specifications.tagSnap.length; i++) {
					if (this.specifications.tagSnap[i].start < 0) {
						this.isSpec = false;
						this.skuBtnText = `您还没选择${this.specifications.tagSnap[i].name}哦`
						break; // 终止循环
					}
				}


				let filteredJson;
				let isSkuidname = [];
				//提前下一列规格循环，查看是否有下架规格
				if (this.specifications.tagSnap[index + 1]) {
					for (let o = 0; o < this.specifications.tagSnap[index + 1].children.length; o++) {
						isSkuidname = JSON.parse(JSON.stringify(this.skuidname));
						isSkuidname.push(this.specifications.tagSnap[index + 1].children[o].name)
						//筛选符合条件的规格列表
						console.log(isSkuidname);
						filteredJson = this.querySpecList.filter(obj => obj.specSnap.indexOf(isSkuidname) == 0);
						console.log(filteredJson);
						for (let i = 0; i < filteredJson.length; i++) {
							console.log(filteredJson[i].isGrounding)
							if (filteredJson[i].isGrounding) {
								this.specifications.tagSnap[index + 1].children[o].isGrounding = true
								break; // 终止循环
							}
						}

					}
				}


				// res.data.forEach((v,e)=>{
				// 	// this.$set(this.specifications.tagSnap[e], 'children', v.value)
				// })
				console.log(this.specifications.tagSnap)

				this.$forceUpdate();
				this.hodgepodge(item, 2)
			},

			/**
			 * 获取规格信息
			 * @param {Object} item
			 * @param {Object} a
			 * @param {Object} c
			 * @param {Object} num
			 */
			async hodgepodge(item, a, c, num) { //此接口去获取商品id ！！！赋值库存  数量  价格等
				try {
					console.log(this.skuidname.join(","))
					let res = await this.api.productqueryProductSku({
						code: uni.cache.get('tableCode'),
						shopId: uni.cache.get('shopUser'),
						productId: item.id, //商品id
						spec_tag: this.skuidname.join(","),
					})
					this.salePrice = res.data.salePrice // 价格
					let data = null;
					if (a == 1) { //1添加购物车  2是websocket返回这个商品的价格(应为不同的多规格商品返回不同的价格)
						let params = {
							"skuId": res.data.id,
							"num": num, //数量
							"type": c == '+' ? 1 : 0,
							"productId": item.id, //商品id
							"shopId": uni.cache.get('shopUser'),
							"userId": uni.cache.get('userInfo').id,
							"tableId": uni.cache.get('tableCode'),
						}
						this.addCart(params);
					} else {
						this.skuId = res.data.id;
						this.skuNumber = res.data.number || 0;
						this.skuSuit = res.data.suit;
						this.showShopsku = true //打开弹框
						this.pagemetashow = true
					}
					this.$set(this, 'amountcartNumber', 0)
				} catch (e) {}
			},

			/**
			 * 结算直接生成订单
			 */
			orderdetail() {
				if (!this.orderdetailFlag) {
					return;
				}
				this.orderdetailFlag = false;
				if (this.cartLists.data.length == 0) {
					uni.showToast({
						title: '请先添加商品',
						icon: 'none'
					})
					return false
				}
				uni.navigateTo({
					url: '/pages/order_food/confirm_order?storeInfo=' + JSON.stringify(this.shopInfo.storeInfo)
				});

			},

			/**
			 * 商家信息显示
			 */
			showShopClick() {
				this.showShopInfo = true;
			},

			/**
			 * 获取消息
			 * @param {Object} msg
			 */
			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 {
						switch (msg.type) {
							case 'sku': // sku  数量 查询这个商品的价格和数量
								break;
							case 'order':
								this.cartLists_count = 0;
								this.skuidname = [];
								this.cartListsdatashow = false;
								this.showCart = false;
								this.cartLists = msg;
								this.productqueryProduct() //list  数据
								break;
							case 'addCart': //初始化add
								this.cartLists = msg
								this.setNumber()
								break;
							case 'addcart':
								this.cartLists = msg
								try {
									//购物车为空的情况
									if (msg.data.length == 0) {
										this.showCart = false;
									}
									this.setNumber()
								} catch (e) {}
								break;
						}


					}
				} catch (e) {
					//TODO handle the exception
				}
			},

			// 数据处理
			socketSendMsg(data) {
				if (this.socketTicket) {
					this.socketTicket.send(data);
				}
			},
			/**
			 * 获取商品数据
			 */
			async productqueryProduct() {
				let res = await this.api.productqueryProduct({
					"shopId": uni.cache.get('shopUser'),
					"productGroupId": ''
				})
				if (res.code == 0) {
					this.shopProductList = res.data;
					if (this.cartLists && this.cartLists.data && this.cartLists.data.length >= 0) {
						this.setNumber()
					}
					this.scrollTopSize = 0
					this.topArr = []
					setTimeout(() => {
						this.getElementTop();
					}, 500);
				}
			},

			/* 获取元素顶部信息 */
			getElementTop() {
				new Promise((resolve, reject) => {
					let view = uni.createSelectorQuery().selectAll('.main-item');
					view.boundingClientRect(async data => {
						resolve(data);
					}).exec();
					this.$u.getRect('.scroll-panel').then(res => {
						this.scrollTopSize = res.top; //元素距离顶部的距离  
					})
				}).then((res) => {
					let topArr = res.map((item) => {
						return item.top; /* 减去滚动容器距离顶部的距离 加导航栏高度*/
					});
					this.topArr = topArr;
					// 获取最后一个元素最低端的盒子到顶点的距离
					for (let i = 0; i <= (this.topArr.length - 1); i++) {
						if ((this.scrollHeight - 200) >= (this.topArr[this.topArr.length - 1] - this.topArr[i])) {
							// 获取距离最后一个index
							this.lastbottom = i;
							break;
						}
					}
					/* 获取最后一项的高度，设置填充高度。判断和填充时做了 +-20 的操作，是为了滚动时更好的定位 */
					let last = res[res.length - 1].height;
					if (last - 20 < this.scrollHeight) {
						// this.fillHeight = this.scrollHeight - last + 20; //这是吸到顶部的距离
						this.fillHeight = 200;
					}
				});
			},
			/* 主区域滚动监听 */
			mainScroll(e) {
				// 节流方法
				clearTimeout(this.mainThrottle);
				this.mainThrottle = setTimeout(() => {
					scrollFn();
				}, 10);
				let scrollFn = () => {
					let top = e.scrollTop;
					let index = 0;
					// 判断左边是否可以滑动

					for (let i = (this.topArr.length - 1); i >= 0; i--) {
						/* 在部分安卓设备上，因手机逻辑分辨率与rpx单位计算不是整数，滚动距离与有误差，增加2px来完善该问题 */
						if ((top + 2) >= this.topArr[i] - this.HeighT) {
							index = i;
							break;
						}
					}
					console.log(index)
					/* 查找当前滚动距离 */
					if (index >= this.lastbottom) { //
						console.log(index, this.leftIndex)
						this.leftIndex = index > this.leftIndex ? index : this.leftIndex
						// this.leftIndex = this.leftIndex
					} else {
						console.log(22918)
						this.leftIndex = (index < 0 ? 0 : index);
					}
				}
			},
			/* 左侧导航点击 */
			leftTap(index) {
				uni.pageScrollTo({
					scrollTop: this.topArr[index] - this.HeighT,
					duration: 0
				});
				this.leftIndex = index
			}
		}
	}
</script>

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

	/* 容器 */
	.container {
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		justify-content: flex-start;
		align-items: flex-start;
		align-content: flex-start;

		.navbarcontent .active {
			background-color: #fff;
		}

		&>view {
			width: 100%;
		}

		.top--panel {
			// padding: 0 20rpx;
			background-color: #fff;

			.panelimgbackground {
				width: 100%;
				height: 272rpx;
			}

			.panelone {
				padding: 20rpx 20rpx 0 20rpx;
				font-family: Source Han Sans CN, Source Han Sans CN;
				font-weight: 500;
				font-size: 32rpx;
				color: #333333;
			}

			.paneltow {
				padding: 0 20rpx;
				margin-top: 16rpx;
				font-family: Source Han Sans CN, Source Han Sans CN;
				font-weight: 400;
				font-size: 24rpx;
				color: #999999;
			}

			.panelthere {
				margin-top: 32rpx;
				margin-bottom: 50rpx;
				font-family: Source Han Sans CN, Source Han Sans CN;
				font-weight: 400;
				font-size: 24rpx;
				color: #999999;
				padding: 0 20rpx;

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

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

			.panelfour {
				font-family: Source Han Sans CN, Source Han Sans CN;
				font-weight: bold;
				font-size: 32rpx;
				color: #333333;
				padding: 0 20rpx;
			}

			.panelfive {
				width: 100%;
				padding: 0 20rpx;

				.panelfive_list {
					display: flex;
				}

				.panelfiveitem {
					margin-top: 16rpx;
					width: 340rpx;
					margin-right: 30rpx;
					position: relative;
					flex-shrink: 0;

					.panelfiveitemimage {
						border-radius: 20rpx 20rpx 0rpx 0rpx;
						width: 100%;
						height: 204rpx;
					}

					.panelfiveitemone {
						margin-top: 32rpx;
						font-family: Source Han Sans CN, Source Han Sans CN;
						font-weight: 500;
						font-size: 28rpx;
						color: #333333;
					}

					.panelfiveitemtow {
						margin-top: 16rpx;
						font-family: Source Han Sans CN, Source Han Sans CN;
						font-weight: 400;
						font-size: 24rpx;
						color: #FF534B;
					}

					.panelfiveitemthere {
						margin-top: 12rpx;
						// text:nth-child(1) {
						// 	margin-left: 0;
						// }

						text {
							padding: 4rpx 24rpx;
							background: #F6F6F6;
							border-radius: 8rpx 8rpx 8rpx 8rpx;
							font-family: Source Han Sans CN, Source Han Sans CN;
							font-weight: 400;
							font-size: 20rpx;
							color: #999999;
						}
					}

					.panelfiveitemfour {
						margin-top: 12rpx;
						width: 100%;
						height: 36rpx;
						line-height: 36rpx;
						overflow: hidden; //超出的文本隐藏
						text-overflow: ellipsis; //溢出用省略号显示
						white-space: nowrap; //溢出不换行
						font-family: Source Han Sans CN, Source Han Sans CN;
						font-weight: 400;
						font-size: 24rpx;
						color: #999999;
					}

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

					.panelfiveitemsex {
						margin-top: 32rpx;

						.panelfiveitemsex_oen {
							text:nth-child(1) {
								font-family: Source Han Sans CN, Source Han Sans CN;
								font-weight: 400;
								font-size: 24rpx;
								color: #333333;
							}

							text:nth-child(2) {
								font-family: Source Han Sans CN, Source Han Sans CN;
								font-weight: bold;
								font-size: 36rpx;
								color: #333333;
							}

							text:nth-child(3) {
								font-family: Source Han Sans CN, Source Han Sans CN;
								font-weight: 400;
								font-size: 36rpx;
								color: #333333;
							}

							text:nth-child(4) {
								font-family: Source Han Sans CN, Source Han Sans CN;
								font-weight: 400;
								font-size: 24rpx;
								color: #666666;
							}
						}
					}

					.panelfiveitemNum {
						// position: absolute;
						// bottom: 82rpx;
						// right: 0;
						padding-bottom: 48rpx;
						display: flex;
						align-items: center;
						justify-content: flex-end;

						.sku-wrap {
							width: 138rpx;
							height: 54rpx;
							background: #E3AD7F;
							border-radius: 32rpx;
							position: relative;
							align-items: center;

							.t {
								font-size: 28rpx;
								color: #fff;
							}

							.dot {
								position: absolute;
								top: -15rpx;
								right: -10rpx;
								background-color: #FF4B33;
								color: #fff;
								border-radius: 58rpx;
								padding: 5rpx 14rpx;
								box-sizing: border-box;
								display: flex;
								align-items: center;
								justify-content: center;
								font-size: 20rpx;
							}
						}

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

							.num {
								margin: 8rpx 8rpx 0 8rpx;
							}
						}
					}
				}
			}
		}

		.scroll-panel {
			// flex-grow: 1;
			// height: 0;
			// overflow: hidden;

		}


		.shop-info-wrap {
			padding: 0 30rpx 50rpx;
			box-sizing: border-box;

			.info-wrap {
				padding: 30rpx 0;
				box-sizing: border-box;

				.shopName {
					align-self: center;
					font-size: 32rpx;
					color: #333;
					font-weight: bold;
				}
			}

			.info-wrap-title {
				font-size: 32rpx;
				font-weight: bold;
				color: #333;
			}

			.row {
				.col {
					margin-bottom: 10rpx;
				}

				.l,
				.t {
					font-size: 24rpx;
					color: #999;
				}
			}
		}

		.shop_sku {
			width: 100%;
			position: relative;
			border-radius: 20rpx;
			background: #fff;
			overflow-y: auto;
			padding-bottom: 320rpx;
			box-sizing: border-box;

			.positionabsolute {
				position: absolute;
				top: 30rpx;
				right: 30rpx;
			}

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

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

			.shop_sku_returned {
				padding: 0 $paddingSize;
				font-weight: 400;
				font-size: 24rpx;
				color: #FF534B;
			}

			.shop_sku_description {
				padding: 0 $paddingSize;
				font-weight: 400;
				font-size: 24rpx;
				color: #999999;
				margin-top: 16rpx;
				padding-bottom: 32rpx;
				box-sizing: border-box;
				border-bottom: 2rpx solid #F0F0F0;
			}


			.shop_sku_box {
				padding: 0 $paddingSize;

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

				.flex-start {
					.shop_sku_box_item {
						margin-top: 16rpx;
						padding: 12rpx 28rpx;
						border-radius: 8rpx;
						font-size: 24upx;
						margin-left: 56rpx;
						background: #F5F5F5;
						border: 2rpx solid #F5F5F5;
					}

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

					.shop_sku_box_item_noselected {
						color: #666;
					}

					.shop_sku_box_item_selected {
						background: #FEFAF7;
						border-radius: 8rpx;
						border: 2rpx solid #E8AD7B;
						color: #E8AD7B;
					}
				}

			}

			.shop_skuselect {
				margin-top: 16rpx;
				width: 100%;
				// background: #f7f7f7;
				color: #999;
				font-size: 24upx;

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

			.shop_bottom {
				width: 100%;
				box-sizing: border-box;
				padding: 30rpx $paddingSize;
				background-color: #fff;
				box-shadow: 0rpx -6rpx 14rpx 2rpx rgba(0, 0, 0, 0.1);
				position: fixed;
				left: 0;
				bottom: 0;

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

					.i {
						font-size: 28rpx;
						color: #E8AD7B;
						position: relative;
						bottom: 4upx;
						font-weight: bold;
					}

					.num {
						font-size: 42rpx;
						color: #E8AD7B;
						position: relative;
						top: 6upx;
						padding: 0 4upx;
					}
				}

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

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


				}

				.addShopping {
					width: 100%;
					height: 96rpx;
					line-height: 96rpx;
					text-align: center;
					background: #ccc;
					border-radius: 48rpx;
					font-weight: 400;
					font-size: 32rpx;
					color: #FFFFFF;
					margin-top: 36rpx;
				}

				.addShopping.active {
					background: #E8AD7B;
				}
			}
		}

		.cart-wrap {
			width: 100%;
			padding: 0 20rpx;
			box-sizing: border-box;
			position: fixed;
			bottom: 40rpx;
			left: 0;
			z-index: 99;

			.cart-content {
				display: flex;
				align-items: center;
				height: 128rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 0rpx 20rpx 2rpx rgba(0, 0, 0, 0.15);
				border-radius: 58rpx;
				padding: 0 36rpx;
				box-sizing: border-box;

				.left {
					flex: 1;
					display: flex;
					align-items: center;
					position: relative;

					.iconBox {
						position: relative;
					}

					.icon {
						width: 76rpx;
						height: 88rpx;
						margin-left: 22rpx;
					}

					.u-badge {
						position: absolute;
						top: -30rpx;
						right: -30rpx;
						background-color: #FF4B33;
						color: #fff;
						border-radius: 58rpx;
						padding: 5rpx 14rpx;
						box-sizing: border-box;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 20rpx;
					}

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

					.i {
						font-size: 20upx;
						position: relative;
						top: 4upx;
						margin-left: 64rpx;
					}

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

				.btn {
					width: 160rpx;
					height: 64rpx;
					background: #E7AE7B;
					border-radius: 36rpx 36rpx 36rpx 36rpx;
					border: 2rpx solid #E8AD7B;
					display: flex;
					align-items: center;
					justify-content: center;

					.t {
						font-weight: bold;
						font-size: 28rpx;
						color: #FFFFFF;
					}
				}
			}
		}

		.cart-list-wrap {
			.cart-header {
				display: flex;
				height: 72rpx;
				background-color: #F2F2F2;
				align-items: center;
				justify-content: space-between;
				padding: 20upx $paddingSize;
				border-radius: 20upx 20upx 0 0;

				.num {
					font-weight: 400;
					font-size: 28rpx;
					color: #333333;
				}

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

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

			.scroll-view {
				max-height: 50vh;
				margin-bottom: 190rpx;
			}

			.list-wrap {
				padding: $paddingSize 0 0 $paddingSize;
			}

			.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;
						color: #333;
						margin-bottom: 5rpx;
					}

					.select-sku-wrap {
						font-weight: 400;
						font-size: 24rpx;
						color: #999999;
					}

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

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

							.i,
							.num {
								font-weight: bold;
								font-size: 32rpx;
								color: #333333;
							}

							.i {
								position: relative;
								bottom: 4upx;
							}

							.num {}
						}

						.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;
								display: flex;
								align-items: center;
								justify-content: center;


							}
						}
					}
				}
			}

		}


	}


	.list-box {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: flex-start;
		align-items: flex-start;
		align-content: flex-start;
		font-size: 28rpx;
		position: relative;

		.left {
			width: 200rpx;
			background-color: #f6f6f6;
			line-height: normal;
			box-sizing: border-box;
			font-size: 32rpx;
			position: sticky;
			top: 0;

			// padding-bottom: 200rpx;
			.item {
				padding: 30rpx 30rpx;
				// height: 92rpx;
				// line-height: 92rpx;
				position: relative;
				font-weight: 400;
				font-size: 24rpx;
				color: #333333;
				display: flex;
				align-items: center;
				// overflow: hidden;
				// text-overflow: ellipsis;
				// white-space: nowrap;

				&+.item {
					margin-top: 1px;

					&::after {
						// content: '';
						// display: block;
						// height: 0;
						// border-top: #d6d6d6 solid 1px;
						// width: 620upx;
						// position: absolute;
						// top: -1px;
						// right: 0;
						// transform: scaleY(0.5);
						/* 1px像素 */
					}
				}

				&.active {
					color: #333;
					background-color: #fff;
					position: relative;

					&::before {
						content: '';
						display: block;
						position: absolute;
						top: 0;
						left: 0;
						border-left: #7E5C23 solid 4px;
						height: 100%;
						width: 0;
					}

					&::after {
						content: '';
						display: block;
						position: absolute;
						top: 0;
						left: -15rpx;
						bottom: 0;
						margin: auto;
						height: 30rpx;
						width: 30rpx;
						border-radius: 50%;
						background-color: #7E5C23;
					}
				}
			}

			.items {
				height: 90px;
				position: relative;
				font-weight: 400;
				font-size: 24rpx;
				color: #333333;
			}

			.fill-last {
				height: 0;
				width: 100%;
				background: none;
			}
		}

		.main {
			background-color: #fff;
			padding-left: 20rpx;
			width: 0;
			flex-grow: 1;
			box-sizing: border-box;
			position: relative;


			.title {
				line-height: normal;
				padding: 30rpx 0;
				font-size: 24rpx;
				font-weight: bold;
				color: #666;
				background-color: #fff;
				position: sticky;
				top: 0;
				z-index: 19;
			}

			.item {
				padding-bottom: 16rpx;
				border-bottom: #eee solid 1px;
			}

			.goods {
				display: flex;
				flex-direction: row;
				flex-wrap: nowrap;
				justify-content: flex-start;
				align-content: center;
				position: relative;

				&+.goods {
					margin-top: 16rpx;
				}

				&>image {
					width: 120rpx;
					height: 120rpx;
					margin-right: 18rpx;
					margin-left: 2px;
				}

				.goodsImg {
					width: 200rpx;
					height: 200rpx;
					border-radius: 18rpx;
					flex-shrink: 0;
				}

				.topSort {
					width: 92rpx;
					height: 38rpx;
					text-align: center;
					line-height: 38rpx;
					position: absolute;
					top: 0;
					left: 0;
					font-weight: 400;
					font-size: 24rpx;
					color: #FFFFFF;
					border-radius: 20rpx 0rpx 20rpx 0rpx;

				}

				.topSort.c1 {
					background: #FC5C2E;
				}

				.topSort.c2 {
					background: #EF994E;
				}

				.topSort.c3 {
					background: #F4B951;
				}

				.goods_right {
					width: 100%;
					display: flex;
					flex-direction: column;
					position: relative;
					padding-top: 5rpx;
					padding-right: 20rpx;
					box-sizing: border-box;

					.name {
						font-size: 28rpx;
						color: #333;
						font-weight: bold;
						margin-bottom: 8rpx;
					}

					.describe,
					.monthlySale,
					.lookBack {
						font-weight: 400;
						font-size: 20rpx;
						color: #999999;
						margin-bottom: 8rpx;
					}

					.describe,
					.name {
						width: 270rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}


					.lookBack {
						color: #FF534B;
					}

					.money {
						font-weight: bold;
						font-size: 24rpx;
						color: #333;

						.money_num {
							font-size: 28rpx;
							color: #333;
							font-weight: bold;
						}
					}

					.suit {
						font-weight: 400;
						font-size: 24rpx;
						color: #666666;
					}

					.sku-wrap {
						width: 138rpx;
						height: 54rpx;
						background: #E3AD7F;
						border-radius: 32rpx;
						// position: absolute;
						// bottom: 10rpx;
						// right: 20rpx;
						align-items: center;
						position: relative;

						.t {
							font-size: 28rpx;
							color: #fff;
						}

						.dot {
							position: absolute;
							top: -15rpx;
							right: -10rpx;
							background-color: #FF4B33;
							color: #fff;
							border-radius: 58rpx;
							padding: 5rpx 14rpx;
							box-sizing: border-box;
							display: flex;
							align-items: center;
							justify-content: center;
							font-size: 20rpx;
						}
					}

					.Controls {
						display: flex;
						align-items: center;
						justify-content: flex-end;

						// position: absolute;
						// bottom: 10rpx;
						// right: 20rpx;
						.num {
							margin: auto 8rpx;
						}
					}
				}


			}
		}
	}
</style>