对接包间管理接口

src/pages/store/room-manage.vue

@@ -14,13 +14,15 @@
 
         <!-- 房间列表 -->
         <view class="px-30rpx pb-40rpx pt-30rpx">
+            <mescroll-body ref="mescrollItem0" @init="mescrollInit" @down="downCallback" @up="RoomManage.upCallback" :down="downOption" :up="upOption">
+
                 <view class="grid grid-cols-2 gap-24rpx">
-                <view v-for="room in roomList" :key="room.id"
+                    <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.image" mode="aspectFill" />
+                            <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"
@@ -33,7 +35,7 @@
                         <view class="flex flex-col p-24rpx">
                             <!-- 房间名称 -->
                             <view class="mb-0rpx text-center text-28rpx text-[#303133] leading-40rpx">
-                            {{ room.name }} ({{ room.type }})
+                                {{ room.title }} ({{ room.type }})
                             </view>
 
                             <!-- 状态指示器 -->
@@ -54,11 +56,15 @@
                         </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() // 请求失败, 结束加载
+			})
+		},
+
         /**
          * 点击房间卡片
          */