240 lines
10 KiB
Vue
240 lines
10 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"
|
||
v-model:current="current" mode="aspectFit" @click="Detail.handlePreviewImage">
|
||
</wd-swiper>
|
||
</view>
|
||
|
||
<view class="bg-white rounded-16rpx p-30rpx mt-24rpx mx-30rpx">
|
||
<!-- 价格行 -->
|
||
<view class="flex items-center justify-between">
|
||
<view class="flex items-center">
|
||
<view>
|
||
<price-format color="#FF5951" :first-size="44" :second-size="44" :subscript-size="28" :price="298"></price-format>
|
||
</view>
|
||
<view class="ml-20rpx">
|
||
<price-format color="#909399" :first-size="24" :second-size="24" :subscript-size="24" :price="298" :line-through="true"></price-format>
|
||
</view>
|
||
<view
|
||
class="bg-[#FFEDED] text-[#FF5951] text-24rpx px-20rpx py-6rpx rounded-8rpx ml-28rpx flex items-center">
|
||
2.9折热销中</view>
|
||
</view>
|
||
<view class="text-[#909399] text-24rpx">已售500+</view>
|
||
</view>
|
||
|
||
<!-- 标题 -->
|
||
<view class="text-[#303133] text-36rpx font-bold mt-20rpx">清风套餐-标准品质</view>
|
||
|
||
<!-- 标签 -->
|
||
<view class="flex items-center mt-20rpx">
|
||
<view
|
||
class="text-[#C08A45] text-22rpx border-2rpx border-solid border-[#C3801C] rounded-8rpx px-12rpx py-6rpx mr-16rpx font-500">
|
||
回头客92</view>
|
||
<view
|
||
class="text-[#C08A45] text-22rpx border-2rpx border-solid border-[#C3801C] rounded-8rpx px-12rpx py-6rpx font-500">
|
||
500+购买</view>
|
||
</view>
|
||
|
||
<!-- 保障框 -->
|
||
<view class="bg-[#F2FBF6] rounded-10rpx px-20rpx py-16rpx mt-26rpx flex items-center">
|
||
<wd-img :src="`${OSS}icon/icon_safe.png`" width="32rpx" height="32rpx"></wd-img>
|
||
<view class="text-[#15B569] text-24rpx font-bold ml-10rpx mr-16rpx">保障</view>
|
||
<view class="text-[#606266] text-24rpx">预约后，爽约即可赔付</view>
|
||
</view>
|
||
|
||
<!-- 心动理由框 -->
|
||
<view class="bg-[#F8F8FF] rounded-10rpx px-20rpx py-22rpx mt-16rpx">
|
||
<view class="text-[#2B17AB] text-24rpx leading-36rpx">
|
||
<text class="inline-flex items-center align-middle mr-10rpx mb-4rpx">
|
||
<wd-img :src="`${OSS}icon/icon_star.png`" width="32rpx" height="32rpx"></wd-img>
|
||
<text class="text-[#3545DA] font-bold ml-6rpx">心动理由</text>
|
||
</text>
|
||
<text class="mt-8rpx">在谈判间隙或需要思考时，众人的注意力可自然地落于茶席，为您赢得宝贵的思考时间。</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 须知/保障模块 -->
|
||
<view class="mt-32rpx">
|
||
<view class="flex items-center mb-20rpx">
|
||
<view class="text-[#303133] text-26rpx font-bold">须知</view>
|
||
<view class="text-[#909399] text-26rpx ml-26rpx">需预约</view>
|
||
</view>
|
||
|
||
<view class="flex items-center">
|
||
<view class="text-[#303133] text-26rpx font-bold">保障</view>
|
||
<view class="text-[#909399] text-26rpx ml-26rpx">随时退</view>
|
||
</view>
|
||
</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="mt-24rpx" v-if="teaRoomPackage.introduce">
|
||
<view class="flex items-center mb-20rpx">
|
||
<wd-img width="36rpx" height="36rpx" :src="`${OSS}icon/icon_tcsm.png`"></wd-img>
|
||
<view class="font-bold text-28rpx leading-48rpx text-[#303133] ml-6rpx">套餐介绍</view>
|
||
</view>
|
||
<rich-text :nodes="teaRoomPackage.introduce"></rich-text>
|
||
</view>
|
||
<view class="mt-30rpx">
|
||
<view class="flex items-center mb-20rpx">
|
||
<wd-img width="36rpx" height="36rpx" :src="`${OSS}icon/icon_qtsm.png`"></wd-img>
|
||
<view class="font-bold text-28rpx leading-48rpx text-[#303133] ml-6rpx"> 其他说明</view>
|
||
</view>
|
||
<view class="flex items-center">
|
||
<view class="bg-[#6A6363] w-8rpx h-8rpx rounded-full mr-12rpx"></view>
|
||
<view class="font-500 text-26rpx text-[#303133]">超过一小时100元</view>
|
||
</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="mt-30rpx">
|
||
<view class="flex items-center mb-20rpx">
|
||
<wd-img width="36rpx" height="36rpx" :src="`${OSS}icon/icon_sycj.png`"></wd-img>
|
||
<view class="font-bold text-28rpx leading-48rpx text-[#303133] ml-6rpx"> 适用场景</view>
|
||
</view>
|
||
<view class="flex items-center">
|
||
<view class="bg-[#6A6363] w-8rpx h-8rpx rounded-full mr-12rpx"></view>
|
||
<view class="font-500 text-26rpx text-[#303133]">个人品鉴，小型聚会</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="mt-30rpx" v-if="teaRoomPackage.hour">
|
||
<view class="flex items-center mb-20rpx">
|
||
<wd-img width="36rpx" height="36rpx" :src="`${OSS}icon/icon_sysc.png`"></wd-img>
|
||
<view class="font-bold text-28rpx leading-48rpx text-[#303133] ml-6rpx">适用时长</view>
|
||
</view>
|
||
<view class="">{{ teaRoomPackage.hour }}小时</view>
|
||
</view>
|
||
|
||
<view class="mt-30rpx" v-if="teaRoomPackage.pl_number">
|
||
<view class="flex items-center mb-20rpx">
|
||
<wd-img width="36rpx" height="36rpx" :src="`${OSS}icon/icon_syrs.png`"></wd-img>
|
||
<view class="font-bold text-28rpx leading-48rpx text-[#303133] ml-6rpx">使用人数</view>
|
||
</view>
|
||
<view class="">{{ teaRoomPackage.pl_number }}</view>
|
||
</view>
|
||
|
||
<view class="mt-20rpx mb-24rpx">
|
||
<wd-gap height="2rpx" bgColor="#F6F7F9"></wd-gap>
|
||
</view>
|
||
|
||
<view class="mt-30rpx" v-if="teaRoomPackage.returd_details">
|
||
<view class="flex items-center mb-20rpx">
|
||
<wd-img width="36rpx" height="36rpx" :src="`${OSS}icon/icon_tgsm.png`"></wd-img>
|
||
<view class="font-bold text-28rpx leading-48rpx text-[#303133] ml-6rpx">退改说明</view>
|
||
</view>
|
||
<rich-text :nodes="teaRoomPackage.returd_details"></rich-text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="fixed left-0 right-0 bottom-0 z-2 bg-[#fff] flex items-center justify-center" :style="{ height: '140rpx' }">
|
||
<view class="text-32rpx leading-44rpx flex items-center justify-center leading-90rpx text-center">
|
||
<view class="w-630rpx h-90rpx bg-[#4C9F44] rounded-8rpx text-[#fff]" @click="Detail.handleReserve">立即预约</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import { toast } from '@/utils/toast'
|
||
import { router, previewImage, replaceNewLine } from '@/utils/tools'
|
||
|
||
import PriceFormat from '@/components/PriceFormat.vue'
|
||
|
||
|
||
const OSS = inject('OSS')
|
||
|
||
|
||
const swiperList = ref<string[]>([])
|
||
const current = ref<number>(0)
|
||
|
||
const teaRoomPackage = reactive({
|
||
introduce: '',
|
||
hour: 0,
|
||
pl_number: 0,
|
||
returd_details: ''
|
||
})
|
||
onLoad((args) => {
|
||
Detail.handleInit(args)
|
||
})
|
||
|
||
|
||
// 防止重复提交
|
||
const Detail = {
|
||
/**
|
||
* 初始包间详情
|
||
*/
|
||
handleInit: async (args) => {
|
||
// 包间详情
|
||
|
||
},
|
||
|
||
|
||
/**
|
||
* 提交订单
|
||
*/
|
||
handleReserve: async () => {
|
||
router.navigateTo('/bundle/package/service')
|
||
},
|
||
|
||
/**
|
||
* 预览图片
|
||
*/
|
||
handlePreviewImage: (e: { index: number, item: any }) => {
|
||
previewImage(swiperList.value[e.index], swiperList.value)
|
||
}
|
||
}
|
||
</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>
|