wangxiaowei/chazhi_store
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

对接包间管理接口

Browse Source
This commit is contained in:
wangxiaowei
2025-12-18 01:12:50 +08:00
parent 7531f9b144
commit 63d8e04465
1 changed files with 75 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

109
src/pages/store/room-manage.vue
View File

@ -14,51 +14,57 @@
<!-- 房间列表 --> <!-- 房间列表 -->
<view class="px-30rpx pb-40rpx pt-30rpx"> <view class="px-30rpx pb-40rpx pt-30rpx">
<view class="grid grid-cols-2 gap-24rpx"> <mescroll-body ref="mescrollItem0" @init="mescrollInit" @down="downCallback" @up="RoomManage.upCallback" :down="downOption" :up="upOption">
<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>
<!-- 房间信息 --> <view class="grid grid-cols-2 gap-24rpx">
<view class="flex flex-col p-24rpx"> <view v-for="room in list" :key="room.id"
<!-- 房间名称 --> class="flex flex-col overflow-hidden rounded-16rpx bg-white"
<view class="mb-0rpx text-center text-28rpx text-[#303133] leading-40rpx"> @click="RoomManage.handleClickRoom(room)">
{{ room.name }} ({{ room.type }}) <!-- 房间图片 -->
</view> <view class="relative aspect-[4/3] w-full">
<wd-img width="100%" height="100%" :src="room.img" mode="aspectFill" />
<!-- 状态指示器 --> <!-- 编辑图标覆盖层 -->
<view class="flex items-baseline justify-center align-middle"> <view
<!-- 状态点 --> class="absolute right-16rpx top-16rpx h-48rpx w-48rpx flex items-center justify-center rounded-24rpx bg-black bg-opacity-40"
<view class="mr-8rpx h-12rpx w-12rpx flex-shrink-0 rounded-full" @click.stop="RoomManage.handleEditImage(room, $event)">
:style="{ backgroundColor: getStatusConfig(room.status).color }" /> <wd-icon name="edit" size="16px" color="#fff" />
<!-- 状态文字 -->
<view class="text-24rpx text-[#303133] leading-34rpx"
:style="{ color: getStatusConfig(room.status).color }">
{{ getStatusConfig(room.status).text }}
</view> </view>
<!-- 右箭头 --> </view>
<view class="ml-8rpx">
<wd-icon name="arrow-right" size="12px" :color="getStatusConfig(room.status).color" /> <!-- 房间信息 -->
<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> </view>
</view> </view>
</view> </mescroll-body>
</view> </view>
</view> </view>
</template> </template>
<script lang="ts" setup> <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' import { router } from '@/utils/tools'
const OSS = inject('OSS') 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 = { 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() // 请求失败, 结束加载
})
},
/** /**
* 点击房间卡片 * 点击房间卡片
*/ */