优化页面

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>

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

@@ -8,16 +8,10 @@
 <template>
 	<view class="pb-180rpx">
 		<view>
-			<wd-navbar safeAreaInsetTop :bordered="false">
+			<navbar :title="isGroupBuying ? '团购套餐' : '预定'" custom-class='!bg-[#F6F7F8]'></navbar>
-				<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>
 		</view>
 
+        <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"
@@ -161,20 +155,24 @@
                                 <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="flex items-center text-[#4C9F44]" v-if="!isGroupBuying" @click="showCostPopup = true">
                             <view class="text-24rpx mr-10rpx">费用明细</view>
-                        <wd-icon name="arrow-down" size="24rpx" color="#4C9F44"></wd-icon>
+                            <wd-icon :name="showCostPopup ? 'arrow-up' : '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>
+                        <wd-button custom-class='!bg-[#4C9F44] !rounded-8rpx !h-70rpx' @click='showPayPopup = true'>{{ 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">
+        <wd-popup v-model="showReservePopup" lock-scroll custom-style="border-radius: 32rpx 32rpx 0rpx 0rpx;" position="bottom">
-            <view class="">
+            <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>
+
+        <!-- 费用明细 -->
+        <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)
+	const navbarHeight = inject('navbarHeight')
-	let OSS = inject('OSS')
+	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;
+		background-color: $cz-page-background;
-	}
-
-	.right-slot {
-		padding-right: v-bind(rightPadding);
 	}
 
     .swiper {

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>

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

@@ -8,13 +8,7 @@
 <template>
 	<view>
         <view>
-			<wd-navbar safeAreaInsetTop :bordered="false">
+            <navbar title="预约茶室">
-				<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 class="flex items-center ml-114rpx right-slot">
                         <view class="mr-16rpx flex items-center" @click="reserveRoom.handleCollect"> 
@@ -26,10 +20,10 @@
                         </view>
 					</view>
 				</template>
-			</wd-navbar>
+            </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)
+	const navbarHeight = inject('navbarHeight')
-	let OSS = inject('OSS')
+    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 = {

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",

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">