421 lines
18 KiB
Vue
421 lines
18 KiB
Vue
<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page -->
|
||
<route lang="jsonc" type="page">{
|
||
"layout": "tabbar",
|
||
"style": {
|
||
"navigationStyle": "custom"
|
||
}
|
||
}</route>
|
||
<template>
|
||
<view class="pb-180rpx">
|
||
<view>
|
||
<wd-navbar safeAreaInsetTop :bordered="false">
|
||
<template #left>
|
||
<view class="h-48rpx flex items-center" @click="reserveRoom.back">
|
||
<wd-img width="48rpx" height="48rpx" :src="`${OSS}icon/icon_arrow_left.png`" class="mt-6rpx"></wd-img>
|
||
<view class="text-[#303133] text-36rpx ml-24rpx leading-48rpx">{{ isGroupBuying ? '团购套餐' : '预约' }}</view>
|
||
</view>
|
||
</template>
|
||
</wd-navbar>
|
||
</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"
|
||
@click="reserveRoom.handleClick" @change="reserveRoom.onChange" mode="aspectFit">
|
||
</wd-swiper>
|
||
</view>
|
||
|
||
<view class="bg-white rounded-16rpx py-26rpx px-30rpx mt-24rpx mx-30rpx">
|
||
<view class="font-bold text-36rpx text-[#303133] leading-50rpx">这里是茶室的名称茶室的名称</view>
|
||
<view class="mt-14rpx flex" v-if="!isGroupBuying">
|
||
<view class="mr-20rpx flex items-start">
|
||
<wd-tag color="#40AE36" bg-color="#40AE36" plain custom-class="!rounded-4rpx">文艺小清新</wd-tag>
|
||
</view>
|
||
<view class="flex items-start">
|
||
<wd-tag color="#F55726" bg-color="#F55726" plain>全息投影</wd-tag>
|
||
</view>
|
||
</view>
|
||
<view class="flex justify-between items-center" :class="`${ isGroupBuying ? 'mt-24rpx' : ''}`">
|
||
<view class="text-[#303133] text-26rpx leading-48rpx font-500" v-if="isGroupBuying">“环境幽静，谈商务放松好场所”</view>
|
||
<view class="text-[#6A6363] flex-1 text-22rpx leading-32rpx text-right">已售 10+</view>
|
||
</view>
|
||
<view v-if="isGroupBuying">
|
||
<view class="mt-20rpx mb-24rpx" >
|
||
<wd-gap height="2rpx" bgColor="#F6F7F9"></wd-gap>
|
||
</view>
|
||
<view class="text-[#303133] text-28rpx leading-48rpx">
|
||
<view>
|
||
<text class="font-bold mr-26rpx">须知</text>
|
||
<text class="font-500">需预约</text>
|
||
</view>
|
||
<view class="mt-22rpx">
|
||
<text class="font-bold mr-26rpx">保障</text>
|
||
<text class="font-500">随时退</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view v-if="!isGroupBuying">
|
||
<!-- 使用说明 -->
|
||
<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="html"></rich-text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 预定时间 -->
|
||
<view class="bg-white rounded-16rpx py-26rpx px-30rpx mt-24rpx mx-30rpx" @click="showReservePopup = true">
|
||
<view class="text-[#303133] text-32rpx leading-44rpx font-bold mb-24rpx">预定时间</view>
|
||
<view class="flex items-center justify-between">
|
||
<view class="text-[26rpx] text-[#606266] leading-36rpx">3小时起订</view>
|
||
<view class="flex items-center">
|
||
<view class="text-[28rpx] text-[#909399] leading-40rpx">
|
||
{{ totalHour > 0 ? `${totalHour}小时` : '请选择' }}
|
||
</view>
|
||
<view class="mt-4rpx">
|
||
<wd-icon name="chevron-right" size="22px" color="#909399"></wd-icon>
|
||
</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="flex items-center justify-between">
|
||
<view class="text-[26rpx] text-[#606266] leading-36rpx">优惠券</view>
|
||
<view class="flex items-center">
|
||
<view class="text-[28rpx] text-[#909399] leading-40rpx">无可用</view>
|
||
<view class="mt-4rpx">
|
||
<wd-icon name="chevron-right" size="22px" color="#909399"></wd-icon>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 支付方式 -->
|
||
<view class="bg-white rounded-16rpx py-40rpx px-30rpx mt-24rpx mx-30rpx pay">
|
||
<view>
|
||
<wd-radio-group v-model="pay" shape="dot" checked-color="#4C9F44">
|
||
<view class="flex justify-between items-center mb-40rpx" v-for="(item, index) in payList" :key="index" @click="pay = item.id">
|
||
<view class="flex items-center">
|
||
<wd-img width="50rpx" height="50rpx" :src="item.icon"></wd-img>
|
||
<view class="ml-20rpx text-30rpx text-[#303133] leading-42rpx">{{ item.name }}</view>
|
||
</view>
|
||
<view class="flex items-center">
|
||
<wd-radio :value="item.value">
|
||
<view class="text-[#303133] text-26rpx leading-36rpx mr-20rpx">可用202.22</view>
|
||
</wd-radio>
|
||
</view>
|
||
</view>
|
||
</wd-radio-group>
|
||
</view>
|
||
|
||
<view class="mb-30rpx">
|
||
<wd-gap height="2rpx" bgColor='#F6F7F9'></wd-gap>
|
||
</view>
|
||
|
||
<view class="flex justify-between items-center">
|
||
<view class="text-30rpx text-[#303133] leading-42rpx">更多支付（团购券）</view>
|
||
<view class="flex items-center">
|
||
<view class="text-[#4C9F44] text-28rpx leading-40rpx mr-32rpx">1张可用</view>
|
||
<view class="mt-4rpx">
|
||
<wd-icon name="chevron-right" size="22px" color="#909399"></wd-icon>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view v-if="isGroupBuying">
|
||
<!-- 套餐详情 -->
|
||
<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="html"></rich-text>
|
||
</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="html"></rich-text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="fixed left-0 right-0 bottom-0 z-2 bg-[#fff]"
|
||
:style="{ height: '140rpx', bottom: 'env(safe-area-inset-bottom)' }">
|
||
<view class="mt-12rpx w-full" v-if="!isGroupBuying">
|
||
<wd-gap height="2rpx" bgColor="#ECECEC"></wd-gap>
|
||
</view>
|
||
<view class="mt-22rpx flex justify-between items-center">
|
||
<view class="flex items-center ml-60rpx">
|
||
<view class="text-24rpx text-[#303133] leading-34rpx w-72rpx" v-if="!isGroupBuying">合计：</view>
|
||
<view class="flex items-center h-56rpx mr-16rpx">
|
||
<price-format color="#FF5951" :first-size="40" :second-size="40" :subscript-size="28" :price="23.02"></price-format>
|
||
<view class="ml-20rpx" v-if="isGroupBuying">
|
||
<price-format color="#909399" :first-size="26" :second-size="26" :subscript-size="26" :price="23.02" lineThrough></price-format>
|
||
</view>
|
||
</view>
|
||
<view class="flex items-center text-[#4C9F44]" v-if="!isGroupBuying" @click="reserveRoom.handleService">
|
||
<view class="text-24rpx mr-10rpx">费用明细</view>
|
||
<wd-icon name="arrow-down" size="24rpx" color="#4C9F44"></wd-icon>
|
||
</view>
|
||
</view>
|
||
<view class="mr-30rpx">
|
||
<wd-button custom-class='!bg-[#4C9F44] !rounded-8rpx !h-70rpx'>{{ isGroupBuying ? '立即购买' : '立即预定' }}</wd-button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 预定时间 -->
|
||
<wd-popup v-model="showReservePopup" lock-scroll custom-style="border-radius: 32rpx 32rpx 0rpx 0rpx;" @close="showReservePopup = false" position="bottom">
|
||
<view class="">
|
||
<view class="text-36rpx text-[#121212] leading-50rpx text-center pt-50rpx pb-40rpx">选择时间</view>
|
||
<view class="w-[100%] h-100rpx flex justify-between items-center">
|
||
<view
|
||
class="w-[50%] h-[100%] flex flex-col items-center justify-center rounded-l-[8rpx]"
|
||
:class="`${currentTimePicker == 'start' ? 'bg-[#4C9F44] text-[#fff]' : 'bg-[#F6F7F8] text-[#303133]'}`"
|
||
@click="currentTimePicker = 'start'">
|
||
<view class="text-28rpx leading-40rpx">开始时间</view>
|
||
<view class="text-26rpx leading-36rpx mt-2rpx">{{ startTimeLayout }}</view>
|
||
</view>
|
||
<view
|
||
class="w-[50%] h-[100%] flex flex-col items-center justify-center rounded-r-[8rpx]"
|
||
:class="`${currentTimePicker == 'end' ? 'bg-[#4C9F44] text-[#fff]' : 'bg-[#F6F7F8] text-[#303133]'}`"
|
||
@click="currentTimePicker = 'end'">
|
||
<view class="text-28rpx leading-40rpx">结束时间</view>
|
||
<view class="text-26rpx leading-36rpx mt-2rpx">{{ endTimeLayout }}</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="date-picker">
|
||
<view class="" v-if="currentTimePicker == 'start'">
|
||
<wd-datetime-picker-view
|
||
:minDate='minTimestamp'
|
||
:maxDate='maxTimestamp'
|
||
type="datetime"
|
||
v-model="startTimeValue"
|
||
:formatter="reserveRoom.formatStartTime"
|
||
@change="reserveRoom.startTimePickend"
|
||
/>
|
||
</view>
|
||
<view class="" v-if="currentTimePicker == 'end'">
|
||
<wd-datetime-picker-view
|
||
:minDate='minTimestamp'
|
||
:maxDate='maxTimestamp'
|
||
type="datetime"
|
||
v-model="endTimeValue"
|
||
:formatter="reserveRoom.formatStartTime"
|
||
@change="reserveRoom.endTimePickend"
|
||
/>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="pb-22rpx mt-40rpx mx-30rpx flex justify-between items-center text-[32rpx] text-center">
|
||
<view class='bg-[#F6F7F8] text-[#303133] rounded-8rpx h-90rpx leading-90rpx w-[50%] mr-28rpx' @click="reserveRoom.resetTime">重置</view>
|
||
<view class='bg-[#4C9F44] text-[#fff] rounded-8rpx h-90rpx leading-90rpx w-[50%]' @click="reserveRoom.confirmHour">确定（{{ totalHour }}小时）</view>
|
||
</view>
|
||
</view>
|
||
</wd-popup>
|
||
</view>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import { ref, inject } from 'vue'
|
||
import { getNavBarHeight, getCapsuleOffset } from '@/utils/index'
|
||
import {toast} from '@/utils/toast'
|
||
|
||
let navbarHeight = ref<number>(0)
|
||
let OSS = inject('OSS')
|
||
|
||
const rightPadding = ref<string>('')
|
||
const swiperList = ref<string[]>([
|
||
`${OSS}images/banner1.png`,
|
||
`${OSS}images/banner1.png`,
|
||
`${OSS}images/banner1.png`
|
||
])
|
||
const current = ref<number>(0)
|
||
const html: string = '<p>这里是富文本内容，需要后台传递</p>'
|
||
const isGroupBuying: boolean = false // 是否是团购套餐
|
||
const pay = ref<number>(1) // 支付方式
|
||
const payList = ref<Array<any>>([
|
||
{
|
||
id: 1,
|
||
name: '平台余额',
|
||
icon: `${OSS}icon/icon_platform_balance.png`,
|
||
balance: 0,
|
||
value: 1
|
||
},
|
||
{
|
||
id: 2,
|
||
name: '门店余额',
|
||
icon: `${OSS}icon/icon_store_balance.png`,
|
||
balance: 0,
|
||
value: 2
|
||
},
|
||
{
|
||
id: 3,
|
||
name: '微信支付',
|
||
icon: `${OSS}icon/icon_weichat.png`,
|
||
balance: 0,
|
||
value: 3
|
||
}
|
||
])
|
||
|
||
// 预定时间相关
|
||
const showReservePopup = ref<boolean>(false) // 预定时间popup
|
||
const currentTimePicker = ref<string>('start') // 当前选择的时间类型
|
||
const startTimeValue = ref<string>('') // 开始时间
|
||
const endTimeValue = ref<string>('') // 结束时间
|
||
const now = new Date()
|
||
const minTimestamp = Date.now()
|
||
// 允许选择未来两个月的日期
|
||
const maxTimestamp = new Date(now.getFullYear(), now.getMonth() + 1, now.getDate()).getTime()
|
||
const startTimeLayout = ref<string>('')
|
||
const endTimeLayout = ref<string>('')
|
||
const totalHour = ref<number>(0)
|
||
|
||
onLoad(() => {
|
||
navbarHeight.value = getNavBarHeight()
|
||
rightPadding.value = getCapsuleOffset()
|
||
})
|
||
|
||
const reserveRoom = {
|
||
startTimeTimestamp: 0, // 记录开始时间戳
|
||
endTimeTimestamp: 0, // 记录结束时间戳
|
||
|
||
startTimePickend: (e: {value: number}) => {
|
||
reserveRoom.startTimeTimestamp = e.value
|
||
startTimeLayout.value = reserveRoom.formatDate(e.value)
|
||
reserveRoom.totalTimestamp()
|
||
},
|
||
|
||
endTimePickend: (e: {value: number}) => {
|
||
reserveRoom.endTimeTimestamp = e.value
|
||
endTimeLayout.value = reserveRoom.formatDate(e.value)
|
||
reserveRoom.totalTimestamp()
|
||
},
|
||
|
||
formatStartTime: (type: string, values: string) => {
|
||
if (type === 'year') {
|
||
return `${values}年`
|
||
}
|
||
if (type === 'month') {
|
||
return `${values}月`
|
||
}
|
||
if (type === 'date') {
|
||
return `${values}日`
|
||
}
|
||
if (type === 'hour') {
|
||
return `${values}时`
|
||
}
|
||
if (type === 'minute') {
|
||
return `${values}分`
|
||
}
|
||
return values
|
||
},
|
||
|
||
handleClick: (item: any) => {
|
||
// 处理点击事件
|
||
console.log('Clicked item:', item)
|
||
},
|
||
|
||
onChange: (e: any) => {
|
||
// 设置 current.value 为当前轮播索引
|
||
current.value = e.current
|
||
},
|
||
|
||
back: () => {
|
||
uni.navigateBack({
|
||
delta: 1,
|
||
})
|
||
},
|
||
|
||
// 格式化时间
|
||
formatDate: (timestamp: number) => {
|
||
const date = new Date(timestamp)
|
||
const year = date.getFullYear()
|
||
const month = String(date.getMonth() + 1).padStart(2, '0')
|
||
const day = String(date.getDate()).padStart(2, '0')
|
||
const hour = String(date.getHours()).padStart(2, '0')
|
||
const minute = String(date.getMinutes()).padStart(2, '0')
|
||
|
||
return `${year}-${month}-${day} ${hour}:${minute}`
|
||
},
|
||
|
||
// 计算起订时间时长
|
||
totalTimestamp: () => {
|
||
if (reserveRoom.startTimeTimestamp && reserveRoom.endTimeTimestamp) {
|
||
const diffMs = reserveRoom.endTimeTimestamp - reserveRoom.startTimeTimestamp
|
||
// 计算小时，保留一位小数
|
||
const hours = (diffMs / 1000 / 60 / 60)
|
||
const result = Math.round(hours * 10) / 10 // 保留一位小数
|
||
if (result >= 0) {
|
||
totalHour.value = result
|
||
}
|
||
return result
|
||
}
|
||
totalHour.value = 0
|
||
return 0
|
||
},
|
||
|
||
// 重置预定时间
|
||
resetTime: () => {
|
||
startTimeValue.value = ''
|
||
endTimeValue.value = ''
|
||
startTimeLayout.value = ''
|
||
endTimeLayout.value = ''
|
||
reserveRoom.startTimeTimestamp = 0
|
||
reserveRoom.endTimeTimestamp = 0
|
||
totalHour.value = 0
|
||
currentTimePicker.value = 'start'
|
||
},
|
||
|
||
// 确定时间
|
||
confirmHour: () => {
|
||
if (totalHour.value <= 0) {
|
||
toast.info('至少起订N小时')
|
||
return
|
||
}
|
||
showReservePopup.value = false
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
page {
|
||
background-color: #F6F7F8;
|
||
}
|
||
|
||
.right-slot {
|
||
padding-right: v-bind(rightPadding);
|
||
}
|
||
|
||
.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>
|