124 lines
4.0 KiB
Vue
124 lines
4.0 KiB
Vue
<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page -->
|
||
<route lang="jsonc" type="page">{
|
||
"needLogin": true,
|
||
"layout": "tabbar",
|
||
"style": {
|
||
"navigationStyle": "custom"
|
||
}
|
||
}</route>
|
||
<template>
|
||
<view class="pb-180rpx">
|
||
<view>
|
||
<navbar title="包间详情" custom-class='!bg-[#F6F7F8]'></navbar>
|
||
</view>
|
||
|
||
<view>
|
||
<view class="mt-20rpx mx-30rpx swiper">
|
||
<wd-swiper value-key="image" height="320rpx"
|
||
:indicator="{ type: 'dots-bar' }" :list="swiperList" mode="aspectFit">
|
||
</wd-swiper>
|
||
</view>
|
||
|
||
<view class="bg-white rounded-16rpx py-26rpx px-30rpx mt-24rpx mx-30rpx">
|
||
<view class="flex items-center justify-between">
|
||
<price-format color="#FF5951" :first-size="36" :second-size="36" :subscript-size="24" :price="teaRoom.room.price"></price-format>
|
||
<view class="font-400 text-22rpx text-[#6A6363] leading-32rpx">已售 {{ teaRoom.room.sold > 10 ? teaRoom.room.sold + '+': teaRoom.room.sold }} </view>
|
||
</view>
|
||
<view class="font-bold text-36rpx text-[#303133] leading-50rpx mt-20rpx">{{ teaRoom.room.title }}</view>
|
||
<view class="mt-14rpx flex">
|
||
<template v-for="(label, labelIndex) in teaRoom.label" :key="labelIndex">
|
||
<view class="mr-20rpx flex items-start">
|
||
<wd-tag
|
||
:color="Detail.handleRandomColor(labelIndex)"
|
||
:bg-color="Detail.handleRandomColor(labelIndex)"
|
||
plain
|
||
custom-class="!rounded-4rpx"
|
||
>{{ label.label_name }}</wd-tag>
|
||
</view>
|
||
</template>
|
||
</view>
|
||
</view>
|
||
|
||
<view >
|
||
<!-- 使用说明 -->
|
||
<view class="bg-white rounded-16rpx py-26rpx px-30rpx mt-24rpx mx-30rpx">
|
||
<view class="text-[#303133] text-32rpx leading-44rpx font-bold mb-24rpx">使用说明</view>
|
||
<view class="">
|
||
<rich-text :nodes="teaRoom.textarea1"></rich-text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import { getStoreOrderDetails } from '@/api/store'
|
||
import PriceFormat from '@/components/PriceFormat.vue'
|
||
|
||
const swiperList = ref<string[]>([])
|
||
const html: string = '<p>这里是富文本内容，需要后台传递</p>'
|
||
|
||
// 包间内容
|
||
const roomId = ref<number>(0) // 门店ID
|
||
const teaRoom = ref<any>({})
|
||
|
||
// 随机颜色列表
|
||
const tagColors = ['#40AE36', '#F55726']
|
||
|
||
onLoad((args) => {
|
||
roomId.value = Number(args.id)
|
||
Detail.handleInitReserveRoom()
|
||
})
|
||
|
||
const Detail = {
|
||
/**
|
||
* 初始包间详情
|
||
*/
|
||
handleInitReserveRoom: async () => {
|
||
const res = await getStoreOrderDetails(roomId.value)
|
||
console.log("🚀 ~ res:", res)
|
||
teaRoom.value = res.details
|
||
swiperList.value = teaRoom.value.img_arr
|
||
},
|
||
|
||
/**
|
||
* 根据索引返回伪随机颜色
|
||
* @param index 索引
|
||
* @returns 颜色值
|
||
*/
|
||
handleRandomColor: (index: number) => {
|
||
// 可根据index做伪随机，保证每次渲染一致
|
||
return tagColors[index % tagColors.length]
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
page {
|
||
background-color: $cz-page-background;
|
||
}
|
||
|
||
.swiper {
|
||
:deep() {
|
||
.wd-swiper-nav__item--dots-bar {
|
||
width: 56rpx !important;
|
||
height: 6rpx !important;
|
||
border-radius: 3rpx !important;
|
||
}
|
||
|
||
.is-active {
|
||
background-color: #2B9F93 !important;
|
||
}
|
||
}
|
||
}
|
||
|
||
.pay {
|
||
:deep() {
|
||
.wd-radio {
|
||
margin-top: 0 !important;
|
||
}
|
||
}
|
||
}
|
||
</style>
|