完善预定页面

src/components/BookingTime.vue

@@ -7,24 +7,24 @@
             <view class="text-36rpx text-[#121212] leading-50rpx text-center pt-50rpx pb-40rpx">选择时间</view>
 
             <view class="">
-                <view class="booking-time ">
-                    <wd-tabs v-model="selectedDay" color="#4C9F44">
-                        <block v-for="item in days" :key="item">
+                <view class="booking-time">
+                    <wd-tabs v-model="selectedDay" color="#4C9F44"  @click="bookingTime.handleChangeTimeTab">
+                        <block v-for="item in day.time" :key="item">
                             <scroll-view scroll-y>
-                                <wd-tab :title="`${item}`" :name="item">
+                                <wd-tab :title="`${item.display}`" :name="item.display">
                                     <view class="">
                                         <view class="!h-500rpx mt-30rpx">
                                             <view class="grid grid-cols-4 gap-x-20rpx gap-y-20rpx mx-30rpx">
-                                                <view v-for="item in timeList" :key="item.time"
+                                                <view v-for="item2 in item.time_slots" :key="item2.start_time"
                                                     class="h-72rpx rounded-16rpx flex items-center justify-center text-28rpx leading-40rpx"
                                                     :class="[
-                                                        item.disabled
+                                                        item2.disabled == 0
                                                             ? 'bg-[#F7F7F7] text-[#C9C9C9]' // 禁用高亮
-                                                            : selectedTime.includes(item.time)
+                                                            : selectedTime.includes(item2.start_time)
                                                                 ? 'bg-[#F1F8F0] text-[#4C9F44]'   // 选中高亮
                                                                 : 'bg-[#F7F7F7] text-[#303133]',  // 可选高亮
-                                                    ]" @click="!item.disabled && bookingTime.handleSelectTime(item.time)">
-                                                    {{ item.time }}
+                                                    ]" @click="item2.disabled == 1 && bookingTime.handleSelectTime(item2.start_time)">
+                                                    {{ item2.start_time }}
                                                 </view>
                                             </view>
                                         </view>
@@ -55,6 +55,8 @@
 </template>
 
 <script lang="ts" setup name="BookingTime">
+    import {toast} from '@/utils/toast'
+
     const OSS = inject('OSS')
 
     /**
@@ -67,6 +69,10 @@
             type: Boolean,
             default: false
         },
+        day: {
+            type: Object,
+            default: {}
+        },
         // ...其它props
     })
 
@@ -105,6 +111,7 @@
                 result.push(`${month}/${date}${week}`)
             }
             days.value = result
+            console.log("🚀 ~ days.value:", days.value)
         },
 
         // 选择的时间高亮显示
@@ -117,28 +124,48 @@
             }
 
             // 计算时长
-            countSelectedTime.value = selectedTime.value.length * 0.5
+            countSelectedTime.value = selectedTime.value.length * 1
         },
 
         // 确认选择的时间
         handleConfirmSelectedTime: () => {
             console.log('确认选择的时间:', selectedDay.value, selectedTime.value)
+            if (selectedTime.value.length === 0) {
+                toast.info('请选择时间')
+                return
+            }
+
+            if (selectedTime.value.length < props.day.minimum_time) {
+                toast.info(props.day.minimum_time + '小时起订')
+                return
+            }
+
+            const data = [
+                selectedDay.value,
+                selectedTime.value
+            ]
+            emit('selectedTime', data)
             showPopup.value = false
         },
 
+        // 切换时间tab的时候把之前选中的时间重置
+        handleChangeTimeTab: () => {
+            selectedTime.value = []
+            countSelectedTime.value = 0
+        },
+
         // 重置选择的时间
         resetSelectedTime: () => {
             selectedTime.value = []
         },
     }
 
-
     const showPopup = computed({
         get: () => props.modelValue,
         set: (val: boolean) => emit('update:modelValue', val)
     })
 
-    const emit = defineEmits(['update:modelValue'])
+    const emit = defineEmits(['update:modelValue', 'selectedTime'])
 </script>
 
 <script lang="ts">