diff --git a/src/views/merchant/ProductList.vue b/src/views/merchant/ProductList.vue index 5bf41dd..654b897 100644 --- a/src/views/merchant/ProductList.vue +++ b/src/views/merchant/ProductList.vue @@ -261,21 +261,38 @@ - -
请选择自提的日期和时间
+
+ + + + + + + +
+
请选择自提的时间范围
@@ -475,21 +492,38 @@ - -
请选择自提的日期和时间
+
+ + + + + + + +
+
请选择自提的时间范围
@@ -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 = () => { - if (pickupDateTime.value) { - formState.value.pickup_time = dayjs(pickupDateTime.value).format('YYYY-MM-DD HH:mm'); + // 更新自提开始时间 + const updatePickupTimeFrom = () => { + if (pickupTimeFrom.value) { + formState.value.pickup_time_from = dayjs(pickupTimeFrom.value).format('HH:mm'); } else { - formState.value.pickup_time = ''; + formState.value.pickup_time_from = ''; } }; - // 更新编辑自提时间 - const updateEditPickupTime = () => { - if (editPickupDateTime.value) { - editFormState.value.pickup_time = dayjs(editPickupDateTime.value).format('YYYY-MM-DD HH:mm'); + // 更新自提结束时间 + const updatePickupTimeTo = () => { + if (pickupTimeTo.value) { + 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; - formState.value.pickup_time = ''; + pickupTimeFrom.value = null; + 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; - editFormState.value.pickup_time = ''; + editPickupTimeFrom.value = null; + 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为日期时间选择器的值 - if (record.pickup_time) { + // 解析pickup_time_from为时间选择器的值 + 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); - editPickupDateTime.value = null; + console.error('解析自提开始时间失败:', e); + 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, - updatePickupTime, - editPickupDateTime, - updateEditPickupTime, + pickupTimeFrom, + pickupTimeTo, + updatePickupTimeFrom, + 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); } \ No newline at end of file