From f9f6d8abf3d9f1c5e01b5c8a07d812b9f79776b5 Mon Sep 17 00:00:00 2001
From: aaron <>
Date: Thu, 27 Mar 2025 23:46:52 +0800
Subject: [PATCH] update
---
src/views/merchant/ProductList.vue | 276 ++++++++++++++++++-----------
1 file changed, 171 insertions(+), 105 deletions(-)
diff --git a/src/views/merchant/ProductList.vue b/src/views/merchant/ProductList.vue
index 82bec17..941998c 100644
--- a/src/views/merchant/ProductList.vue
+++ b/src/views/merchant/ProductList.vue
@@ -222,36 +222,35 @@
v-model:value="formState.delivery_time_type"
@change="handleDeliveryTimeTypeChange"
>
- 及时达
- 定时达
+ 小时达
+ 预约达
- 及时达：商品将配送到家，默认当天配送
+ 小时达：商品将配送到家，默认当天配送
- 定时达：商品将由顾客自提，需填写自提点信息和自提时间
+ 预约达：商品将由顾客兑换，需填写兑换点信息和兑换时间
-
+
@@ -274,11 +273,12 @@
>
至
@@ -288,15 +288,16 @@
>
请选择自提的时间范围
+ 请选择兑换的时间范围
@@ -463,36 +464,35 @@
v-model:value="editFormState.delivery_time_type"
@change="handleEditDeliveryTimeTypeChange"
>
- 及时达
- 定时达
+ 小时达
+ 预约达
- 及时达：商品将配送到家，默认当天配送
+ 小时达：商品将配送到家，默认当天配送
- 定时达：商品将由顾客自提，需填写自提点信息和自提时间
+ 预约达：商品将由顾客兑换，需填写兑换点信息和兑换时间
-
+
@@ -515,11 +515,13 @@
>
至
@@ -529,15 +531,17 @@
>
请选择自提的时间范围
+ 请选择兑换的时间范围
@@ -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,