wangxiaowei/chazhi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改页面

Browse Source
This commit is contained in:
wangxiaowei
2025-08-16 14:46:57 +08:00
parent bd2a6c1d2a
commit ca54202b06
3 changed files with 57 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/pages.json
View File

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

13
src/pages/index/index.vue
View File

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

133
src/pages/reserve/reserve.vue
View File

@ -2,119 +2,54 @@
<route lang="jsonc" type="page">{
"layout": "tabbar",
"style": {
// 'custom' 表示开启自定义导航栏，默认 'default'
"navigationStyle": "custom",
"navigationBarTitleText": "预约"
"navigationStyle": "custom"
}
}</route>
<template>
<view class="bg-white px-4 pt-2" :style="{ marginTop: `${safeAreaInsets?.top}px` }">
<view class="mt-10">
<image src="/static/logo.svg" alt="" class="mx-auto block h-28 w-28" />
<view>
<view class="">
<wd-navbar safeAreaInsetTop :bordered="false">
<template #left>
<view class="h-88rpx flex items-center">
<view class="text-[#303133] text-36rpx ml-24rpx">预约茶室</view>
</view>
<view class="mt-4 text-center text-4xl text-[#d14328]">
unibest
</template>
<template #right>
<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>
<wd-img width="64rpx" height="64rpx" :src="`${OSS}icon/icon_kefu.png`"></wd-img>
</view>
<view class="mb-8 mt-2 text-center text-2xl">
最好用的 uniapp 开发模板
</view>
<view class="m-auto mb-2 max-w-100 text-justify indent text-4">
{{ description }}
</view>
<view class="mt-4 text-center">
作者：
<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>
</template>
</wd-navbar>
</view>
</view>
</template>
<script lang="ts" setup>
defineOptions({
name: 'Home',
})
import { ref, inject } from 'vue'
import { getNavBarHeight } from '@/utils/index'
// 获取屏幕边界到安全区域距离
let safeAreaInsets
let systemInfo
let navbarHeight = ref<number>(0)
let OSS = inject('OSS')
const rightPadding = ref<string>('24rpx')
onLoad(() => {
navbarHeight.value = getNavBarHeight()
// #ifdef MP-WEIXIN
// 微信小程序使用新的API
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
const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
rightPadding.value = menuButtonInfo.width + 16 + 'px'
// #endif
// #ifndef MP-WEIXIN
// 其他平台继续使用uni API
systemInfo = uni.getSystemInfoSync()
safeAreaInsets = systemInfo.safeAreaInsets
// #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>