修改续订时间方式

2025-12-19 00:32:34 +08:00
parent f54cc0f8eb
commit fc3072980c
6 changed files with 129 additions and 125 deletions
--- a/src/components/RenewTime.vue
+++ b/src/components/RenewTime.vue
@ -0,0 +1,103 @@
+<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>