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-09-09 22:33:38 +08:00
parent ff964fbc87
commit 0064e83e20
23 changed files with 1344 additions and 162 deletions
Download Patch File Download Diff File Expand all files Collapse all files

156
src/components/BookingTime.vue Normal file
View File

@ -0,0 +1,156 @@
<template>
<wd-popup v-model="showPopup" lock-scroll custom-style="border-radius: 32rpx 32rpx 0rpx 0rpx;" position="bottom">
<view class="relative pb-78rpx">
<view class="absolute top-18rpx right-30rpx" @click="showPopup = 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="">
<view class="booking-time ">
<wd-tabs v-model="selectedDay" color="#4C9F44">
<block v-for="item in days" :key="item">
<scroll-view scroll-y>
<wd-tab :title="`${item}`" :name="item">
<view class="">
<view class="!h-500rpx mt-30rpx">
<view class="grid grid-cols-4 gap-x-20rpx gap-y-20rpx mx-30rpx">
<view v-for="item in timeList" :key="item.time"
class="h-72rpx rounded-16rpx flex items-center justify-center text-28rpx leading-40rpx"
:class="[
item.disabled
? 'bg-[#F7F7F7] text-[#C9C9C9]' // 禁用高亮
: selectedTime.includes(item.time)
? 'bg-[#F1F8F0] text-[#4C9F44]' // 选中高亮
: 'bg-[#F7F7F7] text-[#303133]', // 可选高亮
]" @click="!item.disabled && bookingTime.handleSelectTime(item.time)">
{{ item.time }}
</view>
</view>
</view>
<view class="">
<view>
<wd-gap height="2rpx" bg-color="#E5E5E5"></wd-gap>
</view>
<view class="">
<view class="w-full fixed bottom-0 left-0 right-0 bg-white h-152rpx text-32rpx leading-44rpx flex items-center justify-center leading-90rpx text-center">
<view class="w-330rpx h-90rpx bg-[#F6F7F8] rounded-8rpx text-[#303133] mr-30rpx" @click="bookingTime.resetSelectedTime">重置</view>
<view class="w-330rpx h-90rpx bg-[#4C9F44] rounded-8rpx text-[#fff]" @click="bookingTime.handleConfirmSelectedTime">
<text>确定</text>
<text v-if="countSelectedTime">（{{countSelectedTime}}小时）</text>
</view>
</view>
</view>
</view>
</view>
</wd-tab>
</scroll-view>
</block>
</wd-tabs>
</view>
</view>
</view>
</wd-popup>
</template>
<script lang="ts" setup name="BookingTime">
const OSS = inject('OSS')
/**
* BookingTime 预约时间
* @description 茶室预约时间选择组件
*/
const props = defineProps({
modelValue: {
type: Boolean,
default: false
},
// ...其它props
})
// 初始化时间
onMounted(() => {
bookingTime.handleInitTime()
})
/** 日期相关 **/
const timeList = [
{ time: '09:00', disabled: true },
{ time: '09:30', disabled: false },
{ time: '10:00', disabled: false },
{ time: '10:30', disabled: false },
{ time: '11:00', disabled: false },
{ time: '11:30', disabled: false },
]
const weekMap = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
const days = ref<string[]>([])
const selectedDay = ref<number>(0)
const selectedTime = ref<string[]>([])
const countSelectedTime = ref<number>(0)
const bookingTime = {
// 初始化时间逻辑
handleInitTime: () => {
const today = new Date()
const result: string[] = []
for (let i = 0; i < 7; i++) {
const d = new Date(today)
d.setDate(today.getDate() + i)
const month = d.getMonth() + 1
const date = d.getDate()
const week = weekMap[d.getDay()]
result.push(`${month}/${date}${week}`)
}
days.value = result
},
// 选择的时间高亮显示
handleSelectTime: (time: string) => {
const idx = selectedTime.value.indexOf(time)
if (idx > -1) {
selectedTime.value.splice(idx, 1) // 取消选中
} else {
selectedTime.value.push(time) // 选中
}
// 计算时长
countSelectedTime.value = selectedTime.value.length * 0.5
},
// 确认选择的时间
handleConfirmSelectedTime: () => {
console.log('确认选择的时间:', selectedDay.value, selectedTime.value)
showPopup.value = false
},
// 重置选择的时间
resetSelectedTime: () => {
selectedTime.value = []
},
}
const showPopup = computed({
get: () => props.modelValue,
set: (val: boolean) => emit('update:modelValue', val)
})
const emit = defineEmits(['update:modelValue'])
</script>
<script lang="ts">
export default {}
</script>
<style lang="scss" scoped>
.booking-time {
:deep() {
.wd-tabs__line {
background-color: #4C9F44;
}
}
}
</style>

3
src/components/navbar.vue
View File

@ -5,7 +5,7 @@
<view class="h-48rpx flex items-center" @click="navbar.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" v-if="!layoutLeft">{{ title }}</view>
<!-- 开启左侧自定义布局 -->
<slot name="left" v-if="layoutLeft"></slot>
</view>
@ -27,7 +27,6 @@
* @description 对wd-navbar进行二次封装，满足不同页面的需求
*/
import { ref, inject } from 'vue'
import { getNavBarHeight } from '@/utils/index'
const OSS = inject('OSS')

71
src/components/order/ComboCard.vue
View File

@ -1,21 +1,21 @@
<template>
<view class="">
<!-- 平台团购直营店 -->
<view v-if="type === 'Direct'" class="bg-white rounded-10rpx p-30rpx">
<view v-if="type === GroupBuyingCategory.Direct" class="bg-white rounded-10rpx p-30rpx">
<view class="flex justify-between items-center">
<view class="flex items-center">
<view class="w-40rpx h-40rpx mr-10rpx">
<wd-img width="100%" height="100%" :src="`${OSS}icon/icon_tea.png`"></wd-img>
<view class="mr-10rpx flex items-center">
<wd-img width="40rpx" height="40rpx" :src="`${OSS}icon/icon_tea_room.png`"></wd-img>
</view>
<view class="flex items-center" @click="comboCard.handleToStore">
<view class="font-bold text-30rpx leading-42rpx text-[#303133] mr-10rpx w-400rpx line-1">这是茶馆的名称这是茶馆的名称这是茶馆的名称</view>
<wd-icon name="chevron-right" size="32rpx"></wd-icon>
</view>
</view>
<view class="font-400 text-28rpx leading-40rpx mt-12rpx">
<view class="font-400 text-28rpx leading-40rpx">
<text class="text-[#4C9F44]" v-if="orderType === GroupBuyingCategoryOrderStatus.ToUse">待使用</text>
<text class="text-[#606266]" v-if="orderType === GroupBuyingCategoryOrderStatus.Used">已使用</text>
<text class="text-[#C9C9C9]" v-if="orderType === GroupBuyingCategoryOrderStatus.AfterSaleFinished">已退款</text>
<text class="text-[#C9C9C9]" v-if="orderType === GroupBuyingCategoryOrderStatus.Refunded">已退款</text>
</view>
</view>
<view class="mt-22rpx">
@ -34,7 +34,7 @@
<view class="mt-10rpx">有效期至2025-03-23</view>
</view>
</view>
<view class="text-center flex items-center text-28rpx mt-28rpx justify-start">
<view class="w-178rpx h-70rpx leading-70rpx rounded-8rpx border-[2rpx] border-[#9CA3AF] text-[#303133] mr-28rpx">申请退款</view>
<view class="w-178rpx h-70rpx leading-70rpx rounded-8rpx border-[2rpx] border-[#4C9F44] text-[#4C9F44]">立即预定</view>
@ -45,11 +45,11 @@
</view>
<!-- 平台团购加盟店和抖音团购 -->
<view v-if="type === 'Franchise' || type === 'DouYin'" class="bg-white rounded-10rpx p-30rpx">
<view v-if="type === GroupBuyingCategory.Franchise || type === GroupBuyingCategory.DouYin" class="bg-white rounded-10rpx p-30rpx">
<view class="flex justify-between items-center">
<view class="flex items-center">
<view class="w-40rpx h-40rpx mr-10rpx">
<wd-img width="100%" height="100%" :src="`${OSS}icon/icon_tea.png`"></wd-img>
<view class="mr-10rpx flex items-center">
<wd-img width="40rpx" height="40rpx" :src="`${OSS}icon/icon_tea_room.png`"></wd-img>
</view>
<view class="flex items-center" @click="comboCard.handleToStore">
<view class="font-bold text-30rpx leading-42rpx text-[#303133] mr-10rpx w-400rpx line-1">这是茶馆的名称这是茶馆的名称这是茶馆的名称</view>
@ -74,10 +74,46 @@
<wd-tag bg-color="#F3F3F3" color="#606266" custom-class="!px-16rpx">3小时</wd-tag>
</view>
</view>
<view class="text-center flex items-center text-28rpx mt-28rpx justify-end">
<view class="w-178rpx h-70rpx leading-70rpx rounded-8rpx border-[2rpx] border-[#9CA3AF] text-[#303133] mr-28rpx" v-if="type === 'Franchise'">申请退款</view>
<view class="w-178rpx h-70rpx leading-70rpx rounded-8rpx border-[2rpx] border-[#4C9F44] text-[#4C9F44]" v-if="type === 'DouYin'">立即预定</view>
<view class="w-178rpx h-70rpx leading-70rpx rounded-8rpx border-[2rpx] border-[#9CA3AF] text-[#303133] mr-28rpx" v-if="type === GroupBuyingCategory.Franchise">申请退款</view>
<view class="w-178rpx h-70rpx leading-70rpx rounded-8rpx border-[2rpx] border-[#4C9F44] text-[#4C9F44]" v-if="type === GroupBuyingCategory.DouYin">立即预定</view>
</view>
</view>
</view>
</view>
</view>
<!-- 茶室预约 -->
<view v-if="type === ReserveCategory.TeaRoom" class="bg-white rounded-10rpx p-30rpx">
<view class="flex justify-between items-center">
<view class="flex items-center">
<view class="mr-10rpx flex items-center">
<wd-img width="40rpx" height="40rpx" :src="`${OSS}icon/icon_tea_room.png`"></wd-img>
</view>
<view class="flex items-center" @click="comboCard.handleToStore">
<view class="font-bold text-30rpx leading-42rpx text-[#303133] mr-10rpx w-400rpx line-1">这是茶馆的名称这是茶馆的名称这是茶馆的名称</view>
<wd-icon name="chevron-right" size="32rpx"></wd-icon>
</view>
</view>
<view class="font-400 text-28rpx leading-40rpx mt-12rpx">
<text class="text-[#4C9F44]" v-if="orderType === ReserveCategoryOrderStatus.Consuming">消费中</text>
<text class="text-[#606266]" v-if="orderType === ReserveCategoryOrderStatus.Reserved">已预约</text>
<text class="text-[#C9C9C9]" v-if="orderType === ReserveCategoryOrderStatus.Serving">服务中</text>
</view>
</view>
<view class="mt-22rpx">
<view class="flex items-center">
<view class="w-200rpx h-200rpx mr-28rpx">
<wd-img width="100%" height="100%" :src="`${OSS}images/home/home_image5.png`"></wd-img>
</view>
<view class="flex-1">
<view @click="comboCard.handleToOrderDetail">
<view class="font-500 text-30rpx text-[#303133] leading-42rpx line-1 w-400rpx">这是茶室包间的名称</view>
<view class="font-400 leading-36rpx text-26rpx text-[#606266] mt-34rpx">
<view>预约时间：03/18 08:00-12:00</view>
<view class="mt-18rpx">预约时长：2小时</view>
</view>
</view>
</view>
</view>
@ -87,7 +123,8 @@
</template>
<script lang="ts" setup name="ComboCard">
import { GroupBuyingCategoryOrderStatus } from '@/utils/order'
import { GroupBuyingCategory, GroupBuyingCategoryOrderStatus } from '@/utils/groupBuying'
import { ReserveCategory, ReserveCategoryOrderStatus } from '@/utils/platformService'
/**
* ComboCard 套餐卡片组件
@ -98,11 +135,11 @@
const props = defineProps({
/**
* 类型: 直营(Direct)、加盟(Franchise)、抖音(DouYin) 等
* 类型: 直营(direct)、加盟(franchise)、抖音(douyin) 等
*/
type: {
type: String,
default: 'Direct'
default: GroupBuyingCategory.Direct
},
/**
* 订单类型: 待使用、退款等
@ -110,7 +147,7 @@
*/
orderType: {
type: String,
default: 'toUse'
default: GroupBuyingCategoryOrderStatus.ToUse
}
})
@ -150,4 +187,4 @@
<script lang="ts">
export default {}
</script>
</script>

10
src/components/order/ComboCoupon.vue
View File

@ -71,7 +71,7 @@
</view>
<!-- 平台团购加盟-待使用 -->
<view class="coupon-bg2 p-30rpx" v-if="type === 'Franchise' && orderType === GroupBuyingCategoryOrderStatus.ToUse">
<view class="coupon-bg2 p-30rpx" v-if="type === 'Franchise' && orderType === GroupBuyingCategoryOrderStatus.ToUse">
<view class="flex items-center">
<view class="mr-30rpx">
<wd-img width="190rpx" height="190rpx" :src="`${OSS}images/home/home_image5.png`" mode="scaleToFill"></wd-img>
@ -126,12 +126,12 @@
</view>
</view>
</view>
</view>
</template>
<script lang="ts" setup name="ComboCoupon">
import { GroupBuyingCategoryOrderStatus } from '@/utils/order'
import { GroupBuyingCategoryOrderStatus } from '@/utils/groupBuying'
/**
* Combo 套餐券组件
@ -177,8 +177,8 @@
background-image: url(#{$OSS}images/order/order_image2.png);
background-repeat: no-repeat;
background-size: 100% 100%;
}
}
.coupon-bg2 {
background-image: url(#{$OSS}images/order/order_image1.png);
background-repeat: no-repeat;

8
src/components/reserve/RoomList.vue
View File

@ -72,6 +72,7 @@
*/
import PriceFormat from '@/components/PriceFormat.vue'
import {ReserveServiceCategory} from '@/utils/platformService'
const OSS = inject('OSS')
@ -85,7 +86,7 @@
// 是否开启预定
isReserve: {
type: Boolean,
default: true
default: false
},
// 是否是团购
isGroupBuying: {
@ -102,8 +103,9 @@
const roomList = {
toPage: (type: string, id: number) => {
if (type === 'detail') {
let type = props.isGroupBuying ? ReserveServiceCategory.GroupBuying : ReserveServiceCategory.ReserveRoom
uni.navigateTo({
url: `/bundle/reserve-room/detail?id=${id}`
url: `/bundle/reserve-room/detail?id=${id}&type=${type}`
})
}
}
@ -113,4 +115,4 @@
<script lang="ts">
export default {}
</script>
</script>