From c963ad1ca2878504925f59aeb1d472441788930b Mon Sep 17 00:00:00 2001
From: wangxiaowei <1121133807@qq.com>
Date: Fri, 22 Aug 2025 17:55:13 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/coupon/coupon.vue       |   0
 src/components/coupon/group-coupon.vue |   0
 src/pages-sub/coupon/coupon.vue        |  49 ++++
 src/pages-sub/reserve-room/detail.vue  | 389 +++++++++++++++----------
 src/pages-sub/reserve-room/result.vue  |  50 ++++
 src/pages-sub/reserve-room/room.vue    |  27 +-
 src/pages.json                         |  17 ++
 src/pages/index/index.vue              |   2 +-
 8 files changed, 357 insertions(+), 177 deletions(-)
 create mode 100644 src/components/coupon/coupon.vue
 create mode 100644 src/components/coupon/group-coupon.vue
 create mode 100644 src/pages-sub/coupon/coupon.vue
 create mode 100644 src/pages-sub/reserve-room/result.vue

diff --git a/src/components/coupon/coupon.vue b/src/components/coupon/coupon.vue
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/coupon/group-coupon.vue b/src/components/coupon/group-coupon.vue
new file mode 100644
index 0000000..e69de29
diff --git a/src/pages-sub/coupon/coupon.vue b/src/pages-sub/coupon/coupon.vue
new file mode 100644
index 0000000..1601843
--- /dev/null
+++ b/src/pages-sub/coupon/coupon.vue
@@ -0,0 +1,49 @@
+<route lang="jsonc" type="page">
+{
+    "layout": "default",
+    "style": {
+        "navigationStyle": "custom"
+    }
+}
+</route>
+
+<template>
+    <view>
+        <view>
+			<navbar title="优惠券" custom-class='!bg-[#F6F7F8]'></navbar>
+		</view>
+
+        <view class="mt-30rpx">
+            <view class="mx-30rpx">
+                <text class="text-[#303133] font-bold text-30rpx leading-42rpx">可用团购券</text>
+                <text class="text-[#606266] font-400 text-28rpx leading-40rpx ">2张</text>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script lang="ts" setup>
+    import {ref} from 'vue'
+
+    const couponType = ref<number>(1) // couponType 1:优惠券 2:团购券
+
+    onLoad((args) => {
+        if (args.type) {
+            couponType.value = args.type
+        }
+    })
+
+    const coupon = {
+        back() {
+            uni.navigateBack({
+                delta: 1
+            })
+        }
+    }
+</script>
+
+<style lang="scss">
+    page {
+        background-color: $cz-page-background;
+    }
+</style>
diff --git a/src/pages-sub/reserve-room/detail.vue b/src/pages-sub/reserve-room/detail.vue
index 4aa395f..e64ae07 100644
--- a/src/pages-sub/reserve-room/detail.vue
+++ b/src/pages-sub/reserve-room/detail.vue
@@ -8,173 +8,171 @@
 <template>
 	<view class="pb-180rpx">
 		<view>
-			<wd-navbar safeAreaInsetTop :bordered="false">
-				<template #left>
-					<view class="h-48rpx flex items-center" @click="reserveRoom.back">
-						<wd-img width="48rpx" height="48rpx" :src="`${OSS}icon/icon_arrow_left.png`" class="mt-6rpx"></wd-img>
-						<view class="text-[#303133] text-36rpx ml-24rpx leading-48rpx">{{ isGroupBuying ? '团购套餐' : '预约' }}</view>
-					</view>
-				</template>
-			</wd-navbar>
+			<navbar :title="isGroupBuying ? '团购套餐' : '预定'" custom-class='!bg-[#F6F7F8]'></navbar>
 		</view>
 
-        <view class="mt-20rpx mx-30rpx swiper">
-            <wd-swiper value-key="image" height="320rpx" 
-                :indicator="{ type: 'dots-bar' }" :list="swiperList" v-model:current="current"
-                @click="reserveRoom.handleClick" @change="reserveRoom.onChange" mode="aspectFit">
-            </wd-swiper>
-        </view>
-       
-        <view class="bg-white rounded-16rpx py-26rpx px-30rpx mt-24rpx mx-30rpx">
-            <view class="font-bold text-36rpx text-[#303133] leading-50rpx">这里是茶室的名称茶室的名称</view>
-            <view class="mt-14rpx flex" v-if="!isGroupBuying">
-                <view class="mr-20rpx flex items-start">
-                    <wd-tag color="#40AE36" bg-color="#40AE36" plain custom-class="!rounded-4rpx">文艺小清新</wd-tag>
+        <view :style="{ paddingTop: navbarHeight + 'px' }">
+            <view class="mt-20rpx mx-30rpx swiper">
+                <wd-swiper value-key="image" height="320rpx" 
+                    :indicator="{ type: 'dots-bar' }" :list="swiperList" v-model:current="current"
+                    @click="reserveRoom.handleClick" @change="reserveRoom.onChange" mode="aspectFit">
+                </wd-swiper>
+            </view>
+        
+            <view class="bg-white rounded-16rpx py-26rpx px-30rpx mt-24rpx mx-30rpx">
+                <view class="font-bold text-36rpx text-[#303133] leading-50rpx">这里是茶室的名称茶室的名称</view>
+                <view class="mt-14rpx flex" v-if="!isGroupBuying">
+                    <view class="mr-20rpx flex items-start">
+                        <wd-tag color="#40AE36" bg-color="#40AE36" plain custom-class="!rounded-4rpx">文艺小清新</wd-tag>
+                    </view>
+                    <view class="flex items-start">
+                        <wd-tag color="#F55726" bg-color="#F55726" plain>全息投影</wd-tag>
+                    </view>
                 </view>
-                <view class="flex items-start">
-                    <wd-tag color="#F55726" bg-color="#F55726" plain>全息投影</wd-tag>
+                <view class="flex justify-between items-center" :class="`${ isGroupBuying ? 'mt-24rpx' : ''}`">
+                    <view class="text-[#303133] text-26rpx leading-48rpx font-500" v-if="isGroupBuying">“环境幽静，谈商务放松好场所”</view>
+                    <view class="text-[#6A6363] flex-1 text-22rpx leading-32rpx text-right">已售 10+</view>
+                </view>
+                <view v-if="isGroupBuying">
+                    <view class="mt-20rpx mb-24rpx" >
+                        <wd-gap height="2rpx" bgColor="#F6F7F9"></wd-gap>
+                    </view>
+                    <view class="text-[#303133] text-28rpx leading-48rpx">
+                        <view>
+                            <text class="font-bold mr-26rpx">须知</text>
+                            <text class="font-500">需预约</text>
+                        </view>
+                        <view class="mt-22rpx">
+                            <text class="font-bold mr-26rpx">保障</text>
+                            <text class="font-500">随时退</text>
+                        </view>
+                    </view>
                 </view>
             </view>
-            <view class="flex justify-between items-center" :class="`${ isGroupBuying ? 'mt-24rpx' : ''}`">
-                <view class="text-[#303133] text-26rpx leading-48rpx font-500" v-if="isGroupBuying">“环境幽静，谈商务放松好场所”</view>
-                <view class="text-[#6A6363] flex-1 text-22rpx leading-32rpx text-right">已售 10+</view>
-            </view>
-            <view v-if="isGroupBuying">
-                <view class="mt-20rpx mb-24rpx" >
-                    <wd-gap height="2rpx" bgColor="#F6F7F9"></wd-gap>
+
+            <view v-if="!isGroupBuying">
+                <!-- 使用说明 -->
+                <view class="bg-white rounded-16rpx py-26rpx px-30rpx mt-24rpx mx-30rpx">
+                    <view class="text-[#303133] text-32rpx leading-44rpx font-bold mb-24rpx">使用说明</view>
+                    <view class="">
+                        <rich-text :nodes="html"></rich-text>
+                    </view>
                 </view>
-                <view class="text-[#303133] text-28rpx leading-48rpx">
+
+                <!-- 预定时间 -->
+                <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">
+                                {{ totalHour > 0 ? `${totalHour}小时` : '请选择' }}
+                            </view>
+                            <view class="mt-4rpx">
+                                <wd-icon name="chevron-right" size="22px" color="#909399"></wd-icon>
+                            </view>
+                        </view>
+                    </view>
+                </view>
+
+                <!-- 优惠券 -->
+                <view class="bg-white rounded-16rpx py-26rpx px-30rpx mt-24rpx mx-30rpx">
+                    <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">优惠券</view>
+                        <view class="flex items-center">
+                            <view class="text-[28rpx] text-[#909399] leading-40rpx">无可用</view>
+                            <view class="mt-4rpx">
+                                <wd-icon name="chevron-right" size="22px" color="#909399"></wd-icon>
+                            </view>
+                        </view>
+                    </view>
+                </view>
+
+                <!-- 支付方式 -->
+                <view class="bg-white rounded-16rpx py-40rpx px-30rpx mt-24rpx mx-30rpx pay">
                     <view>
-                        <text class="font-bold mr-26rpx">须知</text>
-                        <text class="font-500">需预约</text>
-                    </view>
-                    <view class="mt-22rpx">
-                        <text class="font-bold mr-26rpx">保障</text>
-                        <text class="font-500">随时退</text>
-                    </view>
-                </view>
-            </view>
-        </view>
-
-        <view v-if="!isGroupBuying">
-            <!-- 使用说明 -->
-            <view class="bg-white rounded-16rpx py-26rpx px-30rpx mt-24rpx mx-30rpx">
-                <view class="text-[#303133] text-32rpx leading-44rpx font-bold mb-24rpx">使用说明</view>
-                <view class="">
-                    <rich-text :nodes="html"></rich-text>
-                </view>
-            </view>
-
-            <!-- 预定时间 -->
-            <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">
-                            {{ totalHour > 0 ? `${totalHour}小时` : '请选择' }}
-                        </view>
-                        <view class="mt-4rpx">
-                            <wd-icon name="chevron-right" size="22px" color="#909399"></wd-icon>
-                        </view>
-                    </view>
-                </view>
-            </view>
-
-            <!-- 优惠券 -->
-            <view class="bg-white rounded-16rpx py-26rpx px-30rpx mt-24rpx mx-30rpx">
-                <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">优惠券</view>
-                    <view class="flex items-center">
-                        <view class="text-[28rpx] text-[#909399] leading-40rpx">无可用</view>
-                        <view class="mt-4rpx">
-                            <wd-icon name="chevron-right" size="22px" color="#909399"></wd-icon>
-                        </view>
-                    </view>
-                </view>
-            </view>
-
-            <!-- 支付方式 -->
-            <view class="bg-white rounded-16rpx py-40rpx px-30rpx mt-24rpx mx-30rpx pay">
-                <view>
-                    <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>
+                        <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">可用202.22</view>
+                                    </wd-radio>
+                                </view>
                             </view>
-                            <view class="flex items-center">
-                                <wd-radio :value="item.value">
-                                    <view class="text-[#303133] text-26rpx leading-36rpx mr-20rpx">可用202.22</view>
-                                </wd-radio>
+                        </wd-radio-group>
+                    </view>
+
+                    <view class="mb-30rpx">
+                        <wd-gap height="2rpx" bgColor='#F6F7F9'></wd-gap>
+                    </view>
+
+                    <view class="flex justify-between items-center">
+                        <view class="text-30rpx text-[#303133] leading-42rpx">更多支付（团购券）</view>
+                        <view class="flex items-center">
+                            <view class="text-[#4C9F44] text-28rpx leading-40rpx mr-32rpx">1张可用</view>
+                            <view class="mt-4rpx">
+                                <wd-icon name="chevron-right" size="22px" color="#909399"></wd-icon>
                             </view>
                         </view>
-                    </wd-radio-group>
+                    </view>
+                </view>
+            </view>
+
+            <view v-if="isGroupBuying">
+                <!-- 套餐详情 -->
+                <view class="bg-white rounded-16rpx py-26rpx px-30rpx mt-24rpx mx-30rpx">
+                    <view class="text-[#303133] text-32rpx leading-44rpx font-bold mb-24rpx">套餐详情</view>
+                    <view class="">
+                        <rich-text :nodes="html"></rich-text>
+                    </view>
                 </view>
 
-                <view class="mb-30rpx">
-                    <wd-gap height="2rpx" bgColor='#F6F7F9'></wd-gap>
+                <!-- 购买须知 -->
+                <view class="bg-white rounded-16rpx py-26rpx px-30rpx mt-24rpx mx-30rpx">
+                    <view class="text-[#303133] text-32rpx leading-44rpx font-bold mb-24rpx">购买须知</view>
+                    <view class="">
+                        <rich-text :nodes="html"></rich-text>
+                    </view>
                 </view>
+            </view>
 
-                <view class="flex justify-between items-center">
-                    <view class="text-30rpx text-[#303133] leading-42rpx">更多支付（团购券）</view>
-                    <view class="flex items-center">
-                        <view class="text-[#4C9F44] text-28rpx leading-40rpx mr-32rpx">1张可用</view>
-                        <view class="mt-4rpx">
-                            <wd-icon name="chevron-right" size="22px" color="#909399"></wd-icon>
+            <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="showCostPopup = true">
+                            <view class="text-24rpx mr-10rpx">费用明细</view>
+                            <wd-icon :name="showCostPopup ? 'arrow-up' : 'arrow-down'" size="24rpx" color="#4C9F44"></wd-icon>
                         </view>
                     </view>
-                </view>
-            </view>
-        </view>
-
-        <view v-if="isGroupBuying">
-            <!-- 套餐详情 -->
-            <view class="bg-white rounded-16rpx py-26rpx px-30rpx mt-24rpx mx-30rpx">
-                <view class="text-[#303133] text-32rpx leading-44rpx font-bold mb-24rpx">套餐详情</view>
-                <view class="">
-                    <rich-text :nodes="html"></rich-text>
-                </view>
-            </view>
-
-            <!-- 购买须知 -->
-            <view class="bg-white rounded-16rpx py-26rpx px-30rpx mt-24rpx mx-30rpx">
-                <view class="text-[#303133] text-32rpx leading-44rpx font-bold mb-24rpx">购买须知</view>
-                <view class="">
-                    <rich-text :nodes="html"></rich-text>
-                </view>
-            </view>
-        </view>
-
-        <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 class="mr-30rpx">
+                        <wd-button custom-class='!bg-[#4C9F44] !rounded-8rpx !h-70rpx' @click='showPayPopup = true'>{{ isGroupBuying ? '立即购买' : '立即预定' }}</wd-button>
                     </view>
                 </view>
-                <view class="mr-30rpx">
-                    <wd-button custom-class='!bg-[#4C9F44] !rounded-8rpx !h-70rpx'>{{ isGroupBuying ? '立即购买' : '立即预定' }}</wd-button>
-                </view>
             </view>
-        </view>
+	    </view>
         
         <!-- 预定时间 -->
-        <wd-popup v-model="showReservePopup" lock-scroll custom-style="border-radius: 32rpx 32rpx 0rpx 0rpx;" @close="showReservePopup = false" position="bottom">
-            <view class="">
+        <wd-popup v-model="showReservePopup" lock-scroll custom-style="border-radius: 32rpx 32rpx 0rpx 0rpx;" position="bottom">
+            <view class="relative">
+                <view class="absolute top-18rpx right-30rpx" @click="showReservePopup = 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 class="w-[100%] h-100rpx flex justify-between items-center">
                     <view 
@@ -222,18 +220,90 @@
                 </view>
             </view>
         </wd-popup>
-	</view>
+
+        <!-- 费用明细 -->
+        <wd-popup v-model="showCostPopup" lock-scroll custom-style="border-radius: 32rpx 32rpx 0rpx 0rpx;" @close="showCostPopup = false" position="bottom">
+            <view class='bg-[#FBFBFB] py-40rpx realtive'>
+                <view class="absolute top-18rpx right-30rpx" @click="showCostPopup = 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">费用明细</view>
+                <view class="mx-30rpx bg-white rounded-16rpx px-30rpx pt-40rpx mt-40rpx pb-30rpx">
+                    <view class="flex justify-between items-center text-30rpx text-[#303133] leading-42rpx">
+                        <view>茶室费</view> 
+                        <view>￥640.00</view>
+                    </view>
+                    
+                    <view class="flex justify-between items-center text-24rpx text-[#909399] leading-34rpx mt-16rpx">
+                        <view>茶室费（￥160元/小时）</view>
+                        <view>x4</view>
+                    </view>
+
+                    <view class="mt-52rpx">
+                        <view class="flex justify-between items-center text-30rpx text-[#303133] leading-42rpx">
+                            <view>茶室费</view>
+                            <view class="text-[#4C9F44]">-￥640.00</view>
+                        </view>
+                        <view class="flex justify-between items-center text-24rpx text-[#909399] leading-34rpx mt-16rpx">
+                            <view>优惠券</view>
+                            <view>-￥20</view>
+                        </view>
+                        <view class="flex justify-between items-center text-24rpx text-[#909399] leading-34rpx mt-16rpx">
+                            <view>优惠券</view>
+                            <view>-￥20</view>
+                        </view>
+                    </view>
+
+                    <view class="my-30rpx">
+                        <wd-gap height="2rpx" bgColor='#F6F7F9'></wd-gap>
+                    </view>
+
+                    <view class="flex justify-between items-center text-30rpx text-[#303133] leading-42rpx">
+                        <view>实付金额</view> 
+                        <view>￥640.00</view>
+                    </view>
+                </view>
+            </view>
+        </wd-popup>
+
+        <!-- 支付 -->
+        <wd-popup v-model="showPayPopup" lock-scroll custom-style="border-radius: 32rpx 32rpx 0rpx 0rpx;" @close="showPayPopup = false" position="bottom">
+            <view class='bg-[#FBFBFB] py-40rpx realtive'>
+                <view class="absolute top-18rpx right-30rpx" @click="showPayPopup = 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">支付</view>
+                <view class="mx-30rpx bg-white rounded-16rpx px-30rpx pt-40rpx mt-40rpx pb-30rpx">
+                    <wd-radio-group v-model="pay" shape="dot" checked-color="#4C9F44">
+                        <view class="pay" v-for="(item, index) in payList" :key="index" @click="pay = item.id">
+                            <view class="flex justify-between items-center" v-if="pay == item.value" >
+                                <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">可用202.22</view>
+                                    </wd-radio>
+                                </view>
+                            </view>
+                        </view>
+                    </wd-radio-group>
+                </view>
+
+                <view class='bg-[#4C9F44] text-[#fff] rounded-8rpx h-90rpx leading-90rpx mx-60rpx box-border text-center mt-170rpx' @click="reserveRoom.handlePay">确定付款</view>
+            </view>
+        </wd-popup>
+    </view>
 </template>
 
 <script lang="ts" setup>
 	import { ref, inject } from 'vue'
-	import { getNavBarHeight, getCapsuleOffset } from '@/utils/index'
     import {toast} from '@/utils/toast'
 
-	let navbarHeight = ref<number>(0)
-	let OSS = inject('OSS')
+	const navbarHeight = inject('navbarHeight')
+	const OSS = inject('OSS')
 
-    const rightPadding = ref<string>('')
     const swiperList = ref<string[]>([
         `${OSS}images/banner1.png`,
         `${OSS}images/banner1.png`,
@@ -280,9 +350,12 @@
     const endTimeLayout = ref<string>('')
     const totalHour = ref<number>(0)
 
+    // 费用明细相关
+    const showCostPopup = ref<boolean>(false) // 费用明细popup
+    const showPayPopup = ref<boolean>(false) // 支付popup
+
 	onLoad(() => {
-		navbarHeight.value = getNavBarHeight()
-        rightPadding.value = getCapsuleOffset()
+		
 	})
 
     const reserveRoom = {
@@ -383,17 +456,17 @@
                 return
             }
             showReservePopup.value = false
+        },
+
+        handlePay: () => {
+            // uni.navigateTo({ url: '/pages-sub/reserve-room/result' })
         }
     }  
 </script>
 
 <style lang="scss">
 	page {
-		background-color: #F6F7F8;
-	}
-
-	.right-slot {
-		padding-right: v-bind(rightPadding);
+		background-color: $cz-page-background;
 	}
 
     .swiper {
diff --git a/src/pages-sub/reserve-room/result.vue b/src/pages-sub/reserve-room/result.vue
new file mode 100644
index 0000000..9b1b01d
--- /dev/null
+++ b/src/pages-sub/reserve-room/result.vue
@@ -0,0 +1,50 @@
+<route lang="jsonc" type="page">
+{
+    "layout": "default",
+    "style": {
+        "navigationBarTitleText": "结果通知",
+        "navigationBarBackgroundColor": "#FFF"
+    }
+}
+</route>
+
+<template>
+    <view class="mx-62rpx">
+        <view class="w-300rpx h-278rpx mt-84rpx mx-auto">
+            <wd-img width="300rpx" height='278rpx' :src="`${OSS}images/reserve_room_image4.png`"></wd-img>
+        </view>
+        <view class="mt-60rpx text-center">
+            <view class="text-[#303133] text-36rpx leading-50rpx">茶室预约成功</view>
+            <view class="text-[#9CA3AF] text-28rpx leading-40rpx font-400 mt-20rpx">可以点击下方查看预约单具体信息</view>
+        </view>
+        <view class="mt-76rpx mx-30rpx flex justify-between items-center text-[32rpx] text-center">
+            <view class='bg-[#fff] text-[#303133] rounded-24rpx h-90rpx leading-90rpx w-300rpx mr-28rpx' @click="result.handleSeeOrder">查看订单</view>
+            <view class='bg-[#4C9F44] text-[#fff] rounded-24rpx h-90rpx leading-90rpx w-300rpx' @click="result.handleDone">完成</view>
+        </view>
+    </view>
+</template>
+
+<script lang="ts" setup>
+	import { ref, inject } from 'vue'
+    let OSS = inject('OSS')
+
+    const result = {
+        handleSeeOrder: () => {
+            uni.navigateTo({
+                url: '/pages-sub/reserve-room/order'
+            })
+        },
+
+        handleDone: () => {
+            uni.navigateBack({
+                delta: 1
+            })
+        },
+    }
+</script>
+
+<style lang="scss">
+    page {
+        background-color: $cz-page-background;
+    }
+</style>
diff --git a/src/pages-sub/reserve-room/room.vue b/src/pages-sub/reserve-room/room.vue
index 1a5efae..5983e22 100644
--- a/src/pages-sub/reserve-room/room.vue
+++ b/src/pages-sub/reserve-room/room.vue
@@ -7,15 +7,9 @@
 }</route>
 <template>
 	<view>
-		<view>
-			<wd-navbar safeAreaInsetTop :bordered="false">
-				<template #left>
-					<view class="h-48rpx flex items-center" @click="reserveRoom.back">
-						<wd-img width="48rpx" height="48rpx" :src="`${OSS}icon/icon_arrow_left.png`" class="mt-6rpx"></wd-img>
-						<view class="text-[#303133] text-36rpx ml-24rpx leading-48rpx">预约茶室</view>
-					</view>
-				</template>
-				<template #right>
+        <view>
+            <navbar title="预约茶室">
+                <template #right>
 					<view class="flex items-center ml-114rpx right-slot">
                         <view class="mr-16rpx flex items-center" @click="reserveRoom.handleCollect"> 
                             <wd-img width="64rpx" height="64rpx" :src="`${OSS}icon/icon_sc.png`"></wd-img>
@@ -26,10 +20,10 @@
                         </view>
 					</view>
 				</template>
-			</wd-navbar>
-		</view>
+            </navbar>
+        </view>
 
-        <view class="mt-20rpx mx-30rpx swiper">
+        <view class="mt-20rpx mx-30rpx swiper" :style="{ paddingTop: navbarHeight + 'px' }">
             <view>
                 <wd-swiper value-key="image" height="320rpx" 
                     :indicator="{ type: 'dots-bar' }" :list="swiperList" v-model:current="current"
@@ -118,15 +112,14 @@
 	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 navbarHeight = inject('navbarHeight')
+    const rightPadding = inject('capsuleOffset')
+	const OSS = inject('OSS')
 
-    const rightPadding = ref<string>('')
     const swiperList = ref<string[]>([
         `${OSS}images/banner1.png`,
         `${OSS}images/banner1.png`,
@@ -144,8 +137,6 @@
 	const { mescrollInit, downCallback } = useMescroll(onPageScroll, onReachBottom) // 调用mescroll的hook
 
 	onLoad(() => {
-		navbarHeight.value = getNavBarHeight()
-        rightPadding.value = getCapsuleOffset()
 	})
 
     const reserveRoom = {
diff --git a/src/pages.json b/src/pages.json
index b617330..59ac520 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -118,6 +118,14 @@
     {
       "root": "pages-sub",
       "pages": [
+        {
+          "path": "coupon/coupon",
+          "type": "page",
+          "layout": "default",
+          "style": {
+            "navigationStyle": "custom"
+          }
+        },
         {
           "path": "demo/index",
           "type": "page",
@@ -134,6 +142,15 @@
             "navigationStyle": "custom"
           }
         },
+        {
+          "path": "reserve-room/result",
+          "type": "page",
+          "layout": "default",
+          "style": {
+            "navigationBarTitleText": "结果通知",
+            "navigationBarBackgroundColor": "#FFF"
+          }
+        },
         {
           "path": "reserve-room/room",
           "type": "page",
diff --git a/src/pages/index/index.vue b/src/pages/index/index.vue
index 0125111..617a4ad 100644
--- a/src/pages/index/index.vue
+++ b/src/pages/index/index.vue
@@ -10,7 +10,7 @@
 
 <template>
 	<view class="home-bg">
-		<view class="home-bg w-[100vw] fixed top-0 left-0 z-100">
+		<view class="home-bg w-[100%] fixed top-0 left-0 z-100">
 			<wd-navbar safeAreaInsetTop :bordered="false" custom-style="background-color: transparent !important;">
 				<template #left>
 					<view class="flex items-center line-1 w-130rpx" @click="home.toCity">