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-08-20 17:38:24 +08:00
parent b7b8cab0a5
commit 43b96fbfdf
6 changed files with 487 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
src/components/reserve/room-list.vue
View File

@ -5,28 +5,56 @@
<wd-img width="100%" height="100%" :src="`${OSS}images/reserve_room_image2.png`"
radius="10rpx"/>
</view>
<view class="flex-1 ml-32rpx">
<view class="text-28rpx text-[#303133] leading-38rpx">双人包间这个是标题名称</view>
<view class="mt-22rpx flex items-center">
<view class="mr-20rpx">
<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="">
<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"
<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 class="">
<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">预定</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="spec" 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'}`">
<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="reserve">
<view class="w-20rpx text-center " v-for="(item, index) in 24" :key="index">
<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>
@ -38,20 +66,39 @@
</template>
<script lang="ts" setup name="roomList">
import { ref, watch, inject } from 'vue'
import priceFormat from '@/components/price-format.vue';
import { ref, watch, inject } from 'vue'
import priceFormat from '@/components/price-format.vue';
const props = defineProps({
list: {
type: Array,
default: () => []
},
reserve: {
type: Boolean,
default: true
let OSS = inject('OSS')
const spec = ref<boolean>(true)
const props = defineProps({
list: {
type: Array,
default: () => []
},
// 是否开启预定
isReserve: {
type: Boolean,
default: true
},
// 是否是团购
isGroupBuying: {
type: Boolean,
default: false
}
})
const roomList = {
toPage: (type: string, id: number) => {
if (type === 'detail') {
uni.navigateTo({
url: `/pages-sub/reserve-room/detail?id=${id}`
})
}
}
}
})
let OSS = inject('OSS')
</script>