update

src/views/merchant/ProductList.vue

@@ -261,21 +261,38 @@
               <a-form-item 
                 v-if="formState.delivery_type === 'PICKUP'" 
                 label="自提时间" 
-                name="pickup_time" 
                 required
               >
-                <a-date-picker
+                <div class="time-range-wrapper">
-                  v-model:value="pickupDateTime"
+                  <a-form-item 
-                  type="date"
+                    name="pickup_time_from" 
-                  show-time
+                    noStyle
-                  format="YYYY-MM-DD HH:mm"
+                  >
-                  placeholder="请选择自提日期和时间"
+                    <a-time-picker
-                  style="width: 100%"
+                      v-model:value="pickupTimeFrom"
-                  @change="updatePickupTime"
+                      format="HH:mm"
-                  :disabled-date="disabledDate"
+                      placeholder="开始时间"
-                  :show-time="{ format: 'HH:mm', minuteStep: 10 }"
+                      style="width: 100%"
-                />
+                      @change="updatePickupTimeFrom"
-                <div class="form-item-help">请选择自提的日期和时间</div>
+                      :minute-step="10"
+                    />
+                  </a-form-item>
+                  <span class="time-separator">至</span>
+                  <a-form-item 
+                    name="pickup_time_to" 
+                    noStyle
+                  >
+                    <a-time-picker
+                      v-model:value="pickupTimeTo"
+                      format="HH:mm"
+                      placeholder="结束时间"
+                      style="width: 100%"
+                      @change="updatePickupTimeTo"
+                      :minute-step="10"
+                    />
+                  </a-form-item>
+                </div>
+                <div class="form-item-help">请选择自提的时间范围</div>
               </a-form-item>
               
               <a-form-item label="配送时间类型" name="delivery_time_type" required>
@@ -475,21 +492,38 @@
               <a-form-item 
                 v-if="editFormState.delivery_type === 'PICKUP'" 
                 label="自提时间" 
-                name="pickup_time" 
                 required
               >
-                <a-date-picker
+                <div class="time-range-wrapper">
-                  v-model:value="editPickupDateTime"
+                  <a-form-item 
-                  type="date"
+                    name="pickup_time_from" 
-                  show-time
+                    noStyle
-                  format="YYYY-MM-DD HH:mm"
+                  >
-                  placeholder="请选择自提日期和时间"
+                    <a-time-picker
-                  style="width: 100%"
+                      v-model:value="editPickupTimeFrom"
-                  @change="updateEditPickupTime"
+                      format="HH:mm"
-                  :disabled-date="disabledDate"
+                      placeholder="开始时间"
-                  :show-time="{ format: 'HH:mm', minuteStep: 10 }"
+                      style="width: 100%"
-                />
+                      @change="updateEditPickupTimeFrom"
-                <div class="form-item-help">请选择自提的日期和时间</div>
+                      :minute-step="10"
+                    />
+                  </a-form-item>
+                  <span class="time-separator">至</span>
+                  <a-form-item 
+                    name="pickup_time_to" 
+                    noStyle
+                  >
+                    <a-time-picker
+                      v-model:value="editPickupTimeTo"
+                      format="HH:mm"
+                      placeholder="结束时间"
+                      style="width: 100%"
+                      @change="updateEditPickupTimeTo"
+                      :minute-step="10"
+                    />
+                  </a-form-item>
+                </div>
+                <div class="form-item-help">请选择自提的时间范围</div>
               </a-form-item>
               
               <a-form-item label="配送时间类型" name="delivery_time_type" required>
@@ -588,7 +622,8 @@ export default defineComponent({
       qty: 0,
       delivery_type: 'DELIVERY',
       pickup_place: '',
-      pickup_time: '',
+      pickup_time_from: '',
+      pickup_time_to: '',
       delivery_time_type: 'IMMEDIATE',
       delivery_date: null
     })
@@ -745,52 +780,79 @@ export default defineComponent({
       qty: 0,
       delivery_type: 'DELIVERY',
       pickup_place: '',
-      pickup_time: '',
+      pickup_time_from: '',
+      pickup_time_to: '',
       delivery_time_type: 'IMMEDIATE',
       delivery_date: null
     })
 
     // 添加商品相关自提时间选择器
     const pickupDateTime = ref(null);
+    const pickupTimeFrom = ref(null);
+    const pickupTimeTo = ref(null);
     
     // 编辑商品相关自提时间选择器
     const editPickupDateTime = ref(null);
+    const editPickupTimeFrom = ref(null);
+    const editPickupTimeTo = ref(null);
     
-    // 更新自提时间
+    // 更新自提开始时间
-    const updatePickupTime = () => {
+    const updatePickupTimeFrom = () => {
-      if (pickupDateTime.value) {
+      if (pickupTimeFrom.value) {
-        formState.value.pickup_time = dayjs(pickupDateTime.value).format('YYYY-MM-DD HH:mm');
+        formState.value.pickup_time_from = dayjs(pickupTimeFrom.value).format('HH:mm');
       } else {
-        formState.value.pickup_time = '';
+        formState.value.pickup_time_from = '';
       }
     };
     
-    // 更新编辑自提时间
+    // 更新自提结束时间
-    const updateEditPickupTime = () => {
+    const updatePickupTimeTo = () => {
-      if (editPickupDateTime.value) {
+      if (pickupTimeTo.value) {
-        editFormState.value.pickup_time = dayjs(editPickupDateTime.value).format('YYYY-MM-DD HH:mm');
+        formState.value.pickup_time_to = dayjs(pickupTimeTo.value).format('HH:mm');
       } else {
-        editFormState.value.pickup_time = '';
+        formState.value.pickup_time_to = '';
+      }
+    };
+    
+    // 更新编辑自提开始时间
+    const updateEditPickupTimeFrom = () => {
+      if (editPickupTimeFrom.value) {
+        editFormState.value.pickup_time_from = dayjs(editPickupTimeFrom.value).format('HH:mm');
+      } else {
+        editFormState.value.pickup_time_from = '';
+      }
+    };
+    
+    // 更新编辑自提结束时间
+    const updateEditPickupTimeTo = () => {
+      if (editPickupTimeTo.value) {
+        editFormState.value.pickup_time_to = dayjs(editPickupTimeTo.value).format('HH:mm');
+      } else {
+        editFormState.value.pickup_time_to = '';
       }
     };
     
     // 监听delivery_type的变化，重置时间选择器
     watch(() => formState.value.delivery_type, (newType) => {
       if (newType !== 'PICKUP') {
-        pickupDateTime.value = null;
+        pickupTimeFrom.value = null;
-        formState.value.pickup_time = '';
+        pickupTimeTo.value = null;
+        formState.value.pickup_time_from = '';
+        formState.value.pickup_time_to = '';
       }
     });
     
     // 监听编辑模式下delivery_type的变化
     watch(() => editFormState.value.delivery_type, (newType) => {
       if (newType !== 'PICKUP') {
-        editPickupDateTime.value = null;
+        editPickupTimeFrom.value = null;
-        editFormState.value.pickup_time = '';
+        editPickupTimeTo.value = null;
+        editFormState.value.pickup_time_from = '';
+        editFormState.value.pickup_time_to = '';
       }
     });
     
-    // 显示修改模态框时解析已有的pickup_time
+    // 显示修改模态框时解析已有的pickup_time_from和pickup_time_to
     const handleEdit = (record) => {
       currentEditId.value = record.id
       editFormState.value = {
@@ -807,21 +869,40 @@ export default defineComponent({
         qty: record.qty || 0,
         delivery_type: record.delivery_type || 'DELIVERY',
         pickup_place: record.pickup_place || '',
-        pickup_time: record.pickup_time || '',
+        pickup_time_from: record.pickup_time_from || '',
+        pickup_time_to: record.pickup_time_to || '',
         delivery_time_type: record.delivery_time_type || 'IMMEDIATE',
         delivery_date: record.delivery_date || null
       }
       
-      // 解析pickup_time为日期时间选择器的值
+      // 解析pickup_time_from为时间选择器的值
-      if (record.pickup_time) {
+      if (record.pickup_time_from) {
         try {
-          editPickupDateTime.value = dayjs(record.pickup_time);
+          // 创建当天的日期和设置时间
+          const [hours, minutes] = record.pickup_time_from.split(':').map(num => parseInt(num, 10));
+          const today = dayjs();
+          editPickupTimeFrom.value = today.hour(hours).minute(minutes);
         } catch (e) {
-          console.error('解析自提时间失败:', e);
+          console.error('解析自提开始时间失败:', e);
-          editPickupDateTime.value = null;
+          editPickupTimeFrom.value = null;
         }
       } else {
-        editPickupDateTime.value = null;
+        editPickupTimeFrom.value = null;
+      }
+      
+      // 解析pickup_time_to为时间选择器的值
+      if (record.pickup_time_to) {
+        try {
+          // 创建当天的日期和设置时间
+          const [hours, minutes] = record.pickup_time_to.split(':').map(num => parseInt(num, 10));
+          const today = dayjs();
+          editPickupTimeTo.value = today.hour(hours).minute(minutes);
+        } catch (e) {
+          console.error('解析自提结束时间失败:', e);
+          editPickupTimeTo.value = null;
+        }
+      } else {
+        editPickupTimeTo.value = null;
       }
       
       editModalVisible.value = true
@@ -903,11 +984,13 @@ export default defineComponent({
         qty: 0,
         delivery_type: 'DELIVERY',
         pickup_place: '',
-        pickup_time: '',
+        pickup_time_from: '',
+        pickup_time_to: '',
         delivery_time_type: 'IMMEDIATE',
         delivery_date: null
       }
-      editPickupDateTime.value = null;
+      editPickupTimeFrom.value = null;
+      editPickupTimeTo.value = null;
       editModalVisible.value = false
     }
 
@@ -943,13 +1026,24 @@ export default defineComponent({
           return Promise.resolve();
         }
       }],
-      pickup_time: [{ 
+      pickup_time_from: [{ 
         required: true, 
-        message: '请输入自提时间',
+        message: '请选择自提开始时间',
         trigger: 'change',
         validator: (rule, value) => {
           if (formState.value.delivery_type === 'PICKUP' && (!value || value.trim() === '')) {
-            return Promise.reject('请输入自提时间');
+            return Promise.reject('请选择自提开始时间');
+          }
+          return Promise.resolve();
+        }
+      }],
+      pickup_time_to: [{ 
+        required: true, 
+        message: '请选择自提结束时间',
+        trigger: 'change',
+        validator: (rule, value) => {
+          if (formState.value.delivery_type === 'PICKUP' && (!value || value.trim() === '')) {
+            return Promise.reject('请选择自提结束时间');
           }
           return Promise.resolve();
         }
@@ -1050,11 +1144,13 @@ export default defineComponent({
         qty: 0,
         delivery_type: 'DELIVERY',
         pickup_place: '',
-        pickup_time: '',
+        pickup_time_from: '',
+        pickup_time_to: '',
         delivery_time_type: 'IMMEDIATE',
         delivery_date: null
       }
-      pickupDateTime.value = null;
+      pickupTimeFrom.value = null;
+      pickupTimeTo.value = null;
       addModalVisible.value = false
     }
 
@@ -1141,10 +1237,14 @@ export default defineComponent({
       getStatusColor,
       handleToggleStatus,
       disabledDate,
-      pickupDateTime,
+      pickupTimeFrom,
-      updatePickupTime,
+      pickupTimeTo,
-      editPickupDateTime,
+      updatePickupTimeFrom,
-      updateEditPickupTime,
+      updatePickupTimeTo,
+      editPickupTimeFrom,
+      editPickupTimeTo,
+      updateEditPickupTimeFrom,
+      updateEditPickupTimeTo,
     }
   }
 })
@@ -1332,10 +1432,11 @@ export default defineComponent({
 .time-range-wrapper {
   display: flex;
   align-items: center;
+  gap: 8px;
 }
 
 .time-separator {
-  margin: 0 8px;
+  margin: 0;
   color: rgba(0, 0, 0, 0.45);
 }
 </style>