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-20 17:38:24 +08:00
parent b7b8cab0a5
commit 43b96fbfdf
6 changed files with 487 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
src/components/reserve/room-list.vue
View File

@ -5,28 +5,56 @@
<wd-img width="100%" height="100%" :src="`${OSS}images/reserve_room_image2.png`"
radius="10rpx"/>
</view>
<view class="flex-1 ml-32rpx">
<view class="text-28rpx text-[#303133] leading-38rpx">双人包间这个是标题名称</view>
<view class="mt-22rpx flex items-center">
<view class="mr-20rpx">
<view class="flex-1 ml-32rpx" v-if="!isGroupBuying">
<view class="text-28rpx text-[#303133] leading-40rpx line-1 w-420rpx">双人包间这个是标题名双人包间这个是标题名双人包间这个是标题名</view>
<view class="mt-22rpx flex">
<view class="mr-20rpx flex items-start">
<wd-tag color="#40AE36" bg-color="#40AE36" plain custom-class="!rounded-4rpx">文艺小清新</wd-tag>
</view>
<view class="">
<view class="flex items-start">
<wd-tag color="#F55726" bg-color="#F55726" plain>全息投影</wd-tag>
</view>
</view>
<view class="flex justify-between items-end">
<price-format color="#FF5951" class="m-r-10" :first-size="34" :second-size="26"
<price-format color="#FF5951" class="m-r-10" :first-size="34" :second-size="26"
:subscript-size="26" :price="23.02" weight="500"></price-format>
<view class="">
<view>
<view class="text-[#6A6363] text-22rpx leading-30rpx">已售 10+</view>
<view class="w-104rpx h-52rpx mt-16rpx text-26rpx font-400 text-[#4C9F44] leading-52rpx text-center border-[2rpx] border-[#4C9F44] rounded-10rpx">预定</view>
<view class="w-104rpx h-52rpx mt-16rpx text-26rpx font-400 text-[#4C9F44] leading-52rpx text-center border-[2rpx] border-[#4C9F44] rounded-10rpx" @click="roomList.toPage('detail', 1)">预定</view>
</view>
</view>
</view>
<!-- 团购套餐 -->
<view class="flex-1 ml-32rpx flex justify-between items-start h-220rpx relative" v-if="isGroupBuying">
<view>
<view class="text-28rpx text-[#303133] leading-40rpx line-1 w-420rpx">这是团购套餐的名称这是团购套餐的名称这是团购套餐的名称这是团购套餐的名称</view>
<view class="mt-20rpx flex items-center h-32rpx">
<view class="mr-20rpx flex items-start">
<wd-tag color="#40AE36" bg-color="#40AE36" plain custom-class="!rounded-4rpx">3小时</wd-tag>
</view>
</view>
<!-- TODO 这里要有规格判断 -->
<view v-if="spec" class="text-[#999] text-22rpx leading-30rpx mt-12rpx w-300rpx line-2">适用包间：绿茶、红茶、青茶、白茶、绿茶适用包间：绿茶、红茶、青茶、白茶、绿茶</view>
<view class="flex mb-52rpx" :class="`${spec ? 'mt-10rpx' : 'mt-55rpx'}`">
<view class="mr-14rpx">
<price-format color="#FF5951" :first-size="34" :second-size="26"
:subscript-size="26" :price="23.02" weight="500"></price-format>
</view>
<view class="relative">
<wd-img width="56rpx" height="56rpx" :src="`${OSS}icon/icon_sale.png`" radius="10rpx"/>
<view class="absolute top-18rpx left-16rpx rotate-30 text-[#fff] text-18rpx leading-26rpx">5折</view>
</view>
</view>
</view>
<view class="absolute bottom-0 right-0">
<view class="text-[#6A6363] text-22rpx leading-30rpx">已售 10+</view>
<view class="w-104rpx h-52rpx mt-16rpx text-26rpx font-400 text-[#4C9F44] leading-52rpx text-center border-[2rpx] border-[#4C9F44] rounded-10rpx" @click="roomList.toPage('detail', 1)">预定</view>
</view>
</view>
</view>
<view class="flex justify-around items-center ml-12rpx mt-18rpx" v-if="reserve">
<view class="w-20rpx text-center " v-for="(item, index) in 24" :key="index">
<view class="flex justify-around items-center ml-12rpx mt-18rpx" v-if="isReserve && !isGroupBuying">
<view class="w-20rpx text-center" v-for="(item, index) in 24" :key="index">
<view class="font-400 text-20rpx text-[#606266] leading-28rpx">{{ item }}</view>
<view class="h-12rpx rounded-6rpx bg-[#4C9F44] mt-4rpx" :class="`${index === 1 || index === 11 ? 'bg-[#C9C9C9]' : ''}`"></view>
</view>
@ -38,20 +66,39 @@
</template>
<script lang="ts" setup name="roomList">
import { ref, watch, inject } from 'vue'
import priceFormat from '@/components/price-format.vue';
import { ref, watch, inject } from 'vue'
import priceFormat from '@/components/price-format.vue';
const props = defineProps({
list: {
type: Array,
default: () => []
},
reserve: {
type: Boolean,
default: true
let OSS = inject('OSS')
const spec = ref<boolean>(true)
const props = defineProps({
list: {
type: Array,
default: () => []
},
// 是否开启预定
isReserve: {
type: Boolean,
default: true
},
// 是否是团购
isGroupBuying: {
type: Boolean,
default: false
}
})
const roomList = {
toPage: (type: string, id: number) => {
if (type === 'detail') {
uni.navigateTo({
url: `/pages-sub/reserve-room/detail?id=${id}`
})
}
}
}
})
let OSS = inject('OSS')
</script>

404
src/pages-sub/reserve-room/detail.vue Normal file
View File

@ -0,0 +1,404 @@
<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page -->
<route lang="jsonc" type="page">{
"layout": "tabbar",
"style": {
"navigationStyle": "custom"
}
}</route>
<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>
</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>
<view class="flex items-start">
<wd-tag color="#F55726" bg-color="#F55726" plain>全息投影</wd-tag>
</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>
<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 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="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">请选择</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">
<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>
</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>
</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-50 flex items-center justify-center bg-[#fff] rounded-8rpx text-[#fff] text-30rpx font-bold"
:style="{ height: '140rpx', bottom: 'env(safe-area-inset-bottom)' }">
确定转入
</view>
<wd-popup v-model="showPopup" lock-scroll custom-style="border-radius:30rpx;" @close="showPopup = false">
<view class="text-center w-440rpx h-560rpx flex flex-col justify-center items-center">
<view class="w-240rpx h-240rpx" @click="reserveRoom.handleOpenServiceSheet">
<wd-img width='100%' height='100%' :src="`${OSS}images/reserve_room_image3.png`"></wd-img>
</view>
<view class="text-36rpx text-[#303133] leading-50rpx mt-54rpx">门店客服</view>
<view class="text-28rpx text-[#818CA9] leading-50rpx mt-22rpx">点击二维码添加客服</view>
</view>
</wd-popup>
<wd-action-sheet v-model="showAction" :actions="sheetMenu" cancel-text="取消" @close="showAction = false" @select="reserveRoom.handleSelectMenu" />
</view>
</template>
<script lang="ts" setup>
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 rightPadding = ref<string>('')
const swiperList = ref<string[]>([
`${OSS}images/banner1.png`,
`${OSS}images/banner1.png`,
`${OSS}images/banner1.png`
])
const current = ref<number>(0)
const rate = ref<number>(4)
const tab = ref<number>(0)
const goods = ref<Array<any>[]>([])
const showPopup = ref<boolean>(false)
const showAction = ref<boolean>(false)
const sheetMenu = ref([])
const html: string = '<p>这里是富文本内容，需要后台传递</p>'
const isGroupBuying: boolean = false // 是否是团购套餐
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: 2,
name: '门店余额',
icon: `${OSS}icon/icon_store_balance.png`,
balance: 0,
value: 2
},
{
id: 3,
name: '微信支付',
icon: `${OSS}icon/icon_weichat.png`,
balance: 0,
value: 3
}
])
/* mescroll */
const { mescrollInit, downCallback } = useMescroll(onPageScroll, onReachBottom) // 调用mescroll的hook
onLoad(() => {
navbarHeight.value = getNavBarHeight()
rightPadding.value = getCapsuleOffset()
})
const reserveRoom = {
sheetMenuType: '', // 记录菜单类型
// 上拉加载的回调: 其中num:当前页 从1开始, size:每页数据条数,默认10
upCallback: (mescroll) => {
// 需要留一下数据为空的时候显示的空数据图标内容
// list({
// page: mescroll.num,
// size: mescroll.size
// }).then((res: { list: Array<any>, totalPages: Number }) => {
// const curPageData = res.list || [] // 当前页数据
// if(mescroll.num == 1) goods.value = []; // 第一页需手动制空列表
// goods.value = goods.value.concat(curPageData); //追加新数据
// console.log("🚀 ~ goods:", goods)
// mescroll.endByPage(curPageData.length, res.totalPages); //必传参数(当前页的数据个数, 总页数)
// }).catch(() => {
// mescroll.endErr(); // 请求失败, 结束加载
// })
// apiGoods(mescroll.num, mescroll.size).then(res=>{
// const curPageData = res.list || [] // 当前页数据
// if(mescroll.num == 1) goods.value = []; // 第一页需手动制空列表
// goods.value = goods.value.concat(curPageData); //追加新数据
// //联网成功的回调,隐藏下拉刷新和上拉加载的状态;
// //mescroll会根据传的参数,自动判断列表如果无任何数据,则提示空;列表无下一页数据,则提示无更多数据;
// //方法一(推荐): 后台接口有返回列表的总页数 totalPage
// //mescroll.endByPage(curPageData.length, totalPage); //必传参数(当前页的数据个数, 总页数)
// //方法二(推荐): 后台接口有返回列表的总数据量 totalSize
// //mescroll.endBySize(curPageData.length, totalSize); //必传参数(当前页的数据个数, 总数据量)
// //方法三(推荐): 您有其他方式知道是否有下一页 hasNext
// //mescroll.endSuccess(curPageData.length, hasNext); //必传参数(当前页的数据个数, 是否有下一页true/false)
// //方法四 (不推荐),会存在一个小问题:比如列表共有20条数据,每页加载10条,共2页.如果只根据当前页的数据个数判断,则需翻到第三页才会知道无更多数据.
// mescroll.endSuccess(curPageData.length); // 请求成功, 结束加载
// }).catch(()=>{
mescroll.endErr(); // 请求失败, 结束加载
// })
},
// 收藏和取消收藏
handleCollect: () => {
// 处理收藏逻辑
toast.info('收藏成功')
},
// 打开客服弹窗
handleService: () => {
showPopup.value = true
},
// 打开客服二维码弹窗
handleOpenServiceSheet: () => {
reserveRoom.sheetMenuType = 'service'
showAction.value = true
sheetMenu.value = [
{
name: '保存图片',
value: 'saveImage'
},
{
name: '添加门店微信',
value: 'addWeChat'
}
]
},
// 处理菜单选择
handleSelectMenu: (item: any) => {
console.log("🚀 ~ item:", item)
if (reserveRoom.sheetMenuType == 'service') {
// 处理客服相关的菜单项
if (item.value === 'saveImage') {
// 处理保存图片逻辑
toast.success('图片已保存')
} else if (item.value === 'addWeChat') {
// 处理添加微信逻辑
toast.success('已添加门店微信')
}
} else if (reserveRoom.sheetMenuType == 'call' && item.index == 1) {
uni.makePhoneCall({
phoneNumber: item.value // 替换为实际电话号码
})
}
showAction.value = false // 关闭菜单
},
// 处理导航逻辑
handleLocation: () => {
toast.info('正在导航...')
// 可以使用uni.navigateTo或其他方式打开地图应用
uni.navigateTo({
url: '/pages/map/map' // 假设有一个地图页面
})
},
// 处理拨打电话逻辑
handleCallPhone: () => {
reserveRoom.sheetMenuType = 'call'
showAction.value = true
sheetMenu.value = [
{
name: 15005837859,
value: ''
},
{
name: '呼叫',
value: 15005837859
}
]
},
// tab切换获取index
tabIndex: (item: { index: number }) => {
// tabIndexs.value = item.index
// scrollToLastY()
},
handleClick: (item: any) => {
// 处理点击事件
console.log('Clicked item:', item)
},
onChange: (e: any) => {
// 设置 current.value 为当前轮播索引
current.value = e.current
},
handleToRecharge: () => {
uni.navigateTo({
url: '/pages-sub/store-recharge/store-recharge'
})
},
back: () => {
uni.navigateBack({
delta: 1,
})
}
}
</script>
<style lang="scss">
page {
background-color: #F6F7F8;
}
.right-slot {
padding-right: v-bind(rightPadding);
}
.swiper {
:deep() {
.wd-swiper-nav__item--dots-bar {
width: 56rpx !important;
height: 6rpx !important;
border-radius: 3rpx !important;
}
.is-active {
background-color: #2B9F93 !important;
}
}
}
.pay {
:deep() {
.wd-radio {
margin-top: 0 !important;
}
}
}
</style>

5
src/pages-sub/reserve-room/reserve-room.vue → src/pages-sub/reserve-room/room.vue
View File

@ -87,14 +87,14 @@
<wd-tab title="茶室预定">
<view class="content mx-30rpx mt-34rpx">
<mescroll-body @init="mescrollInit" @down="downCallback" @up="reserveRoom.upCallback">
<roomList :reserve="true"></roomList>
<roomList :is-reserve="true"></roomList>
</mescroll-body>
</view>
</wd-tab>
<wd-tab title="团购套餐">
<view class="content mx-30rpx mt-34rpx">
<mescroll-body @init="mescrollInit" @down="downCallback" @up="reserveRoom.upCallback">
<roomList></roomList>
<roomList :is-group-buying="true" :is-reserve="false"></roomList>
</mescroll-body>
</view>
</wd-tab>
@ -136,7 +136,6 @@
const rate = ref<number>(4)
const tab = ref<number>(0)
const goods = ref<Array<any>[]>([])
const showPopup = ref<boolean>(false)
const showAction = ref<boolean>(false)
const sheetMenu = ref([])

12
src/pages.json
View File

@ -18,7 +18,7 @@
"custom": false,
"color": "#999999",
"selectedColor": "#018d71",
"backgroundColor": "#F8F8F8",
"backgroundColor": "#FFF",
"borderStyle": "black",
"height": "50px",
"fontSize": "10px",
@ -127,7 +127,15 @@
}
},
{
"path": "reserve-room/reserve-room",
"path": "reserve-room/detail",
"type": "page",
"layout": "tabbar",
"style": {
"navigationStyle": "custom"
}
},
{
"path": "reserve-room/room",
"type": "page",
"layout": "tabbar",
"style": {

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

@ -179,7 +179,7 @@
handleToReserveRoom: (id: number = 1) => {
// 跳转到预约茶室页面
uni.navigateTo({
url: `/pages-sub/reserve-room/reserve-room?id=${id}`
url: `/pages-sub/reserve-room/room?id=${id}`
})
}
}

2
src/tabbar/config.ts
View File

@ -124,7 +124,7 @@ const _tabbar: TabBar = {
custom: selectedTabbarStrategy === TABBAR_MAP.CUSTOM_TABBAR_WITH_CACHE,
color: '#999999',
selectedColor: '#018d71',
backgroundColor: '#F8F8F8',
backgroundColor: '#FFF',
borderStyle: 'black',
height: '50px',
fontSize: '10px',