121 lines
6.1 KiB
Vue
121 lines
6.1 KiB
Vue
<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>
|
||
</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', 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>
|
||
</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';
|
||
|
||
const OSS = inject('OSS')
|
||
|
||
const spec = ref<boolean>(true)
|
||
|
||
const props = defineProps({
|
||
list: {
|
||
type: Array as () => Array<any>,
|
||
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, 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}`)
|
||
}
|
||
}
|
||
}
|
||
|
||
</script>
|
||
|
||
<script lang="ts">
|
||
export default {}
|
||
</script>
|