From 9ccd13a19cf43694730d4de6ae96d54a2c7b8a93 Mon Sep 17 00:00:00 2001
From: GaoHao <1210693421@qq.com>
Date: Fri, 2 Aug 2024 17:32:07 +0800
Subject: [PATCH] =?UTF-8?q?=E6=94=AF=E4=BB=98=E5=AF=86=E7=A0=81=E7=95=8C?=
 =?UTF-8?q?=E9=9D=A2=E6=9B=B4=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/cwx-keyboard/cwx-keyboard.vue |    2 +-
 components/payPasswordtwo.vue            |  224 ++
 pages/index/components/diamond.vue       |    3 +-
 pages/order/confirm_order.vue            |   93 +-
 pages/order_food/order_food - 副本.vue   | 1818 ---------------
 pages/order_food/order_food-s.vue        | 1404 ++++++++++++
 pages/order_food/order_food.vue          | 2680 +++++++++++++---------
 7 files changed, 3256 insertions(+), 2968 deletions(-)
 create mode 100644 components/payPasswordtwo.vue
 delete mode 100644 pages/order_food/order_food - 副本.vue
 create mode 100644 pages/order_food/order_food-s.vue

diff --git a/components/cwx-keyboard/cwx-keyboard.vue b/components/cwx-keyboard/cwx-keyboard.vue
index 5bae9ee..b30293d 100644
--- a/components/cwx-keyboard/cwx-keyboard.vue
+++ b/components/cwx-keyboard/cwx-keyboard.vue
@@ -178,7 +178,7 @@
 	}
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 	.cell_b {
 		border-right: 1px solid #DBDBDB;
 		border-bottom: 1px solid #DBDBDB;
diff --git a/components/payPasswordtwo.vue b/components/payPasswordtwo.vue
new file mode 100644
index 0000000..18b348d
--- /dev/null
+++ b/components/payPasswordtwo.vue
@@ -0,0 +1,224 @@
+<template>
+
+	<!-- ref:唯一ref  passwrdType：密码样式pay keyInfo：密码输入返回事件 -->
+	<u-popup :show="payPasswordShow" :round="20" mode="bottom" @close="payPasswordShow = false" height="500" :safeAreaInsetBottom="false">
+		<view class="pay-info-wrap">
+			<view class="info-wrap flex-between">
+				<view class="close" @click="showShopInfo = false">
+					<u-icon name="close" color="#999999" size="28"></u-icon>
+				</view>
+				<text class="title">请输入支付密码</text>
+				<view></view>
+			</view>
+			<view class="info-content">
+				<view style="margin-bottom: 128rpx;">
+					<view class="pay-title">
+						<text style="margin-top: 4rpx;">￥ </text>
+						<text>123</text>
+					</view>
+					<view class="pay-password" @click="onPayUp">
+						<view class="list">
+							<text v-show="passwordArr.length >= 1">●</text>
+						</view>
+						<view class="list">
+							<text v-show="passwordArr.length >= 2">●</text>
+						</view>
+						<view class="list">
+							<text v-show="passwordArr.length >= 3">●</text>
+						</view>
+						<view class="list">
+							<text v-show="passwordArr.length >= 4">●</text>
+						</view>
+						<view class="list">
+							<text v-show="passwordArr.length >= 5">●</text>
+						</view>
+						<view class="list">
+							<text v-show="passwordArr.length >= 6">●</text>
+						</view>
+					</view>
+					<!-- <view class="hint" @click="gopaypassword">
+						<text>忘记支付密码？</text>
+					</view> -->
+				</view>
+				<!-- ref:唯一ref  passwrdType：密码样式pay keyInfo：密码输入返回事件 -->
+				<cc-defineKeyboard ref="CodeKeyboard" passwrdType="pay" @KeyInfo="KeyInfo"></cc-defineKeyboard>
+			</view>
+		
+		</view>
+	</u-popup>
+</template>
+
+<script>
+	export default {
+		props: {
+			listinfo: {
+				type: Object,
+				default () {
+					return {
+					
+					}
+				}
+			},
+		},
+		components: {
+
+		},
+		data() {
+			return {
+				// AffirmStatus: 1,
+				payPasswordShow: true,
+				passwordArr: [],
+				oldPasswordArr: [],
+				newPasswordArr: [],
+				afPasswordArr: [],
+			};
+		},
+		onLoad() {
+
+		},
+		methods: {
+			// 忘记支付密码
+			gopaypassword() {
+				uni.pro.navigateTo('/pages/user/repairpassword')
+			},
+			/**
+			 * 唤起键盘
+			 */
+			onPayUp() {
+				this.$refs.CodeKeyboard.show();
+			},
+			/**
+			 * 支付键盘回调
+			 * @param {Object} val
+			 */
+			KeyInfo(val) {
+
+				if (val.index >= 6) {
+					return;
+				}
+				// 判断是否输入的是删除键
+				if (val.keyCode === 8) {
+					// 删除最后一位
+					this.passwordArr.splice(val.index + 1, 1)
+				}
+				// 判断是否输入的是.
+				else if (val.keyCode == 190) {
+					// 输入.无效
+				} else {
+					this.passwordArr.push(val.key);
+				}
+
+				// uni.showModal({
+				//     title: '温馨提示',
+				//     content: '输入密码是 = ' + JSON.stringify(this.passwordArr)
+				// })
+
+				// 判断是否等于6
+				if (this.passwordArr.length === 6) {
+					// this.AffirmStatus = this.AffirmStatus + 1;
+					let str = ''
+					this.passwordArr.forEach(res => {
+						str += res
+					})
+					this.$emit('accountPayevent', str)
+					this.passwordArr = [];
+				}
+				// 判断到哪一步了
+				// if (this.AffirmStatus === 1) {
+				//     this.oldPasswordArr = this.passwordArr;
+				// } else if (this.AffirmStatus === 2) {
+				//     this.newPasswordArr = this.passwordArr;
+				// } else if (this.AffirmStatus === 3) {
+				//     this.afPasswordArr = this.passwordArr;
+				// } else if (this.AffirmStatus === 4) {
+				//     console.log(this.oldPasswordArr.join(''));
+				//     console.log(this.newPasswordArr.join(''));
+				//     console.log(this.afPasswordArr.join(''));
+				//     uni.showToast({
+				//         title: '修改成功',
+				//         icon: 'none'
+				//     })
+				//     setTimeout(() => {
+				//         uni.navigateBack();
+				//     }, 2000)
+				// }
+				this.$forceUpdate();
+			}
+
+		}
+	}
+</script>
+
+<style  lang="scss">
+	.page-total{
+			position: inherit;
+		}
+	/deep/ .page-total{
+			position: inherit;
+		}
+	.pay-info-wrap{
+		
+		.info-wrap{
+			padding: 64rpx 30rpx 0 30rpx;
+			box-sizing: border-box;
+			.title{
+				align-self: center;
+				font-size: 32rpx;
+				color: #333;
+				font-weight: bold;
+			}
+		}
+		
+		.info-content{
+			.pay-title {
+				display: flex;
+				align-items: flex-end;
+				justify-content: center;
+				font-weight: bold;
+				width: 100%;
+				font-size: 48rpx;
+				color: #333;
+				margin-top: 48rpx;
+				text {
+					font-size: 60rpx;
+					color: #333;
+				}
+			}
+			
+			.pay-password {
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+				margin-top: 64rpx;
+			
+				.list {
+					width: 88rpx;
+					height: 88rpx;
+					display: flex;
+					align-items: center;
+					justify-content: center;
+					border: 2rpx solid #999;
+					border-radius: 8rpx;
+					text {
+						font-size: 32rpx;
+					}
+				}
+			
+			}
+			
+			.hint {
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				width: 100%;
+				height: 100rpx;
+			
+				text {
+					font-size: 28rpx;
+					color: #ccc;
+				}
+			}
+		}
+		
+	}
+</style>
\ No newline at end of file
diff --git a/pages/index/components/diamond.vue b/pages/index/components/diamond.vue
index afbd065..84c895b 100644
--- a/pages/index/components/diamond.vue
+++ b/pages/index/components/diamond.vue
@@ -58,8 +58,7 @@
 								let tableCode = this.getQueryString(decodeURIComponent(res.result), 'code')
 								uni.cache.set('tableCode', tableCode)
 								if (tableCode) {
-									// uni.pro.navigateTo('order_food/order_food')
-									uni.pro.navigateTo('order_food/goodsList_scroll')
+									uni.pro.navigateTo('order_food/order_food')
 								}
 							}
 						});
diff --git a/pages/order/confirm_order.vue b/pages/order/confirm_order.vue
index 1aab003..800aa24 100644
--- a/pages/order/confirm_order.vue
+++ b/pages/order/confirm_order.vue
@@ -125,17 +125,20 @@
 		</view>
 		
 		<!-- 支付密码 -->
-		<payPassword ref="payPwd" @accountPayevent="accountPayevent" v-if="ispws"></payPassword>
+		<payPasswordtwo ref="payPwd" :listinfo="listinfo" @accountPayevent="accountPayevent" v-if="ispws"></payPasswordtwo>
 	</view>
 </template>
 
 <script>
 	import navseat from '@/components/navseat.vue'
 	import webSocketUtils from '@/common/js/websocket.js'
-	import payPassword from '@/components/payPassword.vue'
+	import payPasswordtwo from '@/components/payPasswordtwo.vue'
+	// import cwxKeyboard from '@/components/cwx-keyboard/cwx-keyboard.vue'
+	
+	
 	export default {
 		components: {
-			payPassword,
+			payPasswordtwo,
 			navseat
 		},
 		data() {
@@ -149,13 +152,6 @@
 					{ title: "送餐到桌", url: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/confirmOrder/tab1.png" , url_active: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/confirmOrder/tab1_active.png"},
 					{ title: "打包外带", url: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/confirmOrder/tab2.png" , url_active: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/confirmOrder/tab2_active.png"},
 				],
-				orderList: [
-					{ name: "美式咖啡", url: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/confirmOrder/img.png", type: "热+浓郁型+2份浓郁型浓缩", num: 1, Price: 33,},
-					{ name: "美式咖啡", url: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/confirmOrder/img.png", type: "热+浓郁型+2份浓郁型浓缩", num: 1, Price: 33,},
-					{ name: "美式咖啡", url: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/confirmOrder/img.png", type: "热+浓郁型+2份浓郁型浓缩", num: 1, Price: 33,},
-					{ name: "美式咖啡", url: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/confirmOrder/img.png", type: "热+浓郁型+2份浓郁型浓缩", num: 1, Price: 33,},
-					{ name: "美式咖啡", url: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/confirmOrder/img.png", type: "热+浓郁型+2份浓郁型浓缩", num: 1, Price: 33,},
-				],
 				favorable: [
 					{ name: "优惠券", url: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/confirmOrder/coupon.png"},
 					{ name: "团购优惠", url: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/confirmOrder/groupOffer.png"},
@@ -167,6 +163,7 @@
 				order: {
 					phone: "",
 				},
+				passwordArr: [],
 				cartLists: [],
 				listinfo: {
 					details: [],
@@ -253,10 +250,8 @@
 							}, 1000)
 							break;
 						case 'addcart':
-							/*插入一条弹幕*/
-							// this.$refs.lBarrage.add(
-							// 	`${msg.reqData.nickName?msg.reqData.nickName:'微信用户'}${msg.reqData.num==-1?'取消了':'添加了'}${msg.reqData.name}(${msg.reqData.num})`
-							// );
+							this.listinfo.details = msg.data;
+							this.listinfo.payAmount = msg.amount;
 							break;
 					}
 					this.$set(this, 'cartLists', msg)
@@ -466,6 +461,7 @@
 			 */
 			async accountPayevent(pwd) {
 				this.ispws = false
+				console.log(pwd)
 				let res = await this.api.accountPay({
 					orderId: this.listinfoid,
 					memberId: this.amountVIP.id,
@@ -954,4 +950,73 @@
 			text-align: center;
 		}
 	}
+	.page-total{
+			position: inherit;
+		}
+	.pay-info-wrap{
+		padding: 0 30rpx 50rpx;
+		box-sizing: border-box;
+		.info-wrap{
+			padding: 30rpx 0;
+			box-sizing: border-box;
+			.title{
+				align-self: center;
+				font-size: 32rpx;
+				color: #333;
+				font-weight: bold;
+			}
+		}
+		
+		.info-content{
+			.pay-title {
+				display: flex;
+				align-items: flex-end;
+				justify-content: center;
+				font-weight: bold;
+				width: 100%;
+				font-size: 48rpx;
+				color: #333;
+				margin-top: 48rpx;
+				text {
+					font-size: 60rpx;
+					color: #333;
+				}
+			}
+			
+			.pay-password {
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+				margin-top: 64rpx;
+			
+				.list {
+					width: 88rpx;
+					height: 88rpx;
+					display: flex;
+					align-items: center;
+					justify-content: center;
+					border: 2rpx solid #999;
+					border-radius: 8rpx;
+					text {
+						font-size: 32rpx;
+					}
+				}
+			
+			}
+			
+			.hint {
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				width: 100%;
+				height: 100rpx;
+			
+				text {
+					font-size: 28rpx;
+					color: #ccc;
+				}
+			}
+		}
+		
+	}
 </style>
diff --git a/pages/order_food/order_food - 副本.vue b/pages/order_food/order_food - 副本.vue
deleted file mode 100644
index d9defce..0000000
--- a/pages/order_food/order_food - 副本.vue	
+++ /dev/null
@@ -1,1818 +0,0 @@
-<template>
-	<view class="container">
-		<!-- 占位符导航栏 -->
-		<!-- 顶部面板 -->
-		<view class="top--panel">
-			<navseat :opacity='opacity' :titleshow='true' :heightshow='opacity' @Topdistance='Topdistance'></navseat>
-			<!-- #ifdef MP-WEIXIN -->
-			<view v-show="isNavShow" :style="{'height':HeighT.customBar+HeighT.heightBar+'px;background-color: #fff;position: fixed;top: 0;left: 0;width: 100%;z-index: 999'}"></view>
-			<!-- #endif -->
-			<!-- 顶部面板，可添加所需要放在页面顶部的内容代码。比如banner图 -->
-			<!-- https://czg-qr-order.oss-cn-beijing.aliyuncs.com/orderfood/shuangyu1.png -->
-			<image class="panelimgbackground"
-				:src="shopInfo.storeInfo.coverImg"
-				 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="panelfiveShow"  :scroll-into-view="leftIntoView" :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>「{{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">
-					<scroll-view :scroll-y="!isFixed" :style="{ 'height':scrollHeight + 'px' }"
-						:scroll-into-view="leftIntoView" :scroll-with-animation="false">
-						<view class="item" v-for="(item,index) in shopProductList.productInfo" :key="index"
-							:class="{ 'active':index==leftIndex }" :id="'left-'+index" :data-index="index"
-							@tap="leftTap($event,index)">{{item.name}}</view>
-					</scroll-view>
-				</view>
-				<view class="main">
-					<scroll-view :scroll-y="!isFixed" :scroll-top="scrollHeight" :style="{ 'height':scrollHeight + 'px' }" @scroll="mainScroll"
-						:scroll-into-view="scrollInto" :scroll-with-animation="true">
-						<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>
-							<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" :src="`${item1.coverImg}?x-oss-process=image/resize,m_lfit,w_90,h_90`"></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">「{{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>
-					</scroll-view>
-				</view>
-			</view>
-		</view>
-		<!-- 底部面板 底部面板，可添加所需要放在页面底部的内容代码。比如购物车栏目 -->
-		<!-- <view class="bottom-panel">
-			<view style="background-color: #ffaa00;text-align: center;font-size: 28rpx;padding: 10px 0;color: #fff;">
-				<view>这里底部内容占位区域，不需要则删除</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="$u.debounce(orderdetail, 500)">
-					<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"
-			:safeAreaInsetBottom='false'>
-			<view class="shop_sku"  :style="{ 'max-height':scrollHeight + 'px' }">
-				<view class="positionabsolute">
-					<u-icon name="close-circle" @click="showShopsku = 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)"
-							:class=" item.start === index1 ?'shop_sku_box_item_selected':'' ">
-							{{item1}}
-						</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="40"></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="40"></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?'active':''" @click="addShopping(specifications,specifications.indexa,specifications.indexb,'+',specifications.tagSnap == null ? '单规格':'')">添加到购物车</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 {
-				userInfo: uni.cache.get('userInfo'), //个人信息
-				opacity: false, //是否显示
-				scrollHeight: 1000,
-				scrollTopSize: 0, //距离顶部的高度
-				fillHeight: 0, // 填充高度，用于最后一项低于滚动区域时使用
-				leftArray: [],
-				mainArray: [],
-				topArr: [],
-				leftIndex: 0,
-				scrollInto: '',
-				isFixed: true,
-				isNavShow: false,
-				heightnav: '' ,//点击获取的距离
-				showShopInfo: false,   //店铺信息弹窗是否显示
-				showShopsku: false,   //多规格弹窗是否显示
-				skuId: null,  // 多规格ID
-				cartLists: {}, //购物车
-				cartLists_count: 0,
-				shopInfo: {},  //店铺信息
-				panelfiveShow: false,
-				shopProductList: {  
-				
-				},  //商品信息
-				specifications: {    
-					
-				},  // 规格信息
-				socketTicket: null,
-				amountcartNumber: 0,
-				skuNumber: 0,
-				salePrice: '', //钱数
-				cartListsdatashow: false ,//是否显示购物车
-				showCart: false,
-			}
-		},
-		onPageScroll(e) {
-			try {
-				if (e.scrollTop <= 44) { //搜索导航栏显示影藏
-					this.isNavShow = false
-				} else {
-					this.isNavShow = true
-				}
-			} catch (e) {
-				//TODO handle the exception
-			}
-			console.log(e.scrollTop,this.scrollTopSize)
-			if (e.scrollTop >= this.scrollTopSize) { //控制大图层
-				this.isFixed = false;
-			} else {
-				this.isFixed = true;
-			}
-		},
-		computed: {
-			/* 计算左侧滚动位置定位 */
-			leftIntoView() {
-				return `left-${this.leftIndex > 20 ? (this.leftIndex-20):0}`;
-			},
-			HeighT() { //手机类型的尺寸
-				return this.$store.getters.is_BarHeight
-			},
-		},
-		onReady() {
-			setTimeout(() => {
-				uni.getSystemInfo({
-					success: (data) => {
-						this.scrollHeight = data.windowHeight
-					}
-				})
-				this.panelfiveShow = true;
-			}, 100);
-			/* 在非H5平台，nextTick回调后有概率获取到错误的元素高度，则添加200ms的延迟来减少BUG的产生 */
-
-		},
-		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() {
-			this.socketTicket.Close()
-			uni.$off('message')
-		},
-		onHide() {
-			this.socketTicket.Close()
-			uni.$off('message')
-			this.fixedtrue = true
-		},
-		onShow() {
-			if (!uni.cache.get('token')) {
-				uni.login({
-					provider: 'weixin',
-					success: async (data) => {
-						try {
-							uni.getUserInfo({
-								provider: 'weixin',
-								success: async (infoRes) => {
-									uni.cache.set('weixincode', data.code);
-									let res = await this.api.userwxlogin({
-										code: uni.cache.get('weixincode'), //临时登录凭证
-										rawData: infoRes.rawData
-									})
-									if (res.code == 0) {
-										uni.cache.set('token', res.data.token);
-										uni.cache.set('miniAppOpenId', res.data.userInfo
-											.miniAppOpenId)
-										uni.cache.set('userInfo', res.data.userInfo);
-										uni.$on('message', this.getMessage)
-										this.productqueryShop();
-									}
-								},
-								fail: (err) => {}
-							});
-						} catch (e) {}
-					}
-				});
-			} else {
-				uni.$on('message', this.getMessage)
-				this.productqueryShop();
-			}
-		},
-		methods: {
-			
-			/**
-			 * 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",
-				})
-			},
-			
-			/**
-			 * 通过桌码获取店铺信息
-			 */
-			async productqueryShop () {
-				let res = await this.api.productqueryShop({
-					code: uni.cache.get('tableCode'),
-					lng: uni.cache.get('getLocationstorage').lng,
-					lat: uni.cache.get('getLocationstorage').lat,
-				})
-				if (res.code == 0) {
-					uni.cache.set('shopUser', res.data.storeInfo.id)
-					this.handlemessage() //监听websocket返回
-					this.shopInfo = res.data;
-					this.productqueryProduct() //list  数据
-				} else {
-					setTimeout(() => {
-						uni.pro.switchTab('index/index')
-					}, 1000)
-				}
-				
-			},
-			
-			/**
-			 * 获取商品数据
-			 */
-			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()
-					}
-					setTimeout(() => {
-						this.getElementTop();
-					}, 100);
-				}
-			},
-			
-			/**
-			 * 商品数量增加/减少
-			 * @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.amountcartNumber <= 0) {
-						this.amountcartNumber = this.amountcartNumber + item.suit;
-					}else {
-						this.amountcartNumber++;
-					}
-				} else {
-					
-					if ( this.amountcartNumber > 0 ) {
-						console.log(item)
-						if ( this.amountcartNumber <= item.suit) {
-							this.amountcartNumber = this.amountcartNumber - item.suit
-						} else {
-							this.amountcartNumber = this.amountcartNumber - 1;
-						}
-					}
-				}
-			},
-			
-			/**
-			 * 添加购物车
-			 */
-			addShopping ( item, index, index1, a, b ) {
-				console.log(item)
-				if ( this.amountcartNumber <= 0 ) {
-					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.$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;
-				console.log(this.cartLists)
-				if ( this.cartLists.data.length > 0 ){
-					this.cartLists_count = 0;
-					this.cartLists.data.forEach((v,e)=>{
-						console.log(v)
-						this.cartLists_count += v.number;
-					})
-				}
-			},
-			/**
-			 * 多规格选择
-			 * @param {Object} item1
-			 * @param {Object} index
-			 * @param {Object} index1
-			 */
-			clickspecifications(item1, index, index1,type) {
-				console.log(item1)
-				this.skuidname = []
-				this.specifications = item1
-				this.specifications.indexa = index
-				this.specifications.indexb = index1
-				this.specifications.typeName = type
-				try {
-					if (item1.productSkuResult == null) {
-						// 但但单个规格弹框的处理
-						this.hodgepodge(this.specifications, 2) //获取skuid /2查找价格和数量
-					} else {
-						// 多规格数据处理
-						this.specifications.tagSnap = JSON.parse(item1.productSkuResult.tagSnap).map((item) => {
-							let res = {
-								id: item1.id, //商品id
-								name: item.name,
-								start: 0,
-								children: item.value.split(",")
-							}
-							return res
-						})
-						this.specifications.tagSnap.forEach((val, index, arr) => { //初始化skuidname的数据  选择第一个
-							this.skuidname.push(val.children[0])
-						})
-						this.hodgepodge(this.specifications.tagSnap[0], 2) //获取skuid /2查找价格和数量
-					}
-			
-				} catch (e) {
-					//TODO handle the exception
-				}
-			},
-			
-			/**
-			 * 规格选择监听
-			 * @param {Object} e
-			 * @param {Object} index
-			 * @param {Object} index1
-			 * @param {Object} item
-			 */
-			async morloe(e, index, index1, item) {
-				this.specifications.tagSnap[index]['start'] = index1
-				this.skuidname.splice(index, 1, e) //替换skuidname的数据
-				this.hodgepodge(item, 2)
-			},
-			
-			/**
-			 * 获取规格信息
-			 * @param {Object} item
-			 * @param {Object} a
-			 * @param {Object} c
-			 * @param {Object} num
-			 */
-			async hodgepodge(item, a, c, num) { //此接口去获取商品id ！！！赋值库存  数量  价格等
-				try {
-					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(",")
-					})
-					if (res.data.stockNumber == 0) {
-						uni.showToast({
-							title: '暂无库存',
-							icon: "none",
-						})
-					} else {
-						this.skuidsearch = res.data.id // 储存skuid   用于筛选数量
-						this.salePrice = res.data.salePrice // 价格
-						let data = null;
-						if (a == 1) { //1添加购物车  2是websocket返回这个商品的价格(应为不同的多规格商品返回不同的价格)
-							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;
-							this.showShopsku = true //打开弹框
-						}
-						this.$set(this, 'amountcartNumber', 0)
-					}
-				} catch (e) {}
-			},
-			
-			/**
-			 * 结算直接生成订单
-			 */
-			orderdetail() {
-				console.log(this.cartLists)
-				console.log(this.shopInfo)
-				if (this.cartLists.data.length == 0) {
-					uni.showToast({
-						title: '请先添加商品',
-						icon: 'none'
-					})
-					return false
-				}
-				uni.navigateTo({
-					url: '/pages/order/confirm_order?storeInfo=' + JSON.stringify(this.shopInfo.storeInfo)
-				});
-	
-			},
-			
-			/**
-			 * 商家信息显示
-			 */
-			showShopClick() {
-				this.showShopInfo = true;
-			},
-			
-			
-			
-			/**
-			 * 获取消息
-			 * @param {Object} msg
-			 */
-			getMessage(msg) { //wss  回显数据
-				console.log(msg.type)
-				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.skuidname = []
-								this.showCart = false
-								this.cartLists = msg
-								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);
-				}
-			},
-			
-			
-			// 导航栏高度 去计算列表页的高度
-			Topdistance(e) {
-				this.heightnav = e ////导航栏高度
-			},
-		
-			/* 获取元素顶部信息 */
-			getElementTop() {
-				new Promise((resolve, reject) => {
-					let view = uni.createSelectorQuery().selectAll('.main-item');
-					view.boundingClientRect(data => {
-						resolve(data);
-					}).exec();
-					this.$u.getRect('.scroll-panel').then(res => {
-						console.log(res)
-						this.scrollTopSize = res.top - this.heightnav; //元素距离顶部的距离
-						this.scrollHeight = this.scrollHeight - this.heightnav
-					})
-				}).then((res) => {
-					let topArr = res.map((item) => {
-						return item.top - this.scrollTopSize; /* 减去滚动容器距离顶部的距离 */
-					});
-					this.topArr = topArr;
-
-					/* 获取最后一项的高度，设置填充高度。判断和填充时做了 +-20 的操作，是为了滚动时更好的定位 */
-					let last = res[res.length - 1].height;
-					if (last - 20 < this.scrollHeight) {
-						this.fillHeight = this.scrollHeight - last + 20;
-					}
-				});
-			},
-			/* 主区域滚动监听 */
-			mainScroll(e) {
-			
-			},
-			/* 左侧导航点击 */
-			leftTap(e,index) {
-				try {
-					this.leftIndex = (index < 0 ? 0 : index);
-					if (this.isFixed) {
-						uni.pageScrollTo({
-							scrollTop: this.scrollTopSize, //滑动需要的距离  nav+列表距离的高度
-							duration: 100
-						});
-						this.isFixed = false
-					}
-
-				} catch (e) {
-					//TODO handle the exception
-				}
-	
-				setTimeout(() => {
-					let index = e.currentTarget.dataset.index;
-					this.scrollInto = `item-${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: 382rpx;
-				margin: 82rpx auto 0 auto;
-				height: 158rpx;
-			}
-
-			.panelone {
-				margin-top: 32rpx;
-				font-family: Source Han Sans CN, Source Han Sans CN;
-				font-weight: 500;
-				font-size: 32rpx;
-				color: #333333;
-			}
-
-			.paneltow {
-				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;
-
-				.paneltheretext {
-					font-family: Source Han Sans CN, Source Han Sans CN;
-					font-weight: 400;
-					font-size: 28rpx;
-					color: #999999;
-				}
-
-				.flex-start {
-					view {
-						font-family: Source Han Sans CN, Source Han Sans CN;
-						font-weight: 400;
-						font-size: 28rpx;
-						color: #999999;
-					}
-				}
-			}
-
-			.panelfour {
-				font-family: Source Han Sans CN, Source Han Sans CN;
-				font-weight: bold;
-				font-size: 32rpx;
-				color: #333333;
-			}
-
-			.panelfive {
-				width: 100%;
-				.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 {
-							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;
-
-		}
-
-		.bottom-panel {
-			padding-bottom: 0;
-			padding-bottom: constant(safe-area-inset-bottom);
-			padding-bottom: env(safe-area-inset-bottom);
-		}
-		.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: 8rpx 24rpx;
-						border-radius: 8rpx;
-						font-size: 24upx;
-						margin-left: 56rpx;
-						background: #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;
-
-			.item {
-				padding: 0 30rpx;
-				height: 92rpx;
-				line-height: 92rpx;
-				position: relative;
-				font-weight: 400;
-				font-size: 24rpx;
-				color: #333333;
-				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;
-					}
-				}
-			}
-
-			.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>
\ No newline at end of file
diff --git a/pages/order_food/order_food-s.vue b/pages/order_food/order_food-s.vue
new file mode 100644
index 0000000..195ecde
--- /dev/null
+++ b/pages/order_food/order_food-s.vue
@@ -0,0 +1,1404 @@
+<template>
+	<view id="wrapper">
+		<view v-if="fixedtrue"
+			style="height: 100vh; width: 100%; position: fixed; z-index: 999; top: 0; left: 0; background-color: #fff; display: flex; justify-content: center; align-items: center;">
+			<image style="width: 140rpx; height: 140rpx;" src="@/static/1.gif" mode="aspectFill"></image>
+			<text style="margin-left10rpx;font-size: 40rpx;color: #7d7d76;">加载中</text>
+			<!-- <u-loadmore status="loading" fontSize="50" iconSize="30"/> -->
+		</view>
+		<view class="nav-wrap" :class="{ 'is-fixed': isFixed }"
+			:style="{ paddingTop: `${menuInfo.top}px`, paddingBottom: `${paddingBtmSize}px` }">
+			<view class="content" :style="{ height: `${menuInfo.height}px`, paddingLeft: `${paddingBtmSize}px` }">
+				<view class="left-btn">
+					<view class="btn" :style="{ width: `${menuInfo.height}px`, height: `${menuInfo.height}px` }"
+						@click="navClickHandle(1)">
+						<u-icon name="arrow-left" :color="isFixed ? '#333' : '#fff'" size="28"></u-icon>
+					</view>
+					<view class="btn" :style="{ width: `${menuInfo.height}px`, height: `${menuInfo.height}px` }"
+						@click="navClickHandle(2)">
+						<u-icon name="kefu-ermai" :color="isFixed ? '#333' : '#fff'" size="28"></u-icon>
+					</view>
+				</view>
+			</view>
+		</view>
+		<view class="shop-cover" :style="{ height: `${menuInfo.top + menuInfo.height + paddingBtmSize * 8}px` }">
+			<image class="img" :src="shopList.storeInfo.coverImg" mode="aspectFill"></image>
+		</view>
+		<view class="list-container">
+			<view class="header-wrap">
+				<text class="title">
+					<text class="t">{{ shopList.storeInfo.shopName }}</text>
+				</text>
+				<view class="cover">
+					<image class="img" :src="shopList.storeInfo.logo" mode="aspectFill"></image>
+				</view>
+			</view>
+			<view class="tab-header"
+				:style="{ height: `${tabHeadHeight}px`, top: `${menuInfo.top + menuInfo.height + paddingBtmSize}px` }">
+				<view class="left">
+					<text class="t">选择</text>
+				</view>
+				<view class="right">
+					<text class="t">商家</text>
+					<text class="d">{{ shopList.shopTableInfo.name }}</text>
+				</view>
+			</view>
+			<view class="tab-content">
+				<view class="left-wrap">
+					<view class="left"
+						:style="{ top: `${menuInfo.top + menuInfo.height + paddingBtmSize + tabHeadHeight}px` }">
+						<view class="item" v-for="(item, index) in shopList.productInfo" :key="item.id"
+							:class="{ active: titleTopNumIndex == index }" @click="titleClickHandle(item.id)">
+							<text>{{ item.name }}</text>
+						</view>
+					</view>
+				</view>
+				<view class="list-wrap">
+					<view class="item-wrap" v-for="(item,index) in shopList.productInfo" :key="item.id">
+						<view class="title-wrap" :id="`title${item.id}`"></view>
+						<view class="title"
+							:style="{ top: `${menuInfo.top + menuInfo.height + paddingBtmSize + tabHeadHeight}px` }">
+							<!--  -->
+							<text>{{ item.name }}</text>
+						</view>
+						<view class="" v-if="item.products.length == 0">
+							空
+						</view>
+						<view class="shop-item" v-for="(item1,index1) in item.products" :key="item1.id">
+							<view class="cover langcover" style="width:180rpx; height: 180rpx;"
+								@click.stop="clickspecifications(item1,index,index1)">
+								<!-- <c-image style="position: absolute;z-index:2;"
+									:src="`${item1.coverImg}?x-oss-process=image/resize,m_lfit,w_90,h_90`" width="180"
+									height="180"></c-image> -->
+								<image style="position: absolute;z-index:2;width: 180rpx; height: 180rpx;"
+									:src="`${item1.coverImg}?x-oss-process=image/resize,m_lfit,w_90,h_90`"
+									:lazy-load='true'></image>
+							</view>
+							<view class="info" style="display: flex;flex-direction: column;justify-content: center;">
+								<view class="name">
+									{{ item1.name }}
+								</view>
+								<view class="namess" v-if="item1.suit>1">
+									起售：{{ item1.suit }}
+								</view>
+								<view class="price-wrap">
+									<view class="price">
+										<text class="i">￥</text>
+										<text class="num">{{ item1.lowPrice }}</text>
+										<text class="i">起</text>
+									</view>
+									<view class="sku-wrap" v-if="item1.productSkuResult != null"
+										@click.stop="clickspecifications(item1,index,index1)">
+										<text class="t">选规格</text>
+										<text class="dot num" v-if="item1.cartNumber != '0'">{{item1.cartNumber}}</text>
+									</view>
+									<view class="operation-wrap" v-else>
+										<view class="btn" v-if="item1.cartNumber != '0'"
+											@click.stop="cartadd(item1,index,index1,'-',item1.productSkuResult == null ? '单规格':'')">
+											<u-icon :name="require('@/static/icon_sub.png')" size="36"></u-icon>
+										</view>
+										<text class="num">{{ item1.cartNumber }}</text>
+										<view class="btn"
+											@click.stop="cartadd(item1,index,index1,'+',item1.productSkuResult == null ? '单规格':'')">
+											<u-icon :name="require('@/static/icon_add.png')" size="36"></u-icon>
+										</view>
+									</view>
+								</view>
+							</view>
+						</view>
+					</view>
+				</view>
+			</view>
+		</view>
+		<view class="cart-wrap" v-if="cartListsdatashow">
+			<view class="cart-content">
+				<view class="left">
+					<image class="icon" src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/drder/icon_cart.png"
+						mode="aspectFit" @click="showCart = !showCart">
+					</image>
+					<text class="i">￥</text>
+					<text class="num">{{cartLists.amount||'0.00'}}</text>
+				</view>
+				<view class="btn" @tap="$u.debounce(orderdetail, 500)">
+					<text class="t">提交订单</text>
+				</view>
+			</view>
+		</view>
+		<u-popup :show="showCart" :round="20" :zIndex="98" :overlayStyle="{ zIndex: 98 }" @close="showCart = false">
+			<view class="cart-list-wrap">
+				<view class="cart-header">
+					<view class="clear" @click="cartclear">
+						<u-icon name="trash" color="#999"></u-icon>
+						<text class="t">清空购物车</text>
+					</view>
+				</view>
+				<scroll-view scroll-y class="scroll-view">
+					<view class="list-wrap">
+						<view class="shop-item" v-for="(item,index) in cartLists.data" :key="item.id">
+							<view class="cover">
+								<c-image :src="item.coverImg" width="120" height="120"></c-image>
+							</view>
+							<view class="info">
+								<view class="name">
+									{{ item.name }}
+								</view>
+								<view class="select-sku-wrap">
+									<text class="t">{{ item.skuName }}</text>
+								</view>
+								<view class="price-wrap" style="padding-top: 0;">
+									<view class="price">
+										<text class="i">￥</text>
+										<text class="num">{{ item.salePrice }}</text>
+										<text class="i">起</text>
+									</view>
+									<view class="operation-wrap">
+										<view class="btn" v-if="item.number" @click="cartListadd(item,index,'-')">
+											<u-icon :name="require('@/static/icon_sub.png')" size="34"></u-icon>
+										</view>
+										<text class="num" v-if="item.number">{{ item.number }}</text>
+										<view class="btn" @click="cartListadd(item,index,'+')">
+											<u-icon :name="require('@/static/icon_add.png')" size="34"></u-icon>
+										</view>
+									</view>
+								</view>
+							</view>
+						</view>
+					</view>
+				</scroll-view>
+			</view>
+		</u-popup>
+		<u-popup :show="showShopInfo" :round="20" @close="showShopInfo = false">
+			<view class="shop-info-wrap">
+				<view class="info-wrap">
+					<image :src="shopList.storeInfo.coverImg" mode="aspectFill" class="img"></image>
+					<text class="t">{{ shopList.storeInfo.shopName }}</text>
+				</view>
+				<view class="row">
+					<view class="col">
+						<text class="t">{{ shopList.storeInfo.businessTime }}</text>
+					</view>
+					<view class="col" @click="makePhoneCall(shopList.storeInfo.phone)">
+						<text class="t">{{ shopList.storeInfo.phone }}</text>
+					</view>
+					<view class="col">
+						<text class="t">{{ shopList.storeInfo.address }}</text>
+					</view>
+				</view>
+				<view class="line"></view>
+				<view class="close" @click="showShopInfo = false">
+					<text class="t">关闭</text>
+				</view>
+			</view>
+		</u-popup>
+		<u-popup :show="showShopsku" :round="20" mode="center" @close="showShopsku = false"
+			:safeAreaInsetBottom='false'>
+			<view class="shop_sku">
+				<view class="positionabsolute">
+					<u-icon name="close-circle-fill" @click="showShopsku = false" color="#a3aaa3" size="60"></u-icon>
+				</view>
+				<image class="shop_skucimage" :src="specifications.coverImg" mode="widthFix"></image>
+				<view class="shop_sku_name">
+					{{specifications.name}}
+				</view>
+				<view class="shop_sku_box" v-for="(item,index) in specifications.tagSnap" :key="index"
+					v-if="specifications.tagSnap">
+					<view class="shop_sku_box_name">
+						{{item.name}}
+					</view>
+					<view class="flex-start">
+						<view class="shop_sku_box_item" v-for="(item1,index1) in item.children" :key="index1"
+							@click="morloe(item1,index,index1,item)"
+							:class=" item.start === index1 ?'shop_sku_box_item_selected':'' ">
+							{{item1}}
+						</view>
+					</view>
+				</view>
+				<view class="shop_skuselect flex-start" v-if="specifications.tagSnap">
+					已选规格：<view class="shop_skuselectname">{{skuidname.toString()}}</view>
+				</view>
+				<view class="shop_bottom flex-between">
+					<view class="price">
+						<text class="i">￥</text>
+						<text class="num">{{salePrice}}</text>
+						<text class="i">起</text>
+					</view>
+					<view class="operation-wrap">
+						<view class="btn"
+							@click="cartadd(specifications,specifications.indexa,specifications.indexb,'-',specifications.tagSnap == null ? '单规格':'')">
+							<u-icon :name="require('@/static/icon_sub.png')" size="34"></u-icon>
+						</view>
+						<text class="num">{{amountcartNumber}}</text>
+						<view class="btn"
+							@click="cartadd(specifications,specifications.indexa,specifications.indexb,'+',specifications.tagSnap == null ? '单规格':'')">
+							<u-icon :name="require('@/static/icon_add.png')" size="34"></u-icon>
+						</view>
+					</view>
+				</view>
+			</view>
+		</u-popup>
+		<l-barrage ref="lBarrage" @end="onEnd" :minTop='8' :maxTop='20' :avatar='barrageavatar'></l-barrage>
+	</view>
+</template>
+
+<script>
+	import _ from 'lodash';
+	import webSocketUtils from '@/common/js/websocket.js';
+	import orderdetail from '@/pages/order_detail/index';
+	import lBarrage from '@/components/l-barrage/l-barrage.vue'
+	export default {
+		components: {
+			orderdetail,
+			lBarrage
+		},
+		data() {
+			return {
+				userInfo: uni.cache.get('userInfo'), //个人信息
+				// #ifndef MP-WEIXIN
+				menuInfo: uni.getSystemInfo(),
+				// #endif
+				// #ifdef MP-WEIXIN
+				menuInfo: uni.getMenuButtonBoundingClientRect(),
+				// #endif
+				paddingBtmSize: 6,
+				tabHeadHeight: 50,
+				isFixed: false,
+				shopList: {}, //数据类型
+				active: 0,
+				showShopInfo: false,
+				showShopsku: false,
+				titleTopNumIndex: 0,
+				titleTopNums: [],
+				showCart: false,
+				tableCode: '', //code，
+				specifications: {},
+				skuidname: [],
+				cartLists: {}, //购物车
+				orderdetailcartLists: {}, //提交订单
+				socketTicket: null,
+				amountcartNumber: 0,
+				skuidsearch: '', //
+				salePrice: '', //钱数
+				fixedtrue: true,
+				datasocket: {}, //储存传参数据
+				radiovalue: '1', //选择支付方式
+				amountVIP: null, //余额
+				barrageavatar: '', //弹幕头像
+				cartListsdatashow: false //是否显示购物车
+			};
+		},
+		onPageScroll(e) {
+			if (e.scrollTop >= (this.menuInfo.top + this.menuInfo.height + this.paddingBtmSize) / 2) {
+				this.isFixed = true;
+				uni.setNavigationBarColor({
+					frontColor: '#000000',
+					backgroundColor: '#ffffff'
+				});
+			} else {
+				this.isFixed = false;
+				uni.setNavigationBarColor({
+					frontColor: '#ffffff',
+					backgroundColor: '#000000'
+				});
+			}
+			this.countScrollTitle(e.scrollTop);
+		},
+		onLoad(e) {
+			if (e.q) {
+				this.tableCode = this.getQueryString(decodeURIComponent(e.q), 'code')
+				uni.cache.set('tableCode', this.tableCode)
+			}
+			
+			this.$nextTick(() => {
+				this.countTitleTopNum(); //导航栏
+			});
+		},
+		onUnload() {
+			this.socketTicket.Close()
+			uni.$off('message')
+		},
+		onHide() {
+			this.socketTicket.Close()
+			uni.$off('message')
+			this.fixedtrue = true
+		},
+		onShow() {
+			if (!uni.cache.get('token')) {
+				uni.login({
+					provider: 'weixin',
+					success: async (data) => {
+						try {
+							uni.getUserInfo({
+								provider: 'weixin',
+								success: async (infoRes) => {
+									uni.cache.set('weixincode', data.code);
+									let res = await this.api.userwxlogin({
+										code: uni.cache.get('weixincode'), //临时登录凭证
+										rawData: infoRes.rawData
+									})
+									if (res.code == 0) {
+										uni.cache.set('token', res.data.token);
+										uni.cache.set('miniAppOpenId', res.data.userInfo
+											.miniAppOpenId)
+										uni.cache.set('userInfo', res.data.userInfo);
+										uni.$on('message', this.getMessage)
+										this.productqueryShopIdByTableCode() //获取shop User id
+									}
+								},
+								fail: (err) => {}
+							});
+						} catch (e) {}
+					}
+				});
+			} else {
+				uni.$on('message', this.getMessage)
+				this.productqueryShopIdByTableCode() //获取shop User id
+			}
+		},
+		methods: {
+			onEnd() { //回调弹幕
+				console.log('一波结束')
+			},
+			// 单独获取他的shopUserid
+			async productqueryShopIdByTableCode() {
+				let res = await this.api.productqueryShopIdByTableCode({
+					code: uni.cache.get('tableCode')
+				})
+				if (res.code == 0) {
+					uni.cache.set('shopUser', res.data)
+					this.handlemessage() //监听websocket返回
+					this.productqueryProduct() //list  数据
+				} else {
+					setTimeout(() => {
+						uni.pro.switchTab('index/index')
+					}, 1000)
+				}
+			},
+			getMessage(msg) { //wss  回显数据
+				if (msg == 1) { // 网络在连接
+					this.fixedtrue = true
+					return false
+				}
+				this.fixedtrue = false
+				if (msg.type == 'heartbeat') { //后台心跳  处理返回  不然控制台一直报错
+					return false
+				}
+				try {
+					if (msg.status != 'success') {
+						uni.showToast({
+							title: msg.msg,
+							icon: "none",
+						})
+						if (msg.msg == '桌码不存在') { //卓码不存在直接退出
+							this.socketTicket.Close()
+							uni.$off('message')
+							uni.navigateBack()
+							return false;
+						}
+					} else {
+						switch (msg.type) {
+							case 'sku': // sku  数量 查询这个商品的价格和数量
+								this.$set(this, 'amountcartNumber', msg.amount)
+								// this.productqueryProduct() //list  数据
+								break;
+							case 'clearCart':
+								this.cartLists = msg
+								this.productqueryProduct() //list  数据
+								this.skuidname = []
+								this.showCart = false
+								setTimeout(() => {
+									uni.showToast({
+										title: msg.msg,
+										icon: "none",
+									})
+								}, 500)
+								break;
+							case 'order':
+								this.skuidname = []
+								this.showCart = false
+								this.cartLists = msg
+								this.productqueryProduct() //list  数据
+								break;
+							case 'addCart': //初始化add
+								this.cartLists = msg
+								this.productqueryProduct() //list  数据
+								break;
+							case 'addcart':
+								this.cartLists = msg
+								// this.productqueryProduct() //list  数据
+								try {
+									if (msg.data.length != 0) {
+										let nums = 0
+										msg.data.forEach((item, index, arr) => { //初始化skuidname的数据  选择第一个
+											if (item.skuId == this.skuidsearch) {
+												nums = item.number
+											}
+										})
+										this.$set(this, 'amountcartNumber', nums)
+									} else {
+										this.$set(this, 'amountcartNumber', 0)
+									}
+								} catch (e) {
+									//TODO handle the exception
+								}
+								try {
+									this.barrageavatar = msg.reqData.headImg
+									/*插入一条弹幕*/
+									this.$refs.lBarrage.add(
+										`${msg.reqData.nickName?msg.reqData.nickName:'微信用户'}${msg.reqData.num==-1?'取消了':'添加了'}${msg.reqData.name}(${msg.reqData.num})`
+									);
+								} catch (e) {
+									//TODO handle the exception
+								}
+								try {
+									// 处理购物车相同id的情况下  数量相加
+									var summedArray = msg.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.shopList.productInfo.forEach((item) => {
+										return item.products.filter(e => {
+											return summedArray.find(i => {
+												if (e.id == i.productId) {
+													e.cartNumber = i.number
+												}
+											})
+										})
+									})
+								} catch (e) {}
+								break;
+						}
+						// 判断是否显示购物车
+						this.cartListsdatashow = this.cartLists.data.length == 0 ? false : true
+
+					}
+				} catch (e) {
+					//TODO handle the exception
+				}
+			},
+			handlemessage() {
+				this.socketTicket ? this.socketTicket.Close() : null //调用前先判断是否有socket正在进行 先关闭后链接
+				this.socketTicket = new webSocketUtils(`${uni.conf.baseUrlwws}`, 5000, {
+					tableId: uni.cache.get('tableCode'),
+					shopId: uni.cache.get('shopUser'),
+					userId: uni.cache.get('userInfo').id,
+					"type": "connect",
+				})
+			},
+			// 数据处理
+			socketSendMsg(data) {
+				if (this.socketTicket) {
+					this.socketTicket.send(data);
+				}
+			},
+			getQueryString(url, name) { //解码
+				var reg = new RegExp('(^|&|/?)' + name + '=([^&|/?]*)(&|/?|$)', 'i')
+				var r = url.substr(1).match(reg)
+				if (r != null) {
+					return r[2]
+				}
+				return null;
+			},
+			async cartadd(item, index, index1, a, b) { //列表添加 a传参加减号   b是判断单规格多规格
+				if (b == '单规格') { //没有规格为空
+					this.skuidname = []
+				}
+				this.hodgepodge(item, 1, a) //获取skuid  /1添加购物车
+			},
+			async cartListadd(item, index, a) { //购物车加减
+				try {
+					const data = { //定义socket数据传参
+						"name": item.name,
+						"skuId": item.skuId,
+						"num": a == '-' ? -1 : 1, //skuId
+						"type": "addcart", //“addcart:添加购物车，create0rder:生成订单，clearCart:清空购物车”，
+						"productId": item.productId, //商品id
+						"shopId": uni.cache.get('shopUser'),
+						"userId": uni.cache.get('userInfo').id
+					};
+					this.datasocket = data
+					uni.$u.debounce(this.socketSendMsg(data), 500)
+				} catch (e) {
+					//TODO handle the exception
+				}
+			},
+			async productqueryProduct() { //list  数据
+				let res = await this.api.productqueryProduct({
+					code: uni.cache.get('tableCode'),
+					productGroupId: ''
+				})
+				if (res.code == 0) {
+					this.shopList = res.data
+					this.$nextTick(() => {
+						this.countTitleTopNum();
+					});
+				}
+			},
+			clickspecifications(item1, index, index1) {
+				this.skuidname = []
+				this.specifications = item1
+				this.specifications.indexa = index
+				this.specifications.indexb = index1
+				try {
+					if (item1.productSkuResult == null) {
+						// 但但单个规格弹框的处理
+						this.hodgepodge(this.specifications, 2) //获取skuid /2查找价格和数量
+					} else {
+						// 多规格数据处理
+						this.specifications.tagSnap = JSON.parse(item1.productSkuResult.tagSnap).map((item) => {
+							let res = {
+								id: item1.id, //商品id
+								name: item.name,
+								start: 0,
+								children: item.value.split(",")
+							}
+							return res
+						})
+						this.specifications.tagSnap.forEach((val, index, arr) => { //初始化skuidname的数据  选择第一个
+							this.skuidname.push(val.children[0])
+						})
+						this.hodgepodge(this.specifications.tagSnap[0], 2) //获取skuid /2查找价格和数量
+					}
+
+				} catch (e) {
+					//TODO handle the exception
+				}
+			},
+			async morloe(e, index, index1, item) {
+				this.specifications.tagSnap[index]['start'] = index1
+				this.skuidname.splice(index, 1, e) //替换skuidname的数据
+				this.hodgepodge(item, 2)
+			},
+			async hodgepodge(item, a, c) { //此接口去获取商品id ！！！赋值库存  数量  价格等
+				try {
+					let res = await this.api.productqueryProductSku({
+						shopId: uni.cache.get('shopUser'),
+						productId: item.id, //商品id
+						spec_tag: this.skuidname.join(",")
+					})
+					if (res.stockNumber == 0) {
+						uni.showToast({
+							title: '暂无库存',
+							icon: "none",
+						})
+					} else {
+						this.skuidsearch = res.data.id // 储存skuid   用于筛选数量
+						this.salePrice = res.data.salePrice // 价格
+						let data = null
+						if (a == 1) { //1添加购物车  2是websocket返回这个商品的价格(应为不同的多规格商品返回不同的价格)
+							data = { //定义socket数据传参
+								"nickName": this.userInfo.nickName,
+								"barrageavatar": this.userInfo.headImg,
+								'name': item.name,
+								"skuId": res.data.id,
+								"num": c == '-' ? -1 : 1, //数量
+								"type": "addcart", //“addcart:添加购物车，create0rder:生成订单，clearCart:庆康购物车”，
+								"productId": item.id, //商品id
+								"shopId": uni.cache.get('shopUser'),
+								"userId": uni.cache.get('userInfo').id
+							};
+						} else {
+							data = { //查询这个商品的价格
+								"name": item.name,
+								"skuId": res.data.id,
+								"num": '', //数量
+								"type": "sku", //“addcart:添加购物车，create0rder:生成订单，clearCart:庆康购物车”，
+								"productId": item.id, //商品id
+								"shopId": uni.cache.get('shopUser'),
+								"userId": uni.cache.get('userInfo').id
+							};
+							this.showShopsku = true //打开弹框
+						}
+						this.datasocket = data
+						uni.$u.debounce(this.socketSendMsg(data), 500)
+					}
+				} catch (e) {}
+			},
+			orderdetail() { // 直接生成订单
+				if (this.cartLists.data.length == 0) {
+					uni.showToast({
+						title: '请先添加商品',
+						icon: 'none'
+					})
+					return false
+				}
+				uni.navigateTo({
+					url: '/pages/order/confirm_order?storeInfo=' + JSON.stringify(this.shopList.storeInfo)
+				});
+				return;
+				uni.navigateTo({
+					url: '/pages/order_detail/indexs?tableId=' + JSON.stringify(this.cartLists)
+				});
+				// let data = {
+				// 	"skuId": '',
+				// 	"num": '', //数量
+				// 	"type": "createOrder", //“addcart:添加购物车，create0rder:生成订单，clearCart:庆康购物车”，
+				// 	"couponsId": '', //优惠券ID,
+				// 	"isYhq": 0, // 是否使用优惠券（ 1： 使用， 0： 不使用）,
+				// 	"isBuyYhq": 0, // 是否购买优惠券（ 1： 购买， 0： 不够买）
+				// 	"productId": '', //商品id
+				// 	"shopId": uni.cache.get('shopUser'),
+				// 	"userId": uni.cache.get('userInfo').id,
+				// }
+				// this.datasocket = data
+				// uni.$u.debounce(this.socketSendMsg(data), 500)
+			},
+			async cartclear() { //清空购物车
+				try {
+					const data = { //定义socket数据传参
+						"skuId": '',
+						"num": '', //skuId
+						"type": "clearCart", //“addcart:添加购物车，create0rder:生成订单，clearCart:清空购物车”，
+						"productId": '', //商品id
+						"shopId": uni.cache.get('shopUser'),
+						"userId": uni.cache.get('userInfo').id
+					};
+					this.datasocket = data
+					uni.$u.debounce(this.socketSendMsg(data), 500)
+				} catch (e) {
+					//TODO handle the exception
+				}
+			},
+			// 导航栏点击
+			navClickHandle(t) {
+				switch (t) {
+					case 1:
+						// 返回
+						this.socketTicket.Close()
+						uni.switchTab({
+							url: '/pages/index/index'
+						})
+						break;
+					case 2:
+						// 显示商家信息
+						this.showShopInfo = true;
+						break;
+					default:
+						break;
+				}
+			},
+			//打电话
+			makePhoneCall(phone) {
+				uni.makePhoneCall({
+					phoneNumber: phone //仅为示例
+				});
+			},
+			// 点击菜单商品滚动到指定为止
+			titleClickHandle(id) {
+				uni.createSelectorQuery()
+					.select('#wrapper')
+					.boundingClientRect((data) => {
+						//目标节点
+						uni.createSelectorQuery()
+							.select(`#title${id}`)
+							.boundingClientRect((res) => {
+								const scrollTop = res.top - data.top;
+								const offsetNum = this.menuInfo.top + this.menuInfo.height + this
+									.paddingBtmSize +
+									this.tabHeadHeight - 1;
+								//最外层盒子节点
+								uni.pageScrollTo({
+									scrollTop: scrollTop - offsetNum
+								});
+							})
+							.exec();
+					})
+					.exec();
+			},
+			// 计算滚动到那个标题
+			countScrollTitle: _.throttle(function(top) {
+				if (this.titleTopNums.length > 1) {
+					for (let i = 0; i <= this.titleTopNums.length - 1; i++) {
+						if (top >= this.titleTopNums[i] && top < this.titleTopNums[i + 1]) {
+							this.titleTopNumIndex = i;
+						}
+					}
+					if (top >= this.titleTopNums[this.titleTopNums.length - 1]) {
+						this.titleTopNumIndex = this.titleTopNums.length - 1;
+					}
+				}
+			}, 100),
+			// 统计每个标题到顶部的距离
+			countTitleTopNum() {
+				let topNums = [];
+				for (let i of this.shopList.productInfo) {
+					uni.createSelectorQuery()
+						.select(`#title${i.id}`)
+						.boundingClientRect((res) => {
+							topNums.push(res.top + this.menuInfo.top + this.menuInfo.height + this
+								.paddingBtmSize -
+								this.tabHeadHeight - this.tabHeadHeight / 2);
+						})
+						.exec();
+				}
+				this.titleTopNums = topNums;
+			},
+		}
+	};
+</script>
+
+<style scoped lang="scss">
+	$bg: #fafafa;
+	$tabLeft: 200upx;
+	$itemH: 100upx;
+	$cartH: 90upx;
+
+	.nav-wrap {
+		width: 100%;
+		position: fixed;
+		top: 0;
+		left: 0;
+		z-index: 97;
+
+		&.is-fixed {
+			background-color: #fff;
+		}
+
+		.content {
+			.left-btn {
+				display: flex;
+
+				.btn {
+					display: flex;
+					align-items: center;
+					justify-content: center;
+					// margin-right: $paddingSize;
+				}
+			}
+		}
+	}
+
+	.shop-cover {
+		position: relative;
+
+		&::after {
+			content: '';
+			width: 100%;
+			height: 100%;
+			position: absolute;
+			top: 0;
+			left: 0;
+			z-index: 2;
+			background-color: rgba(0, 0, 0, 0.3);
+		}
+
+		.img {
+			width: 100%;
+			height: 100%;
+			position: relative;
+			z-index: 1;
+		}
+	}
+
+	.list-container {
+		background-color: #fff;
+		border-radius: 20upx;
+		position: relative;
+		z-index: 96;
+		margin-top: -40upx;
+
+		.header-wrap {
+			$h: 120upx;
+			height: $h;
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			padding: 0 $paddingSize;
+
+			.title {
+				font-weight: bold;
+
+				.t {
+					font-size: 42upx;
+				}
+			}
+
+			.cover {
+				width: $h;
+				height: $h;
+				margin-top: -40upx;
+				background: #999;
+				position: relative;
+
+				.img {
+					width: 100%;
+					height: 100%;
+					border-radius: 12upx;
+				}
+			}
+		}
+
+		.tab-header {
+			display: flex;
+			align-items: center;
+			background-color: $bg;
+			position: sticky;
+			z-index: 999;
+
+			.t {
+				font-size: 32upx;
+			}
+
+			.left {
+				width: $tabLeft;
+				display: flex;
+				padding-left: $paddingSize;
+
+				.t {
+					font-weight: bold;
+				}
+			}
+
+			.right {
+				flex: 1;
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+				padding: 0 $paddingSize;
+
+				.d {
+					padding: 12upx 16upx;
+					background-color: #faf2b6;
+					border-radius: 12upx;
+				}
+			}
+		}
+
+		.tab-content {
+			display: flex;
+			position: relative;
+
+			.left-wrap {
+				width: $tabLeft;
+				background-color: $bg;
+				padding: 0 0 $paddingSize * 3 + $cartH 0;
+
+				.left {
+					width: $tabLeft;
+					position: sticky;
+
+					.item {
+						height: $itemH;
+						display: flex;
+						align-items: center;
+						padding: 0 $paddingSize;
+						justify-content: center;
+
+						&.active {
+							background-color: #fff;
+							font-weight: bold;
+						}
+					}
+				}
+			}
+
+			.list-wrap {
+				flex: 1;
+				padding-left: $paddingSize;
+				padding-bottom: $paddingSize * 3 + $cartH;
+
+				.item-wrap {
+					.title {
+						height: $itemH;
+						display: flex;
+						align-items: center;
+						position: sticky;
+						z-index: 10;
+						background-color: #fff;
+					}
+				}
+			}
+		}
+	}
+
+	.shop-item {
+		display: flex;
+		padding-bottom: $paddingSize;
+
+		.langcover {
+			position: relative;
+		}
+
+		.langcover::after {
+			content: '加载中..';
+			position: absolute;
+			top: 0;
+			left: 0;
+			height: 100%;
+			width: 100%;
+			background-color: #e8e8e8;
+			color: #6b6b6b;
+			border-radius: 10rpx;
+			text-align: center;
+			line-height: 180rpx;
+			z-index: 1;
+		}
+
+		.info {
+			flex: 1;
+			padding-left: 20upx;
+			padding-right: $paddingSize;
+
+			.name {
+				font-size: 28upx;
+				font-weight: bold;
+			}
+
+			.namess {
+				margin-top: 16rpx;
+				font-size: 24upx;
+				font-weight: 300;
+				color: #a5a5a5;
+			}
+
+			.select-sku-wrap {
+				.t {
+					color: #999;
+					font-size: 24upx;
+				}
+			}
+
+			.price-wrap {
+				margin-top: 16rpx;
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+
+				.price {
+					display: flex;
+					align-items: flex-end;
+
+					.i {
+						font-size: 20upx;
+						color: $numColor;
+						position: relative;
+						bottom: 4upx;
+						font-weight: bold;
+					}
+
+					.num {
+						font-size: 42upx;
+						color: $numColor;
+						position: relative;
+						top: 6upx;
+						padding: 0 4upx;
+					}
+				}
+
+				.sku-wrap {
+					padding: 6upx 16upx;
+					background-color: $color-priamry;
+					border-radius: 12upx;
+					display: flex;
+					align-items: center;
+					justify-content: center;
+					position: relative;
+
+					.t {
+						font-size: 24upx;
+						font-weight: bold;
+					}
+
+					.dot {
+						display: flex;
+						align-items: center;
+						justify-content: center;
+						font-size: 20upx;
+						position: absolute;
+						padding: 2upx 12upx;
+						border-radius: 8upx;
+						background-color: $numColor;
+						color: #fff;
+						position: absolute;
+						top: -14upx;
+						right: -8upx;
+					}
+				}
+
+				.operation-wrap {
+					display: flex;
+					align-items: center;
+
+					.num {
+						font-size: 32upx;
+						padding: 0 16upx;
+					}
+
+					.btn {
+						position: relative;
+						padding: 6upx 10upx;
+						background-color: $color-priamry;
+						border-radius: 12upx;
+						display: flex;
+						align-items: center;
+						justify-content: center;
+
+						&::after {
+							content: "";
+							position: absolute;
+							left: -10px;
+							top: -10px;
+							right: -10px;
+							bottom: -10px;
+
+						}
+					}
+				}
+			}
+		}
+	}
+
+	.cart-wrap {
+		width: 100%;
+		padding: $paddingSize;
+		position: fixed;
+		bottom: $paddingSize;
+		left: 0;
+		z-index: 99;
+
+		.cart-content {
+			display: flex;
+			height: $cartH;
+			border-radius: $cartH;
+
+			.left {
+				flex: 1;
+				display: flex;
+				align-items: center;
+				background-color: #111;
+				padding-left: 120upx;
+				position: relative;
+				border-radius: $cartH 0 0 $cartH;
+
+				.icon {
+					width: 80upx;
+					height: 120upx;
+					position: absolute;
+					left: $paddingSize;
+					bottom: 20upx;
+				}
+
+				.i,
+				.num {
+					color: #fff;
+				}
+
+				.i {
+					font-size: 20upx;
+					position: relative;
+					top: 4upx;
+				}
+
+				.num {
+					font-size: 42upx;
+				}
+			}
+
+			.btn {
+				width: 200upx;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				font-weight: bold;
+				background: $linear-color-priamry;
+				border-radius: 0 $cartH $cartH 0;
+			}
+		}
+	}
+
+	.cart-list-wrap {
+		.cart-header {
+			display: flex;
+			justify-content: space-between;
+			background-color: #f4eddf;
+			padding: 20upx $paddingSize;
+			border-radius: 20upx 20upx 0 0;
+
+			.clear {
+				display: flex;
+				align-items: center;
+
+				.t {
+					font-size: 24upx;
+					color: #999;
+					margin-left: 4upx;
+				}
+			}
+		}
+
+		.scroll-view {
+			max-height: 50vh;
+		}
+
+		.list-wrap {
+			padding: $paddingSize 0 $paddingSize * 2 + $cartH $paddingSize;
+		}
+	}
+
+	.shop_sku {
+		position: relative;
+		width: 700rpx;
+		border-radius: 20rpx;
+		background: #fff;
+
+		.positionabsolute {
+			position: absolute;
+			top: 10rpx;
+			left: 10rpx;
+		}
+
+		.shop_skucimage {
+			width: 100%;
+			height: 440rpx;
+			border-radius: 20rpx 20rpx 0 0;
+		}
+
+		.shop_sku_name {
+			padding: 0 $paddingSize;
+			margin-top: 20rpx;
+			font-weight: bold;
+			font-size: 32upx;
+		}
+
+		.shop_sku_box {
+			padding: 0 $paddingSize;
+
+			.shop_sku_box_name {
+				margin-top: 20rpx;
+				font-weight: 500;
+				font-size: 28upx;
+				color: #999;
+			}
+
+			.flex-start {
+				.shop_sku_box_item {
+					margin-top: 16rpx;
+					padding: 8rpx 24rpx;
+					border-radius: 24rpx;
+					font-size: 24upx;
+					margin-left: 16rpx;
+					background: #fbe3e3;
+				}
+
+				.shop_sku_box_item:nth-child(1) {
+					margin-left: 0;
+				}
+
+				.shop_sku_box_item_noselected {
+					color: #000;
+				}
+
+				.shop_sku_box_item_selected {
+					border: 1rpx solid red;
+					color: red;
+				}
+			}
+
+		}
+
+		.shop_skuselect {
+			padding: 10rpx $paddingSize;
+			margin-top: 28rpx;
+			width: 100%;
+			background: #f7f7f7;
+			color: #ada7a7;
+			font-size: 24upx;
+
+			.shop_skuselectname {
+				color: #000;
+				font-size: 26upx;
+			}
+		}
+
+		.shop_bottom {
+			box-sizing: border-box;
+			padding: 10rpx $paddingSize;
+			margin: 28rpx 0;
+
+			.price {
+				display: flex;
+				align-items: flex-end;
+
+				.i {
+					font-size: 20upx;
+					color: $numColor;
+					position: relative;
+					bottom: 4upx;
+					font-weight: bold;
+				}
+
+				.num {
+					font-size: 42upx;
+					color: $numColor;
+					position: relative;
+					top: 6upx;
+					padding: 0 4upx;
+				}
+			}
+
+			.operation-wrap {
+				display: flex;
+				align-items: center;
+
+				.num {
+					font-size: 32upx;
+					padding: 0 16upx;
+				}
+
+				.btn {
+					position: relative;
+					padding: 16upx 20upx;
+					background-color: $color-priamry;
+					border-radius: 12upx;
+					display: flex;
+					align-items: center;
+					justify-content: center;
+
+					&::after {
+						content: "";
+						position: absolute;
+						left: -10px;
+						top: -10px;
+						right: -10px;
+						bottom: -10px;
+
+					}
+				}
+			}
+		}
+	}
+
+
+	.classorderdetailshow {
+		position: relative;
+
+		.orderdetailuicon {
+			position: absolute;
+			top: 10rpx;
+			left: 10rpx;
+		}
+
+		.payType {
+			padding: 32rpx 34rpx;
+			margin-top: 48rpx;
+			background-color: #fff;
+
+			>view:first-child {
+				font-weight: 500;
+				font-size: 28rpx;
+				color: #333333;
+			}
+
+			>view:last-child {
+				margin-top: 32rpx;
+			}
+
+			.dfs {
+				display: flex;
+				align-items: center;
+			}
+
+		}
+
+		.fixedview {
+			position: relative;
+			width: 100%;
+
+			.flex-between {
+				width: 100%;
+				padding: 24rpx 28rpx;
+				background: #FFFFFF;
+				flex-wrap: nowrap;
+
+				.fixedview_one {
+					.fixedview_oneone {
+						font-size: 28rpx;
+						font-family: SourceHanSansCN-Bold-, SourceHanSansCN-Bold;
+						font-weight: normal;
+						color: #333333;
+					}
+
+					.fixedview_onetow {
+						font-size: 44rpx;
+						font-family: SourceHanSansCN-Bold-, SourceHanSansCN-Bold;
+						font-weight: normal;
+						color: #F45C4C;
+						font-weight: bold;
+
+						text {
+							font-size: 28rpx;
+						}
+					}
+
+					.fixedview_onethere {
+						font-family: Source Han Sans CN, Source Han Sans CN;
+						font-weight: 400;
+						font-size: 24rpx;
+						color: #999999;
+					}
+				}
+
+				.fixedview_tow {
+					background: red;
+					border-radius: 34rpx;
+					padding: 10rpx 44rpx;
+					font-size: 32rpx;
+					font-family: PingFang SC-Bold, PingFang SC;
+					font-weight: bold;
+					color: #FFFFFF;
+				}
+			}
+		}
+	}
+
+	.shop-info-wrap {
+		.info-wrap {
+			padding: $paddingSize * 2 0;
+			display: flex;
+			align-items: center;
+			flex-direction: column;
+			border-bottom: 1upx solid #f2f2f2;
+
+			.img {
+				width: 100upx;
+				height: 100upx;
+				border-radius: 12upx;
+			}
+
+			.t {
+				font-size: 32upx;
+				padding-top: 8upx;
+			}
+		}
+
+		.row {
+			padding: 0 $paddingSize $paddingSize;
+
+			.col {
+				padding-top: $paddingSize;
+
+				.t {
+					color: #999;
+				}
+			}
+		}
+
+		.line {
+			height: 12upx;
+			background-color: #f2f2f2;
+		}
+
+		.close {
+			padding: $paddingSize 0;
+			display: flex;
+			justify-content: center;
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/pages/order_food/order_food.vue b/pages/order_food/order_food.vue
index 195ecde..d9defce 100644
--- a/pages/order_food/order_food.vue
+++ b/pages/order_food/order_food.vue
@@ -1,135 +1,178 @@
 <template>
-	<view id="wrapper">
-		<view v-if="fixedtrue"
-			style="height: 100vh; width: 100%; position: fixed; z-index: 999; top: 0; left: 0; background-color: #fff; display: flex; justify-content: center; align-items: center;">
-			<image style="width: 140rpx; height: 140rpx;" src="@/static/1.gif" mode="aspectFill"></image>
-			<text style="margin-left10rpx;font-size: 40rpx;color: #7d7d76;">加载中</text>
-			<!-- <u-loadmore status="loading" fontSize="50" iconSize="30"/> -->
-		</view>
-		<view class="nav-wrap" :class="{ 'is-fixed': isFixed }"
-			:style="{ paddingTop: `${menuInfo.top}px`, paddingBottom: `${paddingBtmSize}px` }">
-			<view class="content" :style="{ height: `${menuInfo.height}px`, paddingLeft: `${paddingBtmSize}px` }">
-				<view class="left-btn">
-					<view class="btn" :style="{ width: `${menuInfo.height}px`, height: `${menuInfo.height}px` }"
-						@click="navClickHandle(1)">
-						<u-icon name="arrow-left" :color="isFixed ? '#333' : '#fff'" size="28"></u-icon>
-					</view>
-					<view class="btn" :style="{ width: `${menuInfo.height}px`, height: `${menuInfo.height}px` }"
-						@click="navClickHandle(2)">
-						<u-icon name="kefu-ermai" :color="isFixed ? '#333' : '#fff'" size="28"></u-icon>
-					</view>
+	<view class="container">
+		<!-- 占位符导航栏 -->
+		<!-- 顶部面板 -->
+		<view class="top--panel">
+			<navseat :opacity='opacity' :titleshow='true' :heightshow='opacity' @Topdistance='Topdistance'></navseat>
+			<!-- #ifdef MP-WEIXIN -->
+			<view v-show="isNavShow" :style="{'height':HeighT.customBar+HeighT.heightBar+'px;background-color: #fff;position: fixed;top: 0;left: 0;width: 100%;z-index: 999'}"></view>
+			<!-- #endif -->
+			<!-- 顶部面板，可添加所需要放在页面顶部的内容代码。比如banner图 -->
+			<!-- https://czg-qr-order.oss-cn-beijing.aliyuncs.com/orderfood/shuangyu1.png -->
+			<image class="panelimgbackground"
+				:src="shopInfo.storeInfo.coverImg"
+				 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>
-		<view class="shop-cover" :style="{ height: `${menuInfo.top + menuInfo.height + paddingBtmSize * 8}px` }">
-			<image class="img" :src="shopList.storeInfo.coverImg" mode="aspectFill"></image>
-		</view>
-		<view class="list-container">
-			<view class="header-wrap">
-				<text class="title">
-					<text class="t">{{ shopList.storeInfo.shopName }}</text>
-				</text>
-				<view class="cover">
-					<image class="img" :src="shopList.storeInfo.logo" mode="aspectFill"></image>
-				</view>
+			<view class="panelfour" v-if="shopProductList.hots && shopProductList.hots.length > 0">
+				本店招牌菜
 			</view>
-			<view class="tab-header"
-				:style="{ height: `${tabHeadHeight}px`, top: `${menuInfo.top + menuInfo.height + paddingBtmSize}px` }">
+			<view class="panelfive">
+				<scroll-view :scroll-x="panelfiveShow"  :scroll-into-view="leftIntoView" :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>「{{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">
-					<text class="t">选择</text>
+					<scroll-view :scroll-y="!isFixed" :style="{ 'height':scrollHeight + 'px' }"
+						:scroll-into-view="leftIntoView" :scroll-with-animation="false">
+						<view class="item" v-for="(item,index) in shopProductList.productInfo" :key="index"
+							:class="{ 'active':index==leftIndex }" :id="'left-'+index" :data-index="index"
+							@tap="leftTap($event,index)">{{item.name}}</view>
+					</scroll-view>
 				</view>
-				<view class="right">
-					<text class="t">商家</text>
-					<text class="d">{{ shopList.shopTableInfo.name }}</text>
-				</view>
-			</view>
-			<view class="tab-content">
-				<view class="left-wrap">
-					<view class="left"
-						:style="{ top: `${menuInfo.top + menuInfo.height + paddingBtmSize + tabHeadHeight}px` }">
-						<view class="item" v-for="(item, index) in shopList.productInfo" :key="item.id"
-							:class="{ active: titleTopNumIndex == index }" @click="titleClickHandle(item.id)">
-							<text>{{ item.name }}</text>
-						</view>
-					</view>
-				</view>
-				<view class="list-wrap">
-					<view class="item-wrap" v-for="(item,index) in shopList.productInfo" :key="item.id">
-						<view class="title-wrap" :id="`title${item.id}`"></view>
-						<view class="title"
-							:style="{ top: `${menuInfo.top + menuInfo.height + paddingBtmSize + tabHeadHeight}px` }">
-							<!--  -->
-							<text>{{ item.name }}</text>
-						</view>
-						<view class="" v-if="item.products.length == 0">
-							空
-						</view>
-						<view class="shop-item" v-for="(item1,index1) in item.products" :key="item1.id">
-							<view class="cover langcover" style="width:180rpx; height: 180rpx;"
-								@click.stop="clickspecifications(item1,index,index1)">
-								<!-- <c-image style="position: absolute;z-index:2;"
-									:src="`${item1.coverImg}?x-oss-process=image/resize,m_lfit,w_90,h_90`" width="180"
-									height="180"></c-image> -->
-								<image style="position: absolute;z-index:2;width: 180rpx; height: 180rpx;"
-									:src="`${item1.coverImg}?x-oss-process=image/resize,m_lfit,w_90,h_90`"
-									:lazy-load='true'></image>
+				<view class="main">
+					<scroll-view :scroll-y="!isFixed" :scroll-top="scrollHeight" :style="{ 'height':scrollHeight + 'px' }" @scroll="mainScroll"
+						:scroll-into-view="scrollInto" :scroll-with-animation="true">
+						<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>
-							<view class="info" style="display: flex;flex-direction: column;justify-content: center;">
-								<view class="name">
-									{{ item1.name }}
-								</view>
-								<view class="namess" v-if="item1.suit>1">
-									起售：{{ item1.suit }}
-								</view>
-								<view class="price-wrap">
-									<view class="price">
-										<text class="i">￥</text>
-										<text class="num">{{ item1.lowPrice }}</text>
-										<text class="i">起</text>
-									</view>
-									<view class="sku-wrap" v-if="item1.productSkuResult != null"
-										@click.stop="clickspecifications(item1,index,index1)">
-										<text class="t">选规格</text>
-										<text class="dot num" v-if="item1.cartNumber != '0'">{{item1.cartNumber}}</text>
-									</view>
-									<view class="operation-wrap" v-else>
-										<view class="btn" v-if="item1.cartNumber != '0'"
-											@click.stop="cartadd(item1,index,index1,'-',item1.productSkuResult == null ? '单规格':'')">
-											<u-icon :name="require('@/static/icon_sub.png')" size="36"></u-icon>
+							<view 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" :src="`${item1.coverImg}?x-oss-process=image/resize,m_lfit,w_90,h_90`"></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">「{{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>
-										<text class="num">{{ item1.cartNumber }}</text>
-										<view class="btn"
-											@click.stop="cartadd(item1,index,index1,'+',item1.productSkuResult == null ? '单规格':'')">
-											<u-icon :name="require('@/static/icon_add.png')" size="36"></u-icon>
+									</view>
+									
+									<view 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>
+						<view class="fill-last" :style="{ 'height':fillHeight + 'px' }"></view>
+					</scroll-view>
 				</view>
 			</view>
 		</view>
+		<!-- 底部面板 底部面板，可添加所需要放在页面底部的内容代码。比如购物车栏目 -->
+		<!-- <view class="bottom-panel">
+			<view style="background-color: #ffaa00;text-align: center;font-size: 28rpx;padding: 10px 0;color: #fff;">
+				<view>这里底部内容占位区域，不需要则删除</view>
+				<view>可添加需放在页面底部的内容，比如购物车栏目</view>
+			</view>
+		</view> -->
+		
+		<!-- 购物车悬浮条 -->
 		<view class="cart-wrap" v-if="cartListsdatashow">
 			<view class="cart-content">
 				<view class="left">
-					<image class="icon" src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/drder/icon_cart.png"
-						mode="aspectFit" @click="showCart = !showCart">
-					</image>
+					<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="$u.debounce(orderdetail, 500)">
-					<text class="t">提交订单</text>
+					<text class="t">去结算</text>
 				</view>
 			</view>
 		</view>
-		<u-popup :show="showCart" :round="20" :zIndex="98" :overlayStyle="{ zIndex: 98 }" @close="showCart = false">
+		
+		<!-- 购物车 -->
+		<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">
+				<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>
+						<text class="t">清空</text>
 					</view>
 				</view>
 				<scroll-view scroll-y class="scroll-view">
@@ -139,25 +182,21 @@
 								<c-image :src="item.coverImg" width="120" height="120"></c-image>
 							</view>
 							<view class="info">
-								<view class="name">
-									{{ item.name }}
-								</view>
-								<view class="select-sku-wrap">
-									<text class="t">{{ item.skuName }}</text>
-								</view>
+								<view class="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>
-										<text class="i">起</text>
 									</view>
 									<view class="operation-wrap">
 										<view class="btn" v-if="item.number" @click="cartListadd(item,index,'-')">
-											<u-icon :name="require('@/static/icon_sub.png')" size="34"></u-icon>
+											<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="require('@/static/icon_add.png')" size="34"></u-icon>
+											<u-icon name="plus-circle-fill" color="#E9AB7A" size="50"></u-icon>
 										</view>
 									</view>
 								</view>
@@ -167,39 +206,57 @@
 				</scroll-view>
 			</view>
 		</u-popup>
-		<u-popup :show="showShopInfo" :round="20" @close="showShopInfo = false">
+		
+		
+		<!-- 店铺详情 -->
+		<u-popup :show="showShopInfo" :round="20" mode="bottom" @close="showShopInfo = false" height="500" >
 			<view class="shop-info-wrap">
-				<view class="info-wrap">
-					<image :src="shopList.storeInfo.coverImg" mode="aspectFill" class="img"></image>
-					<text class="t">{{ shopList.storeInfo.shopName }}</text>
+				<view 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="t">{{ shopList.storeInfo.businessTime }}</text>
-					</view>
-					<view class="col" @click="makePhoneCall(shopList.storeInfo.phone)">
-						<text class="t">{{ shopList.storeInfo.phone }}</text>
-					</view>
-					<view class="col">
-						<text class="t">{{ shopList.storeInfo.address }}</text>
+						<text class="l">公告：</text>
+						<text class="t">{{ shopInfo.storeInfo.detail }}</text>
 					</view>
 				</view>
-				<view class="line"></view>
-				<view class="close" @click="showShopInfo = false">
-					<text class="t">关闭</text>
-				</view>
+			
 			</view>
 		</u-popup>
-		<u-popup :show="showShopsku" :round="20" mode="center" @close="showShopsku = false"
+		
+		
+		<!-- 规格 -->
+		<u-popup :show="showShopsku" :round="20" mode="bottom" @close="showShopsku = false"
 			:safeAreaInsetBottom='false'>
-			<view class="shop_sku">
+			<view class="shop_sku"  :style="{ 'max-height':scrollHeight + 'px' }">
 				<view class="positionabsolute">
-					<u-icon name="close-circle-fill" @click="showShopsku = false" color="#a3aaa3" size="60"></u-icon>
-				</view>
-				<image class="shop_skucimage" :src="specifications.coverImg" mode="widthFix"></image>
-				<view class="shop_sku_name">
-					{{specifications.name}}
+					<u-icon name="close-circle" @click="showShopsku = 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">
@@ -213,104 +270,126 @@
 						</view>
 					</view>
 				</view>
-				<view class="shop_skuselect flex-start" v-if="specifications.tagSnap">
-					已选规格：<view class="shop_skuselectname">{{skuidname.toString()}}</view>
-				</view>
-				<view class="shop_bottom flex-between">
-					<view class="price">
-						<text class="i">￥</text>
-						<text class="num">{{salePrice}}</text>
-						<text class="i">起</text>
-					</view>
-					<view class="operation-wrap">
-						<view class="btn"
-							@click="cartadd(specifications,specifications.indexa,specifications.indexb,'-',specifications.tagSnap == null ? '单规格':'')">
-							<u-icon :name="require('@/static/icon_sub.png')" size="34"></u-icon>
+			
+				
+				<view class="shop_bottom ">
+					<view class="flex-between">
+						<view class="price">
+							<text class="i">￥</text>
+							<text class="num">{{salePrice}}</text>
+							<text class="i">/杯</text>
 						</view>
-						<text class="num">{{amountcartNumber}}</text>
-						<view class="btn"
-							@click="cartadd(specifications,specifications.indexa,specifications.indexb,'+',specifications.tagSnap == null ? '单规格':'')">
-							<u-icon :name="require('@/static/icon_add.png')" size="34"></u-icon>
+						<view 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="40"></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="40"></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?'active':''" @click="addShopping(specifications,specifications.indexa,specifications.indexb,'+',specifications.tagSnap == null ? '单规格':'')">添加到购物车</view>
 				</view>
 			</view>
 		</u-popup>
-		<l-barrage ref="lBarrage" @end="onEnd" :minTop='8' :maxTop='20' :avatar='barrageavatar'></l-barrage>
 	</view>
-</template>
 
+</template>
 <script>
-	import _ from 'lodash';
+	import navseat from '@/components/navseat.vue' 
 	import webSocketUtils from '@/common/js/websocket.js';
-	import orderdetail from '@/pages/order_detail/index';
-	import lBarrage from '@/components/l-barrage/l-barrage.vue'
 	export default {
 		components: {
-			orderdetail,
-			lBarrage
+			navseat
 		},
 		data() {
 			return {
 				userInfo: uni.cache.get('userInfo'), //个人信息
-				// #ifndef MP-WEIXIN
-				menuInfo: uni.getSystemInfo(),
-				// #endif
-				// #ifdef MP-WEIXIN
-				menuInfo: uni.getMenuButtonBoundingClientRect(),
-				// #endif
-				paddingBtmSize: 6,
-				tabHeadHeight: 50,
-				isFixed: false,
-				shopList: {}, //数据类型
-				active: 0,
-				showShopInfo: false,
-				showShopsku: false,
-				titleTopNumIndex: 0,
-				titleTopNums: [],
-				showCart: false,
-				tableCode: '', //code，
-				specifications: {},
-				skuidname: [],
+				opacity: false, //是否显示
+				scrollHeight: 1000,
+				scrollTopSize: 0, //距离顶部的高度
+				fillHeight: 0, // 填充高度，用于最后一项低于滚动区域时使用
+				leftArray: [],
+				mainArray: [],
+				topArr: [],
+				leftIndex: 0,
+				scrollInto: '',
+				isFixed: true,
+				isNavShow: false,
+				heightnav: '' ,//点击获取的距离
+				showShopInfo: false,   //店铺信息弹窗是否显示
+				showShopsku: false,   //多规格弹窗是否显示
+				skuId: null,  // 多规格ID
 				cartLists: {}, //购物车
-				orderdetailcartLists: {}, //提交订单
+				cartLists_count: 0,
+				shopInfo: {},  //店铺信息
+				panelfiveShow: false,
+				shopProductList: {  
+				
+				},  //商品信息
+				specifications: {    
+					
+				},  // 规格信息
 				socketTicket: null,
 				amountcartNumber: 0,
-				skuidsearch: '', //
+				skuNumber: 0,
 				salePrice: '', //钱数
-				fixedtrue: true,
-				datasocket: {}, //储存传参数据
-				radiovalue: '1', //选择支付方式
-				amountVIP: null, //余额
-				barrageavatar: '', //弹幕头像
-				cartListsdatashow: false //是否显示购物车
-			};
+				cartListsdatashow: false ,//是否显示购物车
+				showCart: false,
+			}
 		},
 		onPageScroll(e) {
-			if (e.scrollTop >= (this.menuInfo.top + this.menuInfo.height + this.paddingBtmSize) / 2) {
-				this.isFixed = true;
-				uni.setNavigationBarColor({
-					frontColor: '#000000',
-					backgroundColor: '#ffffff'
-				});
-			} else {
-				this.isFixed = false;
-				uni.setNavigationBarColor({
-					frontColor: '#ffffff',
-					backgroundColor: '#000000'
-				});
+			try {
+				if (e.scrollTop <= 44) { //搜索导航栏显示影藏
+					this.isNavShow = false
+				} else {
+					this.isNavShow = true
+				}
+			} catch (e) {
+				//TODO handle the exception
 			}
-			this.countScrollTitle(e.scrollTop);
+			console.log(e.scrollTop,this.scrollTopSize)
+			if (e.scrollTop >= this.scrollTopSize) { //控制大图层
+				this.isFixed = false;
+			} else {
+				this.isFixed = true;
+			}
+		},
+		computed: {
+			/* 计算左侧滚动位置定位 */
+			leftIntoView() {
+				return `left-${this.leftIndex > 20 ? (this.leftIndex-20):0}`;
+			},
+			HeighT() { //手机类型的尺寸
+				return this.$store.getters.is_BarHeight
+			},
+		},
+		onReady() {
+			setTimeout(() => {
+				uni.getSystemInfo({
+					success: (data) => {
+						this.scrollHeight = data.windowHeight
+					}
+				})
+				this.panelfiveShow = true;
+			}, 100);
+			/* 在非H5平台，nextTick回调后有概率获取到错误的元素高度，则添加200ms的延迟来减少BUG的产生 */
+
 		},
 		onLoad(e) {
 			if (e.q) {
 				this.tableCode = this.getQueryString(decodeURIComponent(e.q), 'code')
 				uni.cache.set('tableCode', this.tableCode)
 			}
+			uni.cache.set('types', 'types');
 			
-			this.$nextTick(() => {
-				this.countTitleTopNum(); //导航栏
-			});
 		},
 		onUnload() {
 			this.socketTicket.Close()
@@ -341,7 +420,7 @@
 											.miniAppOpenId)
 										uni.cache.set('userInfo', res.data.userInfo);
 										uni.$on('message', this.getMessage)
-										this.productqueryShopIdByTableCode() //获取shop User id
+										this.productqueryShop();
 									}
 								},
 								fail: (err) => {}
@@ -351,29 +430,358 @@
 				});
 			} else {
 				uni.$on('message', this.getMessage)
-				this.productqueryShopIdByTableCode() //获取shop User id
+				this.productqueryShop();
 			}
 		},
 		methods: {
-			onEnd() { //回调弹幕
-				console.log('一波结束')
+			
+			/**
+			 * 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",
+				})
 			},
-			// 单独获取他的shopUserid
-			async productqueryShopIdByTableCode() {
-				let res = await this.api.productqueryShopIdByTableCode({
-					code: uni.cache.get('tableCode')
+			
+			/**
+			 * 通过桌码获取店铺信息
+			 */
+			async productqueryShop () {
+				let res = await this.api.productqueryShop({
+					code: uni.cache.get('tableCode'),
+					lng: uni.cache.get('getLocationstorage').lng,
+					lat: uni.cache.get('getLocationstorage').lat,
 				})
 				if (res.code == 0) {
-					uni.cache.set('shopUser', res.data)
+					uni.cache.set('shopUser', res.data.storeInfo.id)
 					this.handlemessage() //监听websocket返回
+					this.shopInfo = res.data;
 					this.productqueryProduct() //list  数据
 				} else {
 					setTimeout(() => {
 						uni.pro.switchTab('index/index')
 					}, 1000)
 				}
+				
 			},
+			
+			/**
+			 * 获取商品数据
+			 */
+			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()
+					}
+					setTimeout(() => {
+						this.getElementTop();
+					}, 100);
+				}
+			},
+			
+			/**
+			 * 商品数量增加/减少
+			 * @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.amountcartNumber <= 0) {
+						this.amountcartNumber = this.amountcartNumber + item.suit;
+					}else {
+						this.amountcartNumber++;
+					}
+				} else {
+					
+					if ( this.amountcartNumber > 0 ) {
+						console.log(item)
+						if ( this.amountcartNumber <= item.suit) {
+							this.amountcartNumber = this.amountcartNumber - item.suit
+						} else {
+							this.amountcartNumber = this.amountcartNumber - 1;
+						}
+					}
+				}
+			},
+			
+			/**
+			 * 添加购物车
+			 */
+			addShopping ( item, index, index1, a, b ) {
+				console.log(item)
+				if ( this.amountcartNumber <= 0 ) {
+					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.$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;
+				console.log(this.cartLists)
+				if ( this.cartLists.data.length > 0 ){
+					this.cartLists_count = 0;
+					this.cartLists.data.forEach((v,e)=>{
+						console.log(v)
+						this.cartLists_count += v.number;
+					})
+				}
+			},
+			/**
+			 * 多规格选择
+			 * @param {Object} item1
+			 * @param {Object} index
+			 * @param {Object} index1
+			 */
+			clickspecifications(item1, index, index1,type) {
+				console.log(item1)
+				this.skuidname = []
+				this.specifications = item1
+				this.specifications.indexa = index
+				this.specifications.indexb = index1
+				this.specifications.typeName = type
+				try {
+					if (item1.productSkuResult == null) {
+						// 但但单个规格弹框的处理
+						this.hodgepodge(this.specifications, 2) //获取skuid /2查找价格和数量
+					} else {
+						// 多规格数据处理
+						this.specifications.tagSnap = JSON.parse(item1.productSkuResult.tagSnap).map((item) => {
+							let res = {
+								id: item1.id, //商品id
+								name: item.name,
+								start: 0,
+								children: item.value.split(",")
+							}
+							return res
+						})
+						this.specifications.tagSnap.forEach((val, index, arr) => { //初始化skuidname的数据  选择第一个
+							this.skuidname.push(val.children[0])
+						})
+						this.hodgepodge(this.specifications.tagSnap[0], 2) //获取skuid /2查找价格和数量
+					}
+			
+				} catch (e) {
+					//TODO handle the exception
+				}
+			},
+			
+			/**
+			 * 规格选择监听
+			 * @param {Object} e
+			 * @param {Object} index
+			 * @param {Object} index1
+			 * @param {Object} item
+			 */
+			async morloe(e, index, index1, item) {
+				this.specifications.tagSnap[index]['start'] = index1
+				this.skuidname.splice(index, 1, e) //替换skuidname的数据
+				this.hodgepodge(item, 2)
+			},
+			
+			/**
+			 * 获取规格信息
+			 * @param {Object} item
+			 * @param {Object} a
+			 * @param {Object} c
+			 * @param {Object} num
+			 */
+			async hodgepodge(item, a, c, num) { //此接口去获取商品id ！！！赋值库存  数量  价格等
+				try {
+					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(",")
+					})
+					if (res.data.stockNumber == 0) {
+						uni.showToast({
+							title: '暂无库存',
+							icon: "none",
+						})
+					} else {
+						this.skuidsearch = res.data.id // 储存skuid   用于筛选数量
+						this.salePrice = res.data.salePrice // 价格
+						let data = null;
+						if (a == 1) { //1添加购物车  2是websocket返回这个商品的价格(应为不同的多规格商品返回不同的价格)
+							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;
+							this.showShopsku = true //打开弹框
+						}
+						this.$set(this, 'amountcartNumber', 0)
+					}
+				} catch (e) {}
+			},
+			
+			/**
+			 * 结算直接生成订单
+			 */
+			orderdetail() {
+				console.log(this.cartLists)
+				console.log(this.shopInfo)
+				if (this.cartLists.data.length == 0) {
+					uni.showToast({
+						title: '请先添加商品',
+						icon: 'none'
+					})
+					return false
+				}
+				uni.navigateTo({
+					url: '/pages/order/confirm_order?storeInfo=' + JSON.stringify(this.shopInfo.storeInfo)
+				});
+	
+			},
+			
+			/**
+			 * 商家信息显示
+			 */
+			showShopClick() {
+				this.showShopInfo = true;
+			},
+			
+			
+			
+			/**
+			 * 获取消息
+			 * @param {Object} msg
+			 */
 			getMessage(msg) { //wss  回显数据
+				console.log(msg.type)
 				if (msg == 1) { // 网络在连接
 					this.fixedtrue = true
 					return false
@@ -397,1008 +805,1014 @@
 					} else {
 						switch (msg.type) {
 							case 'sku': // sku  数量 查询这个商品的价格和数量
-								this.$set(this, 'amountcartNumber', msg.amount)
-								// this.productqueryProduct() //list  数据
-								break;
-							case 'clearCart':
-								this.cartLists = msg
-								this.productqueryProduct() //list  数据
-								this.skuidname = []
-								this.showCart = false
-								setTimeout(() => {
-									uni.showToast({
-										title: msg.msg,
-										icon: "none",
-									})
-								}, 500)
 								break;
 							case 'order':
 								this.skuidname = []
 								this.showCart = false
 								this.cartLists = msg
-								this.productqueryProduct() //list  数据
 								break;
 							case 'addCart': //初始化add
 								this.cartLists = msg
-								this.productqueryProduct() //list  数据
+								this.setNumber()
 								break;
 							case 'addcart':
 								this.cartLists = msg
-								// this.productqueryProduct() //list  数据
 								try {
-									if (msg.data.length != 0) {
-										let nums = 0
-										msg.data.forEach((item, index, arr) => { //初始化skuidname的数据  选择第一个
-											if (item.skuId == this.skuidsearch) {
-												nums = item.number
-											}
-										})
-										this.$set(this, 'amountcartNumber', nums)
-									} else {
-										this.$set(this, 'amountcartNumber', 0)
+									//购物车为空的情况
+									if ( msg.data.length == 0) {
+										this.showCart = false;
 									}
-								} catch (e) {
-									//TODO handle the exception
-								}
-								try {
-									this.barrageavatar = msg.reqData.headImg
-									/*插入一条弹幕*/
-									this.$refs.lBarrage.add(
-										`${msg.reqData.nickName?msg.reqData.nickName:'微信用户'}${msg.reqData.num==-1?'取消了':'添加了'}${msg.reqData.name}(${msg.reqData.num})`
-									);
-								} catch (e) {
-									//TODO handle the exception
-								}
-								try {
-									// 处理购物车相同id的情况下  数量相加
-									var summedArray = msg.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.shopList.productInfo.forEach((item) => {
-										return item.products.filter(e => {
-											return summedArray.find(i => {
-												if (e.id == i.productId) {
-													e.cartNumber = i.number
-												}
-											})
-										})
-									})
+									this.setNumber()
 								} catch (e) {}
 								break;
 						}
-						// 判断是否显示购物车
-						this.cartListsdatashow = this.cartLists.data.length == 0 ? false : true
-
+						
+			
 					}
 				} catch (e) {
 					//TODO handle the exception
 				}
 			},
-			handlemessage() {
-				this.socketTicket ? this.socketTicket.Close() : null //调用前先判断是否有socket正在进行 先关闭后链接
-				this.socketTicket = new webSocketUtils(`${uni.conf.baseUrlwws}`, 5000, {
-					tableId: uni.cache.get('tableCode'),
-					shopId: uni.cache.get('shopUser'),
-					userId: uni.cache.get('userInfo').id,
-					"type": "connect",
-				})
-			},
+			
 			// 数据处理
 			socketSendMsg(data) {
 				if (this.socketTicket) {
 					this.socketTicket.send(data);
 				}
 			},
-			getQueryString(url, name) { //解码
-				var reg = new RegExp('(^|&|/?)' + name + '=([^&|/?]*)(&|/?|$)', 'i')
-				var r = url.substr(1).match(reg)
-				if (r != null) {
-					return r[2]
-				}
-				return null;
+			
+			
+			// 导航栏高度 去计算列表页的高度
+			Topdistance(e) {
+				this.heightnav = e ////导航栏高度
 			},
-			async cartadd(item, index, index1, a, b) { //列表添加 a传参加减号   b是判断单规格多规格
-				if (b == '单规格') { //没有规格为空
-					this.skuidname = []
-				}
-				this.hodgepodge(item, 1, a) //获取skuid  /1添加购物车
-			},
-			async cartListadd(item, index, a) { //购物车加减
-				try {
-					const data = { //定义socket数据传参
-						"name": item.name,
-						"skuId": item.skuId,
-						"num": a == '-' ? -1 : 1, //skuId
-						"type": "addcart", //“addcart:添加购物车，create0rder:生成订单，clearCart:清空购物车”，
-						"productId": item.productId, //商品id
-						"shopId": uni.cache.get('shopUser'),
-						"userId": uni.cache.get('userInfo').id
-					};
-					this.datasocket = data
-					uni.$u.debounce(this.socketSendMsg(data), 500)
-				} catch (e) {
-					//TODO handle the exception
-				}
-			},
-			async productqueryProduct() { //list  数据
-				let res = await this.api.productqueryProduct({
-					code: uni.cache.get('tableCode'),
-					productGroupId: ''
-				})
-				if (res.code == 0) {
-					this.shopList = res.data
-					this.$nextTick(() => {
-						this.countTitleTopNum();
+		
+			/* 获取元素顶部信息 */
+			getElementTop() {
+				new Promise((resolve, reject) => {
+					let view = uni.createSelectorQuery().selectAll('.main-item');
+					view.boundingClientRect(data => {
+						resolve(data);
+					}).exec();
+					this.$u.getRect('.scroll-panel').then(res => {
+						console.log(res)
+						this.scrollTopSize = res.top - this.heightnav; //元素距离顶部的距离
+						this.scrollHeight = this.scrollHeight - this.heightnav
+					})
+				}).then((res) => {
+					let topArr = res.map((item) => {
+						return item.top - this.scrollTopSize; /* 减去滚动容器距离顶部的距离 */
 					});
-				}
+					this.topArr = topArr;
+
+					/* 获取最后一项的高度，设置填充高度。判断和填充时做了 +-20 的操作，是为了滚动时更好的定位 */
+					let last = res[res.length - 1].height;
+					if (last - 20 < this.scrollHeight) {
+						this.fillHeight = this.scrollHeight - last + 20;
+					}
+				});
 			},
-			clickspecifications(item1, index, index1) {
-				this.skuidname = []
-				this.specifications = item1
-				this.specifications.indexa = index
-				this.specifications.indexb = index1
+			/* 主区域滚动监听 */
+			mainScroll(e) {
+			
+			},
+			/* 左侧导航点击 */
+			leftTap(e,index) {
 				try {
-					if (item1.productSkuResult == null) {
-						// 但但单个规格弹框的处理
-						this.hodgepodge(this.specifications, 2) //获取skuid /2查找价格和数量
-					} else {
-						// 多规格数据处理
-						this.specifications.tagSnap = JSON.parse(item1.productSkuResult.tagSnap).map((item) => {
-							let res = {
-								id: item1.id, //商品id
-								name: item.name,
-								start: 0,
-								children: item.value.split(",")
-							}
-							return res
-						})
-						this.specifications.tagSnap.forEach((val, index, arr) => { //初始化skuidname的数据  选择第一个
-							this.skuidname.push(val.children[0])
-						})
-						this.hodgepodge(this.specifications.tagSnap[0], 2) //获取skuid /2查找价格和数量
+					this.leftIndex = (index < 0 ? 0 : index);
+					if (this.isFixed) {
+						uni.pageScrollTo({
+							scrollTop: this.scrollTopSize, //滑动需要的距离  nav+列表距离的高度
+							duration: 100
+						});
+						this.isFixed = false
 					}
 
 				} catch (e) {
 					//TODO handle the exception
 				}
-			},
-			async morloe(e, index, index1, item) {
-				this.specifications.tagSnap[index]['start'] = index1
-				this.skuidname.splice(index, 1, e) //替换skuidname的数据
-				this.hodgepodge(item, 2)
-			},
-			async hodgepodge(item, a, c) { //此接口去获取商品id ！！！赋值库存  数量  价格等
-				try {
-					let res = await this.api.productqueryProductSku({
-						shopId: uni.cache.get('shopUser'),
-						productId: item.id, //商品id
-						spec_tag: this.skuidname.join(",")
-					})
-					if (res.stockNumber == 0) {
-						uni.showToast({
-							title: '暂无库存',
-							icon: "none",
-						})
-					} else {
-						this.skuidsearch = res.data.id // 储存skuid   用于筛选数量
-						this.salePrice = res.data.salePrice // 价格
-						let data = null
-						if (a == 1) { //1添加购物车  2是websocket返回这个商品的价格(应为不同的多规格商品返回不同的价格)
-							data = { //定义socket数据传参
-								"nickName": this.userInfo.nickName,
-								"barrageavatar": this.userInfo.headImg,
-								'name': item.name,
-								"skuId": res.data.id,
-								"num": c == '-' ? -1 : 1, //数量
-								"type": "addcart", //“addcart:添加购物车，create0rder:生成订单，clearCart:庆康购物车”，
-								"productId": item.id, //商品id
-								"shopId": uni.cache.get('shopUser'),
-								"userId": uni.cache.get('userInfo').id
-							};
-						} else {
-							data = { //查询这个商品的价格
-								"name": item.name,
-								"skuId": res.data.id,
-								"num": '', //数量
-								"type": "sku", //“addcart:添加购物车，create0rder:生成订单，clearCart:庆康购物车”，
-								"productId": item.id, //商品id
-								"shopId": uni.cache.get('shopUser'),
-								"userId": uni.cache.get('userInfo').id
-							};
-							this.showShopsku = true //打开弹框
-						}
-						this.datasocket = data
-						uni.$u.debounce(this.socketSendMsg(data), 500)
-					}
-				} catch (e) {}
-			},
-			orderdetail() { // 直接生成订单
-				if (this.cartLists.data.length == 0) {
-					uni.showToast({
-						title: '请先添加商品',
-						icon: 'none'
-					})
-					return false
-				}
-				uni.navigateTo({
-					url: '/pages/order/confirm_order?storeInfo=' + JSON.stringify(this.shopList.storeInfo)
-				});
-				return;
-				uni.navigateTo({
-					url: '/pages/order_detail/indexs?tableId=' + JSON.stringify(this.cartLists)
-				});
-				// let data = {
-				// 	"skuId": '',
-				// 	"num": '', //数量
-				// 	"type": "createOrder", //“addcart:添加购物车，create0rder:生成订单，clearCart:庆康购物车”，
-				// 	"couponsId": '', //优惠券ID,
-				// 	"isYhq": 0, // 是否使用优惠券（ 1： 使用， 0： 不使用）,
-				// 	"isBuyYhq": 0, // 是否购买优惠券（ 1： 购买， 0： 不够买）
-				// 	"productId": '', //商品id
-				// 	"shopId": uni.cache.get('shopUser'),
-				// 	"userId": uni.cache.get('userInfo').id,
-				// }
-				// this.datasocket = data
-				// uni.$u.debounce(this.socketSendMsg(data), 500)
-			},
-			async cartclear() { //清空购物车
-				try {
-					const data = { //定义socket数据传参
-						"skuId": '',
-						"num": '', //skuId
-						"type": "clearCart", //“addcart:添加购物车，create0rder:生成订单，clearCart:清空购物车”，
-						"productId": '', //商品id
-						"shopId": uni.cache.get('shopUser'),
-						"userId": uni.cache.get('userInfo').id
-					};
-					this.datasocket = data
-					uni.$u.debounce(this.socketSendMsg(data), 500)
-				} catch (e) {
-					//TODO handle the exception
-				}
-			},
-			// 导航栏点击
-			navClickHandle(t) {
-				switch (t) {
-					case 1:
-						// 返回
-						this.socketTicket.Close()
-						uni.switchTab({
-							url: '/pages/index/index'
-						})
-						break;
-					case 2:
-						// 显示商家信息
-						this.showShopInfo = true;
-						break;
-					default:
-						break;
-				}
-			},
-			//打电话
-			makePhoneCall(phone) {
-				uni.makePhoneCall({
-					phoneNumber: phone //仅为示例
-				});
-			},
-			// 点击菜单商品滚动到指定为止
-			titleClickHandle(id) {
-				uni.createSelectorQuery()
-					.select('#wrapper')
-					.boundingClientRect((data) => {
-						//目标节点
-						uni.createSelectorQuery()
-							.select(`#title${id}`)
-							.boundingClientRect((res) => {
-								const scrollTop = res.top - data.top;
-								const offsetNum = this.menuInfo.top + this.menuInfo.height + this
-									.paddingBtmSize +
-									this.tabHeadHeight - 1;
-								//最外层盒子节点
-								uni.pageScrollTo({
-									scrollTop: scrollTop - offsetNum
-								});
-							})
-							.exec();
-					})
-					.exec();
-			},
-			// 计算滚动到那个标题
-			countScrollTitle: _.throttle(function(top) {
-				if (this.titleTopNums.length > 1) {
-					for (let i = 0; i <= this.titleTopNums.length - 1; i++) {
-						if (top >= this.titleTopNums[i] && top < this.titleTopNums[i + 1]) {
-							this.titleTopNumIndex = i;
-						}
-					}
-					if (top >= this.titleTopNums[this.titleTopNums.length - 1]) {
-						this.titleTopNumIndex = this.titleTopNums.length - 1;
-					}
-				}
-			}, 100),
-			// 统计每个标题到顶部的距离
-			countTitleTopNum() {
-				let topNums = [];
-				for (let i of this.shopList.productInfo) {
-					uni.createSelectorQuery()
-						.select(`#title${i.id}`)
-						.boundingClientRect((res) => {
-							topNums.push(res.top + this.menuInfo.top + this.menuInfo.height + this
-								.paddingBtmSize -
-								this.tabHeadHeight - this.tabHeadHeight / 2);
-						})
-						.exec();
-				}
-				this.titleTopNums = topNums;
-			},
+	
+				setTimeout(() => {
+					let index = e.currentTarget.dataset.index;
+					this.scrollInto = `item-${index}`;
+				},)
+			}
 		}
-	};
+	}
 </script>
 
-<style scoped lang="scss">
+<style lang="scss" scoped>
 	$bg: #fafafa;
 	$tabLeft: 200upx;
 	$itemH: 100upx;
 	$cartH: 90upx;
-
-	.nav-wrap {
-		width: 100%;
-		position: fixed;
-		top: 0;
-		left: 0;
-		z-index: 97;
-
-		&.is-fixed {
-			background-color: #fff;
-		}
-
-		.content {
-			.left-btn {
-				display: flex;
-
-				.btn {
-					display: flex;
-					align-items: center;
-					justify-content: center;
-					// margin-right: $paddingSize;
-				}
-			}
-		}
-	}
-
-	.shop-cover {
-		position: relative;
-
-		&::after {
-			content: '';
-			width: 100%;
-			height: 100%;
-			position: absolute;
-			top: 0;
-			left: 0;
-			z-index: 2;
-			background-color: rgba(0, 0, 0, 0.3);
-		}
-
-		.img {
-			width: 100%;
-			height: 100%;
-			position: relative;
-			z-index: 1;
-		}
-	}
-
-	.list-container {
-		background-color: #fff;
-		border-radius: 20upx;
-		position: relative;
-		z-index: 96;
-		margin-top: -40upx;
-
-		.header-wrap {
-			$h: 120upx;
-			height: $h;
-			display: flex;
-			align-items: center;
-			justify-content: space-between;
-			padding: 0 $paddingSize;
-
-			.title {
-				font-weight: bold;
-
-				.t {
-					font-size: 42upx;
-				}
-			}
-
-			.cover {
-				width: $h;
-				height: $h;
-				margin-top: -40upx;
-				background: #999;
-				position: relative;
-
-				.img {
-					width: 100%;
-					height: 100%;
-					border-radius: 12upx;
-				}
-			}
-		}
-
-		.tab-header {
-			display: flex;
-			align-items: center;
-			background-color: $bg;
-			position: sticky;
-			z-index: 999;
-
-			.t {
-				font-size: 32upx;
-			}
-
-			.left {
-				width: $tabLeft;
-				display: flex;
-				padding-left: $paddingSize;
-
-				.t {
-					font-weight: bold;
-				}
-			}
-
-			.right {
-				flex: 1;
-				display: flex;
-				align-items: center;
-				justify-content: space-between;
-				padding: 0 $paddingSize;
-
-				.d {
-					padding: 12upx 16upx;
-					background-color: #faf2b6;
-					border-radius: 12upx;
-				}
-			}
-		}
-
-		.tab-content {
-			display: flex;
-			position: relative;
-
-			.left-wrap {
-				width: $tabLeft;
-				background-color: $bg;
-				padding: 0 0 $paddingSize * 3 + $cartH 0;
-
-				.left {
-					width: $tabLeft;
-					position: sticky;
-
-					.item {
-						height: $itemH;
-						display: flex;
-						align-items: center;
-						padding: 0 $paddingSize;
-						justify-content: center;
-
-						&.active {
-							background-color: #fff;
-							font-weight: bold;
-						}
-					}
-				}
-			}
-
-			.list-wrap {
-				flex: 1;
-				padding-left: $paddingSize;
-				padding-bottom: $paddingSize * 3 + $cartH;
-
-				.item-wrap {
-					.title {
-						height: $itemH;
-						display: flex;
-						align-items: center;
-						position: sticky;
-						z-index: 10;
-						background-color: #fff;
-					}
-				}
-			}
-		}
-	}
-
-	.shop-item {
+	
+	/* 容器 */
+	.container {
 		display: flex;
-		padding-bottom: $paddingSize;
-
-		.langcover {
-			position: relative;
-		}
-
-		.langcover::after {
-			content: '加载中..';
-			position: absolute;
-			top: 0;
-			left: 0;
-			height: 100%;
-			width: 100%;
-			background-color: #e8e8e8;
-			color: #6b6b6b;
-			border-radius: 10rpx;
-			text-align: center;
-			line-height: 180rpx;
-			z-index: 1;
-		}
-
-		.info {
-			flex: 1;
-			padding-left: 20upx;
-			padding-right: $paddingSize;
-
-			.name {
-				font-size: 28upx;
-				font-weight: bold;
-			}
-
-			.namess {
-				margin-top: 16rpx;
-				font-size: 24upx;
-				font-weight: 300;
-				color: #a5a5a5;
-			}
-
-			.select-sku-wrap {
-				.t {
-					color: #999;
-					font-size: 24upx;
-				}
-			}
-
-			.price-wrap {
-				margin-top: 16rpx;
-				display: flex;
-				align-items: center;
-				justify-content: space-between;
-
-				.price {
-					display: flex;
-					align-items: flex-end;
-
-					.i {
-						font-size: 20upx;
-						color: $numColor;
-						position: relative;
-						bottom: 4upx;
-						font-weight: bold;
-					}
-
-					.num {
-						font-size: 42upx;
-						color: $numColor;
-						position: relative;
-						top: 6upx;
-						padding: 0 4upx;
-					}
-				}
-
-				.sku-wrap {
-					padding: 6upx 16upx;
-					background-color: $color-priamry;
-					border-radius: 12upx;
-					display: flex;
-					align-items: center;
-					justify-content: center;
-					position: relative;
-
-					.t {
-						font-size: 24upx;
-						font-weight: bold;
-					}
-
-					.dot {
-						display: flex;
-						align-items: center;
-						justify-content: center;
-						font-size: 20upx;
-						position: absolute;
-						padding: 2upx 12upx;
-						border-radius: 8upx;
-						background-color: $numColor;
-						color: #fff;
-						position: absolute;
-						top: -14upx;
-						right: -8upx;
-					}
-				}
-
-				.operation-wrap {
-					display: flex;
-					align-items: center;
-
-					.num {
-						font-size: 32upx;
-						padding: 0 16upx;
-					}
-
-					.btn {
-						position: relative;
-						padding: 6upx 10upx;
-						background-color: $color-priamry;
-						border-radius: 12upx;
-						display: flex;
-						align-items: center;
-						justify-content: center;
-
-						&::after {
-							content: "";
-							position: absolute;
-							left: -10px;
-							top: -10px;
-							right: -10px;
-							bottom: -10px;
-
-						}
-					}
-				}
-			}
-		}
-	}
-
-	.cart-wrap {
-		width: 100%;
-		padding: $paddingSize;
-		position: fixed;
-		bottom: $paddingSize;
-		left: 0;
-		z-index: 99;
-
-		.cart-content {
-			display: flex;
-			height: $cartH;
-			border-radius: $cartH;
-
-			.left {
-				flex: 1;
-				display: flex;
-				align-items: center;
-				background-color: #111;
-				padding-left: 120upx;
-				position: relative;
-				border-radius: $cartH 0 0 $cartH;
-
-				.icon {
-					width: 80upx;
-					height: 120upx;
-					position: absolute;
-					left: $paddingSize;
-					bottom: 20upx;
-				}
-
-				.i,
-				.num {
-					color: #fff;
-				}
-
-				.i {
-					font-size: 20upx;
-					position: relative;
-					top: 4upx;
-				}
-
-				.num {
-					font-size: 42upx;
-				}
-			}
-
-			.btn {
-				width: 200upx;
-				display: flex;
-				align-items: center;
-				justify-content: center;
-				font-weight: bold;
-				background: $linear-color-priamry;
-				border-radius: 0 $cartH $cartH 0;
-			}
-		}
-	}
-
-	.cart-list-wrap {
-		.cart-header {
-			display: flex;
-			justify-content: space-between;
-			background-color: #f4eddf;
-			padding: 20upx $paddingSize;
-			border-radius: 20upx 20upx 0 0;
-
-			.clear {
-				display: flex;
-				align-items: center;
-
-				.t {
-					font-size: 24upx;
-					color: #999;
-					margin-left: 4upx;
-				}
-			}
-		}
-
-		.scroll-view {
-			max-height: 50vh;
-		}
-
-		.list-wrap {
-			padding: $paddingSize 0 $paddingSize * 2 + $cartH $paddingSize;
-		}
-	}
-
-	.shop_sku {
-		position: relative;
-		width: 700rpx;
-		border-radius: 20rpx;
-		background: #fff;
-
-		.positionabsolute {
-			position: absolute;
-			top: 10rpx;
-			left: 10rpx;
-		}
-
-		.shop_skucimage {
-			width: 100%;
-			height: 440rpx;
-			border-radius: 20rpx 20rpx 0 0;
-		}
-
-		.shop_sku_name {
-			padding: 0 $paddingSize;
-			margin-top: 20rpx;
-			font-weight: bold;
-			font-size: 32upx;
-		}
-
-		.shop_sku_box {
-			padding: 0 $paddingSize;
-
-			.shop_sku_box_name {
-				margin-top: 20rpx;
-				font-weight: 500;
-				font-size: 28upx;
-				color: #999;
-			}
-
-			.flex-start {
-				.shop_sku_box_item {
-					margin-top: 16rpx;
-					padding: 8rpx 24rpx;
-					border-radius: 24rpx;
-					font-size: 24upx;
-					margin-left: 16rpx;
-					background: #fbe3e3;
-				}
-
-				.shop_sku_box_item:nth-child(1) {
-					margin-left: 0;
-				}
-
-				.shop_sku_box_item_noselected {
-					color: #000;
-				}
-
-				.shop_sku_box_item_selected {
-					border: 1rpx solid red;
-					color: red;
-				}
-			}
-
-		}
-
-		.shop_skuselect {
-			padding: 10rpx $paddingSize;
-			margin-top: 28rpx;
-			width: 100%;
-			background: #f7f7f7;
-			color: #ada7a7;
-			font-size: 24upx;
-
-			.shop_skuselectname {
-				color: #000;
-				font-size: 26upx;
-			}
-		}
-
-		.shop_bottom {
-			box-sizing: border-box;
-			padding: 10rpx $paddingSize;
-			margin: 28rpx 0;
-
-			.price {
-				display: flex;
-				align-items: flex-end;
-
-				.i {
-					font-size: 20upx;
-					color: $numColor;
-					position: relative;
-					bottom: 4upx;
-					font-weight: bold;
-				}
-
-				.num {
-					font-size: 42upx;
-					color: $numColor;
-					position: relative;
-					top: 6upx;
-					padding: 0 4upx;
-				}
-			}
-
-			.operation-wrap {
-				display: flex;
-				align-items: center;
-
-				.num {
-					font-size: 32upx;
-					padding: 0 16upx;
-				}
-
-				.btn {
-					position: relative;
-					padding: 16upx 20upx;
-					background-color: $color-priamry;
-					border-radius: 12upx;
-					display: flex;
-					align-items: center;
-					justify-content: center;
-
-					&::after {
-						content: "";
-						position: absolute;
-						left: -10px;
-						top: -10px;
-						right: -10px;
-						bottom: -10px;
-
-					}
-				}
-			}
-		}
-	}
-
-
-	.classorderdetailshow {
-		position: relative;
-
-		.orderdetailuicon {
-			position: absolute;
-			top: 10rpx;
-			left: 10rpx;
-		}
-
-		.payType {
-			padding: 32rpx 34rpx;
-			margin-top: 48rpx;
+		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%;
+		}
 
-			>view:first-child {
+		.top--panel {
+			padding: 0 20rpx;
+			background-color: #fff;
+			.panelimgbackground {
+				width: 382rpx;
+				margin: 82rpx auto 0 auto;
+				height: 158rpx;
+			}
+
+			.panelone {
+				margin-top: 32rpx;
+				font-family: Source Han Sans CN, Source Han Sans CN;
 				font-weight: 500;
-				font-size: 28rpx;
+				font-size: 32rpx;
 				color: #333333;
 			}
 
-			>view:last-child {
+			.paneltow {
+				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;
 
-			.dfs {
-				display: flex;
-				align-items: center;
-			}
+				.paneltheretext {
+					font-family: Source Han Sans CN, Source Han Sans CN;
+					font-weight: 400;
+					font-size: 28rpx;
+					color: #999999;
+				}
 
-		}
-
-		.fixedview {
-			position: relative;
-			width: 100%;
-
-			.flex-between {
-				width: 100%;
-				padding: 24rpx 28rpx;
-				background: #FFFFFF;
-				flex-wrap: nowrap;
-
-				.fixedview_one {
-					.fixedview_oneone {
+				.flex-start {
+					view {
+						font-family: Source Han Sans CN, Source Han Sans CN;
+						font-weight: 400;
+						font-size: 28rpx;
+						color: #999999;
+					}
+				}
+			}
+
+			.panelfour {
+				font-family: Source Han Sans CN, Source Han Sans CN;
+				font-weight: bold;
+				font-size: 32rpx;
+				color: #333333;
+			}
+
+			.panelfive {
+				width: 100%;
+				.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;
-						font-family: SourceHanSansCN-Bold-, SourceHanSansCN-Bold;
-						font-weight: normal;
 						color: #333333;
 					}
 
-					.fixedview_onetow {
-						font-size: 44rpx;
-						font-family: SourceHanSansCN-Bold-, SourceHanSansCN-Bold;
-						font-weight: normal;
-						color: #F45C4C;
-						font-weight: bold;
+					.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 {
-							font-size: 28rpx;
+							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;
 						}
 					}
 
-					.fixedview_onethere {
+					.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;
 					}
-				}
 
-				.fixedview_tow {
-					background: red;
-					border-radius: 34rpx;
-					padding: 10rpx 44rpx;
+					.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 {
+							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;
+
+		}
+
+		.bottom-panel {
+			padding-bottom: 0;
+			padding-bottom: constant(safe-area-inset-bottom);
+			padding-bottom: env(safe-area-inset-bottom);
+		}
+		.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;
-					font-family: PingFang SC-Bold, PingFang SC;
+					color: #333;
 					font-weight: bold;
-					color: #FFFFFF;
 				}
 			}
-		}
-	}
-
-	.shop-info-wrap {
-		.info-wrap {
-			padding: $paddingSize * 2 0;
-			display: flex;
-			align-items: center;
-			flex-direction: column;
-			border-bottom: 1upx solid #f2f2f2;
-
-			.img {
-				width: 100upx;
-				height: 100upx;
-				border-radius: 12upx;
+			.info-wrap-title{
+				font-size: 32rpx;
+				font-weight: bold;
+				color: #333;
 			}
-
-			.t {
-				font-size: 32upx;
-				padding-top: 8upx;
-			}
-		}
-
-		.row {
-			padding: 0 $paddingSize $paddingSize;
-
-			.col {
-				padding-top: $paddingSize;
-
-				.t {
+			.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: 8rpx 24rpx;
+						border-radius: 8rpx;
+						font-size: 24upx;
+						margin-left: 56rpx;
+						background: #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;
+			
+								
+							}
+						}
+					}
+				}
+			}
+			
+		}
+		
+		
+	}
 
-		.line {
-			height: 12upx;
-			background-color: #f2f2f2;
+
+	.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;
+
+			.item {
+				padding: 0 30rpx;
+				height: 92rpx;
+				line-height: 92rpx;
+				position: relative;
+				font-weight: 400;
+				font-size: 24rpx;
+				color: #333333;
+				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;
+					}
+				}
+			}
+
+			.fill-last {
+				height: 0;
+				width: 100%;
+				background: none;
+			}
 		}
 
-		.close {
-			padding: $paddingSize 0;
-			display: flex;
-			justify-content: center;
+		.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>
\ No newline at end of file