添加预约茶室页面

src/pages-sub/reserve-room/reserve-room.vue

@@ -5,7 +5,6 @@
 		"navigationStyle": "custom"
 	}
 }</route>
-
 <template>
 	<view>
 		<view>
@@ -18,10 +17,13 @@
 				</template>
 				<template #right>
 					<view class="flex items-center ml-114rpx right-slot">
-                        <view class="mr-16rpx flex items-center"> 
+                        <view class="mr-16rpx flex items-center" @click="reserveRoom.handleCollect"> 
                             <wd-img width="64rpx" height="64rpx" :src="`${OSS}icon/icon_sc.png`"></wd-img>
+                            <!-- <wd-img width="64rpx" height="64rpx" :src="`${OSS}icon/icon_sc_s.png`"></wd-img> -->
+                        </view>
+                        <view @click="reserveRoom.handleService" class="flex items-center">
+						    <wd-img width="64rpx" height="64rpx" :src="`${OSS}icon/icon_kefu.png`"></wd-img>
                         </view>
-						<wd-img width="64rpx" height="64rpx" :src="`${OSS}icon/icon_kefu.png`"></wd-img>
 					</view>
 				</template>
 			</wd-navbar>
@@ -46,7 +48,9 @@
                     <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 @click="reserveRoom.handleToRecharge">
+                        <rechargeBtn name="充值" />
+                    </view>
                     <view class="text-24rpx text-[#818CA9] mt-18rpx">1分钟前有人充值</view>
                 </view>
             </view>
@@ -64,11 +68,11 @@
                     <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">
+                    <view class="text-center mr-20rpx" @click="reserveRoom.handleLocation">
                         <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">
+                    <view class="text-center" @click="reserveRoom.handleCallPhone">
                         <wd-img width="64rpx" height="64rpx" :src="`${OSS}icon/icon_phone.png`"/>
                         <view class="text-[#606266] text-24rpx leading-32rpx mt-8rpx">电话</view>
                     </view>
@@ -82,34 +86,47 @@
             <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"
+                        <mescroll-body @init="mescrollInit" @down="downCallback" @up="reserveRoom.upCallback">
-                            :fixed="true">
+                            <roomList :reserve="true"></roomList>
                         </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"
+                        <mescroll-body @init="mescrollInit" @down="downCallback" @up="reserveRoom.upCallback">
-                            :fixed="true">
+                            <roomList></roomList>
                         </mescroll-body>
                     </view>
                 </wd-tab>
             </wd-tabs>
         </view>
+
+        <wd-popup v-model="showPopup" lock-scroll custom-style="border-radius:30rpx;" @close="showPopup = false">
+            <view class="text-center w-440rpx h-560rpx flex flex-col justify-center items-center">
+                <view class="w-240rpx h-240rpx" @click="reserveRoom.handleOpenServiceSheet">
+                    <wd-img width='100%' height='100%' :src="`${OSS}images/reserve_room_image3.png`"></wd-img>
+                </view>
+                <view class="text-36rpx text-[#303133] leading-50rpx mt-54rpx">门店客服</view>
+                <view class="text-28rpx text-[#818CA9] leading-50rpx mt-22rpx">点击二维码添加客服</view>
+            </view>
+        </wd-popup>
+        <wd-action-sheet v-model="showAction" :actions="sheetMenu"  cancel-text="取消" @close="showAction = false" @select="reserveRoom.handleSelectMenu" />
 	</view>
 </template>
 
 <script lang="ts" setup>
-	import { ref, watch, inject } from 'vue'
+	import { ref, 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'
+    import roomList from '@/components/reserve/room-list.vue'
+    import {toast} from '@/utils/toast'
 
 	let navbarHeight = ref<number>(0)
 	let OSS = inject('OSS')
-	const rightPadding = ref<string>('')
 
+    const rightPadding = ref<string>('')
     const swiperList = ref<string[]>([
         `${OSS}images/banner1.png`,
         `${OSS}images/banner1.png`,
@@ -118,6 +135,10 @@
 	const current = ref<number>(0)
     const rate = ref<number>(4)
     const tab = ref<number>(0)
+    const goods = ref<Array<any>[]>([])
+    const showPopup = ref<boolean>(false)
+    const showAction = ref<boolean>(false)
+    const sheetMenu = ref([])
 
     /* mescroll */
 	const { mescrollInit, downCallback } = useMescroll(onPageScroll, onReachBottom) // 调用mescroll的hook
@@ -128,11 +149,26 @@
 	})
 
     const reserveRoom = {
+        sheetMenuType: '', // 记录菜单类型
+
         // 上拉加载的回调: 其中num:当前页 从1开始, size:每页数据条数,默认10
 		upCallback: (mescroll) => {
-            console.log("🚀 ~ 123:", 123)
 			// 需要留一下数据为空的时候显示的空数据图标内容
+            // list({
+            //     page: mescroll.num,
+            //     size: mescroll.size
+            // }).then((res: { list: Array<any>, totalPages: Number }) => {
+            //     const curPageData = res.list || [] // 当前页数据
+            //     if(mescroll.num == 1) goods.value = []; // 第一页需手动制空列表
+			// 	goods.value = goods.value.concat(curPageData); //追加新数据
 
+            //     console.log("🚀 ~ goods:", goods)
+
+            //     mescroll.endByPage(curPageData.length, res.totalPages); //必传参数(当前页的数据个数, 总页数)
+                
+            // }).catch(() => {
+            //     mescroll.endErr(); // 请求失败, 结束加载
+            // })
 			// apiGoods(mescroll.num, mescroll.size).then(res=>{
 			// 	const curPageData = res.list || [] // 当前页数据
 			// 	if(mescroll.num == 1) goods.value = []; // 第一页需手动制空列表
@@ -156,6 +192,80 @@
 			// })
 		},
 
+        // 收藏和取消收藏
+        handleCollect: () => {
+            // 处理收藏逻辑
+            toast.info('收藏成功')
+        },
+
+        // 打开客服弹窗
+        handleService: () => {
+            showPopup.value = true
+        },
+
+        // 打开客服二维码弹窗
+        handleOpenServiceSheet: () => {
+            reserveRoom.sheetMenuType = 'service'
+            showAction.value = true
+            sheetMenu.value = [
+                {
+                    name: '保存图片',
+                    value: 'saveImage'
+                },
+                {
+                    name: '添加门店微信',
+                    value: 'addWeChat'  
+                }
+            ]
+        },
+
+        // 处理菜单选择
+        handleSelectMenu: (item: any) => {
+            console.log("🚀 ~ item:", item)
+            if (reserveRoom.sheetMenuType == 'service') {
+                // 处理客服相关的菜单项
+                if (item.value === 'saveImage') {
+                    // 处理保存图片逻辑
+                    toast.success('图片已保存')
+                } else if (item.value === 'addWeChat') {
+                    // 处理添加微信逻辑
+                    toast.success('已添加门店微信')
+                }
+            } else if (reserveRoom.sheetMenuType == 'call' && item.index == 1) {
+                uni.makePhoneCall({
+                    phoneNumber: item.value // 替换为实际电话号码
+                })
+            }
+
+            showAction.value = false // 关闭菜单
+        },
+
+        // 处理导航逻辑
+        handleLocation: () => {
+            toast.info('正在导航...')
+            // 可以使用uni.navigateTo或其他方式打开地图应用
+            uni.navigateTo({
+                url: '/pages/map/map' // 假设有一个地图页面
+            })
+        },
+
+        // 处理拨打电话逻辑
+        handleCallPhone: () => {
+            reserveRoom.sheetMenuType = 'call'
+            showAction.value = true
+            sheetMenu.value = [
+                {
+                    name:  15005837859,
+                    value: ''
+                },
+                {
+                    name: '呼叫',
+                    value: 15005837859  
+                }
+            ]
+     
+        },
+
         // tab切换获取index
         tabIndex: (item: { index: number }) => {
             // tabIndexs.value = item.index
@@ -172,6 +282,12 @@
 			current.value = e.current
 		},
 
+        handleToRecharge: () => {
+            uni.navigateTo({
+                url: '/pages-sub/store-recharge/store-recharge'
+            })
+        },
+
         back: () => {       
             uni.navigateBack({
                 delta: 1,
@@ -205,7 +321,6 @@
 
     .tabs {
         :deep() {
-            
             .wd-tabs__nav-item {
                 font-size: 32rpx !important;
                 color: #303133 !important;