From 7164c6e9a1beb349d50a4ec55075cd8948ac8540 Mon Sep 17 00:00:00 2001
From: wangxiaowei <1121133807@qq.com>
Date: Sat, 16 Aug 2025 18:11:19 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E5=96=84=E9=A2=84=E7=BA=A6=E8=8C=B6?=
 =?UTF-8?q?=E5=AE=A4=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/mescroll-item.vue            |  97 +++++++++++
 src/components/recharge-btn.vue             |  19 +++
 src/pages-sub/reserve-room/reserve-room.vue | 172 +++++++++++++++++++-
 src/pages/index/index.vue                   |  24 +--
 4 files changed, 292 insertions(+), 20 deletions(-)
 create mode 100644 src/components/mescroll-item.vue
 create mode 100644 src/components/recharge-btn.vue

diff --git a/src/components/mescroll-item.vue b/src/components/mescroll-item.vue
new file mode 100644
index 0000000..12b5d08
--- /dev/null
+++ b/src/components/mescroll-item.vue
@@ -0,0 +1,97 @@
+
+<template>
+    <!-- 不能用v-if (i: 每个tab页的专属下标;  index: 当前tab的下标 )-->
+    <view v-show="i === index">
+		<!-- top="120"下拉布局往下偏移,防止被悬浮菜单遮住 -->
+		<mescroll-body @init="mescrollInit" top="120" :down="downOption" @down="downCallback" :up="upOption" @up="upCallback" @emptyclick="emptyClick">
+			<!-- 数据列表 -->
+			123
+		</mescroll-body>
+	</view>
+</template>
+
+<script lang="ts" setup name="mescrollItem">
+	import { ref, watch } from 'vue'
+	import useMescroll from "@/uni_modules/mescroll-uni/hooks/useMescroll.js"
+
+    const props = defineProps({
+		i: Number, // 每个tab页的专属下标
+		index: { // 当前tab的下标
+			type: Number,
+			default() {
+				return 0
+			}
+		},
+		tabs: { // 为了请求数据,演示用,可根据自己的项目判断是否要传
+			type: Array,
+			default() {
+				return []
+			}
+		}
+	})
+
+    const { mescrollInit, downCallback, getMescroll } = useMescroll() // 调用mescroll的hook
+   	defineExpose({ getMescroll }) // 使父组件可以通过ref调用到getMescroll方法 (必须)
+	
+	const isAutoInit = props.i === props.index // 自动加载当前tab的数据
+	const downOption = {
+		auto: isAutoInit // 自动加载当前tab的数据
+	}
+	console.log("🚀 ~ downOption:", downOption)
+
+    const upOption = {
+		auto:false, // 不自动加载
+		noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
+		empty:{
+			tip: '~ 空空如也 ~', // 提示
+			btnText: '去看看'
+		}
+	}
+	
+    const isInit = ref(isAutoInit) // 当前tab是否已初始化
+	const goods = ref([]) // 数据列表
+
+    // 监听下标的变化
+	watch(
+	()=> props.index, 
+	(val)=>{
+		if (props.i === val && !isInit.value) mescrollTrigger()
+	})
+	
+	// 主动触发加载
+	const mescrollTrigger = ()=>{
+		isInit.value = true; // 标记为true
+		const mescroll = getMescroll()
+		if (mescroll) {
+			if (mescroll.optDown.use) {
+				mescroll.triggerDownScroll();
+			} else{
+				mescroll.triggerUpScroll();
+			}
+		}
+	}
+	
+	/*上拉加载的回调: 其中mescroll.num:当前页 从1开始, mescroll.size:每页数据条数,默认10 */
+	const upCallback = (mescroll)=>{
+		// let word = props.tabs[props.i].name // 具体项目中,您可能取的是tab中的type,status等字段
+		// apiGoods(mescroll.num, mescroll.size, word).then(res=>{
+		// 	const list = res.list || [] // 当前页数据
+		// 	if(mescroll.num == 1) goods.value = []; //如果是第一页需手动制空列表
+		// 	goods.value = goods.value.concat(list); //追加新数据
+		// 	mescroll.endSuccess(list.length); // 请求成功, 结束加载
+		// }).catch(()=>{
+			mescroll.endErr(); // 请求失败, 结束加载
+		// })
+	}
+	
+	//点击空布局按钮的回调
+	const emptyClick = ()=>{
+		uni.showToast({
+			title:'点击了按钮,具体逻辑自行实现'
+		})
+	}
+</script>
+
+<style lang="scss" scoped>
+//
+</style>
diff --git a/src/components/recharge-btn.vue b/src/components/recharge-btn.vue
new file mode 100644
index 0000000..f15daa8
--- /dev/null
+++ b/src/components/recharge-btn.vue
@@ -0,0 +1,19 @@
+<template>
+    <view class="w-150rpx h-72rpx rounded-16rpx bg-[#E54444] relative flex justify-center items-center">
+        <view class="bg-[#fff] opacity-[.5] w-6rpx h-24rpx rounded-40rpx absolute left-14rpx top-[50%] transform-translate-y-[-50%]"></view>
+        <view class="text-[#fff] text-28rpx leading-38rpx">{{ name }}</view>
+    </view>
+</template>
+
+<script lang="ts" setup name="rechargeBtn">
+	defineProps({
+        name: {
+            type: String,
+            default: '充值'
+        }
+    })
+</script>
+
+<style lang="scss" scoped>
+/* Add your SCSS styles here */
+</style>
diff --git a/src/pages-sub/reserve-room/reserve-room.vue b/src/pages-sub/reserve-room/reserve-room.vue
index 7ade130..ec83b64 100644
--- a/src/pages-sub/reserve-room/reserve-room.vue
+++ b/src/pages-sub/reserve-room/reserve-room.vue
@@ -24,28 +24,157 @@
 				</template>
 			</wd-navbar>
 		</view>
+
+        <view class="mt-20rpx mx-30rpx swiper">
+            <view>
+                <wd-swiper value-key="image" height="320rpx" 
+                    :indicator="{ type: 'dots-bar' }" :list="swiperList" v-model:current="current"
+                    @click="reserveRoom.handleClick" @change="reserveRoom.onChange" mode="aspectFit">
+                </wd-swiper>
+            </view>
+            <view class="mt-38rpx flex justify-between">
+                <view class="line-1">
+                    <view class="text-34rpx text-[#303133] leading-48rpx font-bold line-1">凝香茶业</view>
+                    <view class="relative mt-18rpx h-34rpx">
+                        <view class="absolute top-0 flex items-center">
+                            <wd-rate v-model="rate" readonly  active-color="#FF5951" color="#FF5951" active-icon="star-filled" icon="star" space="4rpx"></wd-rate>
+                            <view class="text-26rpx text-[#606266] leading-34rpx ml-8rpx">4.0 推荐</view>
+                        </view>
+                    </view>
+                    <view class="text-26rpx mt-18rpx leading-48rpx text-[#606266]">营业时间：周一至周日 08:00-20:00</view>
+                </view>
+                <view class="flex flex-col items-end">
+                    <rechargeBtn name="充值" />
+                    <view class="text-24rpx text-[#818CA9] mt-18rpx">1分钟前有人充值</view>
+                </view>
+            </view>
+            <view class="mt-26rpx">
+                <wd-gap bg-color="#F6F7F9" height="2rpx"></wd-gap>
+            </view>
+            <view class="mt-22rpx flex items-center justify-between">
+                <view class="">
+                    <view class="flex items-center">
+                        <view class="w-36rpx h-36rpx">
+                            <wd-img width="36rpx" height="36rpx" :src="`${OSS}icon/icon_location2.png`"/>
+                        </view>
+                        <view class="ml-2rpx text-26rpx text-[#606266] line-2">青浦区仓路478号</view>
+                    </view>
+                    <view class="text-[#92928C] text-24rpx ml-38rpx mt-14rpx">距您14km</view>
+                </view>
+                <view class="flex items-center mr-32rpx">
+                    <view class="text-center mr-20rpx">
+                        <wd-img width="64rpx" height="64rpx" :src="`${OSS}icon/icon_nav.png`"/>
+                        <view class="text-[#606266] text-24rpx leading-32rpx mt-8rpx">导航</view>
+                    </view>
+                    <view class="text-center">
+                        <wd-img width="64rpx" height="64rpx" :src="`${OSS}icon/icon_phone.png`"/>
+                        <view class="text-[#606266] text-24rpx leading-32rpx mt-8rpx">电话</view>
+                    </view>
+                </view>
+            </view>
+        </view>
+        <view class="mt-26rpx">
+            <wd-gap bg-color="#F6F7F9" height="20rpx"></wd-gap>
+        </view>
+        <view class="tabs">
+            <wd-tabs v-model="tab" swipeable slidable="always" @change="reserveRoom.tabIndex" :lazy="false">
+                <wd-tab title="茶室预定">
+                    <view class="content mx-30rpx mt-34rpx">
+                        <mescroll-body @init="mescrollInit" @down="downCallback" @up="reserveRoom.upCallback" top="28rpx"
+                            :fixed="true">
+                        </mescroll-body>
+                    </view>
+                </wd-tab>
+                <wd-tab title="团购套餐">
+                    <view class="content mx-30rpx mt-34rpx">
+                        <mescroll-body @init="mescrollInit" @down="downCallback" @up="reserveRoom.upCallback" top="28rpx"
+                            :fixed="true">
+                        </mescroll-body>
+                    </view>
+                </wd-tab>
+            </wd-tabs>
+        </view>
 	</view>
 </template>
 
 <script lang="ts" setup>
-	import { ref, inject } from 'vue'
+	import { ref, watch, inject } from 'vue'
+	import { onPageScroll, onReachBottom } from '@dcloudio/uni-app'
+	import useMescroll from "@/uni_modules/mescroll-uni/hooks/useMescroll.js";
 	import { getNavBarHeight, getCapsuleOffset } from '@/utils/index'
+    import rechargeBtn from '@/components/recharge-btn.vue'
 
 	let navbarHeight = ref<number>(0)
 	let OSS = inject('OSS')
 	const rightPadding = ref<string>('')
 
+    const swiperList = ref<string[]>([
+        `${OSS}images/banner1.png`,
+        `${OSS}images/banner1.png`,
+        `${OSS}images/banner1.png`
+    ])
+	const current = ref<number>(0)
+    const rate = ref<number>(4)
+    const tab = ref<number>(0)
+
+    /* mescroll */
+	const { mescrollInit, downCallback } = useMescroll(onPageScroll, onReachBottom) // 调用mescroll的hook
+
 	onLoad(() => {
 		navbarHeight.value = getNavBarHeight()
         rightPadding.value = getCapsuleOffset()
 	})
 
     const reserveRoom = {
+        // 上拉加载的回调: 其中num:当前页 从1开始, size:每页数据条数,默认10
+		upCallback: (mescroll) => {
+            console.log("🚀 ~ 123:", 123)
+			// 需要留一下数据为空的时候显示的空数据图标内容
+
+			// apiGoods(mescroll.num, mescroll.size).then(res=>{
+			// 	const curPageData = res.list || [] // 当前页数据
+			// 	if(mescroll.num == 1) goods.value = []; // 第一页需手动制空列表
+			// 	goods.value = goods.value.concat(curPageData); //追加新数据
+			// 	//联网成功的回调,隐藏下拉刷新和上拉加载的状态;
+			// 	//mescroll会根据传的参数,自动判断列表如果无任何数据,则提示空;列表无下一页数据,则提示无更多数据;
+
+			// 	//方法一(推荐): 后台接口有返回列表的总页数 totalPage
+			// 	//mescroll.endByPage(curPageData.length, totalPage); //必传参数(当前页的数据个数, 总页数)
+
+			// 	//方法二(推荐): 后台接口有返回列表的总数据量 totalSize
+			// 	//mescroll.endBySize(curPageData.length, totalSize); //必传参数(当前页的数据个数, 总数据量)
+
+			// 	//方法三(推荐): 您有其他方式知道是否有下一页 hasNext
+			// 	//mescroll.endSuccess(curPageData.length, hasNext); //必传参数(当前页的数据个数, 是否有下一页true/false)
+
+			// 	//方法四 (不推荐),会存在一个小问题:比如列表共有20条数据,每页加载10条,共2页.如果只根据当前页的数据个数判断,则需翻到第三页才会知道无更多数据.
+			// 	mescroll.endSuccess(curPageData.length); // 请求成功, 结束加载
+			// }).catch(()=>{
+			mescroll.endErr(); // 请求失败, 结束加载
+			// })
+		},
+
+        // tab切换获取index
+        tabIndex: (item: { index: number }) => {
+            // tabIndexs.value = item.index
+            // scrollToLastY()
+        },
+
+        handleClick: (item: any) => {
+			// 处理点击事件
+			console.log('Clicked item:', item)
+		},
+
+		onChange: (e: any) => {
+			// 设置 current.value 为当前轮播索引
+			current.value = e.current
+		},
+
         back: () => {       
             uni.navigateBack({
                 delta: 1,
             })
-        } 
+        }
     }  
 </script>
 
@@ -57,4 +186,43 @@
 	.right-slot {
 		padding-right: v-bind(rightPadding);
 	}
+
+    .swiper {
+        :deep() {
+            .wd-swiper-nav__item--dots-bar {
+                width: 56rpx !important;
+                height: 6rpx !important;
+                border-radius: 3rpx !important;
+            }
+
+            .is-active {
+                background-color: #2B9F93 !important;
+            }
+        }
+    }
+
+    .tabs {
+        :deep() {
+            
+            .wd-tabs__nav-item {
+                font-size: 32rpx !important;
+                color: #303133 !important;
+                line-height: 42rpx !important;
+                padding: 0 30rpx !important;
+            }
+
+            .wd-tabs__nav-item.is-active {
+                font-weight: 500 !important;
+            }
+
+            .wd-tabs__line {
+                bottom: 0 !important;
+                width: 60rpx !important;
+                height: 16rpx !important;
+                background-color: transparent !important;
+                background-image: url(#{$OSS}images/reserve_room_image1.png) !important;
+                background-size: cover !important;
+            }
+        }
+    }
 </style>
diff --git a/src/pages/index/index.vue b/src/pages/index/index.vue
index f6564cc..3f2638a 100644
--- a/src/pages/index/index.vue
+++ b/src/pages/index/index.vue
@@ -56,7 +56,7 @@
 			</view>
 
 			<view>
-				<mescroll-body @init="mescrollInit" @down="downCallback" @up="home.upCallback" :up="home.upOption" top="28rpx"
+				<mescroll-body @init="mescrollInit" @down="downCallback" @up="home.upCallback" top="28rpx"
 					:fixed="true">
 					<view class="relative p-20rp mb-24rpx" v-for="(item, index) in 100" :key="index" @click="home.handleToReserveRoom(item)">
 						<view class="absolute top--28rpx left-0 z-1">
@@ -114,11 +114,11 @@
 
 	let navbarHeight = ref<number>(0)
 	let OSS = inject('OSS')
-	let swiperList = ref<Object>([
-		{ id: 1, image: `${OSS}images/banner1.png` },
-		{ id: 2, image: `${OSS}images/banner1.png` },
-		{ id: 3, image: `${OSS}images/banner1.png` }
-	])
+	const swiperList = ref<string[]>([
+        `${OSS}images/banner1.png`,
+        `${OSS}images/banner1.png`,
+        `${OSS}images/banner1.png`
+    ])
 	const current = ref<number>(0)
 	const { mescrollInit, downCallback } = useMescroll(onPageScroll, onReachBottom) // 调用mescroll的hook
 
@@ -127,18 +127,6 @@
 	})
 
 	const home = {
-		upOption: {
-			// page: {
-			// 	num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
-			// 	size: 10 // 每页数据的数量
-			// },
-			noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
-			empty: {
-				tip: '~ 搜索无数据 ~', // 提示
-				btnText: '去看看'
-			}
-		},
-
 		toCity: () => {
 			uni.navigateTo({
 				url: '/pages/city/city'