<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' :inputshow="true" :readonly="true" @searchStatus="searchStatus" :titleshow='true' @navigateBacknav='navigateBacknav'
				:navigateBacknavtitle='true'></navseat>
			<!-- 顶部面板，可添加所需要放在页面顶部的内容代码。比如banner图 -->
			<image class="panelimgbackground"
				:src="shopExtend?shopExtend.value:'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 v-if="item.isPauseSale != 0 || item.isSale == 0 " class="flex-between" style="margin-top: 32rpx;margin-bottom: 48rpx;">
								<view class="panelfiveitemsex flex-between">
									
									<view class="panelfiveitemsex_oen">
										<text class="tips">¥</text>
										<text class="price" v-if="isVip ==1 && item.lowMemberPrice>0" style="margin-right: 10rpx;">{{item.lowMemberPrice}}</text>
										<text class="tips" v-if="isVip ==1 && item.lowMemberPrice>0" :class="{lineThrough: isVip ==1 && item.lowMemberPrice>0}">¥</text>
										<text class="price" :class="{lineThrough: isVip ==1 && item.lowMemberPrice>0}">{{item.lowPrice}}</text>
										<text class="unit" v-if="!(isVip ==1 && item.lowMemberPrice>0)">/{{item.unitSnap}}</text>
									</view>
								</view>
								
								<view class="panelfiveitemNum" >
									<view class="sku-wrap flex-center"  style="background-color: #CECECE;">
										<text class="t" v-if="item.isSale == 0" >非可售时间</text>
										<text class="t"  v-else-if="item.isPauseSale != 0" >已售罄</text>
									</view>
								</view>
							</view>
							<view v-else class="flex-between" style="margin-top: 32rpx;margin-bottom: 48rpx;">
								<view class="panelfiveitemsex flex-between">
									
									<view class="panelfiveitemsex_oen">
										<text class="tips">¥</text>
										<text class="price" v-if="isVip ==1 && item.lowMemberPrice>0" style="margin-right: 10rpx;">{{item.lowMemberPrice}}</text>
										<text class="tips" v-if="isVip ==1 && item.lowMemberPrice>0" :class="{lineThrough: isVip ==1 && item.lowMemberPrice>0}">¥</text>
										<text class="price" :class="{lineThrough: isVip ==1 && item.lowMemberPrice>0}">{{item.lowPrice}}</text>
										<text class="unit" v-if="!(isVip ==1 && item.lowMemberPrice>0)">/{{item.unitSnap}}</text>
									</view>
								</view>
						
								
								<view v-if="item.suit > 1">
									<view class="panelfiveitemNum">
										<view class="sku-wrap flex-center" @click.stop="clickspecifications(item,index,index1)">
											<text class="t">{{item.suit}}{{item.unitSnap}}起点</text>
											<text class="dot num" v-if="item.cartNumber != '0'">{{item.cartNumber<99?item.cartNumber:'99+'}}</text>
										</view>
									</view>
									
								</view>
								<view v-else >
									<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 class="btn" v-if="item.cartNumber != '0'">
												<u-icon name="minus-circle-fill" color="#E9AB7A" size="50"></u-icon>
												<view class="btnClick" @click.stop="cartadd(item,'-',item.productSkuResult == null ? '单规格':'',$event)"></view>
											</view>
											<text class="num"> {{ item.cartNumber }} </text>
											<view class="btn">
												<u-icon name="plus-circle-fill" color="#E9AB7A" size="50"></u-icon>
												<view class="btnClick" @click.stop="cartadd(item,'+',item.productSkuResult == null ? '单规格':'')"></view>
											</view>
										</view>
									</view>
								</view>
								
							</view>
							<view v-if="item.isPauseSale != 0 || item.isSale == 0" style="width: 100%;height: 100%;position: absolute;top: 0;left: 0;z-index: 9,background-color: rgba(255,255,255,0.5);"></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" style="overflow: hidden;">
									<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 v-if="item1.isPauseSale != 0 || item1.isSale == 0  " class="flex-between">
										<view class="money">
											<view>￥</view>
											<text class="money_num" v-if="isVip ==1 && item1.lowMemberPrice>0" style="margin-right: 10rpx;">{{ item1.lowMemberPrice }}</text>
											<view v-if="isVip ==1 && item1.lowMemberPrice>0" :class="{lineThrough: isVip ==1 && item1.lowMemberPrice>0}">￥</view>
											<text class="money_num" :class="{lineThrough: isVip ==1 && item1.lowMemberPrice>0}">{{ item1.lowPrice }}</text>
											<text v-if="!(isVip ==1 && item1.lowMemberPrice>0)">/{{item1.unitSnap}}</text>
										</view>
										<view class="flex-end" >
											<view class="sku-wrap flex-center" style="background-color: #CECECE;">
												<text class="t" v-if="item1.isSale == 0" >非可售时间</text>
												<text class="t"  v-else-if="item1.isPauseSale != 0" >已售罄</text>
											</view>
										</view>
									</view>
									<view v-else class="flex-between">
										<view class="money">
											<view>￥</view>
											<text class="money_num" v-if="isVip ==1 && item1.lowMemberPrice>0" style="margin-right: 10rpx;">{{ item1.lowMemberPrice }}</text>
											<view v-if="isVip ==1 && item1.lowMemberPrice>0" :class="{lineThrough: isVip ==1 && item1.lowMemberPrice>0}">￥</view>
											<text class="money_num" :class="{lineThrough: isVip ==1 && item1.lowMemberPrice>0}">{{ item1.lowPrice }}</text>
											<text v-if="!(isVip ==1 && item1.lowMemberPrice>0)">/{{item1.unitSnap}}</text>
										</view>
									
										
										<view v-if="item1.suit > 1">
											<view class="flex-end" >
												<view class="sku-wrap flex-center"
													@click.stop="clickspecifications(item1,index,index1)">
													<text class="t">{{item1.suit}}{{item1.unitSnap}}起点</text>
													<text class="dot num"
														v-if="item1.cartNumber != '0'">{{item1.cartNumber<99?item1.cartNumber:'99+'}}</text>
												</view>
											</view>
										</view>
										<view v-else >
											<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 class="btn" v-if="item1.cartNumber != '0'">
													<u-icon name="minus-circle-fill" color="#E9AB7A" size="50"></u-icon>
													<view class="btnClick" @click.stop="cartadd(item1,'-',item1.productSkuResult == null ? '单规格':'',$event)"></view>
												</view>
												<text class="num"> {{ item1.cartNumber }} </text>
												<view class="btn">
													<u-icon name="plus-circle-fill" color="#E9AB7A" size="50"></u-icon>
													<view class="btnClick" @click.stop="cartadd(item1,'+',item1.productSkuResult == null ? '单规格':'')"></view>
												</view>
											</view>
										</view>
										
									</view>
									
								</view>
								<view v-if="item1.isPauseSale != 0 || item1.isSale == 0  " style="width: 100%;height: 100%;position: absolute;top: 0;left: 0;z-index: 9background-color: rgba(255,255,255,0.5);"></view>
							</view>
						</view>
						<view class="fill-last" :style="{ 'height':fillHeight + 'px' }"></view>
					</view>
				</view>
			</view>
		</view>

		
		<!-- 购物车 -->
		<shoppingCart v-if="tableCode||shopId" ref="shoppingCart" :shopId="shopId" :tableCode="tableCode" :cartLists_count="cartLists_count" :cartLists="cartLists" :showCart="showCart" @addCart="addCart" @close="close"></shoppingCart>
		
		<!-- 购物车结算 -->
		<shoppingCartBilling v-if="tableCode||shopId" ref="shoppingCartBilling" :cartListsdatashow="cartListsdatashow" :shopId="shopId" :tableCode="tableCode" :storeInfo="shopInfo.storeInfo" :cartLists_count="cartLists_count" :cartLists="cartLists" :showCart="showCart" @isOpen="isOpen"></shoppingCartBilling>
	
		<view class="placedOrderTip" @click="placedOrder" v-if="tableCode&&shopInfo.shopTableInfo&&shopInfo.shopTableInfo.orderId&&shopInfo.storeInfo.registerType == 'restaurant'"><u-avatar :src="src" shape="circle"></u-avatar><view style="margin-left: 8rpx;">已下单菜品</view></view>

		<!-- 店铺详情 -->
		<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>
					<!-- :class="item.start == index1 ?'shop_sku_box_item_selected':''"> -->
					<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="{'shop_sku_box_item_selected': item.start == index1, 'disabled': !item1.disabled || !item1.isGrounding || item1.isPauseSale==1}"
							>
							{{item1.name}}
							<view class="shop_sku_box_item_tip" v-if="item1.isGrounding == false">
								<view>下架</view>
							</view>
							<view class="shop_sku_box_item_tip" v-if="item1.isPauseSale == 1 && item1.isGrounding == true">
								<view>售罄</view>
							</view>
							<!-- disabled -->
						</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">/{{specifications.unitSnap}}</text>
						</view>
						<view class="operation-wrap">

							<view class="btn">
								<u-icon name="minus-circle-fill" color="#E9AB7A" size="50"></u-icon>
								<view class="btnClick" @click="shopAdd(specifications,specifications.indexa,specifications.indexb,'-',specifications.tagSnap == null ? '单规格':'')"></view>
							</view>
							<text class="num">{{amountcartNumber}}</text>
							<view class="btn" >
								<u-icon name="plus-circle-fill" color="#E9AB7A" size="50"></u-icon>
								<view class="btnClick" @click="shopAdd(specifications,specifications.indexa,specifications.indexb,'+',specifications.tagSnap == null ? '单规格':'')"></view>
							</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>
		<popupad :forceUpdate="forceUpdate" :showPosition="'make_order'"></popupad>
		
	</view>

</template>
<script>
	import navseat from '@/components/navseat.vue'
	import webSocketUtils from '@/common/js/websocket.js';
	import popupad from '@/components/popupad.vue'
	import shoppingCart from './components/shoppingCart.vue'
	import shoppingCartBilling from './components/shoppingCartBilling.vue'
	export default {
		components: {
			navseat,
			popupad,
			shoppingCart,
			shoppingCartBilling
		},
		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: {}, //店铺信息
				shopUserInfo: {},
				isVip: null,
				shopProductList: {}, //商品信息
				specifications: {}, // 规格信息
				querySpecList: [],
				socketTicket: null,
				amountcartNumber: 0,
				isSpec: false,
				skuBtnText: "添加到购物车",
				skuNumber: 0,
				skuSuit: 0,
				salePrice: '', //钱数
				cartListsdatashow: false, //是否显示购物车
				showCart: false,
				lastbottom: '', //元素最低端的距离
				scrollxleft: true,
				forceUpdate: false,
				shopExtend: null,
				shopId: "",
				tableCode: "",
				orderAMeal: 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() { //手机类型的尺寸    导航栏高度
				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(options) {
			// #ifdef MP-WEIXIN
			if (options.q) {
				this.tableCode = this.getQueryString(decodeURIComponent(options.q), 'code')
				uni.cache.set('tableCode', this.tableCode)
			}
			// #endif
			// #ifdef MP-ALIPAY
			if (getApp().globalData.tableCode) {
				this.tableCode = getApp().globalData.tableCode
				uni.cache.set('tableCode', this.tableCode)
			}
			// #endif
			if ( options.shopId ) {
				this.shopId = options.shopId
			}
			if ( options.tableCode ) {
				this.tableCode = options.tableCode
			}
		},
		
		onUnload() {
			if (this.socketTicket) {
				this.socketTicket.Close()
				uni.$off('message')
			}
		},
		onHide() {
			if (this.socketTicket) {
				this.socketTicket.Close()
				uni.$off('message')
			}
			
			this.fixedtrue = true
		},
		async onShow() {
			let _this = this;
			if (!this.orderAMeal){
				uni.pro.switchTab('index/index')
			}
			this.$nextTick(() => {
			     uni.pageScrollTo({
			     	scrollTop: 0,
			     	duration: 0
			     });
			     if ( this.shopId ) {
					this.productqueryShop();
			     	this.productqueryProduct() //list  数据
			     	this.getShopUserInfo() //list  数据
			     	this.handlemessage() //监听websocket返回
			     	this.getShopExtend();
			     } else {
			     	this.getLocation()
			     }
			 });
		},
		methods: {
			/**
			 * 获取背景图
			 */
			async getShopExtend () {
				let res = await this.api.getShopExtend({
					shopId: this.shopId,
					autokey: "shopInfo_bg" //index_bg my_bg member_bg shopInfo_bg
				})
				if ( res.code == 0) {
					this.shopExtend = res.data;
				}
			},
			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: this.tableCode,
					shopId: this.shopId,
					userId: uni.cache.get('userInfo').id,
					"type": "connect",
				})
				uni.$on('message', this.getMessage)
			},

			/**
			 * 获取定位
			 */
			getLocation() {
				if ( !uni.cache.get('getLocationstorage') ) {
					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
					}
				} else {
					this.productqueryShop();
				}
				
			},

			/**
			 * 通过桌码获取店铺信息
			 */
			async productqueryShop() {
				let params = {
					lng: uni.cache.get('getLocationstorage').lng ? uni.cache.get('getLocationstorage').lng :
						'',
					lat: uni.cache.get('getLocationstorage').lat ? uni.cache.get('getLocationstorage').lat :
						'',
				}
				if (this.tableCode) {params.code = this.tableCode}
				if (this.shopId) {params.shopId = this.shopId}
				let res = await this.api.productqueryShop(params)
				if (res.code == 0) {
					if ( res.data.shopTableInfo && !res.data.shopTableInfo.choseCount&&this.orderAMeal) {
						this.orderAMeal = false;
						uni.pro.navigateTo('/pagesOrder/orderAMeal/index', {
							tableCode: this.tableCode,
							shopId: res.data.storeInfo.id,
						})
						return;
					}
					let expireTime = uni.utils.timestamp() + 30 * 60; // 有效期
					uni.cache.set('shopId', res.data.storeInfo.id, expireTime)
					this.shopId = res.data.storeInfo.id;
					this.shopInfo = res.data;
					this.productqueryProduct() //list  数据
					this.getShopUserInfo() //list  数据
					this.handlemessage() //监听websocket返回
					this.getShopExtend();
				} else {
					setTimeout(() => {
						uni.pro.switchTab('index/index')
					}, 1000)
				}

			},
			
			/**
			 * 获取门店会员信息
			 */
			async getShopUserInfo() {
				let res = await this.api.shopUserInfo({
					"shopId": this.shopId,
					"userId": uni.cache.get('userInfo').id,
				})
				if (res.code == 0) {
					this.shopUserInfo = res.data;
					this.isVip = res.data.isVip;
					uni.cache.set('shopUserInfo', res.data)
				}
			},
			
			/**
			 * 图片加载
			 */
			imageLoaded(item, index, index1) {
				this.shopProductList.productInfo[index].products[index1]['imgLoad'] = true;
				// e.currentTarget.src
			},
			
			/**
			 * 跳转搜索
			 * @param {Object} e
			 */
			searchStatus (e) {
				if ( e == "searchClick" ) {
					uni.navigateTo({
						url: `/pages/order_food/order_food_search?tableCode=${this.tableCode}&shopId=${this.shopId}`
					});
				}
			},
			
			/**
			 * 查看已下单菜品
			 */
			placedOrder () {
				uni.pro.navigateTo('/pagesOrder/order_detail/index', {
					orderId: this.shopInfo.shopTableInfo.orderId,
				})
			},
			/**
			 * 商品数量增加/减少
			 * @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) {
						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,
					"isVip": item.isVip,
					"productId": item.id, //商品id
					"shopId": this.shopId,
					"note": item.note,
					"userId": uni.cache.get('userInfo').id,
				}
				if (this.shopInfo.storeInfo.eatModel.indexOf('dine-in') != -1) { params.tableId = this.tableCode;}
				this.addCart(params);
			},
			
			/**
			 * 关闭购物车
			 */
			close (e) {
				this.showCart = e;
			},

			/**
			 * 显示购物车
			 */
			isOpen (e) {
				this.showCart = e;
			},
	
			
			/**
			 * 添加到购物车
			 */
			async addCart(data) {
				let res = await this.api.cartAdd(data)
				if (res.code == 0) {
					this.showShopsku = false;
					this.pagemetashow = false;
				}
			},

			/**
			 * 商品数量\购物车数量处理
			 */
			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) {
				if ( item1.isPauseSale != 0 || item1.isSale == 0  ) {
					return;
				}
				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查找价格和数量
						this.skuBtnText = `添加到购物车`
					} 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,index) => {
							let res = {
								id: item1.id, //商品id
								name: item.name,
								start: -1,
								children: []
							}
							item.value.split(",").forEach((v, e) => {
								res.children.push({
									name: v,
									disabled: index == 0 ? true : false,
									isGrounding: index == 0 ? false : true,
									isPauseSale: index == 0 ? 1 : 0,
								})
							})
							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)
							//筛选符合条件的规格列表
							filteredJson = this.querySpecList.filter(obj => obj.specSnap.indexOf(isSkuidname) == 0);
							// 上下架初始化处理
							for (let i = 0; i < filteredJson.length; i++) {
								if (filteredJson[i].isGrounding) {
									this.specifications.tagSnap[0].children[o].isGrounding = true;
									break; // 终止循环
								}
							}
							// 售罄状态初始化
							for (let i = 0; i < filteredJson.length; i++) {
								if (filteredJson[i].isPauseSale == 0) {
									this.specifications.tagSnap[0].children[o].isPauseSale = 0;
									break; // 终止循环
								}
							}

						}

						this.skuBtnText = `您还没选择${this.specifications.tagSnap[0].name}哦`
						this.hodgepodge(this.specifications, 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 || !e.disabled || e.isPauseSale == 1) {
					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)
					index = index - 1;
				}
				this.skuidname = [];
				// 选择规格下面的其他规格可点击状态重置
				this.specifications.tagSnap.forEach((val, i, arr) => { 
					if (i > index) {
						val.children.forEach((v1, e1) => {
							v1.isGrounding = i == (index+1) ? false : true;
							v1.isPauseSale = i == (index+1) ? 1 : 0;
							v1.disabled = i == (index+1) ? true : false;
						})
						val.start = -1;
					}
					if (val.start >= 0) {
						this.skuidname.push(val.children[val.start].name)
					}
				})
				
				// 获取下一个没有选中的分类
				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)
						// 上下架状态处理
						filteredJson = this.querySpecList.filter(obj => obj.specSnap.indexOf(isSkuidname) == 0);
						for (let i = 0; i < filteredJson.length; i++) {
							if (filteredJson[i].isGrounding) {
								this.specifications.tagSnap[index + 1].children[o].isGrounding = true;
  								break; // 终止循环
							}
						}
						// 售罄状态处理
						for (let i = 0; i < filteredJson.length; i++) {
							if (filteredJson[i].isPauseSale == 0) {
								this.specifications.tagSnap[index + 1].children[o].isPauseSale = 0;
								break; // 终止循环
							}
						}

					}
				}

				this.$forceUpdate();
				this.hodgepodge(this.specifications, 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: this.tableCode,
						shopId: this.shopId,
						isVip: item.isVip, //商品id
						productId: item.id, //商品id
						spec_tag: this.skuidname.join(","),
					})
					
					this.salePrice = this.isVip == 1 && res.data.memberPrice > 0 ? res.data.memberPrice : 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
							"note": item.note,
							"isVip": item.isVip, 
							"shopId": this.shopId,
							"userId": uni.cache.get('userInfo').id,
						}
						if (this.shopInfo.storeInfo.eatModel.indexOf('dine-in') != -1) { params.tableId = this.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);
					if ( this.isSpec ) {
						if ( this.skuSuit > 1) {
							this.$set(this, 'amountcartNumber', 0);
						} else {
							this.$set(this, 'amountcartNumber', 1);
						}
					}
					
				} catch (e) {}
			},


			/**
			 * 商家信息显示
			 */
			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": this.shopId,
					"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);
					this.forceUpdate = !this.forceUpdate;
					setTimeout(()=>{
						uni.cache.set('forceUpdate',1);
					},300)
				}
			},

			/* 获取元素顶部信息 */
			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 = 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;
						}
					}
					/* 查找当前滚动距离 */
					if (index >= this.lastbottom) { //
						this.leftIndex = index > this.leftIndex ? index : this.leftIndex
						// this.leftIndex = this.leftIndex
					} else {
						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>


	/* 容器 */
	.container {
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		justify-content: flex-start;
		align-items: flex-start;
		align-content: flex-start;
		::v-deep .u-input  input{
			background-color: transparent;
		}
		.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 {

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

							.price {
								font-family: Source Han Sans CN, Source Han Sans CN;
								font-weight: bold;
								font-size: 36rpx;
								color: #333333;
							}

							.unit {
								font-family: Source Han Sans CN, Source Han Sans CN;
								font-weight: 400;
								font-size: 36rpx;
								color: #333333;
							}

						}
					}

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

						.sku-wrap {
							padding: 10rpx 20rpx;
							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;
							}
							.btn{
								display: flex;
								align-items: center;
								justify-content: center;
								position: relative;
								.btnClick{
									width: 100rpx;
									height: 100rpx;
									position: absolute;
									// bottom: 0;
								}
							}
						}
					}
				}
			}
		}

		.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-right: 56rpx;
						background: #EFEFEF;
						border: 2rpx solid #EFEFEF;
						position: relative;
						color: #666666;
						.shop_sku_box_item_tip{
							width: 62rpx;
							height: 47rpx;
							// background-color: #CECECE;
							text-align: right;
							position: absolute;
							top: 0;
							right: 0;
							background: linear-gradient(45deg, transparent, transparent  50%, #CECECE 50%, #CECECE 100%);		
							view{
								font-size: 18rpx;
								color: #666666;
								transform: rotate(45deg);
								position: absolute;
								top: 5rpx;
								right: 3rpx;
							}
						}
							
							
					}

					.shop_sku_box_item:nth-child(1) {
						margin-left: 0;
					}
					.disabled{
						color: #999;
						background-color: #F5F5F5;
						border: 2rpx solid #F5F5F5;
					}
					
					.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;
					}

					.btn{
						display: flex;
						align-items: center;
						justify-content: center;
						position: relative;
						.btnClick{
							width: 100rpx;
							height: 100rpx;
							position: absolute;
							// bottom: 0;
						}
					}
				}

				.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;
				}
			}
		}

		

		
		.placedOrderTip{
			width: 200rpx;
		    height: 60rpx;
		    display: flex;
		    align-items: center;
		    position: fixed;
		    justify-content: center;
		    right: 0;
		    top: 0;
		    bottom: 0;
		    margin: auto;
			z-index: 99;
		    background-color: #fff;
		    font-weight: 400;
		    font-size: 24rpx;
		    color: #333333;
		    border-radius: 40rpx 0rpx 0rpx 40rpx;
		    box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(0,0,0,0.16);
		}

	}


	.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;
						display: flex;
						align-items: flex-end;
						.money_num {
							font-size: 28rpx;
							color: #333;
							font-weight: bold;
						}
					}

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

					.sku-wrap {
						padding: 10rpx 20rpx;
						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 16rpx;
						}
						.btn{
							display: flex;
							align-items: center;
							justify-content: center;
							position: relative;
							.btnClick{
								width: 100rpx;
								height: 100rpx;
								position: absolute;
								// bottom: 0;
							}
						}
					}
				}


			}
		}
		
	}
	.lineThrough{
		font-weight: normal;
		text-decoration:line-through;
		color: #999!important;
		font-size: 24rpx!important;
	}
	.money_num.lineThrough{
	}
</style>