添加茶室预约详情页

src/bundle/order/reserve-room/order-detail.vue

@@ -25,7 +25,7 @@
                     <wd-img width="190rpx" height="190rpx" :src="`${OSS}images/home/home_image5.png`" mode="scaleToFill"></wd-img>
                 </view>
                 <view class="flex-1">
-                    <view class="flex justify-between items-center" @click="directOrderDetail.handleToRoom">
+                    <view class="flex justify-between items-center">
                         <view class="font-bold text-30rpx leading-42rpx text-[#303133] mr-10rpx line-1 w-300rpx">这个是包间的名称</view>
                         <wd-icon name="chevron-right" size="32rpx"></wd-icon>
                         <view class="text-26rpx leading-36rpx text-[#909399]">￥324</view>
@@ -48,7 +48,7 @@
                     <view class="mb-20rpx px-30rpx">预约时间：2025-03-18  09:00-12:00</view>
                     <view class="flex justify-between items-center pl-30rpx">
                         <view>预约时长：3小时</view>
-                        <view class="bg-[#4C9F44] rounded-[100rpx_0rpx_0rpx_100rpx] font-bold text-28rpx leading-40rpx text-[#fff] w-170rpx h-56rpx flex justify-center items-center">一键续订</view>
+                        <view class="bg-[#4C9F44] rounded-[100rpx_0rpx_0rpx_100rpx] font-bold text-28rpx leading-40rpx text-[#fff] w-170rpx h-56rpx flex justify-center items-center" @click="showRenewPopup = true">一键续订</view>
                     </view>
                 </view>
             </view>
@@ -102,10 +102,10 @@
                         </view>
                     </view>
                     <view class="flex absolute top-1/2 right-0 -translate-y-1/2">
-                        <view class="text-center mr-20rpx" @click="directOrderDetail.handleLocation">
+                        <view class="text-center mr-20rpx" >
                             <wd-img width="64rpx" height="64rpx" :src="`${OSS}icon/icon_nav.png`"/>
                         </view>
-                        <view class="text-center" @click="directOrderDetail.handleCallPhone">
+                        <view class="text-center" >
                             <wd-img width="64rpx" height="64rpx" :src="`${OSS}icon/icon_phone.png`"/>
                         </view>
                     </view>
@@ -140,79 +140,137 @@
 
         <!-- 操作按钮 -->
         <view class="w-full fixed bottom-0 left-0 right-0 bg-white h-152rpx">
-            <view class="mt-34rpx">
+            <view class="text-32rpx leading-44rpx flex items-center justify-center leading-90rpx text-center mt-34rpx">
-                <!-- 待使用 -->
+                <view class="w-630rpx h-90rpx bg-[#4C9F44] rounded-8rpx text-[#fff]">分享房间给朋友</view>
-                <view class="text-32rpx leading-44rpx flex items-center justify-center leading-90rpx text-center" v-if="orderType === GroupBuyingCategoryOrderStatus.ToUse">
+            </view>
-                    <view class="w-330rpx h-90rpx bg-[#F6F7F8] rounded-8rpx text-[#303133] mr-30rpx" @click="directOrderDetail.handleToRefund">申请退款</view>
-                    <view class="w-330rpx h-90rpx bg-[#4C9F44] rounded-8rpx text-[#fff]" @click="directOrderDetail.handleToChooseTeaRoom">立即预定</view>
         </view>
 
-                <!-- 已使用 -->
+        <!-- 一键续订 -->
-                <view class="text-32rpx leading-44rpx flex items-center justify-center leading-90rpx text-center" v-if="orderType === GroupBuyingCategoryOrderStatus.Used">
+        <wd-popup v-model="showRenewPopup" lock-scroll custom-style="border-radius: 32rpx 32rpx 0rpx 0rpx;" position="bottom">
-                    <view class="w-630rpx h-90rpx bg-[#4C9F44] rounded-8rpx text-[#fff]">再次预定</view>
+            <view class="relative pb-26rpx">
+                <view class="absolute top-18rpx right-30rpx" @click="showRenewPopup = false">
+                    <wd-img width="60rpx" height='60rpx' :src="`${OSS}icon/icon_close.png`"></wd-img>
+                </view>
+                <view class="text-36rpx text-[#121212] leading-50rpx text-center pt-50rpx pb-40rpx">续订包间</view>
+                <view>
+                    <view class="mx-60rpx">
+                        <view class="text-[#01000D] text-32rpx leading-44rpx">续订时间</view>
+                        <view class="grid grid-cols-4 gap-x-20rpx gap-y-20rpx mt-28rpx">
+                            <view v-for="item in timeList" :key="item.time"
+                                class="h-72rpx rounded-16rpx flex items-center justify-center text-28rpx leading-40rpx"
+                                :class="[item.id == selectedRenewTime ? 'bg-[#4C9F44] text-[#fff]' : 'bg-[#F7F7F7] text-[#606266]']" 
+                                @click="selectedRenewTime = item.id">
+                                {{ item.time }}
                             </view>
                         </view>
                     </view>
+
+                    <view class="mx-60rpx mt-60rpx">
+                        <view class="text-[#01000D] text-32rpx leading-44rpx">支付方式</view>
+                        <view class="mt-28rpx">
+                            <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>
+                                        <view class="ml-20rpx text-30rpx text-[#303133] leading-42rpx">{{ item.name }}</view>
+                                    </view>
+                                    <view class="flex items-center">
+                                        <wd-radio :value="item.value">
+                                            <view class="text-[#303133] text-26rpx leading-36rpx mr-20rpx" v-if="item.id == 1">可用202.22</view>
+                                        </wd-radio>
+                                    </view>
+                                </view>
+                            </wd-radio-group>
+                        </view>
+                    </view>
+
+                    <view class="mt-102rpx">
+                        <wd-gap height="2rpx" bg-color="#EFF0F2"></wd-gap>
+                    </view>
+
+                    <view class="flex justify-between items-center mt-50rpx mx-60rpx">
+                        <view class="flex items-center">
+                            <view class="text-24rpx text-[#303133] leading-34rpx">合计：</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">
+                                    <price-format color="#909399" :first-size="26" :second-size="26" :subscript-size="26" :price="23.02" lineThrough></price-format>
+                                </view>
+                            </view>
+                        </view>
+                        <view>
+                            <wd-button custom-class='!bg-[#4C9F44] !rounded-8rpx !h-70rpx'>立即预定</wd-button>
+                        </view>
+                    </view>
+                </view>
+            </view>
+        </wd-popup>
+
+        <!-- 续订成功 -->
+        <wd-popup v-model="showRenewSuccessPopup" lock-scroll custom-style="border-radius: 32rpx 32rpx 0rpx 0rpx;" position="bottom">
+            <view class="relative pt-64rpx pb-74rpx">
+                <view class="flex justify-center items-center">
+                    <view class="bg-[#4C9F44] w-280rpx rounded-280rpx">
+                        <wd-img width="280rpx" height="280rpx" :src="`${OSS}images/reserve_room/reserve_room_image7.png`"/>
+                    </view>
+                </view>
+                <view class="text-[#303133] text-36rpx leading-46rpx text-center mt-48rpx">包间续订成功</view>
+                <view class="text-[#9CA3AF] text-28rpx leading-44rpx mt-16rpx text-center">可以刷新页面查看预约时间</view>
+                <view class="w-630rpx h-90rpx leading-90rpx text-center bg-[#4C9F44] rounded-8rpx text-[#fff] mt-174rpx mx-auto">好的</view>
+            </view>
+        </wd-popup>
     </view>
 </template>
 
 <script lang="ts" setup>
-    import { GroupBuyingCategory, GroupBuyingCategoryOrderStatus, GroupBuyingStatusTitle } from '@/utils/groupBuying'
     import { ReserveCategoryOrderStatus, ReserveCategoryOrderStatusText } from '@/utils/platformService'
     import {toast} from '@/utils/toast'
 
 	const OSS = inject('OSS')
 
     const title = ref<string>('')
-    const type = ref<string>('') // 订单类型：团购、抖音等
     const orderType = ref<string>('') // 订单状态：待使用、退款等
 
+    /** 续订包间 **/
+    const showRenewPopup = ref<boolean>(false)
+    const timeList = [
+        {id: 1, time: '1小时'},
+        {id: 2, time: '2小时'},
+        {id: 3, time: '3小时'},
+        {id: 4, time: '4小时'},
+        {id: 5, time: '5小时'},
+        {id: 6, time: '6小时'},
+    ]
+    const selectedRenewTime = ref<number>(0) // 选择的续订时间
+    const pay = ref<number>(1) // 支付方式
+    const payList = ref<Array<any>>([
+        {
+            id: 1,
+            name: '平台余额',
+            icon: `${OSS}icon/icon_platform_balance.png`,
+            balance: 0,
+            value: 1
+        },
+        {
+            id: 3,
+            name: '微信支付',
+            icon: `${OSS}icon/icon_weichat.png`,
+            balance: 0,
+            value: 3
+        }
+    ])
+
+    const showRenewSuccessPopup = ref<boolean>(true)
+    /** 结束 **/
+
     onLoad((args) => {
         title.value = ReserveCategoryOrderStatusText[args.orderType] || '订单详情'
         console.log("🚀 ~ title.value :", title.value )
 
-        type.value = args.type
         orderType.value = args.orderType
     })
 
     const directOrderDetail = {
-        // 跳转到套餐详情
-        handleToCombo: () => {
-
-        },
-
-        // 跳转到包间详情
-        handleToRoom: () => {
-
-        },
-
-        // 处理导航逻辑
-        handleLocation: () => {
-            toast.info('正在导航...')
-            // 可以使用uni.navigateTo或其他方式打开地图应用
-            uni.navigateTo({
-                url: '/pages/map/map' // 假设有一个地图页面
-            })
-        },
-
-        // 处理拨打电话逻辑
-        handleCallPhone: () => {
-
-        },
-
-        // 跳转到申请退款页面
-        handleToRefund: () => {
-            uni.navigateTo({
-                url: `/bundle/order/after-sales/after-sales?type=direct&orderType=${GroupBuyingCategoryOrderStatus.AfterSaleApply}`
-            })
-        },
-
-        // 跳转到立即预定页面(选择茶室)
-        handleToChooseTeaRoom: () => {
-            uni.navigateTo({
-                url: `/bundle/reserve-room/choose-room`
-            })
-        },
 
     }
 </script>