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

初始化仓库

Browse Source
This commit is contained in:
wangxiaowei
2025-09-24 12:52:45 +08:00
commit e9519b32db
277 changed files with 47487 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
src/components/.gitkeep Normal file
View File

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>

94
src/components/Navbar.vue Normal file
View File

@ -0,0 +1,94 @@
<template>
<wd-navbar safeAreaInsetTop :bordered="false" :custom-class="customClass" :fixed="fixed" :placeholder="fixed" :zIndex="zIndex">
<template #left>
<view class="h-48rpx flex items-center" @click="navbar.back">
<view class="mt-4rpx">
<wd-icon name="thin-arrow-left" size="30rpx" :color="iconLeftColor" ></wd-icon>
</view>
<view class="text-[#303133] text-36rpx ml-24rpx leading-48rpx" v-if="!layoutLeft">{{ title }}</view>
<!-- 开启左侧自定义布局 -->
<slot name="left" v-if="layoutLeft"></slot>
</view>
</template>
<template #center>
<slot name="center"></slot>
</template>
<template #right>
<slot name="right"></slot>
</template>
</wd-navbar>
</template>
<script lang="ts" setup name="Navbar">
/**
* Navbar 导航栏
* @description 对wd-navbar进行二次封装，满足不同页面的需求
*/
import { getNavBarHeight } from '@/utils/index'
const OSS = inject('OSS')
const navbarHeight = ref<number>(0)
onMounted (() => {
navbarHeight.value = getNavBarHeight()
})
const props = defineProps({
// 标题
title: {
type: String,
default: ''
},
// 是否开启左侧自定义布局
layoutLeft: {
type: Boolean,
default: false
},
// 自定义类名
customClass: {
type: String,
default: ''
},
// 是否固定在顶部
fixed: {
type: Boolean,
default: true
},
// z-index 层级
zIndex: {
type: Number,
default: 10
},
// icon left 的颜色
iconLeftColor: {
type: String,
default: '#121212'
}
})
const navbar = {
back: () => {
uni.navigateBack({
delta: 1
})
}
}
</script>
<script lang="ts">
export default {}
</script>
<style lang="scss" scoped>
//
</style>

85
src/components/PriceFormat.vue Normal file
View File

@ -0,0 +1,85 @@
<template>
<text :style="{color, 'font-weight': weight}" :class="(lineThrough ? 'line-through' : '') + ' price-format'">
<text v-if="showSubscript" :style="{'font-size': subscriptSize + 'rpx', 'margin-right': '2rpx'}">¥</text>
<text :style="{'font-size': firstSize + 'rpx', 'margin-right': '1rpx'}">{{priceSlice.first}}</text>
<text v-if="priceSlice.second" :style="{'font-size': secondSize + 'rpx'}">.{{priceSlice.second}}</text>
</text>
</template>
<script lang="ts" setup name="PriceFormat">
/**
* PriceFormat 金额格式化
* @description 列表或者详情页价格格式化展示
*/
import { ref, onMounted, watch } from 'vue'
const props = defineProps({
price: {
type: [String, Number],
default: '0.00'
},
firstSize: {
type: [String, Number],
default: 36
},
secondSize: {
type: [String, Number],
default: 24
},
subscriptSize: {
type: [String, Number],
default: 24
},
color: {
type: String,
default: '#E54444'
},
weight: {
type: String,
default: 'bold'
},
lineThrough: {
type: Boolean,
default: false
},
showSubscript: {
type: Boolean,
default: true
}
})
const priceSlice = ref<{ first: string | number; second?: string | number }>({ first: 0 })
onMounted(() => {
priceFormat.format()
})
const priceFormat = {
format: () => {
let price = props.price
let formattedPrice: { first: string | number; second?: string | number } = { first: 0 }
if(price !== null && price !== '' && price !== undefined) {
price = parseFloat(price);
// 保留两位小数
const priceStr = price.toFixed(2);
const priceArr = priceStr.split('.');
formattedPrice.first = priceArr[0];
formattedPrice.second = priceArr[1];
priceSlice.value = formattedPrice
}else {
priceSlice.value = {
first: 0
}
}
}
}
watch(() => props.price, () => {
priceFormat.format()
})
</script>
<script lang="ts">
export default {}
</script>

24
src/components/RechargeBtn.vue Normal file
View File

@ -0,0 +1,24 @@
<template>
<view class="w-150rpx h-72rpx rounded-16rpx bg-[#E54444] relative flex justify-center items-center">
<view class="bg-[#fff] opacity-[.5] w-6rpx h-24rpx rounded-40rpx absolute left-14rpx top-[50%] transform-translate-y-[-50%]"></view>
<view class="text-[#fff] text-28rpx leading-38rpx">{{ name }}</view>
</view>
</template>
<script lang="ts" setup name="RechargeBtn">
/**
* RechargeBtn 充值按钮
* @description 用于展示对应页面按钮
*/
defineProps({
name: {
type: String,
default: '充值'
}
})
</script>
<script lang="ts">
export default {}
</script>

78
src/components/coupon/Coupon.vue Normal file
View File

@ -0,0 +1,78 @@
<template>
<view class="mb-20rpx" @click="onCheck(coupon.id)">
<view class="coupon h-210rpx flex items-center">
<view class="w-260rpx h-[100%] rounded-l-16rpx rounded-tr-0 rounded-br-0 flex flex-col items-center justify-center" :class="canUse ? 'bg-[#4C9F44]' : 'bg-[#F2F2F2]'">
<view class="flex" :class="canUse ? 'text-[#fff]' : 'text-[#BFC2CC]'">
<view class="text-72rpx leading-100rpx">{{ coupon.amount }}</view>
<view class="text-32rpx leading-44rpx mt-40rpx ml-10rpx">元</view>
</view>
<view class="text-26rpx font-400 leading-36rpx text-center" :class="canUse ? 'text-[#fff]' : 'text-[#BFC2CC]'">满120元可用</view>
</view>
<view class="bg-[#fff] w-490rpx h-[100%] rounded-r-16rpx rounded-tl-0 rounded-bl-0 flex justify-between items-center">
<view class="ml-30rpx line-1">
<view class="text-34rpx leading-48rpx line-1" :class="canUse ? 'text-[#303133]' : 'text-[#909399]'">茶室优惠</view>
<view class="mt-40rpx text-[#909399] text-24rpx leading-34rpx" :class="canUse ? 'text-[#909399]' : 'text-[#BFC2CC]'">有效期至 2022-08-12</view>
</view>
<view class="h-100% mr-70rpx mt-58rpx" v-if="showChecked">
<wd-radio :value="coupon.id" shape="dot" :disabled="!canUse"></wd-radio>
</view>
</view>
</view>
</view>
</template>
<script lang="ts" setup name="Coupon">
/**
* Coupon 优惠券组件
* @description 展示优惠券信息
*/
defineProps<{
coupon: {
id: number
amount: number
limit: number
expire: string
}
canUse: boolean
showChecked: boolean
checked: boolean
onCheck: (id: number) => void,
}>()
</script>
<script lang="ts">
export default {}
</script>
<style lang="scss" scoped>
.coupon {
position: relative;
border-radius: 8px;
margin-right: 22rpx;
height: 100px;
}
.coupon::before,
.coupon::after {
content: "";
position: absolute;
top: 50%;
width: 32rpx;
/* 控制凹口大小 */
height: 32rpx;
background: #F6F7F9;
/* 与页面背景色一致 */
border-radius: 50%;
transform: translateY(-50%);
z-index: 2;
}
.coupon::before {
left: -16rpx;
}
.coupon::after {
right: -16rpx;
}
</style>

49
src/components/coupon/GroupCoupon.vue Normal file
View File

@ -0,0 +1,49 @@
<template>
<view class="p-30rpx rounded-16rpx mb-20rpx bg-white" @click="onCheck(coupon.id)">
<view class="flex justify-between items-start relative ">
<view class="w-180rpx h-180rpx">
<wd-img width="100%" height="100%" :src="`${OSS}images/home/home_image5.png`"></wd-img>
</view>
<view class="flex-1 ml-32rpx line-1" :class="canUse ? '' : 'opacity-40'">
<view class="text-32rpx text-[#303133] leading-44rpx line-1 w-350rpx">这是团购券套餐名称这是团购券套餐名称</view>
<view class="text-26rpx text-[#6A6363] leading-36rpx mt-30rpx flex">
<view class="line-1">这是商家名称这是商家名称这是商家名称这是商家名称这是商家名称</view>
<view class="mx-14rpx">|</view>
<view>{{ coupon.limit }}小时</view>
</view>
<view class="text-24rpx leading-34rpx text-[#909399] mt-16rpx">有效期：2025-01-01至2025-05-05</view>
</view>
<view>
<wd-radio :value="coupon.id" shape="dot" :disabled="!canUse"></wd-radio>
</view>
</view>
</view>
</template>
<script lang="ts" setup name="GroupCoupon">
/**
* GroupCoupon 团购券组件
* @description 展示团购券信息
*/
const OSS = inject('OSS')
defineProps<{
coupon: {
id: number
amount: number
limit: number
expire: string
}
canUse: boolean
checked: boolean
onCheck: (id: number) => void
}>()
</script>
<script lang="ts">
export default {}
</script>
<style lang="scss" scoped>
</style>

97
src/components/mescroll-item.vue Normal file
View File

@ -0,0 +1,97 @@
<template>
<!-- 不能用v-if (i: 每个tab页的专属下标; index: 当前tab的下标 )-->
<view v-show="i === index">
<!-- top="120"下拉布局往下偏移,防止被悬浮菜单遮住 -->
<mescroll-body @init="mescrollInit" top="120" :down="downOption" @down="downCallback" :up="upOption" @up="upCallback" @emptyclick="emptyClick">
<!-- 数据列表 -->
123
</mescroll-body>
</view>
</template>
<script lang="ts" setup name="mescrollItem">
import { ref, watch } from 'vue'
import useMescroll from "@/uni_modules/mescroll-uni/hooks/useMescroll.js"
const props = defineProps({
i: Number, // 每个tab页的专属下标
index: { // 当前tab的下标
type: Number,
default() {
return 0
}
},
tabs: { // 为了请求数据,演示用,可根据自己的项目判断是否要传
type: Array,
default() {
return []
}
}
})
const { mescrollInit, downCallback, getMescroll } = useMescroll() // 调用mescroll的hook
defineExpose({ getMescroll }) // 使父组件可以通过ref调用到getMescroll方法 (必须)
const isAutoInit = props.i === props.index // 自动加载当前tab的数据
const downOption = {
auto: isAutoInit // 自动加载当前tab的数据
}
console.log("🚀 ~ downOption:", downOption)
const upOption = {
auto:false, // 不自动加载
noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
empty:{
tip: '~ 空空如也 ~', // 提示
btnText: '去看看'
}
}
const isInit = ref(isAutoInit) // 当前tab是否已初始化
const goods = ref([]) // 数据列表
// 监听下标的变化
watch(
()=> props.index,
(val)=>{
if (props.i === val && !isInit.value) mescrollTrigger()
})
// 主动触发加载
const mescrollTrigger = ()=>{
isInit.value = true; // 标记为true
const mescroll = getMescroll()
if (mescroll) {
if (mescroll.optDown.use) {
mescroll.triggerDownScroll();
} else{
mescroll.triggerUpScroll();
}
}
}
/*上拉加载的回调: 其中mescroll.num:当前页 从1开始, mescroll.size:每页数据条数,默认10 */
const upCallback = (mescroll)=>{
// let word = props.tabs[props.i].name // 具体项目中,您可能取的是tab中的type,status等字段
// apiGoods(mescroll.num, mescroll.size, word).then(res=>{
// const list = res.list || [] // 当前页数据
// if(mescroll.num == 1) goods.value = []; //如果是第一页需手动制空列表
// goods.value = goods.value.concat(list); //追加新数据
// mescroll.endSuccess(list.length); // 请求成功, 结束加载
// }).catch(()=>{
mescroll.endErr(); // 请求失败, 结束加载
// })
}
//点击空布局按钮的回调
const emptyClick = ()=>{
uni.showToast({
title:'点击了按钮,具体逻辑自行实现'
})
}
</script>
<style lang="scss" scoped>
//
</style>

96
src/components/notice/Bill.vue Normal file
View File

@ -0,0 +1,96 @@
<template>
<view class="text-center">
<view class="w-120rpx h-120rpx mx-auto">
<wd-img width="120rpx" height="120rpx" mode="aspectFill" :src="`${OSS}icon/${info.icon}`" />
</view>
<view class="mt-40rpx">
<view class="font-400 text-32rpx leading-44rpx text-[#303133]">{{ info.title }}</view>
<view class="font-bold text-40rpx text-[#121212] leading-56rpx mt-24rpx">{{ Number(props.money).toFixed(2) }}</view>
</view>
<view class="mt-60rpx mb-38rpx w-100%">
<wd-gap height="2rpx" bgColor="#F6F7F9"></wd-gap>
</view>
<view class="mx-30rpx">
<view class="flex justify-between items-center leading-40rpx text-28rpx font-400">
<view class="text-[#606266]">当前状态</view>
<view class="text-[#303133]">{{ info.desc }}</view>
</view>
<view class="flex justify-between items-center leading-40rpx text-28rpx font-400 mt-20rpx">
<view class="text-[#606266]">{{ info.timeDesc }}</view>
<view class="text-[#303133]">{{ time }}</view>
</view>
<view class="flex justify-between items-center leading-40rpx text-28rpx font-400 mt-20rpx">
<view class="text-[#606266]">交易单号</view>
<view class="text-[#303133]">{{ order }}</view>
</view>
</view>
</view>
</template>
<script lang="ts" setup name="BillNotice">
/**
* BillNotice 账单提示组件
* @description 展示充值、退款、返现等账单信息
*/
const OSS = inject('OSS')
const props = defineProps({
// 类型
type: {
type: String,
default: ''
},
// 描述
money: {
type: Number,
default: 0.00
},
time: {
type: String,
default: ''
},
order: {
type: String,
default: ''
}
})
const bill = {
recharge: {
icon: 'icon_pay_success.png',
title: '充值成功',
desc: '充值成功',
timeDesc: '支付时间'
},
refund: {
icon: 'icon_refund.png',
title: '退款成功',
desc: '已退款',
timeDesc: '退款时间'
},
cashback: {
icon: 'icon_cashback.png',
title: '推荐会员提现',
desc: '已返现',
timeDesc: '返现时间'
}
}
const info = computed(() => {
return bill[props.type] || {}
})
</script>
<script lang="ts">
export default {}
</script>
<style lang="scss" scoped>
</style>

45
src/components/notice/Pay.vue Normal file
View File

@ -0,0 +1,45 @@
<template>
<view class="text-center">
<view class="w-120rpx h-120rpx mx-auto">
<wd-img width="120rpx" height="120rpx" mode="aspectFill" :src="`${OSS}icon/icon_pay_success.png`" />
</view>
<view class="mt-94rpx">
<view class="text-[36rpx] text-[#303133] leading-50rpx">{{ title }}</view>
<view class="text-[28rpx] text-[#9CA3AF] leading-40rpx mt-20rpx">{{ desc }}</view>
</view>
<view class="mt-78rpx">
<slot name="layout"></slot>
</view>
</view>
</template>
<script lang="ts" setup name="PayNotice">
/**
* PayNotice 支付提示组件
* @description 提示支付成功
*/
const OSS = inject('OSS')
const props = defineProps({
// 标题
title: {
type: String,
default: ''
},
// 描述
desc: {
type: String,
default: ''
}
})
</script>
<script lang="ts">
export default {}
</script>
<style lang="scss" scoped>
</style>

45
src/components/notice/Reserve.vue Normal file
View File

@ -0,0 +1,45 @@
<template>
<view class="text-center">
<view class="w-300rpx h-300rpx mx-auto">
<wd-img width="300rpx" height="300rpx" mode="aspectFill" :src="`${OSS}images/reserve_room/reserve_room_image4.png`"></wd-img>
</view>
<view class="mt-60rpx text-center">
<view class="text-[#303133] text-36rpx leading-50rpx">{{ title }}</view>
<view class="text-[#9CA3AF] text-28rpx leading-40rpx font-400 mt-20rpx">{{ desc }}</view>
</view>
<view class="mt-78rpx">
<slot name="layout"></slot>
</view>
</view>
</template>
<script lang="ts" setup name="ReserveNotice">
/**
* ReserveNotice 预约提示组件
* @description 提示预约信息
*/
const OSS = inject('OSS')
const props = defineProps({
// 标题
title: {
type: String,
default: ''
},
// 描述
desc: {
type: String,
default: ''
}
})
</script>
<script lang="ts">
export default {}
</script>
<style lang="scss" scoped>
</style>

406
src/components/order/ComboCard.vue Normal file
View File

@ -0,0 +1,406 @@
<template>
<view class="">
<!-- 平台团购直营店 -->
<view v-if="type === OrderSource.Direct" 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">
<text class="text-[#4C9F44]" v-if="orderStatus === OrderStatus.ToUse">待使用</text>
<text class="text-[#606266]" v-if="orderStatus === OrderStatus.Used">已使用</text>
<text class="text-[#C9C9C9]" v-if="orderStatus === OrderStatus.Refunded">已退款</text>
</view>
</view>
<view class="mt-22rpx">
<view class="flex">
<view class="mr-28rpx">
<wd-img width="200rpx" height="200rpx" :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>
<wd-tag bg-color="#F3F3F3" color="#606266" custom-class="!px-16rpx">3小时</wd-tag>
</view>
<view class="font-400 leading-36rpx text-26rpx text-[#606266]">
<view class="mt-12rpx">适用包间 青茶、红茶、绿茶</view>
<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>
</view>
</view>
</view>
</view>
</view>
<!-- 平台团购加盟店和抖音团购 -->
<view v-if="type === OrderSource.Franchise || type === OrderSource.DouYin" 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="orderStatus === OrderStatus.ToUse">待使用</text>
<text class="text-[#606266]" v-if="orderStatus === OrderStatus.Used">已使用</text>
<text class="text-[#C9C9C9]" v-if="orderStatus === OrderStatus.Refunded">已退款</text>
</view>
</view>
<view class="mt-22rpx">
<view class="flex">
<view class="mr-28rpx">
<wd-img width="200rpx" height="200rpx" :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>
<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 === OrderSource.Franchise">申请退款</view>
<view class="w-178rpx h-70rpx leading-70rpx rounded-8rpx border-[2rpx] border-[#4C9F44] text-[#4C9F44]" v-if="type === OrderSource.DouYin">立即预定</view>
</view>
</view>
</view>
</view>
</view>
<!-- 茶室预约 -->
<view v-if="type === OrderSource.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-[#4C9F44]">
<text v-if="orderStatus === OrderStatus.Consuming">消费中</text>
<text v-if="orderStatus === OrderStatus.Reserved">已预约</text>
<text v-if="orderStatus === OrderStatus.Serving">服务中</text>
<text v-if="orderStatus === OrderStatus.Finished" class="text-[#606266]">完成</text>
<text v-if="orderStatus === OrderStatus.Pending" class="text-[#FF5951]" >待付款</text>
<text v-if="orderStatus === OrderStatus.Cancelled" class="text-[#C9C9C9]" >订单取消</text>
</view>
</view>
<view class="mt-22rpx">
<view class="flex items-center">
<view class="mr-28rpx">
<wd-img width="200rpx" height="200rpx" :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>
<template v-if="orderStatus === OrderStatus.Finished || orderStatus === OrderStatus.Cancelled">
<view class="text-center flex items-center text-28rpx mt-28rpx justify-end"
@click="comboCard.handleDeleteOrder(OrderSource.TeaRoom)">
<view class="w-178rpx h-70rpx rounded-8rpx border-[2rpx] border-[#9CA3AF] text-[#303133] mr-28rpx flex items-center justify-center">
删除订单
</view>
</view>
</template>
<template v-if="orderStatus === OrderStatus.Pending">
<view class="text-center flex items-center text-28rpx mt-28rpx justify-end">
<view class="w-178rpx h-70rpx rounded-8rpx border-[2rpx] border-[#9CA3AF] text-[#303133] mr-28rpx flex items-center justify-center"
@click="comboCard.handleCancelOrder(OrderSource.TeaRoom)">取消订单</view>
<view class="w-178rpx h-70rpx rounded-8rpx border-[2rpx] border-[#4C9F44] text-[#4C9F44] flex items-center justify-center"
@click="comboCard.handleToPayOrder(OrderSource.TeaRoom)">去支付</view>
</view>
</template>
</view>
</view>
<!-- 茶艺师预约 -->
<view v-if="type === OrderSource.TeaSpecialist" class="bg-white rounded-10rpx p-28rpx">
<view class="flex items-center">
<view class="mr-28rpx">
<wd-img width="200rpx" height="200rpx" :src="`${OSS}images/home/home_image5.png`"></wd-img>
</view>
<view class="flex-1" @click="comboCard.handleToOrderDetail">
<view class="flex items-center relative">
<view class="w-400rpx flex items-center">
<view class="font-bold text-[#303133] text-30rpx leading-42rpx mr-14rpx">茶艺师</view>
<view class="w-160rpx h-40rpx relative mr-44rpx">
<view class="absolute left-0 top-0 h-36rpx flex items-start">
<wd-img :src="`${OSS}icon/icon_gold_medal.png`" width="36rpx" height="36rpx"></wd-img>
</view>
<view class="bg-[#F0F6EF] text-[#006C2D] font-400 text-22rpx leading-32rpx rounded-4rpx text-center w-150rpx ml-18rpx pb-4rpx">金牌茶艺师</view>
</view>
</view>
<view class="font-400 text-28rpx leading-20rpx text-[#4C9F44] flex items-center absolute top-6rpx right-0">
<text v-if="orderStatus === OrderStatus.Consuming">消费中</text>
<text v-if="orderStatus === OrderStatus.Reserved">已预约</text>
<text v-if="orderStatus === OrderStatus.Serving">服务中</text>
<text v-if="orderStatus === OrderStatus.Finished" class="text-[#606266]">完成</text>
<text v-if="orderStatus === OrderStatus.Pending" class="text-[#FF5951]" >待付款</text>
<text v-if="orderStatus === OrderStatus.Cancelled" class="text-[#C9C9C9]" >订单取消</text>
</view>
</view>
<view class="flex items-center">
<view class="mr-12rpx">
<wd-tag color="#40AE36" bg-color="#40AE36" plain custom-class="!rounded-4rpx">上门服务</wd-tag>
</view>
<view>
<wd-tag color="#F55726" bg-color="#F55726" plain>到点服务</wd-tag>
</view>
</view>
<view class="font-400 text-[#606266] text-26rpx leading-36rpx mt-42rpx">
预约时间：03/18 08:00-12:00
</view>
</view>
</view>
<!-- 操作按钮 -->
<view>
<view v-if="orderStatus === OrderStatus.Finished || orderStatus === OrderStatus.Cancelled"
class="flex items-center text-28rpx mt-28rpx justify-end"
@click="comboCard.handleDeleteOrder(OrderSource.TeaSpecialist)">
<view class="w-178rpx h-70rpx rounded-8rpx border-[2rpx] border-[#9CA3AF] text-[#303133] flex items-center justify-center">
删除订单
</view>
</view>
<view v-if="orderStatus === OrderStatus.Pending"
class="flex items-center text-28rpx mt-28rpx justify-end">
<view class="w-178rpx h-70rpx rounded-8rpx border-[2rpx] border-[#9CA3AF] text-[#303133] mr-28rpx flex items-center justify-center"
@click="comboCard.handleCancelOrder(OrderSource.TeaSpecialist)">
取消订单
</view>
<view class="w-178rpx h-70rpx rounded-8rpx border-[2rpx] border-[#4C9F44] text-[#4C9F44] flex items-center justify-center"
@click="comboCard.handleToPayOrder(OrderSource.TeaSpecialist)">去支付</view>
</view>
</view>
</view>
<!-- 取消订单, 删除订单 -->
<wd-message-box selector="wd-message-box-slot"></wd-message-box>
</view>
</template>
<script lang="ts" setup name="ComboCard">
import { OrderSource, OrderStatus } from '@/utils/order'
import { useMessage } from 'wot-design-uni'
import { toast } from '@/utils/toast'
/**
* ComboCard 套餐卡片组件
* @description 展示订单列表套餐卡片信息
*/
const OSS = inject('OSS')
const props = defineProps({
/**
* 类型: 直营(direct)、加盟(franchise)、抖音(douyin) 等
*/
type: {
type: String,
default: OrderSource.Direct
},
/**
* 订单类型: 待使用、退款等
* TODO 这里的orderStatus在接入接口的时候需要改为类似于data.orderStatus这种形式
*/
orderStatus: {
type: String,
default: OrderStatus.ToUse
}
})
// 取消订单弹窗
const message = useMessage('wd-message-box-slot')
const comboCard = {
// 跳转到对饮茶室的详情页
handleToStore: () => {
uni.navigateTo({
url: '/pages/store/store-detail/store-detail'
})
},
// 删除订单
handleDeleteOrder: (source: string) => {
message.confirm({
title: '确定删除订单？',
msg: '删除订单后无法恢复，是否确认删除订单？',
confirmButtonText: '确定',
cancelButtonText: '取消',
cancelButtonProps: {
customClass: '!bg-[#F6F7F8] !text-[#303133] !text-32rpx !leading-44rpx !rounded-8rpx',
},
confirmButtonProps: {
customClass: '!bg-[#4C9F44] !text-[#fff] !text-32rpx !leading-44rpx !rounded-8rpx',
}
}).then((res) => {
switch (source) {
case OrderSource.Direct:
// TODO 这里调用删除直营订单的接口
break;
case OrderSource.Franchise:
// TODO 这里调用删除加盟订单的接口
break;
case OrderSource.DouYin:
// TODO 这里调用删除抖音订单的接口
break;
case OrderSource.TeaRoom:
// TODO 这里调用删除茶室订单的接口
break;
case OrderSource.TeaSpecialist:
// TODO 这里调用删除茶室订单的接口
break;
default:
break;
}
// 点击确认按钮回调事件
toast.info('删除订单成功')
}).catch(() => {
// 点击取消按钮回调事件
})
},
// 取消订单
handleCancelOrder: (source: string) => {
message.confirm({
title: '确定取消订单？',
msg: '取消订单后无法恢复，优惠券可退回',
confirmButtonText: '确定',
cancelButtonText: '取消',
cancelButtonProps: {
customClass: '!bg-[#F6F7F8] !text-[#303133] !text-32rpx !leading-44rpx !rounded-8rpx',
},
confirmButtonProps: {
customClass: '!bg-[#4C9F44] !text-[#fff] !text-32rpx !leading-44rpx !rounded-8rpx',
}
}).then((res) => {
switch (source) {
case OrderSource.Direct:
// TODO 这里调用删除直营订单的接口
break;
case OrderSource.Franchise:
// TODO 这里调用删除加盟订单的接口
break;
case OrderSource.DouYin:
// TODO 这里调用删除抖音订单的接口
break;
case OrderSource.TeaRoom:
// TODO 这里调用删除茶室订单的接口
break;
case OrderSource.TeaSpecialist:
// TODO 这里调用删除茶室订单的接口
break;
default:
break;
}
// 点击确认按钮回调事件
toast.info('订单取消成功')
}).catch(() => {
// 点击取消按钮回调事件
})
},
// 跳转到订单详情页
handleToOrderDetail: () => {
// TODO 这里要对不同类型的订单进行区分跳转一个是直营的一个市加盟的
switch (props.type) {
case OrderSource.Direct:
uni.navigateTo({
url: `/bundle/order/platform/direct-order-detail?orderStatus=${props.orderStatus}`
})
break;
case OrderSource.Franchise:
uni.navigateTo({
url: `/bundle/order/platform/franchise-order-detail?orderStatus=${props.orderStatus}`
})
break;
case OrderSource.DouYin:
uni.navigateTo({
url: `/bundle/order/douyin/douyin-order-detail?orderStatus=${props.orderStatus}`
})
break;
case OrderSource.TeaRoom:
uni.navigateTo({
url: `/bundle/order/tea-room/order-detail?orderStatus=${props.orderStatus}`
})
break;
case OrderSource.TeaSpecialist:
uni.navigateTo({
url: `/bundle/order/tea-specialist/order-detail?orderStatus=${props.orderStatus}`
})
break;
default:
break;
}
},
// 支付
handleToPayOrder: (source: string) => {
switch (source) {
case OrderSource.Direct:
uni.navigateTo({
url: `/bundle/order/platform/direct-order-detail?orderStatus=${props.orderStatus}&toPay=true`
})
break;
case OrderSource.Franchise:
uni.navigateTo({
url: `/bundle/order/platform/franchise-order-detail?orderStatus=${props.orderStatus}&toPay=true`
})
break;
case OrderSource.DouYin:
uni.navigateTo({
url: `/bundle/order/douyin/douyin-order-detail?orderStatus=${props.orderStatus}&toPay=true`
})
break;
case OrderSource.TeaRoom:
uni.navigateTo({
url: `/bundle/order/tea-room/order-detail?orderStatus=${props.orderStatus}&toPay=true`
})
break;
case OrderSource.TeaSpecialist:
uni.navigateTo({
url: `/bundle/order/tea-specialist/order-detail?orderStatus=${props.orderStatus}&toPay=true`
})
break;
default:
break;
}
}
}
</script>
<script lang="ts">
export default {}
</script>

187
src/components/order/ComboCoupon.vue Normal file
View File

@ -0,0 +1,187 @@
<template>
<view>
<!-- 平台团购直营店待使用、平台团购加盟已使用、抖音待使用 -->
<view class="bg-white rounded-16rpx p-30rpx" v-if="type === 'Direct' || type === 'Franchise' || type === 'DouYin'">
<view class="flex items-center" @click="comboCoupon.handleToStore">
<view class="mr-30rpx">
<wd-img width="190rpx" height="190rpx" :src="`${OSS}images/home/home_image5.png`" mode="scaleToFill"></wd-img>
</view>
<view class="flex-1">
<view class="flex justify-between items-center" @click="comboCoupon.handleToStore">
<view class="font-bold text-30rpx leading-42rpx text-[#303133] mr-10rpx w-362rpx line-1">团购套餐的可以点击跳转团购套餐的可以点击跳转团购套餐的可以点击跳转 </view>
<wd-icon name="chevron-right" size="32rpx" v-if="type === 'Direct'"></wd-icon>
<view class="text-26rpx leading-36rpx text-[#909399]" v-if="type === 'DouYin' || type === 'Franchise'">￥324</view>
</view>
<view class="flex justify-between items-center text-26rpx leading-36rpx text-[#909399] mt-18rpx">
<view>3小时</view>
<view v-if="type === 'Direct' || type === 'Franchise'">x1</view>
</view>
<view class="text-[#606266] text-right mt-26rpx" v-if="type === 'Direct'">
<text class="text-24rpx leading-34rpx mr-12rpx">实付</text>
<text class="tetx-32rpx leading-36rpx">￥29.32</text>
<wd-icon name="chevron-right" size="32rpx"></wd-icon>
</view>
<view class="font-400 text-26rpx text-[#606266] leading-40rpx mt-40rpx" v-if="type === 'DouYin'">
适用包间：青茶、红茶、绿茶
</view>
</view>
</view>
<!-- 平台团购直营店待使用 -->
<view class="mt-30rpx font-500 leading-48rpx" v-if="type === 'Direct' && orderStatus === OrderStatus.ToUse">
<view class="text-26rpx text-[#606266]">有效期：2025.04.04-2025.12.31</view>
<view class="text-28rpx text-[#303133] mt-18rpx">
<text class="mr-20rpx">券码 1052 4258 5654 125</text>
<text class="text-[#4C9F44]">复制</text>
</view>
</view>
</view>
<!-- 平台团购直营店已使用 -->
<view class="coupon-bg" v-if="type === 'Direct' && orderStatus === OrderStatus.Used">
<view class="flex items-center px-30rpx pt-30rpx pb-40rpx" @click="comboCoupon.handleToStore">
<view class="mr-30rpx">
<wd-img width="190rpx" height="190rpx" :src="`${OSS}images/home/home_image5.png`" mode="scaleToFill"></wd-img>
</view>
<view class="flex-1">
<view class="flex justify-between items-center" @click="comboCoupon.handleToStore">
<view class="font-bold text-30rpx leading-42rpx text-[#303133] mr-10rpx line-1 w-300rpx">这个是包间的名称</view>
<wd-icon name="chevron-right" size="32rpx"></wd-icon>
<view class="text-26rpx leading-36rpx text-[#909399]">￥324</view>
</view>
<view class="flex justify-between items-center text-26rpx leading-36rpx text-[#909399] mt-18rpx">
<view>3小时</view>
<view>x1</view>
</view>
<view class="text-[#606266] text-right mt-26rpx">
<text class="text-24rpx leading-34rpx mr-12rpx">实付</text>
<text class="tetx-32rpx leading-36rpx">￥29.32</text>
<wd-icon name="chevron-right" size="32rpx"></wd-icon>
</view>
</view>
</view>
<view class="px-30rpx mt-28rpx pb-48rpx">
<view class="text-30rpx leading-42rpx text-[#303133]">预约信息</view>
<view class="font-500 text-26rpx leading-48rpx text-[#606266] mt-20rpx">
<view class="mb-20rpx">预约时间：2025-03-18 09:00-12:00</view>
<view>预约时长：3小时</view>
</view>
</view>
</view>
<!-- 平台团购加盟-待使用 -->
<view class="coupon-bg2 p-30rpx" v-if="type === 'Franchise' && orderStatus === OrderStatus.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>
</view>
<view class="flex-1">
<view class="flex justify-between items-center" @click="comboCoupon.handleToStore">
<view class="font-bold text-30rpx leading-42rpx text-[#303133] mr-10rpx line-1 w-300rpx">团购套餐的可以点击跳转</view>
<wd-icon name="chevron-right" size="32rpx"></wd-icon>
</view>
<view class="flex justify-between items-center text-26rpx leading-36rpx text-[#909399] mt-18rpx">
<view>3小时</view>
<view>x1</view>
</view>
<view class="text-[#606266] text-right mt-26rpx">
<text class="text-24rpx leading-34rpx mr-12rpx">实付</text>
<text class="tetx-32rpx leading-36rpx">￥29.32</text>
<wd-icon name="chevron-right" size="32rpx"></wd-icon>
</view>
</view>
</view>
<view class="mt-30rpx font-500 leading-48rpx text-[#606266] text-26rpx pb-44rpx">
有效期：2025.04.04-2025.12.31
</view>
<view class="px-30rpx mt-60rpx">
<view class="text-center">
<wd-img width="230rpx" height="230rpx" :src="`${OSS}images/reserve_room/reserve_room_image3.png`"></wd-img>
</view>
<view class="text-28rpx text-[#303133] mt-32rpx text-center">
<text class="mr-20rpx">券码 1052 4258 5654 125</text>
<text class="text-[#4C9F44]">复制</text>
</view>
</view>
</view>
<!-- 抖音团购已使用 -->
<view class="bg-white rounded-16rpx p-30rpx" v-if="orderStatus === OrderStatus.Used && type === 'DouYin'">
<view class="flex items-center" @click="comboCoupon.handleToStore">
<view class="mr-30rpx">
<wd-img width="190rpx" height="190rpx" :src="`${OSS}images/home/home_image5.png`" mode="scaleToFill"></wd-img>
</view>
<view class="flex-1">
<view class="flex justify-between items-center" @click="comboCoupon.handleToStore">
<view class="font-bold text-30rpx leading-42rpx text-[#303133] mr-10rpx w-300rpx line-1">这是团购套餐的名字</view>
<view class="text-26rpx leading-36rpx text-[#909399] mt-8rpx">￥324</view>
</view>
<view class="flex justify-between items-center text-26rpx leading-36rpx text-[#909399] mt-18rpx">
3小时
</view>
<view class="font-400 text-26rpx text-[#606266] leading-40rpx mt-40rpx">
适用包间：青茶、红茶、绿茶
</view>
</view>
</view>
</view>
</view>
</template>
<script lang="ts" setup name="ComboCoupon">
import { OrderStatus } from '@/utils/order'
/**
* Combo 套餐券组件
* @description 订单详情页下的套餐卡片详情，带有券码、二维码内容
*/
const OSS = inject('OSS')
defineProps({
/**
* 类型: 直营(Direct)、抖音(DouYin)、加盟(Franchise) 等
*/
type: {
type: String,
default: ''
},
/**
* 订单类型: 待使用、退款等
* TODO 这里的orderStatus在接入接口的时候需要改为类似于data.orderStatus这种形式
*/
orderStatus: {
type: String,
default: ''
}
})
const comboCoupon = {
handleToStore: () => {
uni.navigateTo({
url: '/src/bundle/order/platform/store-detail'
})
}
}
</script>
<script lang="ts">
export default {}
</script>
<style lang="scss" scoped>
.coupon-bg {
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;
background-size: 100% 100%;
}
</style>

118
src/components/reserve/RoomList.vue Normal file
View File

@ -0,0 +1,118 @@
<template>
<view v-for="(item, index) in 10" :key="index">
<view class="flex items-center">
<view class="w-200rpx h-200rpx">
<wd-img width="100%" height="100%" :src="`${OSS}images/reserve_room/reserve_room_image2.png`"
radius="10rpx"/>
</view>
<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="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"
:subscript-size="26" :price="23.02" weight="500"></price-format>
<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" @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="storeType != 2" 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'}${storeType == 2 ? ' mt-54rpx' : ' mt-0rpx'}`">
<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="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>
</view>
<view class="my-24rpx gap" v-if="index !== props.list.length - 1">
<wd-gap height="2rpx" bgColor="#F6F7F9"></wd-gap>
</view>
</view>
</template>
<script lang="ts" setup name="RoomList">
/**
* RoomList 房间列表
* @description 茶室预定房间列表展示
*/
import PriceFormat from '@/components/PriceFormat.vue'
import {ReserveServiceCategory} from '@/utils/order'
const OSS = inject('OSS')
const spec = ref<boolean>(true)
const props = defineProps({
list: {
type: Array,
default: () => []
},
// 是否开启预定
isReserve: {
type: Boolean,
default: false
},
// 是否是团购
isGroupBuying: {
type: Boolean,
default: false
},
// 店铺类型
storeType: {
type: Number,
default: 2 // 1：直营 2：加盟
}
})
const roomList = {
toPage: (type: string, id: number) => {
if (type === 'detail') {
let type = props.isGroupBuying ? ReserveServiceCategory.GroupBuying : ReserveServiceCategory.ReserveRoom
uni.navigateTo({
url: `/bundle/tea-room/detail?id=${id}&type=${type}`
})
}
}
}
</script>
<script lang="ts">
export default {}
</script>