From 63d8e044652eb24e353ca8c7ed69dacc78693292 Mon Sep 17 00:00:00 2001
From: wangxiaowei <1121133807@qq.com>
Date: Thu, 18 Dec 2025 01:12:50 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AF=B9=E6=8E=A5=E5=8C=85=E9=97=B4=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86=E6=8E=A5=E5=8F=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/store/room-manage.vue | 109 ++++++++++++++++++++++----------
 1 file changed, 75 insertions(+), 34 deletions(-)

diff --git a/src/pages/store/room-manage.vue b/src/pages/store/room-manage.vue
index ffe16da..42de05f 100644
--- a/src/pages/store/room-manage.vue
+++ b/src/pages/store/room-manage.vue
@@ -14,51 +14,57 @@
 
         <!-- 房间列表 -->
         <view class="px-30rpx pb-40rpx pt-30rpx">
-            <view class="grid grid-cols-2 gap-24rpx">
-                <view v-for="room in roomList" :key="room.id"
-                    class="flex flex-col overflow-hidden rounded-16rpx bg-white"
-                    @click="RoomManage.handleClickRoom(room)">
-                    <!-- 房间图片 -->
-                    <view class="relative aspect-[4/3] w-full">
-                        <wd-img width="100%" height="100%" :src="room.image" mode="aspectFill" />
-                        <!-- 编辑图标覆盖层 -->
-                        <view
-                            class="absolute right-16rpx top-16rpx h-48rpx w-48rpx flex items-center justify-center rounded-24rpx bg-black bg-opacity-40"
-                            @click.stop="RoomManage.handleEditImage(room, $event)">
-                            <wd-icon name="edit" size="16px" color="#fff" />
-                        </view>
-                    </view>
+            <mescroll-body ref="mescrollItem0" @init="mescrollInit" @down="downCallback" @up="RoomManage.upCallback" :down="downOption" :up="upOption">
 
-                    <!-- 房间信息 -->
-                    <view class="flex flex-col p-24rpx">
-                        <!-- 房间名称 -->
-                        <view class="mb-0rpx text-center text-28rpx text-[#303133] leading-40rpx">
-                            {{ room.name }} ({{ room.type }})
-                        </view>
-
-                        <!-- 状态指示器 -->
-                        <view class="flex items-baseline justify-center align-middle">
-                            <!-- 状态点 -->
-                            <view class="mr-8rpx h-12rpx w-12rpx flex-shrink-0 rounded-full"
-                                :style="{ backgroundColor: getStatusConfig(room.status).color }" />
-                            <!-- 状态文字 -->
-                            <view class="text-24rpx text-[#303133] leading-34rpx"
-                                :style="{ color: getStatusConfig(room.status).color }">
-                                {{ getStatusConfig(room.status).text }}
+                <view class="grid grid-cols-2 gap-24rpx">
+                    <view v-for="room in list" :key="room.id"
+                        class="flex flex-col overflow-hidden rounded-16rpx bg-white"
+                        @click="RoomManage.handleClickRoom(room)">
+                        <!-- 房间图片 -->
+                        <view class="relative aspect-[4/3] w-full">
+                            <wd-img width="100%" height="100%" :src="room.img" mode="aspectFill" />
+                            <!-- 编辑图标覆盖层 -->
+                            <view
+                                class="absolute right-16rpx top-16rpx h-48rpx w-48rpx flex items-center justify-center rounded-24rpx bg-black bg-opacity-40"
+                                @click.stop="RoomManage.handleEditImage(room, $event)">
+                                <wd-icon name="edit" size="16px" color="#fff" />
                             </view>
-                            <!-- 右箭头 -->
-                            <view class="ml-8rpx">
-                                <wd-icon name="arrow-right" size="12px" :color="getStatusConfig(room.status).color" />
+                        </view>
+
+                        <!-- 房间信息 -->
+                        <view class="flex flex-col p-24rpx">
+                            <!-- 房间名称 -->
+                            <view class="mb-0rpx text-center text-28rpx text-[#303133] leading-40rpx">
+                                {{ room.title }} ({{ room.type }})
+                            </view>
+
+                            <!-- 状态指示器 -->
+                            <view class="flex items-baseline justify-center align-middle">
+                                <!-- 状态点 -->
+                                <view class="mr-8rpx h-12rpx w-12rpx flex-shrink-0 rounded-full"
+                                    :style="{ backgroundColor: getStatusConfig(room.status).color }" />
+                                <!-- 状态文字 -->
+                                <view class="text-24rpx text-[#303133] leading-34rpx"
+                                    :style="{ color: getStatusConfig(room.status).color }">
+                                    {{ getStatusConfig(room.status).text }}
+                                </view>
+                                <!-- 右箭头 -->
+                                <view class="ml-8rpx">
+                                    <wd-icon name="arrow-right" size="12px" :color="getStatusConfig(room.status).color" />
+                                </view>
                             </view>
                         </view>
                     </view>
                 </view>
-            </view>
+            </mescroll-body>
         </view>
     </view>
 </template>
 
 <script lang="ts" setup>
+    import { onPageScroll, onReachBottom } from '@dcloudio/uni-app'
+	import useMescroll from "@/uni_modules/mescroll-uni/hooks/useMescroll.js"
+    import { getRoomList } from '@/api/store'
     import { router } from '@/utils/tools'
 
     const OSS = inject('OSS')
@@ -131,7 +137,42 @@
         },
     ])
 
+    // mescroll
+	const { mescrollInit, downCallback, getMescroll } = useMescroll(onPageScroll, onReachBottom) // 调用mescroll的hook
+    const downOption = {
+		auto: true
+	}
+	const upOption = {
+		auto: true,
+		textNoMore: '~ 已经到底啦 ~', //无更多数据的提示
+	}
+    const orderStatus = ref<string>('')
+	const list = ref<Array<any>>([]) // 茶室列表
+
     const RoomManage = {
+        /**
+         * 分页加载
+         * @param mescroll 
+         */
+		upCallback: (mescroll) => {
+			// 需要留一下数据为空的时候显示的空数据图标内容
+            const filter = {
+				page: mescroll.num, 
+				size: mescroll.size,
+				store_id: 1,
+			}
+
+            getRoomList(filter).then((res) => {
+            console.log("🚀 ~ res:", res)
+				const curPageData = res.list || [] // 当前页数据
+				if(mescroll.num == 1) list.value = [] // 第一页需手动制空列表
+				list.value = list.value.concat(curPageData) //追加新数据
+				mescroll.endSuccess(curPageData.length, Boolean(res.more))
+			}).catch(() => {
+				mescroll.endErr() // 请求失败, 结束加载
+			})
+		},
+
         /**
          * 点击房间卡片
          */