104 lines
3.2 KiB
Vue
104 lines
3.2 KiB
Vue
<template>
|
|
<wd-popup v-model="showPopup" lock-scroll custom-style="border-radius: 32rpx 32rpx 0rpx 0rpx;" position="bottom">
|
|
<view class="relative pb-78rpx">
|
|
<view class="absolute top-18rpx right-30rpx" @click="showPopup = false">
|
|
<wd-img width="60rpx" height='60rpx' :src="`${OSS}icon/icon_close.png`"></wd-img>
|
|
</view>
|
|
<view class="text-36rpx text-[#121212] leading-50rpx text-center pt-50rpx pb-40rpx">续订包间</view>
|
|
|
|
<view class="booking-time mx-60rpx">
|
|
<view class="text-32rpx leading-44rpx text-[#01000D] mb-28rpx">续订时间</view>
|
|
<view class="grid grid-cols-4 gap-20rpx">
|
|
<view
|
|
@click="RenewTime.handleSelectTime(item)"
|
|
v-for="(item, index) in timeList" :key="index"
|
|
class="w-148rpx h-60rpx text-center leading-60rpx bg-[#F7F7F7] rounded-8rpx text-28rpx text-[#606266]"
|
|
:class="currentTimeValue == item.value ? '!bg-[#4C9F44] text-white' : ''">
|
|
{{ item.label }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="mx-auto mt-130rpx w-630rpx h-90rpx leading-90rpx text-center bg-[#4C9F44] rounded-8rpx text-[#fff]" @click="RenewTime.handleConfirmSelectedTime">
|
|
确定续订
|
|
</view>
|
|
</view>
|
|
</wd-popup>
|
|
</template>
|
|
|
|
<script lang="ts" setup name="RenewTime">
|
|
import {toast} from '@/utils/toast'
|
|
|
|
const OSS = inject('OSS')
|
|
|
|
/**
|
|
* BookingTime 预约时间
|
|
* @description 茶室预约时间选择组件
|
|
*/
|
|
|
|
const props = defineProps({
|
|
modelValue: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
})
|
|
|
|
// 初始化时间
|
|
onMounted(() => {
|
|
})
|
|
|
|
// 日期相关
|
|
const currentTimeValue = ref<number>(0)
|
|
const timeList = ref<Array<{ label: string, value: number }>>([
|
|
{label: '1小时', value: 1},
|
|
{label: '2小时', value: 2},
|
|
{label: '3小时', value: 3},
|
|
{label: '4小时', value: 4},
|
|
{label: '5小时', value: 5},
|
|
{label: '6小时', value: 6},
|
|
])
|
|
|
|
const RenewTime = {
|
|
/**
|
|
* 选择时间
|
|
*/
|
|
handleSelectTime: (item: { label: string, value: number }) => {
|
|
currentTimeValue.value = item.value
|
|
},
|
|
|
|
/**
|
|
* 确认选择时间
|
|
*/
|
|
handleConfirmSelectedTime: () => {
|
|
if (currentTimeValue.value == 0) {
|
|
toast.info('请选择续订时间')
|
|
return
|
|
}
|
|
const selectedItem = timeList.value.find(item => item.value == currentTimeValue.value)
|
|
emit('selectedTime', selectedItem)
|
|
showPopup.value = false
|
|
}
|
|
}
|
|
|
|
const showPopup = computed({
|
|
get: () => props.modelValue,
|
|
set: (val: boolean) => emit('update:modelValue', val)
|
|
})
|
|
|
|
const emit = defineEmits(['update:modelValue', 'selectedTime'])
|
|
</script>
|
|
|
|
<script lang="ts">
|
|
export default {}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.booking-time {
|
|
:deep() {
|
|
.wd-tabs__line {
|
|
background-color: #4C9F44 !important;
|
|
}
|
|
}
|
|
}
|
|
</style>
|