修改页面

src/pages.json

@@ -102,8 +102,7 @@
       "type": "page",
       "layout": "tabbar",
       "style": {
-        "navigationStyle": "custom",
+        "navigationStyle": "custom"
-        "navigationBarTitleText": "预约"
       }
     },
     {
@@ -126,6 +125,14 @@
           "style": {
             "navigationBarTitleText": "分包页面"
           }
+        },
+        {
+          "path": "reserve-room/reserve-room",
+          "type": "page",
+          "layout": "tabbar",
+          "style": {
+            "navigationStyle": "custom"
+          }
         }
       ]
     }

src/pages/index/index.vue

@@ -58,7 +58,7 @@
 			<view>
 				<mescroll-body @init="mescrollInit" @down="downCallback" @up="home.upCallback" :up="home.upOption" top="28rpx"
 					:fixed="true">
-					<view class="relative p-20rp mb-24rpx" v-for="(item, index) in 100" :key="index">
+					<view class="relative p-20rp mb-24rpx" v-for="(item, index) in 100" :key="index" @click="home.handleToReserveRoom(item)">
 						<view class="absolute top--28rpx left-0 z-1">
 							<wd-img width="110rpx" height="110rpx" :src="`${OSS}images/home_image4.png`"/>
 						</view>
@@ -112,9 +112,9 @@
 	import { onPageScroll, onReachBottom } from '@dcloudio/uni-app'
 	import useMescroll from "@/uni_modules/mescroll-uni/hooks/useMescroll.js";
 
-	let navbarHeight = ref(0)
+	let navbarHeight = ref<number>(0)
 	let OSS = inject('OSS')
-	let swiperList = ref([
+	let swiperList = ref<Object>([
 		{ id: 1, image: `${OSS}images/banner1.png` },
 		{ id: 2, image: `${OSS}images/banner1.png` },
 		{ id: 3, image: `${OSS}images/banner1.png` }
@@ -186,6 +186,13 @@
 		onChange: (e: any) => {
 			// 设置 current.value 为当前轮播索引
 			current.value = e.current
+		},
+
+		handleToReserveRoom: (id: number = 1) => {
+			// 跳转到预约茶室页面
+			uni.navigateTo({
+				url: `/pages-sub/reserve-room/reserve-room?id=${id}`
+			})
 		}
 	}
 </script>

src/pages/reserve/reserve.vue

@@ -2,119 +2,54 @@
 <route lang="jsonc" type="page">{
 	"layout": "tabbar",
 	"style": {
-		// 'custom' 表示开启自定义导航栏，默认 'default'
+		"navigationStyle": "custom"
-		"navigationStyle": "custom",
-		"navigationBarTitleText": "预约"
 	}
 }</route>
 
 <template>
-	<view class="bg-white px-4 pt-2" :style="{ marginTop: `${safeAreaInsets?.top}px` }">
+	<view>
-		<view class="mt-10">
+		<view class="">
-			<image src="/static/logo.svg" alt="" class="mx-auto block h-28 w-28" />
+			<wd-navbar safeAreaInsetTop :bordered="false">
-		</view>
+				<template #left>
-		<view class="mt-4 text-center text-4xl text-[#d14328]">
+					<view class="h-88rpx flex items-center">
-			unibest
+						<view class="text-[#303133] text-36rpx ml-24rpx">预约茶室</view>
-		</view>
+					</view>
-		<view class="mb-8 mt-2 text-center text-2xl">
+				</template>
-			最好用的 uniapp 开发模板
+				<template #right>
-		</view>
+					<view class="flex items-center ml-114rpx right-slot">
-
+						<wd-img width="64rpx" height="64rpx" :src="`${OSS}icon/icon_sc.png`" class="mr-16rpx"></wd-img>
-		<view class="m-auto mb-2 max-w-100 text-justify indent text-4">
+						<wd-img width="64rpx" height="64rpx" :src="`${OSS}icon/icon_kefu.png`"></wd-img>
-			{{ description }}
+					</view>
-		</view>
+				</template>
-		<view class="mt-4 text-center">
+			</wd-navbar>
-			作者：
-			<text class="text-green-500">
-				菲鸽
-			</text>
-		</view>
-		<view class="mt-4 text-center">
-			官网地址：
-			<text class="text-green-500">
-				https://unibest.tech
-			</text>
-		</view>
-
-		<!-- #ifdef H5 -->
-		<view class="mt-4 text-center">
-			<a href="https://unibest.tech/base/3-plugin" target="_blank" class="text-green-500">
-				新手请看必看章节1：
-			</a>
-		</view>
-		<!-- #endif -->
-		<!-- #ifdef MP-WEIXIN -->
-		<view class="mt-4 text-center">
-			新手请看必看章节1：
-			<text class="text-green-500">
-				https://unibest.tech/base/3-plugin
-			</text>
-		</view>
-		<!-- #endif -->
-		<!-- #ifdef H5 -->
-		<view class="mt-4 text-center">
-			<a href="https://unibest.tech/base/14-faq" target="_blank" class="text-green-500">
-				新手请看必看章节2：
-			</a>
-		</view>
-		<!-- #endif -->
-		<!-- #ifdef MP-WEIXIN -->
-		<view class="mt-4 text-center">
-			新手请看必看章节2：
-			<text class="text-green-500">
-				https://unibest.tech/base/14-faq
-			</text>
-		</view>
-		<!-- #endif -->
-
-		<view class="mt-4 text-center">
-			<wd-button type="primary">
-				UI组件按钮
-			</wd-button>
-		</view>
-		<view class="mt-4 text-center">
-			UI组件官网：<text class="text-green-500">
-				https://wot-design-uni.cn
-			</text>
 		</view>
 	</view>
 </template>
 
 <script lang="ts" setup>
-defineOptions({
+	import { ref, inject } from 'vue'
-	name: 'Home',
+	import { getNavBarHeight } from '@/utils/index'
-})
 
-// 获取屏幕边界到安全区域距离
+	let navbarHeight = ref<number>(0)
-let safeAreaInsets
+	let OSS = inject('OSS')
-let systemInfo
+	const rightPadding = ref<string>('24rpx')
 
-// #ifdef MP-WEIXIN
+	onLoad(() => {
-// 微信小程序使用新的API
+		navbarHeight.value = getNavBarHeight()
-systemInfo = uni.getWindowInfo()
-safeAreaInsets = systemInfo.safeArea
-	? {
-		top: systemInfo.safeArea.top,
-		right: systemInfo.windowWidth - systemInfo.safeArea.right,
-		bottom: systemInfo.windowHeight - systemInfo.safeArea.bottom,
-		left: systemInfo.safeArea.left,
-	}
-	: null
-// #endif
 
-// #ifndef MP-WEIXIN
+		// #ifdef MP-WEIXIN
-// 其他平台继续使用uni API
+		const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
-systemInfo = uni.getSystemInfoSync()
+		rightPadding.value = menuButtonInfo.width + 16 + 'px'
-safeAreaInsets = systemInfo.safeAreaInsets
+		// #endif
-// #endif
+	})
-const author = ref('菲鸽')
-const description = ref(
-	'unibest 是一个集成了多种工具和技术的 uniapp 开发模板，由 uniapp + Vue3 + Ts + Vite5 + UnoCss + VSCode 构建，模板具有代码提示、自动格式化、统一配置、代码片段等功能，并内置了许多常用的基本组件和基本功能，让你编写 uniapp 拥有 best 体验。',
-)
-// 测试 uni API 自动引入
-onLoad(() => {
-	console.log('项目作者:', author.value)
-})
-
-console.log('index')
 </script>
+
+<style lang="scss">
+	page {
+		background-color: #fff;
+	}
+
+	.right-slot {
+		padding-right: v-bind(rightPadding);
+	}
+</style>