From 01fd9ecdf0b94f4404055b99d2ad2bbf60a94916 Mon Sep 17 00:00:00 2001
From: wangxiaowei <1121133807@qq.com>
Date: Thu, 21 Aug 2025 17:40:29 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E9=A2=84=E5=AE=9A=E6=97=B6?=
 =?UTF-8?q?=E9=97=B4=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages-sub/reserve-room/detail.vue | 308 ++++++++++++++------------
 src/pages-sub/reserve-room/room.vue   |   5 +-
 2 files changed, 165 insertions(+), 148 deletions(-)

diff --git a/src/pages-sub/reserve-room/detail.vue b/src/pages-sub/reserve-room/detail.vue
index 4d66fcc..4aa395f 100644
--- a/src/pages-sub/reserve-room/detail.vue
+++ b/src/pages-sub/reserve-room/detail.vue
@@ -66,12 +66,14 @@
             </view>
 
             <!-- 预定时间 -->
-            <view class="bg-white rounded-16rpx py-26rpx px-30rpx mt-24rpx mx-30rpx">
+            <view class="bg-white rounded-16rpx py-26rpx px-30rpx mt-24rpx mx-30rpx" @click="showReservePopup = true">
                 <view class="text-[#303133] text-32rpx leading-44rpx font-bold mb-24rpx">预定时间</view>
                 <view class="flex items-center justify-between">
                     <view class="text-[26rpx] text-[#606266] leading-36rpx">3小时起订</view>
                     <view class="flex items-center">
-                        <view class="text-[28rpx] text-[#909399] leading-40rpx">请选择</view>
+                        <view class="text-[28rpx] text-[#909399] leading-40rpx">
+                            {{ totalHour > 0 ? `${totalHour}小时` : '请选择' }}
+                        </view>
                         <view class="mt-4rpx">
                             <wd-icon name="chevron-right" size="22px" color="#909399"></wd-icon>
                         </view>
@@ -96,7 +98,7 @@
             <!-- 支付方式 -->
             <view class="bg-white rounded-16rpx py-40rpx px-30rpx mt-24rpx mx-30rpx pay">
                 <view>
-                    <wd-radio-group v-model="pay" shape="dot">
+                    <wd-radio-group v-model="pay" shape="dot" checked-color="#4C9F44">
                         <view class="flex justify-between items-center mb-40rpx" v-for="(item, index) in payList" :key="index" @click="pay = item.id">
                             <view class="flex items-center">
                                 <wd-img width="50rpx" height="50rpx" :src="item.icon"></wd-img>
@@ -145,31 +147,87 @@
             </view>
         </view>
 
-        <view class="fixed left-0 right-0 bottom-0 z-50 flex items-center justify-center bg-[#fff] rounded-8rpx text-[#fff] text-30rpx font-bold" 
+        <view class="fixed left-0 right-0 bottom-0 z-2 bg-[#fff]" 
             :style="{ height: '140rpx', bottom: 'env(safe-area-inset-bottom)' }">
-            确定转入
+            <view class="mt-12rpx w-full" v-if="!isGroupBuying">
+                <wd-gap height="2rpx" bgColor="#ECECEC"></wd-gap>
+            </view>
+            <view class="mt-22rpx flex justify-between items-center">
+                <view class="flex items-center ml-60rpx">
+                    <view class="text-24rpx text-[#303133] leading-34rpx w-72rpx" v-if="!isGroupBuying">合计：</view>
+                    <view class="flex items-center h-56rpx mr-16rpx">
+                        <price-format color="#FF5951" :first-size="40" :second-size="40" :subscript-size="28" :price="23.02"></price-format>
+                        <view class="ml-20rpx" v-if="isGroupBuying">
+                            <price-format color="#909399" :first-size="26" :second-size="26" :subscript-size="26" :price="23.02" lineThrough></price-format>
+                        </view>
+                    </view>
+                    <view class="flex items-center text-[#4C9F44]" v-if="!isGroupBuying" @click="reserveRoom.handleService">
+                        <view class="text-24rpx mr-10rpx">费用明细</view>
+                        <wd-icon name="arrow-down" size="24rpx" color="#4C9F44"></wd-icon>
+                    </view>
+                </view>
+                <view class="mr-30rpx">
+                    <wd-button custom-class='!bg-[#4C9F44] !rounded-8rpx !h-70rpx'>{{ isGroupBuying ? '立即购买' : '立即预定' }}</wd-button>
+                </view>
+            </view>
         </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>
+        <!-- 预定时间 -->
+        <wd-popup v-model="showReservePopup" lock-scroll custom-style="border-radius: 32rpx 32rpx 0rpx 0rpx;" @close="showReservePopup = false" position="bottom">
+            <view class="">
+                <view class="text-36rpx text-[#121212] leading-50rpx text-center pt-50rpx pb-40rpx">选择时间</view>
+                <view class="w-[100%] h-100rpx flex justify-between items-center">
+                    <view 
+                        class="w-[50%] h-[100%]  flex flex-col items-center justify-center rounded-l-[8rpx]" 
+                        :class="`${currentTimePicker == 'start' ? 'bg-[#4C9F44] text-[#fff]' : 'bg-[#F6F7F8] text-[#303133]'}`"
+                        @click="currentTimePicker = 'start'">
+                            <view class="text-28rpx leading-40rpx">开始时间</view>
+                            <view class="text-26rpx leading-36rpx mt-2rpx">{{ startTimeLayout }}</view>
+                    </view>
+                    <view 
+                        class="w-[50%] h-[100%] flex flex-col items-center justify-center rounded-r-[8rpx]" 
+                        :class="`${currentTimePicker == 'end' ? 'bg-[#4C9F44] text-[#fff]' : 'bg-[#F6F7F8] text-[#303133]'}`" 
+                        @click="currentTimePicker = 'end'">
+                            <view class="text-28rpx leading-40rpx">结束时间</view>
+                            <view class="text-26rpx leading-36rpx mt-2rpx">{{ endTimeLayout }}</view>
+                    </view>
+                </view>
+
+                <view class="date-picker">
+                    <view class="" v-if="currentTimePicker == 'start'">
+                        <wd-datetime-picker-view
+                            :minDate='minTimestamp'
+                            :maxDate='maxTimestamp'
+                            type="datetime"
+                            v-model="startTimeValue"
+                            :formatter="reserveRoom.formatStartTime"
+                            @change="reserveRoom.startTimePickend"
+                        />
+                    </view>
+                    <view class="" v-if="currentTimePicker == 'end'">
+                        <wd-datetime-picker-view
+                            :minDate='minTimestamp'
+                            :maxDate='maxTimestamp'
+                            type="datetime"
+                            v-model="endTimeValue"
+                            :formatter="reserveRoom.formatStartTime"
+                            @change="reserveRoom.endTimePickend"
+                        />
+                    </view>
+                </view>
+
+                <view class="pb-22rpx mt-40rpx mx-30rpx flex justify-between items-center text-[32rpx] text-center">
+                    <view class='bg-[#F6F7F8] text-[#303133] rounded-8rpx h-90rpx leading-90rpx w-[50%] mr-28rpx' @click="reserveRoom.resetTime">重置</view>
+                    <view class='bg-[#4C9F44] text-[#fff] rounded-8rpx h-90rpx leading-90rpx w-[50%]' @click="reserveRoom.confirmHour">确定（{{ totalHour }}小时）</view>
                 </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, 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)
@@ -182,12 +240,6 @@
         `${OSS}images/banner1.png`
     ])
 	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([])
     const html: string = '<p>这里是富文本内容，需要后台传递</p>'
     const isGroupBuying: boolean = false // 是否是团购套餐
     const pay = ref<number>(1) // 支付方式
@@ -215,8 +267,18 @@
         }
     ])
 
-    /* mescroll */
-	const { mescrollInit, downCallback } = useMescroll(onPageScroll, onReachBottom) // 调用mescroll的hook
+    // 预定时间相关
+    const showReservePopup = ref<boolean>(false) // 预定时间popup
+    const currentTimePicker = ref<string>('start') // 当前选择的时间类型
+    const startTimeValue = ref<string>('') // 开始时间
+    const endTimeValue = ref<string>('') // 结束时间
+    const now = new Date()
+    const minTimestamp = Date.now()
+    // 允许选择未来两个月的日期
+    const maxTimestamp = new Date(now.getFullYear(), now.getMonth() + 1, now.getDate()).getTime()
+    const startTimeLayout = ref<string>('')
+    const endTimeLayout = ref<string>('')
+    const totalHour = ref<number>(0)
 
 	onLoad(() => {
 		navbarHeight.value = getNavBarHeight()
@@ -224,129 +286,40 @@
 	})
 
     const reserveRoom = {
-        sheetMenuType: '', // 记录菜单类型
+        startTimeTimestamp: 0, // 记录开始时间戳
+        endTimeTimestamp: 0, // 记录结束时间戳
 
-        // 上拉加载的回调: 其中num:当前页 从1开始, size:每页数据条数,默认10
-		upCallback: (mescroll) => {
-			// 需要留一下数据为空的时候显示的空数据图标内容
-            // 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 = []; // 第一页需手动制空列表
-			// 	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(); // 请求失败, 结束加载
-			// })
-		},
-
-        // 收藏和取消收藏
-        handleCollect: () => {
-            // 处理收藏逻辑
-            toast.info('收藏成功')
+        startTimePickend: (e: {value: number}) => {
+            reserveRoom.startTimeTimestamp = e.value
+            startTimeLayout.value = reserveRoom.formatDate(e.value)
+            reserveRoom.totalTimestamp()
         },
 
-        // 打开客服弹窗
-        handleService: () => {
-            showPopup.value = true
+        endTimePickend: (e: {value: number}) => {
+            reserveRoom.endTimeTimestamp = e.value
+            endTimeLayout.value = reserveRoom.formatDate(e.value)
+            reserveRoom.totalTimestamp()
         },
 
-        // 打开客服二维码弹窗
-        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 // 替换为实际电话号码
-                })
+        formatStartTime: (type: string, values: string) => {
+            if (type === 'year') {
+                return `${values}年`
             }
-
-            showAction.value = false // 关闭菜单
+            if (type === 'month') {
+                return `${values}月`
+            }
+            if (type === 'date') {
+                return `${values}日`
+            }
+            if (type === 'hour') {
+                return `${values}时`
+            }
+            if (type === 'minute') {
+                return `${values}分`
+            }
+            return values
         },
-
-        // 处理导航逻辑
-        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
-            // scrollToLastY()
-        },
-
+        
         handleClick: (item: any) => {
 			// 处理点击事件
 			console.log('Clicked item:', item)
@@ -357,16 +330,59 @@
 			current.value = e.current
 		},
 
-        handleToRecharge: () => {
-            uni.navigateTo({
-                url: '/pages-sub/store-recharge/store-recharge'
-            })
-        },
-
         back: () => {       
             uni.navigateBack({
                 delta: 1,
             })
+        },
+
+        // 格式化时间
+        formatDate: (timestamp: number) => {
+            const date = new Date(timestamp)
+            const year = date.getFullYear()
+            const month = String(date.getMonth() + 1).padStart(2, '0')
+            const day = String(date.getDate()).padStart(2, '0')
+            const hour = String(date.getHours()).padStart(2, '0')
+            const minute = String(date.getMinutes()).padStart(2, '0')
+
+            return `${year}-${month}-${day} ${hour}:${minute}`
+        },
+
+        // 计算起订时间时长
+        totalTimestamp: () => {
+            if (reserveRoom.startTimeTimestamp && reserveRoom.endTimeTimestamp) {
+                const diffMs = reserveRoom.endTimeTimestamp - reserveRoom.startTimeTimestamp
+                // 计算小时，保留一位小数
+                const hours = (diffMs / 1000 / 60 / 60)
+                const result = Math.round(hours * 10) / 10 // 保留一位小数
+                if (result >= 0) {
+                    totalHour.value = result
+                }
+                return result
+            }
+            totalHour.value = 0
+            return 0 
+        },
+
+        // 重置预定时间
+        resetTime: () => {
+            startTimeValue.value = ''
+            endTimeValue.value = ''
+            startTimeLayout.value = ''
+            endTimeLayout.value = ''
+            reserveRoom.startTimeTimestamp = 0
+            reserveRoom.endTimeTimestamp = 0
+            totalHour.value = 0
+            currentTimePicker.value = 'start'
+        },  
+        
+        // 确定时间
+        confirmHour: () => {
+            if (totalHour.value <= 0) {
+                toast.info('至少起订N小时')
+                return
+            }
+            showReservePopup.value = false
         }
     }  
 </script>
diff --git a/src/pages-sub/reserve-room/room.vue b/src/pages-sub/reserve-room/room.vue
index 9c7f448..1a5efae 100644
--- a/src/pages-sub/reserve-room/room.vue
+++ b/src/pages-sub/reserve-room/room.vue
@@ -101,7 +101,7 @@
             </wd-tabs>
         </view>
 
-        <wd-popup v-model="showPopup" lock-scroll custom-style="border-radius:30rpx;" @close="showPopup = false">
+        <wd-popup v-model="showServicePopup" lock-scroll custom-style="border-radius:30rpx;" @close="showServicePopup = 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>
@@ -138,6 +138,7 @@
     const goods = ref<Array<any>[]>([])
     const showAction = ref<boolean>(false)
     const sheetMenu = ref([])
+    const showServicePopup = ref<boolean>(false)
 
     /* mescroll */
 	const { mescrollInit, downCallback } = useMescroll(onPageScroll, onReachBottom) // 调用mescroll的hook
@@ -199,7 +200,7 @@
 
         // 打开客服弹窗
         handleService: () => {
-            showPopup.value = true
+            showServicePopup.value = true
         },
 
         // 打开客服二维码弹窗