From 4ab448e3c7635b7a3c822c3007b37673d80c4b9f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=AD=8F=E5=95=BE?= <1144797966@qq.com>
Date: Fri, 2 Aug 2024 17:26:45 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B4=AD=E7=89=A9=E8=BD=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages.json                         |    7 -
 pages/index/components/diamond.vue |    3 +-
 pages/index/indexs.vue             |    3 +-
 pages/order_food/order_food.vue    | 2455 ++++++++++++++++------------
 4 files changed, 1447 insertions(+), 1021 deletions(-)

diff --git a/pages.json b/pages.json
index 44c2a66..487b735 100644
--- a/pages.json
+++ b/pages.json
@@ -166,13 +166,6 @@
 				"navigationBarTextStyle": "white"
 			}
 		},
-		{
-			"path": "pages/order_food/goodsList_scroll",
-			"style": {
-				"navigationStyle": "custom",
-				"navigationBarTextStyle": "white"
-			}
-		},
 		{
 			"path": "pages/make/list",
 			"style": {
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/index/indexs.vue b/pages/index/indexs.vue
index fb1f85f..0dba44e 100644
--- a/pages/index/indexs.vue
+++ b/pages/index/indexs.vue
@@ -61,8 +61,7 @@
 							let tableCode = this.getQueryString(decodeURIComponent(res.result), 'code')
 							uni.cache.set('tableCode', tableCode)
 							if (tableCode) {
-								uni.pro.navigateTo('order_food/goodsList_scroll')
-								// uni.pro.navigateTo('order_food/order_food')
+								uni.pro.navigateTo('order_food/order_food')
 							}
 
 						}
diff --git a/pages/order_food/order_food.vue b/pages/order_food/order_food.vue
index 195ecde..fe76320 100644
--- a/pages/order_food/order_food.vue
+++ b/pages/order_food/order_food.vue
@@ -1,135 +1,188 @@
 <template>
-	<view id="wrapper">
+	<view class="container">
+		<!-- 占位符  接口请求完毕才显示 -->
 		<view v-if="fixedtrue"
 			style="height: 100vh; width: 100%; position: fixed; z-index: 999; top: 0; left: 0; background-color: #fff; display: flex; justify-content: center; align-items: center;">
 			<image style="width: 140rpx; height: 140rpx;" src="@/static/1.gif" mode="aspectFill"></image>
 			<text style="margin-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="top--panel">
+			<navseat :opacity='opacity' :titleshow='true' :heightshow='opacity'></navseat>
+			<!-- #ifdef MP-WEIXIN -->
+			<!-- #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="true" :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" v-if="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 -100 + '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">{{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 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="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_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="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 +192,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 +216,58 @@
 				</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 +281,119 @@
 						</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 {
+				fixedtrue: true,
 				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,
+				showShopInfo: false, //店铺信息弹窗是否显示
+				showShopsku: false, //多规格弹窗是否显示
+				skuId: null, // 多规格ID
 				cartLists: {}, //购物车
-				orderdetailcartLists: {}, //提交订单
+				cartLists_count: 0,
+				shopInfo: {}, //店铺信息
+				shopProductList: {}, //商品信息
+				specifications: {
+
+				}, // 规格信息
 				socketTicket: null,
 				amountcartNumber: 0,
-				skuidsearch: '', //
 				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.opacity = false
+				} else {
+					this.opacity = true
+				}
+			} catch (e) {
+				//TODO handle the exception
 			}
-			this.countScrollTitle(e.scrollTop);
+			if (e.scrollTop >= this.scrollTopSize) { //控制大图层
+				this.isFixed = false;
+			} else {
+				this.isFixed = true;
+			}
+		},
+		computed: {
+			/* 计算左侧滚动位置定位 */
+			leftIntoView() {
+				return `left-${this.leftIndex? this.leftIndex:0}`;
+			},
+			HeighT() { //手机类型的尺寸    导航栏高度
+				return this.$store.getters.is_BarHeight.heightBar + this.$store.getters.is_BarHeight.customBar
+			},
+		},
+		onReady() {
+			setTimeout(() => {
+				uni.getSystemInfo({
+					success: (data) => {
+						this.scrollHeight = data.windowHeight
+					}
+				})
+			}, 100);
 		},
 		onLoad(e) {
 			if (e.q) {
 				this.tableCode = this.getQueryString(decodeURIComponent(e.q), 'code')
 				uni.cache.set('tableCode', this.tableCode)
 			}
-			
-			this.$nextTick(() => {
-				this.countTitleTopNum(); //导航栏
-			});
+			uni.cache.set('types', 'types');
+
 		},
 		onUnload() {
 			this.socketTicket.Close()
@@ -341,7 +424,7 @@
 											.miniAppOpenId)
 										uni.cache.set('userInfo', res.data.userInfo);
 										uni.$on('message', this.getMessage)
-										this.productqueryShopIdByTableCode() //获取shop User id
+										this.productqueryShop();
 									}
 								},
 								fail: (err) => {}
@@ -351,138 +434,14 @@
 				});
 			} else {
 				uni.$on('message', this.getMessage)
-				this.productqueryShopIdByTableCode() //获取shop User id
+				this.productqueryShop();
 			}
 		},
 		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
-				}
-			},
+			/**
+			 * socket初始化
+			 */
 			handlemessage() {
 				this.socketTicket ? this.socketTicket.Close() : null //调用前先判断是否有socket正在进行 先关闭后链接
 				this.socketTicket = new webSocketUtils(`${uni.conf.baseUrlwws}`, 5000, {
@@ -492,60 +451,203 @@
 					"type": "connect",
 				})
 			},
-			// 数据处理
-			socketSendMsg(data) {
-				if (this.socketTicket) {
-					this.socketTicket.send(data);
+
+			/**
+			 * 通过桌码获取店铺信息
+			 */
+			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.shopInfo = res.data;
+					this.productqueryProduct() //list  数据
+					this.handlemessage() //监听websocket返回
+				} 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);
 				}
 			},
-			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是判断单规格多规格
+
+			/**
+			 * 商品数量增加/减少
+			 * @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 = []
 				}
-				this.hodgepodge(item, 1, a) //获取skuid  /1添加购物车
+				let cartNumber = a == '+' ? item.cartNumber + 1 : item.cartNumber - 1;
+				this.hodgepodge(item, 1, a, cartNumber) //获取skuid  /1添加购物车
 			},
-			async cartListadd(item, index, a) { //购物车加减
+
+			/**
+			 * 详情商品增减
+			 * @param {Object} item
+			 * @param {Object} index
+			 * @param {Object} index1
+			 * @param {Object} a
+			 * @param {Object} b
+			 */
+			shopAdd(item, index, index1, a, b) {
+				if (a == "+") {
+					this.amountcartNumber++;
+				} else {
+					if (this.amountcartNumber > 0) {
+						this.amountcartNumber--
+					}
+				}
+			},
+
+			/**
+			 * 添加购物车
+			 */
+			addShopping(item, index, index1, a, b) {
+				if (this.amountcartNumber <= 0) {
+					return;
+				}
+				let params = {
+					"skuId": this.skuId,
+					"num": item.cartNumber + this.amountcartNumber, //数量
+					"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 {
-					const data = { //定义socket数据传参
-						"name": item.name,
+					let params = {
 						"skuId": item.skuId,
-						"num": a == '-' ? -1 : 1, //skuId
-						"type": "addcart", //“addcart:添加购物车，create0rder:生成订单，clearCart:清空购物车”，
+						"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
-					};
-					this.datasocket = data
-					uni.$u.debounce(this.socketSendMsg(data), 500)
+						"userId": uni.cache.get('userInfo').id,
+						"tableId": uni.cache.get('tableCode'),
+					}
+					this.addCart(params);
 				} catch (e) {
 					//TODO handle the exception
 				}
 			},
-			async productqueryProduct() { //list  数据
-				let res = await this.api.productqueryProduct({
-					code: uni.cache.get('tableCode'),
-					productGroupId: ''
-				})
+
+
+			/**
+			 * 添加到购物车
+			 */
+			async addCart(data) {
+				let res = await this.api.cartAdd(data)
 				if (res.code == 0) {
-					this.shopList = res.data
-					this.$nextTick(() => {
-						this.countTitleTopNum();
-					});
+					this.showShopsku = false;
+					this.$set(this, 'amountcartNumber', 0)
 				}
 			},
-			clickspecifications(item1, index, index1) {
+
+			/**
+			 * 清空购物车
+			 */
+			async cartclear() {
+				let res = await this.api.cleanCart({
+					"shopId": uni.cache.get('shopUser'),
+					"tableId": uni.cache.get('tableCode'),
+				})
+			},
+
+
+			/**
+			 * 商品数量\购物车数量处理
+			 */
+			setNumber() {
+				// 处理购物车相同id的情况下  数量相加
+				var summedArray = this.cartLists.data.reduce((acc, current) => {
+					const existing = acc.find(item => item.productId === current.productId);
+					if (existing) {
+						existing.number += current.number;
+					} else {
+						acc.push({
+							...current
+						})
+					}
+					return acc;
+				}, []);
+				// 购物车总数据与列表页面互通
+				this.shopProductList.productInfo.forEach((item) => {
+					return item.products.filter(e => {
+						e.cartNumber = 0;
+						return summedArray.find(i => {
+							if (e.id == i.productId) {
+								e.cartNumber = i.number
+							}
+						})
+					})
+				})
+				// 处理招牌菜商品数量
+				this.shopProductList.hots.forEach((item) => {
+					item.cartNumber = 0;
+					return summedArray.find(i => {
+						if (item.id == i.productId) {
+							item.cartNumber = i.number
+						}
+					})
+				})
+				this.cartListsdatashow = this.cartLists.data.length == 0 ? false : true
+				if (this.cartLists.data.length > 0) {
+					this.cartLists_count = 0;
+					this.cartLists.data.forEach((v, e) => {
+						this.cartLists_count += v.number;
+					})
+				}
+			},
+			/**
+			 * 多规格选择
+			 * @param {Object} item1
+			 * @param {Object} index
+			 * @param {Object} index1
+			 */
+			clickspecifications(item1, index, index1, type) {
 				this.skuidname = []
 				this.specifications = item1
 				this.specifications.indexa = index
 				this.specifications.indexb = index1
+				this.specifications.typeName = type
 				try {
 					if (item1.productSkuResult == null) {
 						// 但但单个规格弹框的处理
@@ -571,19 +673,35 @@
 					//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)
 			},
-			async hodgepodge(item, a, c) { //此接口去获取商品id ！！！赋值库存  数量  价格等
+
+			/**
+			 * 获取规格信息
+			 * @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({
 						shopId: uni.cache.get('shopUser'),
 						productId: item.id, //商品id
 						spec_tag: this.skuidname.join(",")
 					})
-					if (res.stockNumber == 0) {
+					if (res.data.stockNumber == 0) {
 						uni.showToast({
 							title: '暂无库存',
 							icon: "none",
@@ -591,37 +709,33 @@
 					} else {
 						this.skuidsearch = res.data.id // 储存skuid   用于筛选数量
 						this.salePrice = res.data.salePrice // 价格
-						let data = null
+						let data = null;
 						if (a == 1) { //1添加购物车  2是websocket返回这个商品的价格(应为不同的多规格商品返回不同的价格)
-							data = { //定义socket数据传参
-								"nickName": this.userInfo.nickName,
-								"barrageavatar": this.userInfo.headImg,
-								'name': item.name,
+							let params = {
 								"skuId": res.data.id,
-								"num": c == '-' ? -1 : 1, //数量
-								"type": "addcart", //“addcart:添加购物车，create0rder:生成订单，clearCart:庆康购物车”，
+								"num": num, //数量
+								"type": c == '+' ? 1 : 0,
 								"productId": item.id, //商品id
 								"shopId": uni.cache.get('shopUser'),
-								"userId": uni.cache.get('userInfo').id
-							};
+								"userId": uni.cache.get('userInfo').id,
+								"tableId": uni.cache.get('tableCode'),
+							}
+							this.addCart(params);
 						} 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.skuId = res.data.id;
 							this.showShopsku = true //打开弹框
 						}
-						this.datasocket = data
-						uni.$u.debounce(this.socketSendMsg(data), 500)
+						this.$set(this, 'amountcartNumber', 0)
 					}
 				} catch (e) {}
 			},
-			orderdetail() { // 直接生成订单
+
+			/**
+			 * 结算直接生成订单
+			 */
+			orderdetail() {
+				console.log(this.cartLists)
+				console.log(this.shopInfo)
 				if (this.cartLists.data.length == 0) {
 					uni.showToast({
 						title: '请先添加商品',
@@ -630,398 +744,558 @@
 					return false
 				}
 				uni.navigateTo({
-					url: '/pages/order/confirm_order?storeInfo=' + JSON.stringify(this.shopList.storeInfo)
+					url: '/pages/order/confirm_order?storeInfo=' + JSON.stringify(this.shopInfo.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() { //清空购物车
+
+			/**
+			 * 商家信息显示
+			 */
+			showShopClick() {
+				this.showShopInfo = true;
+			},
+
+
+
+			/**
+			 * 获取消息
+			 * @param {Object} msg
+			 */
+			getMessage(msg) { //wss  回显数据
+				if (msg == 1) { // 网络在连接
+					this.fixedtrue = true
+					return false
+				}
+				this.fixedtrue = false
+				if (msg.type == 'heartbeat') { //后台心跳  处理返回  不然控制台一直报错
+					return false
+				}
 				try {
-					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)
+					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
 				}
 			},
-			// 导航栏点击
-			navClickHandle(t) {
-				switch (t) {
-					case 1:
-						// 返回
-						this.socketTicket.Close()
-						uni.switchTab({
-							url: '/pages/index/index'
-						})
-						break;
-					case 2:
-						// 显示商家信息
-						this.showShopInfo = true;
-						break;
-					default:
-						break;
+
+			// 数据处理
+			socketSendMsg(data) {
+				if (this.socketTicket) {
+					this.socketTicket.send(data);
 				}
 			},
-			//打电话
-			makePhoneCall(phone) {
-				uni.makePhoneCall({
-					phoneNumber: phone //仅为示例
+
+			/* 获取元素顶部信息 */
+			getElementTop() {
+				new Promise((resolve, reject) => {
+					let view = uni.createSelectorQuery().selectAll('.main-item');
+					view.boundingClientRect(async data => {
+						resolve(data);
+					}).exec();
+					this.$u.getRect('.scroll-panel').then(res => {
+						this.scrollTopSize = res.top; //元素距离顶部的距离  
+					})
+				}).then((res) => {
+					let topArr = res.map((item) => {
+						return item.top; /* 减去滚动容器距离顶部的距离 加导航栏高度*/
+					});
+					this.scrollHeight = this.scrollHeight - this.HeighT
+					this.topArr = topArr;
+					/* 获取最后一项的高度，设置填充高度。判断和填充时做了 +-20 的操作，是为了滚动时更好的定位 */
+					let last = res[res.length - 1].height;
+					if (last - 20 < this.scrollHeight) {
+						this.fillHeight = this.scrollHeight - last + 20;
+					}
 				});
 			},
-			// 点击菜单商品滚动到指定为止
-			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;
+			/* 主区域滚动监听 */
+			mainScroll(e) {
+				// 节流方法
+				clearTimeout(this.mainThrottle);
+				this.mainThrottle = setTimeout(() => {
+					scrollFn();
+				}, 10);
+
+				let scrollFn = () => {
+					let top = e.detail.scrollTop;
+					let index = 0;
+					/* 查找当前滚动距离 */
+					for (let i = (this.topArr.length - 1); i >= 0; i--) {
+						/* 在部分安卓设备上，因手机逻辑分辨率与rpx单位计算不是整数，滚动距离与有误差，增加2px来完善该问题 */
+						if ((top + 2) >= this.topArr[i] - this.scrollTopSize) {
+							index = i;
+							break;
 						}
 					}
-					if (top >= this.titleTopNums[this.titleTopNums.length - 1]) {
-						this.titleTopNumIndex = this.titleTopNums.length - 1;
-					}
+					this.leftIndex = (index < 0 ? 0 : index);
 				}
-			}, 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;
 			},
+			/* 左侧导航点击 */
+			leftTap(e) {
+				try {
+					if (this.isFixed) {
+						uni.pageScrollTo({
+							scrollTop: this.scrollTopSize + this.HeighT, //滑动需要的距离  nav+列表距离的高度
+							duration: 100
+						});
+						this.isFixed = false
+					}
+				} catch (e) {
+					//TODO handle the exception
+				}
+				setTimeout(() => {
+					let index = e.currentTarget.dataset.index;
+					this.scrollInto = `item-${index}`;
+				}, 300)
+			}
 		}
-	};
+	}
 </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;
+	/* 容器 */
+	.container {
+		display: flex;
+		flex-direction: column;
+		flex-wrap: nowrap;
+		justify-content: flex-start;
+		align-items: flex-start;
+		align-content: flex-start;
 
-		&.is-fixed {
+		.navbarcontent .active {
 			background-color: #fff;
 		}
 
-		.content {
-			.left-btn {
-				display: flex;
+		&>view {
+			width: 100%;
+		}
 
-				.btn {
-					display: flex;
-					align-items: center;
-					justify-content: center;
-					// margin-right: $paddingSize;
+		.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;
+					}
 				}
 			}
-		}
-	}
 
-	.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 {
+			.panelfour {
+				font-family: Source Han Sans CN, Source Han Sans CN;
 				font-weight: bold;
+				font-size: 32rpx;
+				color: #333333;
+			}
 
-				.t {
-					font-size: 42upx;
+			.panelfive {
+				.panelfive_list {
+					display: flex;
 				}
-			}
 
-			.cover {
-				width: $h;
-				height: $h;
-				margin-top: -40upx;
-				background: #999;
-				position: relative;
+				.panelfiveitem {
+					margin-top: 16rpx;
+					width: 340rpx;
+					margin-right: 30rpx;
+					position: relative;
 
-				.img {
-					width: 100%;
-					height: 100%;
-					border-radius: 12upx;
-				}
-			}
-		}
+					.panelfiveitemimage {
+						border-radius: 20rpx 20rpx 0rpx 0rpx;
+						width: 100%;
+						height: 204rpx;
+					}
 
-		.tab-header {
-			display: flex;
-			align-items: center;
-			background-color: $bg;
-			position: sticky;
-			z-index: 999;
+					.panelfiveitemone {
+						margin-top: 32rpx;
+						font-family: Source Han Sans CN, Source Han Sans CN;
+						font-weight: 500;
+						font-size: 28rpx;
+						color: #333333;
+					}
 
-			.t {
-				font-size: 32upx;
-			}
+					.panelfiveitemtow {
+						margin-top: 16rpx;
+						font-family: Source Han Sans CN, Source Han Sans CN;
+						font-weight: 400;
+						font-size: 24rpx;
+						color: #FF534B;
+					}
 
-			.left {
-				width: $tabLeft;
-				display: flex;
-				padding-left: $paddingSize;
+					.panelfiveitemthere {
+						margin-top: 12rpx;
+						// text:nth-child(1) {
+						// 	margin-left: 0;
+						// }
 
-				.t {
-					font-weight: bold;
-				}
-			}
+						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;
+						}
+					}
 
-			.right {
-				flex: 1;
-				display: flex;
-				align-items: center;
-				justify-content: space-between;
-				padding: 0 $paddingSize;
+					.panelfiveitemfour {
+						margin-top: 12rpx;
+						width: 100%;
+						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;
+					}
 
-				.d {
-					padding: 12upx 16upx;
-					background-color: #faf2b6;
-					border-radius: 12upx;
-				}
-			}
-		}
+					.panelfiveitemfive {
+						margin-top: 8rpx;
+						font-family: Source Han Sans CN, Source Han Sans CN;
+						font-weight: 400;
+						font-size: 24rpx;
+						color: #999999;
+					}
 
-		.tab-content {
-			display: flex;
-			position: relative;
+					.panelfiveitemsex {
+						padding-bottom: 48rpx;
 
-			.left-wrap {
-				width: $tabLeft;
-				background-color: $bg;
-				padding: 0 0 $paddingSize * 3 + $cartH 0;
+						.panelfiveitemsex_oen {
+							text:nth-child(1) {
+								font-family: Source Han Sans CN, Source Han Sans CN;
+								font-weight: 400;
+								font-size: 24rpx;
+								color: #333333;
+							}
 
-				.left {
-					width: $tabLeft;
-					position: sticky;
+							text:nth-child(2) {
+								font-family: Source Han Sans CN, Source Han Sans CN;
+								font-weight: bold;
+								font-size: 36rpx;
+								color: #333333;
+							}
 
-					.item {
-						height: $itemH;
-						display: flex;
-						align-items: center;
-						padding: 0 $paddingSize;
-						justify-content: center;
+							text:nth-child(3) {
+								font-family: Source Han Sans CN, Source Han Sans CN;
+								font-weight: 400;
+								font-size: 36rpx;
+								color: #333333;
+							}
 
-						&.active {
-							background-color: #fff;
-							font-weight: bold;
+							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;
+
+						.sku-wrap {
+							width: 138rpx;
+							height: 54rpx;
+							background: #E3AD7F;
+							border-radius: 32rpx;
+							position: absolute;
+							bottom: 10rpx;
+							right: 20rpx;
+							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;
+							}
 						}
 					}
 				}
 			}
+		}
 
-			.list-wrap {
-				flex: 1;
-				padding-left: $paddingSize;
-				padding-bottom: $paddingSize * 3 + $cartH;
+		.scroll-panel {
+			flex-grow: 1;
+			// height: 0;
+			overflow: hidden;
 
-				.item-wrap {
-					.title {
-						height: $itemH;
-						display: flex;
-						align-items: center;
-						position: sticky;
-						z-index: 10;
-						background-color: #fff;
+		}
+
+
+		.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-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 {
+			.shop_skuselect {
 				margin-top: 16rpx;
+				width: 100%;
+				// background: #f7f7f7;
+				color: #999;
 				font-size: 24upx;
-				font-weight: 300;
-				color: #a5a5a5;
-			}
 
-			.select-sku-wrap {
-				.t {
-					color: #999;
-					font-size: 24upx;
+				.shop_skuselectname {
+					color: #000;
+					font-size: 26upx;
 				}
 			}
 
-			.price-wrap {
-				margin-top: 16rpx;
-				display: flex;
-				align-items: center;
-				justify-content: space-between;
+			.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: 20upx;
-						color: $numColor;
+						font-size: 28rpx;
+						color: #E8AD7B;
 						position: relative;
 						bottom: 4upx;
 						font-weight: bold;
 					}
 
 					.num {
-						font-size: 42upx;
-						color: $numColor;
+						font-size: 42rpx;
+						color: #E8AD7B;
 						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;
@@ -1031,374 +1305,535 @@
 						padding: 0 16upx;
 					}
 
-					.btn {
+
+				}
+
+				.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;
-						padding: 6upx 10upx;
-						background-color: $color-priamry;
-						border-radius: 12upx;
+					}
+
+					.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;
-
-						&::after {
-							content: "";
-							position: absolute;
-							left: -10px;
-							top: -10px;
-							right: -10px;
-							bottom: -10px;
-
-						}
+						font-size: 20rpx;
 					}
-				}
-			}
-		}
-	}
 
-	.cart-wrap {
-		width: 100%;
-		padding: $paddingSize;
-		position: fixed;
-		bottom: $paddingSize;
-		left: 0;
-		z-index: 99;
+					.i,
+					.num {
+						color: #333;
+					}
 
-		.cart-content {
-			display: flex;
-			height: $cartH;
-			border-radius: $cartH;
+					.i {
+						font-size: 20upx;
+						position: relative;
+						top: 4upx;
+						margin-left: 64rpx;
+					}
 
-			.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;
+					.num {
+						font-size: 42upx;
+						font-weight: bold;
+					}
 				}
 
 				.btn {
-					position: relative;
-					padding: 16upx 20upx;
-					background-color: $color-priamry;
-					border-radius: 12upx;
+					width: 160rpx;
+					height: 64rpx;
+					background: #FEFAF7;
+					border-radius: 36rpx 36rpx 36rpx 36rpx;
+					border: 2rpx solid #E8AD7B;
 					display: flex;
 					align-items: center;
-					justify-content: center;
-
-					&::after {
-						content: "";
-						position: absolute;
-						left: -10px;
-						top: -10px;
-						right: -10px;
-						bottom: -10px;
+					justify-content: flex-end;
 
+					.t {
+						font-weight: bold;
+						font-size: 28rpx;
+						color: #E8AD7B;
+						margin-right: 26rpx;
 					}
 				}
 			}
 		}
-	}
 
-
-	.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 {
+		.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;
+			}
 
-		.fixedview {
-			position: relative;
-			width: 100%;
+			.list-wrap {
+				padding: $paddingSize 0 0 $paddingSize;
+			}
 
-			.flex-between {
-				width: 100%;
-				padding: 24rpx 28rpx;
-				background: #FFFFFF;
-				flex-wrap: nowrap;
+			.shop-item {
+				display: flex;
+				padding-bottom: $paddingSize;
 
-				.fixedview_one {
-					.fixedview_oneone {
-						font-size: 28rpx;
-						font-family: SourceHanSansCN-Bold-, SourceHanSansCN-Bold;
-						font-weight: normal;
-						color: #333333;
-					}
+				.langcover {
+					position: relative;
+				}
 
-					.fixedview_onetow {
-						font-size: 44rpx;
-						font-family: SourceHanSansCN-Bold-, SourceHanSansCN-Bold;
-						font-weight: normal;
-						color: #F45C4C;
+				.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;
-
-						text {
-							font-size: 28rpx;
-						}
+						color: #333;
+						margin-bottom: 5rpx;
 					}
 
-					.fixedview_onethere {
-						font-family: Source Han Sans CN, Source Han Sans CN;
+					.select-sku-wrap {
 						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;
+					.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;
+
+
+							}
+						}
+					}
 				}
 			}
+
 		}
+
+
 	}
 
-	.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;
-			}
+	.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;
 
-			.t {
-				font-size: 32upx;
-				padding-top: 8upx;
-			}
-		}
+		.left {
+			width: 200rpx;
+			background-color: #f6f6f6;
+			line-height: normal;
+			box-sizing: border-box;
+			font-size: 32rpx;
 
-		.row {
-			padding: 0 $paddingSize $paddingSize;
+			// padding-bottom: 200rpx;
+			.item {
+				padding: 0 30rpx;
+				height: 92rpx;
+				line-height: 92rpx;
+				position: relative;
+				font-weight: 400;
+				font-size: 24rpx;
+				color: #333333;
 
-			.col {
-				padding-top: $paddingSize;
+				&+.item {
+					margin-top: 1px;
 
-				.t {
-					color: #999;
+					&::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;
+			}
 		}
 
-		.line {
-			height: 12upx;
-			background-color: #f2f2f2;
-		}
+		.main {
+			background-color: #fff;
+			padding-left: 20rpx;
+			width: 0;
+			flex-grow: 1;
+			box-sizing: border-box;
+			position: relative;
 
-		.close {
-			padding: $paddingSize 0;
-			display: flex;
-			justify-content: center;
+
+			.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;
+					}
+
+					.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