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-11-28 19:19:54 +08:00
parent 58211f2430
commit 67c8e8e016
43 changed files with 2722 additions and 1018 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
src/components/BookingTime.vue
View File

@ -8,7 +8,7 @@
<view class="">
<view class="booking-time">
<wd-tabs v-model="selectedDay" color="#4C9F44" @click="bookingTime.handleChangeTimeTab">
<wd-tabs v-model="selectedDay" color="#4C9F44" @click="BookingTime.handleChangeTimeTab">
<block v-for="item in day.time" :key="item">
<scroll-view scroll-y>
<wd-tab :title="`${item.display}`" :name="item.display">
@ -23,7 +23,7 @@
: selectedTime.includes(item2.start_time)
? 'bg-[#F1F8F0] text-[#4C9F44]' // 选中高亮
: 'bg-[#F7F7F7] text-[#303133]', // 可选高亮
]" @click="item2.disabled == 1 && bookingTime.handleSelectTime(item2.start_time, item2.timestamp, item.time_slots)">
]" @click="item2.disabled == 1 && BookingTime.handleSelectTime(item2.start_time, item2.timestamp, item.time_slots)">
{{ item2.start_time }}
</view>
</view>
@ -35,8 +35,8 @@
</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">
<view class="w-330rpx h-90rpx bg-[#F6F7F8] rounded-8rpx text-[#303133] mr-30rpx" @click="BookingTime.handleResetSelectedTime">重置</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>
@ -69,13 +69,13 @@
type: Boolean,
default: false
},
day: {
type: Object,
default: {}
},
})
// 初始化时间
onMounted(() => {
})
@ -88,7 +88,7 @@
const selectedTimeStamp = ref<number[]>([])
const countSelectedTime = ref<number>(0)
const bookingTime = {
const BookingTime = {
/**
* 选择时间段逻辑
*/
@ -131,7 +131,8 @@
selectedTime.value = times.slice(minIdx, maxIdx + 1)
selectedTimeStamp.value = timestamps.slice(minIdx, maxIdx + 1)
}
countSelectedTime.value = selectedTime.value.length
countSelectedTime.value = BookingTime.handleCalcContinuousHours(selectedTime.value)
},
// 确认选择的时间
@ -141,7 +142,7 @@
return
}
if (selectedTime.value.length < props.day.minimum_time) {
if (countSelectedTime.value < props.day.minimum_time) {
toast.info(props.day.minimum_time + '小时起订')
return
}
@ -150,6 +151,7 @@
selectedDay.value,
selectedTime.value.sort(),
selectedTimeStamp.value.sort(),
countSelectedTime.value
]
emit('selectedTime', data)
showPopup.value = false
@ -162,8 +164,25 @@
countSelectedTime.value = 0
},
handleCalcContinuousHours(times: string[]): number {
if (times.length < 2) return 0
// 排序
const sorted = times.slice().sort()
let count = 0
for (let i = 1; i < sorted.length; i++) {
// 取前后时间的小时数
const [h1, m1] = sorted[i - 1].split(':').map(Number)
const [h2, m2] = sorted[i].split(':').map(Number)
// 如果是连续的1小时（分钟相同且小时差1），则+1
if (m1 === m2 && h2 - h1 === 1) {
count++
}
}
return count
},
// 重置选择的时间
resetSelectedTime: () => {
handleResetSelectedTime: () => {
selectedTime.value = []
selectedTimeStamp.value = []
},
@ -185,7 +204,7 @@
.booking-time {
:deep() {
.wd-tabs__line {
background-color: #4C9F44;
background-color: #4C9F44 !important;
}
}
}

4
src/components/Pay.vue
View File

@ -4,10 +4,10 @@
<block v-for="(item, index) in PayList" :key="index">
<wd-radio :value="item.value">
<view
class="flex justify-between items-center"
class="flex justify-between items-center pb-10rpx"
v-if="!(hidePlatformBalance && item.type === PayCategory.PlatformBalance) && !(hideStoreBalance && item.type === PayCategory.StoreBalance) && !(hideWechat && item.type === PayCategory.WeChatPay)"
>
<view class="flex items-center">
<view class="flex items-center mt-10rpx">
<wd-img width="50rpx" height="50rpx" :src="`${OSS}${item.icon}`"></wd-img>
<view class="ml-20rpx text-30rpx text-[#303133] leading-42rpx">{{ item.name }}</view>
</view>

74
src/components/UseStore.vue Normal file
View File

@ -0,0 +1,74 @@
<template>
<!-- 适用门店 -->
<view class="bg-white rounded-16rpx px-30rpx pb-32rpx mx-30rpx mt-20rpx">
<view class="pt-32rpx text-[#303133] text-32rpx leading-44rpx">适用门店</view>
<view class="mt-26rpx flex items-center">
<view class="mr-24rpx">
<wd-img width="170rpx" height="170rpx" :src="store.image"></wd-img>
</view>
<view class="flex-1 flex justify-between items-center relative">
<view class="">
<view class="text-[#303133] text-30rpx leading-40rpx line-2" @click="handleToTeaRoomStoreHooks(store.id, store.operation_type)">{{ store.name }}</view>
<view class="mt-26rpx text-[#909399] text-24rpx leading-34rpx">距您{{ store.distance }}km</view>
<view class="flex items-center mt-14rpx">
<view class="mr-8rpx">
<wd-img width="28rpx" height="28rpx" :src="`${OSS}icon/icon_location.png`"/>
</view>
<view class="ml-2rpx text-26rpx text-[#606266] line-1 w-300rpx">{{ store.address }}</view>
</view>
</view>
<view class="flex absolute top-1/2 right-0 -translate-y-1/2">
<view class="text-center mr-20rpx" @click="UseStore.handleLocation">
<wd-img width="64rpx" height="64rpx" :src="`${OSS}icon/icon_nav.png`"/>
</view>
<view class="text-center" @click="UseStore.handleCallPhone">
<wd-img width="64rpx" height="64rpx" :src="`${OSS}icon/icon_phone.png`"/>
</view>
</view>
</view>
</view>
</view>
</template>
<script lang="ts" setup name="UseStore">
/**
* UseStore 适用门店
* @description 用于展示适用门店信息
*/
const OSS = inject('OSS')
const props = defineProps({
store: {
type: Object,
default: {}
}
})
const UseStore = {
/**
* 处理导航逻辑
*/
handleLocation: () => {
uni.openLocation({
latitude: Number(props.store.latitude),
longitude: Number(props.store.longitude),
name: props.store.name,
address: props.store.address,
scale: 18
})
},
/**
* 处理拨打电话逻辑
*/
handleCallPhone: () => {
uni.makePhoneCall({
phoneNumber: props.store.contact_phone
})
},
}
</script>
<script lang="ts">
export default {}
</script>

19
src/components/coupon/GroupCoupon.vue
View File

@ -2,16 +2,16 @@
<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>
<wd-img width="100%" height="100%" :src="coupon.tea_store_group.img"></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-32rpx text-[#303133] leading-44rpx line-1 w-350rpx">{{ coupon.tea_store_group.title }}</view>
<view class="text-26rpx text-[#6A6363] leading-36rpx mt-30rpx flex">
<view class="line-1">这是商家名称这是商家名称这是商家名称这是商家名称这是商家名称</view>
<view class="line-1">{{ coupon.store_msg.name }}</view>
<view class="mx-14rpx">|</view>
<view>{{ coupon.limit }}小时</view>
<view>{{ coupon.tea_store_group.hour }}小时</view>
</view>
<view class="text-24rpx leading-34rpx text-[#909399] mt-16rpx">有效期：2025-01-01至2025-05-05</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>
@ -33,6 +33,15 @@
amount: number
limit: number
expire: string
group_id: number
tea_store_group: {
img: string
title: string
hour: string
}
store_msg: {
name: string
}
}
canUse: boolean
checked: boolean

4
src/components/navbar.vue
View File

@ -2,7 +2,7 @@
<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="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>
@ -76,7 +76,7 @@
}
})
const navbar = {
const Navbar = {
back: () => {
uni.navigateBack({
delta: 1

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

@ -1,21 +1,21 @@
<template>
<view class="">
<!-- 平台团购直营店 -->
<view v-if="type === OrderSource.Direct" class="bg-white rounded-10rpx p-30rpx">
<view>
<!-- 平台团购直营店和加盟店团购套餐 -->
<view v-if="type === OrderSource.Combo" class="bg-white rounded-10rpx p-30rpx">
<view class="flex justify-between items-center">
<view class="flex 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>
<view class="flex items-center w-400rpx" @click="ComboCard.handleToStore">
<view class="font-bold text-30rpx leading-42rpx text-[#303133] mr-10rpx line-1">{{ order.store_name }}</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>
<text class="text-[#4C9F44]" v-if="order.order_status === TeaRoomPackageOrderStatus.ToUse">待使用</text>
<text class="text-[#606266]" v-if="order.order_status === TeaRoomPackageOrderStatus.Used">已使用</text>
<text class="text-[#C9C9C9]" v-if="order.order_status === TeaRoomPackageOrderStatus.Refunded">已退款</text>
</view>
</view>
<view class="mt-22rpx">
@ -25,27 +25,37 @@
</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-500 text-30rpx text-[#303133] leading-42rpx line-1 w-400rpx">{{ order.title }}</view>
<view>
<wd-tag bg-color="#F3F3F3" color="#606266" custom-class="!px-16rpx">3小时</wd-tag>
<wd-tag bg-color="#F3F3F3" color="#606266" custom-class="!px-16rpx">{{ order.hour }}小时</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 class="mt-12rpx" v-if="order.operation_type === StoreType.Direct">{{ order.introduce }}</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 class="text-center flex items-center text-28rpx mt-28rpx justify-end" v-if="order.order_status === TeaRoomPackageOrderStatus.ToUse">
<view
@click="ComboCard.handleOrderRefund(OrderSource.Combo)"
class="w-178rpx h-70rpx leading-70rpx rounded-8rpx border-[2rpx] border-[#9CA3AF] text-[#303133]"
:class="order.operation_type === StoreType.Direct ? ' mr-28rpx' : ''">
申请退款
</view>
<view
@click="ComboCard.handleUsePackage"
class="w-178rpx h-70rpx leading-70rpx rounded-8rpx border-[2rpx] border-[#4C9F44] text-[#4C9F44]"
v-if="order.operation_type === StoreType.Direct">
立即预定
</view>
</view>
</view>
</view>
</view>
</view>
<!-- 平台团购加盟店和抖音团购 -->
<view v-if="type === OrderSource.Franchise || type === OrderSource.DouYin" class="bg-white rounded-10rpx p-30rpx">
<!-- 抖音团购 -->
<view v-if="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">
@ -76,7 +86,6 @@
</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>
@ -210,10 +219,12 @@
</template>
<script lang="ts" setup name="ComboCard">
import { OrderSource, OrderStatus, TeaRoomOrderStatus } from '@/utils/order'
import { OrderSource, OrderStatus, TeaRoomOrderStatus, TeaRoomPackageOrderStatus } from '@/utils/order'
import { useMessage } from 'wot-design-uni'
import { toast } from '@/utils/toast'
import { handleTRCancelOrderHooks, handleTRDeleteOrderHooks, handleTRToPayHooks } from '@/hooks/useOrder'
import { handleTRCancelOrderHooks, handleTRDeleteOrderHooks, handleTRToPayHooks, handleToTeaRoomStoreHooks, handleTGOrderRefundHooks } from '@/hooks/useOrder'
import { StoreType } from '@/utils/tea'
import { router } from '@/utils/tools'
/**
* ComboCard 套餐卡片组件
@ -228,7 +239,7 @@
*/
type: {
type: String,
default: OrderSource.Direct
default: OrderSource.Combo
},
/**
* 订单类型: 待使用、退款等
@ -249,14 +260,36 @@
const message = useMessage('wd-message-box-slot')
const ComboCard = {
// 跳转到对饮茶室的详情页
/**
* 跳转到对对应室的详情页
*/
handleToStore: () => {
uni.navigateTo({
url: '/pages/store/store-detail/store-detail'
})
handleToTeaRoomStoreHooks(props.order.store_id, props.order.operation_type)
},
// 删除订单
/**
* 申请退款
*/
handleOrderRefund: (source: string) => {
switch (source) {
case OrderSource.Combo:
router.navigateTo(`/bundle/order/after-sales/after-sales?orderId=${props.order.id}&type=${OrderSource.Combo}&orderStatus=${OrderStatus.AfterSaleApply}`)
break;
default:
break;
}
},
/**
* 使用套餐
*/
handleUsePackage: () => {
router.navigateTo(`/bundle/tea-room/choose-room?groupCouponId=${props.order.group_id}&teaRoomId=${props.order.store_id}`)
},
/**
* 删除订单
*/
handleDeleteOrder: (source: string) => {
message.confirm({
title: '确定删除订单？',
@ -271,12 +304,9 @@
}
}).then((res) => {
switch (source) {
case OrderSource.Direct:
case OrderSource.Combo:
// TODO 这里调用删除直营订单的接口
break;
case OrderSource.Franchise:
// TODO 这里调用删除加盟订单的接口
break;
case OrderSource.DouYin:
// TODO 这里调用删除抖音订单的接口
break;
@ -290,15 +320,14 @@
default:
break;
}
// 点击确认按钮回调事件
toast.info('删除订单成功')
}).catch(() => {
// 点击取消按钮回调事件
})
},
// 取消订单
/**
* 取消订单
*/
handleCancelOrder: (source: string) => {
message.confirm({
title: '确定取消订单？',
@ -314,12 +343,9 @@
}).then((res) => {
if (res.action == 'confirm') {
switch (source) {
case OrderSource.Direct:
case OrderSource.Combo:
// TODO 这里调用删除直营订单的接口
break;
case OrderSource.Franchise:
// TODO 这里调用删除加盟订单的接口
break;
case OrderSource.DouYin:
// TODO 这里调用删除抖音订单的接口
break;
@ -334,71 +360,49 @@
break;
}
}
}).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}`
})
case OrderSource.Combo:
router.navigateTo(`/bundle/order/platform/order-detail?orderId=${props.order.id}&orderStatus=${props.orderStatus}`)
break;
case OrderSource.DouYin:
uni.navigateTo({
url: `/bundle/order/douyin/douyin-order-detail?orderStatus=${props.orderStatus}`
})
router.navigateTo(`/bundle/order/douyin/douyin-order-detail?orderId=${props.order.id}&orderStatus=${props.orderStatus}`)
break;
case OrderSource.TeaRoom:
uni.navigateTo({
url: `/bundle/order/tea-room/order-detail?orderStatus=${props.orderStatus}`
})
router.navigateTo(`/bundle/order/tea-room/order-detail?orderId=${props.order.id}&orderStatus=${props.orderStatus}`)
break;
case OrderSource.TeaSpecialist:
uni.navigateTo({
url: `/bundle/order/tea-specialist/order-detail?orderStatus=${props.orderStatus}`
})
router.navigateTo(`/bundle/order/tea-specialist/order-detail?orderId=${props.order.id}&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`
})
case OrderSource.Combo:
router.navigateTo(`/bundle/order/platform/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`
})
router.navigateTo(`/bundle/order/douyin/douyin-order-detail?orderStatus=${props.orderStatus}&toPay=true`)
break;
case OrderSource.TeaRoom:
handleTRToPayHooks(props.order.id, props.order.room_name, props.order.store_id)
break;
case OrderSource.TeaSpecialist:
uni.navigateTo({
url: `/bundle/order/tea-specialist/order-detail?orderStatus=${props.orderStatus}&toPay=true`
})
router.navigateTo( `/bundle/order/tea-specialist/order-detail?orderStatus=${props.orderStatus}&toPay=true`)
break;
default:
break;

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

@ -1,70 +1,84 @@
<template>
<view v-for="(item, index) in list" :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">{{ item.title }}</view>
<view class="mt-22rpx flex">
<template v-for="(label, labelIndex) in item.label" :key="labelIndex">
<view class="mr-20rpx flex items-start" v-if="label.category_id == 1">
<wd-tag color="#40AE36" bg-color="#40AE36" plain custom-class="!rounded-4rpx">文艺小清新</wd-tag>
</view>
<view class="flex items-start" v-if="label.category_id == 2">
<wd-tag color="#F55726" bg-color="#F55726" plain>全息投影</wd-tag>
</view>
</template>
</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="item.price" weight="500"></price-format>
<view>
<view class="text-[#6A6363] text-22rpx leading-30rpx">已售 {{ item.buy_nums > 10 ? item.buy_nums + '+' : item.buy_nums }}</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', item.store_id, item.id, item.price)">预定</view>
<view class="">
<wd-radio-group v-model="couponRoomIndex" @change="RoomList.handleChooseCouponRoom">
<view v-for="(item, index) in list" :key="index">
<view class="flex items-center">
<view class="w-200rpx h-200rpx">
<wd-img width="100%" height="100%" :src="item.img"
radius="10rpx"/>
</view>
<view class="flex-1 ml-32rpx relative" v-if="!isGroupBuying">
<view class="text-28rpx text-[#303133] leading-40rpx line-1 w-420rpx">{{ item.title }}</view>
<view class="mt-22rpx flex">
<template v-for="(label, labelIndex) in item.label" :key="labelIndex">
<view class="mr-20rpx flex items-start" v-if="label.category_id == 1">
<wd-tag color="#40AE36" bg-color="#40AE36" plain custom-class="!rounded-4rpx">文艺小清新</wd-tag>
</view>
<view class="flex items-start" v-if="label.category_id == 2">
<wd-tag color="#F55726" bg-color="#F55726" plain>全息投影</wd-tag>
</view>
</template>
</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="item.price" weight="500"></price-format>
<view class="absolute top-50rpx right-0" v-if="isUseCoupon">
<wd-radio checked-color="#4C9F44" size='large' shape="dot" :value="index"></wd-radio>
</view>
<view v-if="!isUseCoupon">
<view class="text-[#6A6363] text-22rpx leading-30rpx">已售 {{ item.buy_nums > 10 ? item.buy_nums + '+' : item.buy_nums }}</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.handleToPage(ReserveServiceCategory.ReserveRoom, item.store_id, item.id, item.price)">
预定
</view>
</view>
</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 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">{{ item.title }}</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">{{ item.hour }}小时</wd-tag>
</view>
</view>
<view v-if="item.introduce" class="text-[#999] text-22rpx leading-30rpx mt-12rpx w-300rpx line-2">{{ item.introduce }}</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="item.price" 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">{{ item.discount }}折</view>
</view>
</view>
</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 class="absolute bottom-0 right-0">
<view class="text-[#6A6363] text-22rpx leading-30rpx">已售 {{ item.sold > 10 ? item.sold + '+' : item.sold }}</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.handleToPage(ReserveServiceCategory.GroupBuying, item.store_id, item.id, item.price)">
抢购
</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', item.store_id, item.id, item.price)">预定</view>
<view class="flex justify-around items-center ml-12rpx mt-18rpx" v-if="isReserve">
<view class="w-20rpx text-center" v-for="(timeItem, timeIndex) in item.room_time" :key="timeIndex">
<view class="font-400 text-20rpx text-[#606266] leading-28rpx">{{ timeItem.value }}</view>
<!-- timeItem.status: 1可选 2不可选 -->
<view class="h-12rpx rounded-6rpx bg-[#4C9F44] mt-4rpx" :class="`${timeItem.status == 2 ? '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>
</view>
<view class="flex justify-around items-center ml-12rpx mt-18rpx" v-if="isReserve">
<view class="w-20rpx text-center" v-for="(timeItem, timeIndex) in item.room_time" :key="timeIndex">
<view class="font-400 text-20rpx text-[#606266] leading-28rpx">{{ timeItem.value }}</view>
<!-- timeItem.status: 1可选 2不可选 -->
<view class="h-12rpx rounded-6rpx bg-[#4C9F44] mt-4rpx" :class="`${timeItem.status == 2 ? '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>
</wd-radio-group>
</view>
</template>
@ -76,12 +90,16 @@
import PriceFormat from '@/components/PriceFormat.vue'
import {ReserveServiceCategory} from '@/utils/order'
import { router } from '@/utils/tools';
import { router } from '@/utils/tools'
import { StoreType } from '@/utils/tea'
const OSS = inject('OSS')
const spec = ref<boolean>(true)
// 使用团购优惠券选择的包间
const couponRoomIndex = ref<number>(-1)
const props = defineProps({
list: {
type: Array as () => Array<any>,
@ -97,22 +115,41 @@ import { router } from '@/utils/tools';
type: Boolean,
default: false
},
// 店铺类型
storeType: {
type: Number,
default: 2 // 1：直营 2：加盟
// 是否使用团购优惠券套餐
isUseCoupon: {
type: Boolean,
default: false
}
})
const RoomList = {
toPage: (type: string, id: number, roomId: number, price: number) => {
if (type === 'detail') {
const type = props.isGroupBuying ? ReserveServiceCategory.GroupBuying : ReserveServiceCategory.ReserveRoom
router.navigateTo(`/bundle/tea-room/detail?storeId=${id}&roomId=${roomId}&type=${type}&price=${price}`)
/**
* 跳转页面
* @param type 跳转类型：ReserveRoom-预定包间、GroupBuying-团购套餐
* @param storeId 茶室ID
* @param id 包间ID
* @param price 包间价格
*/
handleToPage: (type: string, storeId: number, id: number, price: number) => {
router.navigateTo(`/bundle/tea-room/detail?storeId=${storeId}&id=${id}&type=${type}&price=${price}`)
},
/**
* 选择使用优惠券的包间
*/
handleChooseCouponRoom: (item: {value: number}) => {
const params = {
id: props.list[item.value].id,
price: props.list[item.value].price
}
emit('chooseCouponRoom', params)
}
}
// 定义emit事件
const emit = defineEmits(['chooseCouponRoom'])
</script>
<script lang="ts">