From 62f0e6f25ba217756b8f6a97e13483b4ee3d5b84 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=AD=8F=E5=95=BE?= <1144797966@qq.com>
Date: Fri, 26 Jul 2024 11:16:13 +0800
Subject: [PATCH] =?UTF-8?q?=E5=88=97=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/chooseasong/index.vue           |   7 +-
 pages/index/indexs.vue                |  19 +-
 pages/order_food/goodsList_scroll.vue | 300 ++++++++++++++++++++++----
 pages/order_food/order_food.vue       |   1 +
 4 files changed, 272 insertions(+), 55 deletions(-)

diff --git a/pages/chooseasong/index.vue b/pages/chooseasong/index.vue
index 508a4ee..8531df7 100644
--- a/pages/chooseasong/index.vue
+++ b/pages/chooseasong/index.vue
@@ -1,8 +1,7 @@
 <template>
 	<view class="content">
 		<!-- 占位符导航栏 -->
-		<navseat :opacity='false' :title='"歌曲列表"' :titleshow='true' :heightshow='true' :namecolor='"#fff"'
-			:iconshow='false'></navseat>
+		<navseat :opacity='false' :title='"歌曲列表"' :titleshow='true' :heightshow='true' :namecolor='"#fff"' iconcolor='#fff'></navseat>
 		<view class="search flex-between">
 			<view class="searchinput flex-between">
 				<input type="text" class="searchinput_input" placeholder-style="color:#FFFFFF" @input="onInput"
@@ -140,14 +139,12 @@
 			if (e.q) {
 				this.shopId = this.getQueryString(decodeURIComponent(e.q), 'shopId')
 			}
-			uni.hideHomeButton();
-
 
 		},
 		computed: {},
 		mounted() {},
 		onShow() {
-			if (!uni.cache.get('miniAppOpenId')) {
+			if (!uni.cache.get('miniAppOpenId')) {//单独登录  
 				uni.login({
 					provider: 'weixin',
 					success: async (data) => {
diff --git a/pages/index/indexs.vue b/pages/index/indexs.vue
index 0dba44e..45277b9 100644
--- a/pages/index/indexs.vue
+++ b/pages/index/indexs.vue
@@ -56,16 +56,17 @@
 		methods: {
 			scanCodehandle(i) {
 				if (i == 0) {
-					uni.scanCode({
-						success: (res) => {
-							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.scanCode({
+					// 	success: (res) => {
+					// 		let tableCode = this.getQueryString(decodeURIComponent(res.result), 'code')
+					// 		uni.cache.set('tableCode', tableCode)
+					// 		if (tableCode) {
+					// 			uni.pro.navigateTo('order_food/order_food')
+					// 		}
 
-						}
-					})
+					// 	}
+					// })
 				} else {
 					if (this.usershopUserinfo.isVip == 0) {
 						// 跳转到开通页面
diff --git a/pages/order_food/goodsList_scroll.vue b/pages/order_food/goodsList_scroll.vue
index ded2c11..933aebb 100644
--- a/pages/order_food/goodsList_scroll.vue
+++ b/pages/order_food/goodsList_scroll.vue
@@ -1,11 +1,58 @@
 <template>
 	<view class="container">
+		<!-- 占位符导航栏 -->
 		<!-- 顶部面板 -->
 		<view class="top--panel">
+			<navseat :opacity='opacity' :titleshow='true' :heightshow='opacity' @Topdistance='Topdistance'></navseat>
 			<!-- 顶部面板，可添加所需要放在页面顶部的内容代码。比如banner图 -->
-			<view style="background-color: #ffaa00;text-align: center;font-size: 28rpx;padding: 10px 0;color: #fff;">
-				<view>这里顶部内容占位区域，不需要则删除</view>
-				<view>可添加需放在页面顶部的内容，比如banner图</view>
+			<image class="panelimgbackground"
+				src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/orderfood/shuangyu1.png" mode="aspectFill">
+			</image>
+			<view class="panelone">
+				后海&双屿
+			</view>
+			<view class="paneltow">
+				距离您12.44KM
+			</view>
+			<view class="panelthere flex-between">
+				<view class="paneltheretext">
+					营业时间：8:30-24:00
+				</view>
+				<view class="flex-start">
+					<view style="margin-right: 14rpx;">查看</view>
+					<u-icon name="arrow-down" color="#999999" size="28"></u-icon>
+				</view>
+			</view>
+			<view class="panelfour">
+				本店招牌菜
+			</view>
+			<view class="panelfive flex-between">
+				<view class="panelfiveitem" v-for="(item,index) in 2" :key="index">
+					<image class="panelfiveitemimage" src="@/static/avatar.png" mode="aspectFill"></image>
+					<view class="panelfiveitemone">
+						厚乳酪冰镇拿铁
+					</view>
+					<view class="panelfiveitemtow">
+						本店回头客第4名
+					</view>
+					<view class="panelfiveitemthere flex-start">
+						<text>招牌</text>
+					</view>
+					<view class="panelfiveitemfour">
+						桂香馥郁，沉入新鲜甘甜的椰..
+					</view>
+					<view class="panelfiveitemfive">
+						月售169
+					</view>
+					<view class="panelfiveitemsex flex-between">
+						<view class="panelfiveitemsex_oen">
+							<text>¥</text>
+							<text>88/份</text>
+							<text>「5份起点」</text>
+						</view>
+						<u-icon name="plus-circle-fill" color="#E9AB7A" size="40"></u-icon>
+					</view>
+				</view>
 			</view>
 		</view>
 		<!-- 滚动区域 -->
@@ -50,12 +97,16 @@
 	</view>
 
 </template>
-
 <script>
+	import navseat from '@/components/navseat.vue'
 	export default {
+		components: {
+			navseat
+		},
 		data() {
 			return {
-				scrollHeight: 400,
+				opacity: false, //是否显示
+				scrollHeight: 1000,
 				scrollTopSize: 0, //距离顶部的高度
 				fillHeight: 0, // 填充高度，用于最后一项低于滚动区域时使用
 				leftArray: [],
@@ -63,12 +114,23 @@
 				topArr: [],
 				leftIndex: 0,
 				scrollInto: '',
-				isFixed: true
+				isFixed: true,
+				heightnav: '' //点击获取的距离
 			}
 		},
 		onPageScroll(e) {
-			console.log(e)
-			if (e.scrollTop >= this.scrollTopSize) { //控制大图层
+			console.log(e.scrollTop, this.scrollTopSize)
+			try {
+				if (e.scrollTop <= 44) { //搜索导航栏显示影藏
+					this.opacity = false
+				} else {
+					this.opacity = true
+				}
+			} catch (e) {
+				//TODO handle the exception
+			}
+			if (e.scrollTop >= this.scrollTopSize-10) { //控制大图层
+			console.log('nishizhengqde')
 				this.isFixed = false;
 			} else {
 				this.isFixed = true;
@@ -77,40 +139,38 @@
 		computed: {
 			/* 计算左侧滚动位置定位 */
 			leftIntoView() {
-				return `left-${this.leftIndex > 3 ? (this.leftIndex-3):0}`;
+				return `left-${this.leftIndex > 20 ? (this.leftIndex-20):0}`;
 			}
 		},
 		onReady() {
-			/* 在非H5平台，nextTick回调后有概率获取到错误的元素高度，则添加200ms的延迟来减少BUG的产生 */
 			setTimeout(() => {
-				/* 等待滚动区域初始化完成 */
-				this.initScrollView().then(() => {
-					/* 获取列表数据，你的代码从此处开始 */
-					this.getListData();
+				uni.getSystemInfo({
+					success: (data) => {
+						this.scrollHeight = data.windowHeight
+						console.log(data.windowHeight, 1)
+						this.$u.getRect('.scroll-panel').then(res => {
+							console.log(res, 11)
+							this.scrollTopSize = res.top; //元素距离顶部的距离
+							this.scrollHeight = this.scrollHeight - this.heightnav
+							console.log(this.scrollHeight, 111)
+							this.getListData();
+						})
+					}
 				})
 			}, 100);
+			/* 在非H5平台，nextTick回调后有概率获取到错误的元素高度，则添加200ms的延迟来减少BUG的产生 */
+
 		},
 		methods: {
-			/* 初始化滚动区域 */
-			initScrollView() {
-				return new Promise((resolve, reject) => {
-					let view = uni.createSelectorQuery().select('#scroll-panel');
-					view.boundingClientRect(res => {
-						this.scrollTopSize = res.top;
-						this.scrollHeight = 812;
-						console.log(res, res.top, res.height)
-						setTimeout(() => {
-							resolve();
-						}, 100);
-					}).exec();
-				});
+			// 导航栏高度 去计算列表页的高度
+			Topdistance(e) {
+				this.heightnav = e ////导航栏高度
 			},
 			/* 获取列表数据 */
 			getListData() {
 				// Promise 为 ES6 新增的API ，有疑问的请自行学习该方法的使用。
 				new Promise((resolve, reject) => {
 					/* 因无真实数据，当前方法模拟数据。正式项目中将此处替换为 数据请求即可 */
-					uni.showLoading();
 
 					// 模拟数据
 					let mockData = () => {
@@ -156,8 +216,6 @@
 				}).then((res) => {
 					console.log('-----------请求接口返回数据示例-------------');
 					console.log(res);
-
-					uni.hideLoading();
 					this.leftArray = res.left;
 					this.mainArray = res.main;
 
@@ -211,22 +269,30 @@
 			},
 			/* 左侧导航点击 */
 			leftTap(e) {
-				let index = e.currentTarget.dataset.index;
-				this.scrollInto = `item-${index}`;
+				console.log(e)
+				try {
+					if (this.isFixed) {
+						uni.pageScrollTo({
+							scrollTop: this.scrollTopSize + this.heightnav, //滑动需要的距离  nav+列表距离的高度
+							duration: 100
+						});
+						this.isFixed = false
+						this.opacity = false
+					}
+
+				} catch (e) {
+					//TODO handle the exception
+				}
+				setTimeout(() => {
+					let index = e.currentTarget.dataset.index;
+					this.scrollInto = `item-${index}`;
+				}, 300)
 			}
 		}
 	}
 </script>
 
 <style lang="scss">
-	page {
-		height: 100vh;
-	}
-
-	.container {
-		height: 100%;
-	}
-
 	/* 容器 */
 	.container {
 		display: flex;
@@ -240,10 +306,161 @@
 			width: 100%;
 		}
 
+		.top--panel {
+			padding: 0 20rpx;
+
+			.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: 16rpx;
+				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 {
+				margin-top: 50rpx;
+				font-family: Source Han Sans CN, Source Han Sans CN;
+				font-weight: bold;
+				font-size: 32rpx;
+				color: #333333;
+			}
+
+			.panelfive {
+				.panelfiveitem {
+					margin-top: 16rpx;
+					width: 340rpx;
+
+					.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: 8rpx;
+						// 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: 10rpx;
+						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;
+					}
+
+					.panelfiveitemfive {
+						margin-top: 8rpx;
+						font-family: Source Han Sans CN, Source Han Sans CN;
+						font-weight: 400;
+						font-size: 24rpx;
+						color: #999999;
+					}
+
+					.panelfiveitemsex {
+						padding-bottom: 48rpx;
+
+						.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: 400;
+								font-size: 36rpx;
+								color: #333333;
+							}
+
+							text:nth-child(3) {
+								font-family: Source Han Sans CN, Source Han Sans CN;
+								font-weight: 400;
+								font-size: 24rpx;
+								color: #666666;
+							}
+						}
+					}
+				}
+			}
+		}
+
 		.scroll-panel {
 			flex-grow: 1;
 			// height: 0;
-			// overflow: hidden;
+			overflow: hidden;
 
 		}
 
@@ -264,6 +481,7 @@
 		align-content: flex-start;
 		font-size: 28rpx;
 		position: relative;
+
 		.left {
 			width: 200rpx;
 			background-color: #f6f6f6;
diff --git a/pages/order_food/order_food.vue b/pages/order_food/order_food.vue
index 271b7bc..ed13fba 100644
--- a/pages/order_food/order_food.vue
+++ b/pages/order_food/order_food.vue
@@ -537,6 +537,7 @@
 							}
 							return res
 						})
+						console.log(this.specifications.tagSnap)
 						this.specifications.tagSnap.forEach((val, index, arr) => { //初始化skuidname的数据  选择第一个
 							this.skuidname.push(val.children[0])
 						})