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

初始化仓库

Browse Source
This commit is contained in:
wangxiaowei
2025-12-04 17:44:28 +08:00
commit 0ab8464612
302 changed files with 52014 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -0,0 +1,157 @@
<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 ? 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 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 ? 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="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>