158 lines
7.7 KiB
Vue
158 lines
7.7 KiB
Vue
<template>
|
||
<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 ? '10+' : 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 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 class="absolute bottom-0 right-0">
|
||
<view class="text-[#6A6363] text-22rpx leading-30rpx">已售 {{ item.sold > 10 ? '10+' : 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="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>
|
||
</wd-radio-group>
|
||
</view>
|
||
</template>
|
||
|
||
<script lang="ts" setup name="RoomList">
|
||
/**
|
||
* RoomList 房间列表
|
||
* @description 茶室预定房间列表展示
|
||
*/
|
||
|
||
import PriceFormat from '@/components/PriceFormat.vue'
|
||
import {ReserveServiceCategory} from '@/utils/order'
|
||
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>,
|
||
default: () => []
|
||
},
|
||
// 是否开启预定
|
||
isReserve: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
// 是否是团购
|
||
isGroupBuying: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
// 是否使用团购优惠券套餐
|
||
isUseCoupon: {
|
||
type: Boolean,
|
||
default: false
|
||
}
|
||
})
|
||
|
||
const RoomList = {
|
||
/**
|
||
* 跳转页面
|
||
* @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">
|
||
export default {}
|
||
</script>
|