This commit is contained in:
aaron 2025-03-27 23:46:52 +08:00
parent 004726f422
commit f9f6d8abf3

View File

@ -222,36 +222,35 @@
v-model:value="formState.delivery_time_type"
@change="handleDeliveryTimeTypeChange"
>
<a-radio value="IMMEDIATE">时达</a-radio>
<a-radio value="SCHEDULED">定时</a-radio>
<a-radio value="IMMEDIATE">时达</a-radio>
<a-radio value="SCHEDULED">预约</a-radio>
</a-radio-group>
<div class="form-item-help">
<template v-if="formState.delivery_time_type === 'IMMEDIATE'">
时达商品将配送到家默认当天配送
时达商品将配送到家默认当天配送
</template>
<template v-else>
定时达商品将由顾客自提需填写自提点信息和自提时间
预约达商品将由顾客兑换需填写兑换点信息和兑换时间
</template>
</div>
</a-form-item>
<!-- 当选择"定时达"显示自提信息 -->
<!-- 当选择"预约达"显示兑换信息 -->
<template v-if="formState.delivery_time_type === 'SCHEDULED'">
<a-form-item
label="自提点"
label="兑换点"
name="pickup_place"
required
>
<a-input
v-model:value="formState.pickup_place"
placeholder="请输入自提点地址"
placeholder="请输入兑换点地址"
/>
</a-form-item>
<a-form-item
label="自提日期"
name="delivery_date"
required
label="兑换日期"
name="delivery_date"
>
<a-date-picker
v-model:value="formState.delivery_date"
@ -259,12 +258,12 @@
format="YYYY-MM-DD"
valueFormat="YYYY-MM-DD"
style="width: 100%"
placeholder="请选择自提日期"
placeholder="请选择兑换日期"
/>
</a-form-item>
<a-form-item
label="自提时间"
label="兑换时间"
required
>
<div class="time-range-wrapper">
@ -274,11 +273,12 @@
>
<a-time-picker
v-model:value="pickupTimeFrom"
format="HH:mm:ss"
format="HH:mm"
placeholder="开始时间"
style="width: 100%"
@change="updatePickupTimeFrom"
:minute-step="10"
:value-format="'HH:mm:ss'"
/>
</a-form-item>
<span class="time-separator"></span>
@ -288,15 +288,16 @@
>
<a-time-picker
v-model:value="pickupTimeTo"
format="HH:mm:ss"
format="HH:mm"
placeholder="结束时间"
style="width: 100%"
@change="updatePickupTimeTo"
:minute-step="10"
:value-format="'HH:mm:ss'"
/>
</a-form-item>
</div>
<div class="form-item-help">请选择自提的时间范围</div>
<div class="form-item-help">请选择兑换的时间范围</div>
</a-form-item>
</template>
</div>
@ -463,36 +464,35 @@
v-model:value="editFormState.delivery_time_type"
@change="handleEditDeliveryTimeTypeChange"
>
<a-radio value="IMMEDIATE">时达</a-radio>
<a-radio value="SCHEDULED">定时</a-radio>
<a-radio value="IMMEDIATE">时达</a-radio>
<a-radio value="SCHEDULED">预约</a-radio>
</a-radio-group>
<div class="form-item-help">
<template v-if="editFormState.delivery_time_type === 'IMMEDIATE'">
时达商品将配送到家默认当天配送
时达商品将配送到家默认当天配送
</template>
<template v-else>
定时达商品将由顾客自提需填写自提点信息和自提时间
预约达商品将由顾客兑换需填写兑换点信息和兑换时间
</template>
</div>
</a-form-item>
<!-- 当选择"定时达"显示自提信息 -->
<!-- 当选择"预约达"显示兑换信息 -->
<template v-if="editFormState.delivery_time_type === 'SCHEDULED'">
<a-form-item
label="自提点"
label="兑换点"
name="pickup_place"
required
>
<a-input
v-model:value="editFormState.pickup_place"
placeholder="请输入自提点地址"
placeholder="请输入兑换点地址"
/>
</a-form-item>
<a-form-item
label="自提日期"
name="delivery_date"
required
label="兑换日期"
name="delivery_date"
>
<a-date-picker
v-model:value="editFormState.delivery_date"
@ -500,12 +500,12 @@
format="YYYY-MM-DD"
valueFormat="YYYY-MM-DD"
style="width: 100%"
placeholder="请选择自提日期"
placeholder="请选择兑换日期"
/>
</a-form-item>
<a-form-item
label="自提时间"
label="兑换时间"
required
>
<div class="time-range-wrapper">
@ -515,11 +515,13 @@
>
<a-time-picker
v-model:value="editPickupTimeFrom"
format="HH:mm:ss"
format="HH:mm"
placeholder="开始时间"
style="width: 100%"
@change="updateEditPickupTimeFrom"
:minute-step="10"
:value-format="'HH:mm:ss'"
:show-second="false"
:use12-hours="false"
/>
</a-form-item>
<span class="time-separator"></span>
@ -529,15 +531,17 @@
>
<a-time-picker
v-model:value="editPickupTimeTo"
format="HH:mm:ss"
format="HH:mm"
placeholder="结束时间"
style="width: 100%"
@change="updateEditPickupTimeTo"
:minute-step="10"
:value-format="'HH:mm:ss'"
:show-second="false"
:use12-hours="false"
/>
</a-form-item>
</div>
<div class="form-item-help">请选择自提的时间范围</div>
<div class="form-item-help">请选择兑换的时间范围</div>
</a-form-item>
</template>
</div>
@ -760,8 +764,8 @@ export default defineComponent({
align: 'center',
customRender: ({ text }) => {
const typeMap = {
'IMMEDIATE': '时达',
'SCHEDULED': '定时达'
'IMMEDIATE': '时达',
'SCHEDULED': '预约达'
};
const colorMap = {
'IMMEDIATE': 'blue',
@ -773,32 +777,32 @@ export default defineComponent({
}
},
{
title: '自提信息',
title: '兑换信息',
key: 'pickup_info',
dataIndex: 'delivery_time_type',
width: '15%',
align: 'center',
customRender: ({ text, record }) => {
// ""
// ""
if (text === 'IMMEDIATE') {
return h('span', { style: { color: '#999' } }, '无需自提');
return h('span', { style: { color: '#999' } }, '无需兑换');
}
//
//
let infoText = '';
//
//
if (record.delivery_date) {
infoText += `日期: ${record.delivery_date}`;
}
//
//
if (record.pickup_time_from && record.pickup_time_to) {
infoText += infoText ? '\n' : '';
infoText += `时间: ${record.pickup_time_from.substring(0, 5)}-${record.pickup_time_to.substring(0, 5)}`;
}
//
//
if (record.pickup_place) {
infoText += infoText ? '\n' : '';
infoText += `地点: ${record.pickup_place}`;
@ -810,7 +814,7 @@ export default defineComponent({
lineHeight: '1.5',
fontSize: '12px'
}
}, infoText || '暂无自提信息');
}, infoText || '暂无兑换信息');
}
},
{
@ -858,6 +862,16 @@ export default defineComponent({
if (visible) {
//
editActiveTabKey.value = 'basic'
//
if (editFormState.value.delivery_time_type === 'SCHEDULED') {
nextTick(() => {
console.log('模态框显示后,检查时间选择器值:', {
from: editPickupTimeFrom.value,
to: editPickupTimeTo.value
})
})
}
}
})
@ -875,10 +889,15 @@ export default defineComponent({
try {
currentEditId.value = record.id
//
editPickupTimeFrom.value = null
editPickupTimeTo.value = null
//
const res = await request.get(`/api/merchant/product/${record.id}`)
if (res.code === 200) {
const productData = res.data
console.log('商品详情数据:', productData)
//
editFormState.value = {
@ -899,16 +918,28 @@ export default defineComponent({
product_detail: productData.product_detail || '',
purchase_note: productData.purchase_note || ''
}
console.log('编辑表单数据:', editFormState.value)
//
if (productData.pickup_time_from) {
editPickupTimeFrom.value = dayjs(productData.pickup_time_from, 'HH:mm:ss')
}
if (productData.pickup_time_to) {
editPickupTimeTo.value = dayjs(productData.pickup_time_to, 'HH:mm:ss')
}
//
editModalVisible.value = true
//
nextTick(() => {
console.log('设置时间选择器值...')
//
if (productData.pickup_time_from) {
console.log('设置兑换开始时间:', productData.pickup_time_from)
const timeFrom = dayjs(`2023-01-01 ${productData.pickup_time_from}`)
editPickupTimeFrom.value = timeFrom
console.log('设置后的时间值:', editPickupTimeFrom.value)
}
if (productData.pickup_time_to) {
console.log('设置兑换结束时间:', productData.pickup_time_to)
const timeTo = dayjs(`2023-01-01 ${productData.pickup_time_to}`)
editPickupTimeTo.value = timeTo
console.log('设置后的时间值:', editPickupTimeTo.value)
}
})
} else {
message.error('获取商品详情失败')
}
@ -941,6 +972,8 @@ export default defineComponent({
})
if (res.code === 200) {
merchantOptions.value = res.data.items
//
fetchData()
}
} catch (error) {
console.error('获取商家列表失败:', error)
@ -964,10 +997,20 @@ export default defineComponent({
const res = await getMerchantProducts(filterForm.value.merchant_id)
if (res.code === 200) {
tableData.value = (res.data.items || []).map(item => ({
...item,
statusLoading: false
}))
tableData.value = (res.data.items || []).map(item => {
//
let merchant_name = ''
if (item.merchant_id) {
const merchant = merchantOptions.value.find(m => m.id === item.merchant_id)
merchant_name = merchant ? merchant.name : `商家ID: ${item.merchant_id}`
}
return {
...item,
merchant_name: merchant_name, //
statusLoading: false
}
})
pagination.value.total = res.data.total
} else {
tableData.value = []
@ -1006,6 +1049,23 @@ export default defineComponent({
const editPickupTimeFrom = ref(null);
const editPickupTimeTo = ref(null);
//
const editPickupTimeFromComputed = computed({
get: () => editPickupTimeFrom.value,
set: (val) => {
editPickupTimeFrom.value = val;
updateEditPickupTimeFrom();
}
});
const editPickupTimeToComputed = computed({
get: () => editPickupTimeTo.value,
set: (val) => {
editPickupTimeTo.value = val;
updateEditPickupTimeTo();
}
});
//
const updatePickupTimeFrom = () => {
if (pickupTimeFrom.value) {
@ -1024,23 +1084,27 @@ export default defineComponent({
}
};
//
//
const updateEditPickupTimeFrom = () => {
console.log('更新兑换开始时间:', editPickupTimeFrom.value)
if (editPickupTimeFrom.value) {
editFormState.value.pickup_time_from = dayjs(editPickupTimeFrom.value).format('HH:mm:ss');
} else {
editFormState.value.pickup_time_from = '';
}
};
//
const updateEditPickupTimeTo = () => {
if (editPickupTimeTo.value) {
editFormState.value.pickup_time_to = dayjs(editPickupTimeTo.value).format('HH:mm:ss');
editFormState.value.pickup_time_from = dayjs(editPickupTimeFrom.value).format('HH:mm:ss')
} else {
editFormState.value.pickup_time_to = '';
editFormState.value.pickup_time_from = ''
}
};
console.log('表单兑换开始时间:', editFormState.value.pickup_time_from)
}
//
const updateEditPickupTimeTo = () => {
console.log('更新兑换结束时间:', editPickupTimeTo.value)
if (editPickupTimeTo.value) {
editFormState.value.pickup_time_to = dayjs(editPickupTimeTo.value).format('HH:mm:ss')
} else {
editFormState.value.pickup_time_to = ''
}
console.log('表单兑换结束时间:', editFormState.value.pickup_time_to)
}
// delivery_type
watch(() => formState.value.delivery_time_type, (newType) => {
@ -1079,47 +1143,37 @@ export default defineComponent({
gift_points_rate: [{ required: true, message: '请输入赠送积分比例' }],
qty: [{ required: true, message: '请输入库存数量' }],
delivery_time_type: [{ required: true, message: '请选择配送时间类型' }],
//
//
pickup_place: [{
required: true,
message: '请输入自提点地址',
message: '请输入兑换点地址',
trigger: 'change',
validator: (rule, value) => {
if (formState.value.delivery_time_type === 'SCHEDULED' && (!value || value.trim() === '')) {
return Promise.reject('请输入自提点地址');
}
return Promise.resolve();
}
}],
delivery_date: [{
required: true,
message: '请选择自提日期',
trigger: 'change',
validator: (rule, value) => {
if (formState.value.delivery_time_type === 'SCHEDULED' && !value) {
return Promise.reject('请选择自提日期');
return Promise.reject('请输入兑换点地址');
}
return Promise.resolve();
}
}],
// delivery_date
pickup_time_from: [{
required: true,
message: '请选择自提开始时间',
message: '请选择兑换开始时间',
trigger: 'change',
validator: (rule, value) => {
if (formState.value.delivery_time_type === 'SCHEDULED' && (!value || value.trim() === '')) {
return Promise.reject('请选择自提开始时间');
return Promise.reject('请选择兑换开始时间');
}
return Promise.resolve();
}
}],
pickup_time_to: [{
required: true,
message: '请选择自提结束时间',
message: '请选择兑换结束时间',
trigger: 'change',
validator: (rule, value) => {
if (formState.value.delivery_time_type === 'SCHEDULED' && (!value || value.trim() === '')) {
return Promise.reject('请选择自提结束时间');
return Promise.reject('请选择兑换结束时间');
}
return Promise.resolve();
}
@ -1139,24 +1193,27 @@ export default defineComponent({
//
if (formData.delivery_time_type === 'IMMEDIATE') {
//
//
formData.delivery_type = 'DELIVERY'
formData.delivery_date = dayjs().format('YYYY-MM-DD')
//
//
delete formData.pickup_place
delete formData.pickup_time_from
delete formData.pickup_time_to
} else if (formData.delivery_time_type === 'SCHEDULED') {
//
//
formData.delivery_type = 'PICKUP'
//
//
if (formData.delivery_date) {
formData.delivery_date = dayjs(formData.delivery_date).format('YYYY-MM-DD')
} else {
// 使
formData.delivery_date = dayjs().format('YYYY-MM-DD')
}
//
//
if (pickupTimeFrom.value) {
formData.pickup_time_from = dayjs(pickupTimeFrom.value).format('HH:mm:ss')
}
@ -1334,24 +1391,27 @@ export default defineComponent({
//
if (formData.delivery_time_type === 'IMMEDIATE') {
//
//
formData.delivery_type = 'DELIVERY'
formData.delivery_date = dayjs().format('YYYY-MM-DD')
//
//
delete formData.pickup_place
delete formData.pickup_time_from
delete formData.pickup_time_to
} else if (formData.delivery_time_type === 'SCHEDULED') {
//
//
formData.delivery_type = 'PICKUP'
//
//
if (formData.delivery_date) {
formData.delivery_date = dayjs(formData.delivery_date).format('YYYY-MM-DD')
} else {
// 使
formData.delivery_date = dayjs().format('YYYY-MM-DD')
}
//
//
if (editPickupTimeFrom.value) {
formData.pickup_time_from = dayjs(editPickupTimeFrom.value).format('HH:mm:ss')
}
@ -1410,8 +1470,9 @@ export default defineComponent({
//
const handleDeliveryTimeTypeChange = (e) => {
console.log('配送时间类型变更:', e.target.value)
if (e.target.value === 'IMMEDIATE') {
// -
// -
formState.value.delivery_type = 'DELIVERY'
formState.value.pickup_place = ''
formState.value.pickup_time_from = ''
@ -1419,17 +1480,21 @@ export default defineComponent({
formState.value.delivery_date = dayjs().format('YYYY-MM-DD')
pickupTimeFrom.value = null
pickupTimeTo.value = null
console.log('小时达模式下的表单数据:', formState.value)
} else if (e.target.value === 'SCHEDULED') {
// -
// -
formState.value.delivery_type = 'PICKUP'
formState.value.delivery_date = null
// delivery_date
// pickup_time_from pickup_time_to
console.log('预约达模式下的表单数据:', formState.value)
}
}
//
const handleEditDeliveryTimeTypeChange = (e) => {
console.log('配送时间类型变更:', e.target.value)
if (e.target.value === 'IMMEDIATE') {
// -
// -
editFormState.value.delivery_type = 'DELIVERY'
editFormState.value.pickup_place = ''
editFormState.value.pickup_time_from = ''
@ -1437,17 +1502,18 @@ export default defineComponent({
editFormState.value.delivery_date = dayjs().format('YYYY-MM-DD')
editPickupTimeFrom.value = null
editPickupTimeTo.value = null
console.log('小时达模式下的表单数据:', editFormState.value)
} else if (e.target.value === 'SCHEDULED') {
// -
// -
editFormState.value.delivery_type = 'PICKUP'
// delivery_date
// delivery_date
// pickup_time_from pickup_time_to
console.log('预约达模式下的表单数据:', editFormState.value)
}
}
onMounted(() => {
fetchMerchantOptions()
fetchData() //
fetchMerchantOptions() //
})
return {
@ -1486,8 +1552,8 @@ export default defineComponent({
pickupTimeTo,
updatePickupTimeFrom,
updatePickupTimeTo,
editPickupTimeFrom,
editPickupTimeTo,
editPickupTimeFrom: editPickupTimeFromComputed,
editPickupTimeTo: editPickupTimeToComputed,
updateEditPickupTimeFrom,
updateEditPickupTimeTo,
activeTabKey,