From 9ab24be577f3148b995ffee2b41c934086d2532b Mon Sep 17 00:00:00 2001 From: aaron <> Date: Tue, 25 Mar 2025 10:59:12 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=95=86=E5=93=81=E9=A1=B5?= =?UTF-8?q?=E9=9D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/merchant/ProductList.vue | 612 ++++++++++++++++++----------- 1 file changed, 374 insertions(+), 238 deletions(-) diff --git a/src/views/merchant/ProductList.vue b/src/views/merchant/ProductList.vue index 986d3a6..9196cc7 100644 --- a/src/views/merchant/ProductList.vue +++ b/src/views/merchant/ProductList.vue @@ -255,84 +255,89 @@
0 次表示不限购
- - - 配送到家 - 自提 - - - - - - - - -
- - - - 至 - - - -
-
请选择自提的时间范围
- - + - - 及时送 - 定时送 + + 及时达 + 定时达 +
+ + +
- - - + + @@ -517,84 +522,89 @@
0 次表示不限购
- - - 配送到家 - 自提 - - - - - - - - -
- - - - 至 - - - -
-
请选择自提的时间范围
- - + - - 及时送 - 定时送 + + 及时达 + 定时达 +
+ + +
- - - + + @@ -700,6 +710,7 @@ export default defineComponent({ const editActiveTabKey = ref('basic'); const editFormState = ref({ + merchant_id: undefined, operation_type: 'MERCHANT', name: '', image_url: '', @@ -711,12 +722,13 @@ export default defineComponent({ gift_points_rate: 0, promotion_text: '', qty: 0, - delivery_type: 'DELIVERY', + delivery_type: 'DELIVERY', // 默认配送到家 pickup_place: '', pickup_time_from: '', pickup_time_to: '', - delivery_time_type: 'IMMEDIATE', - delivery_date: null, + pickup_date: null, // 自提日期 + delivery_time_type: 'IMMEDIATE', // 默认及时达 + delivery_date: dayjs().format('YYYY-MM-DD'), // 默认当天 product_detail: '

商品详情

这里是商品的详细描述，支持富文本格式。

', purchase_note: '' }) @@ -734,12 +746,13 @@ export default defineComponent({ gift_points_rate: 0, promotion_text: '', qty: 0, - delivery_type: 'DELIVERY', + delivery_type: 'DELIVERY', // 默认配送到家 pickup_place: '', pickup_time_from: '', pickup_time_to: '', - delivery_time_type: 'IMMEDIATE', - delivery_date: null, + pickup_date: null, // 自提日期 + delivery_time_type: 'IMMEDIATE', // 默认及时达 + delivery_date: dayjs().format('YYYY-MM-DD'), // 默认当天 product_detail: '

商品详情

这里是商品的详细描述，支持富文本格式。

', purchase_note: '' }) @@ -780,6 +793,26 @@ export default defineComponent({ width: '10%', align: 'right' }, + { + title: '配送时间类型', + dataIndex: 'delivery_time_type', + key: 'delivery_time_type', + width: '10%', + align: 'center', + customRender: ({ text }) => { + const typeMap = { + 'IMMEDIATE': '及时达', + 'SCHEDULED': '定时达' + }; + const colorMap = { + 'IMMEDIATE': 'blue', + 'SCHEDULED': 'green' + }; + return h(Tag, { + color: colorMap[text] + }, typeMap[text] || text); + } + }, { title: '限购', dataIndex: 'purchase_limit', @@ -1050,10 +1083,6 @@ export default defineComponent({ gift_points_rate: record.gift_points_rate, promotion_text: record.promotion_text, qty: record.qty || 0, - delivery_type: record.delivery_type || 'DELIVERY', - pickup_place: record.pickup_place || '', - 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, product_detail: productDetailHtml, @@ -1195,7 +1224,7 @@ export default defineComponent({ }; // 监听delivery_type的变化，重置时间选择器 - watch(() => formState.value.delivery_type, (newType) => { + watch(() => formState.value.delivery_time_type, (newType) => { if (newType !== 'PICKUP') { pickupTimeFrom.value = null; pickupTimeTo.value = null; @@ -1205,7 +1234,7 @@ export default defineComponent({ }); // 监听编辑模式下delivery_type的变化 - watch(() => editFormState.value.delivery_type, (newType) => { + watch(() => editFormState.value.delivery_time_type, (newType) => { if (newType !== 'PICKUP') { editPickupTimeFrom.value = null; editPickupTimeTo.value = null; @@ -1221,37 +1250,45 @@ export default defineComponent({ }; const rules = { - merchant_id: [{ required: true, message: '请选择所属商家' }], + merchant_id: [{ required: true, message: '请选择商户' }], operation_type: [{ required: true, message: '请选择营业类型' }], name: [{ required: true, message: '请输入商品名称' }], image_url: [{ required: true, message: '请上传商品图片' }], product_price: [{ required: true, message: '请输入商品原价' }], sale_price: [{ required: true, message: '请输入销售价格' }], settlement_amount: [{ required: true, message: '请输入结算价格' }], - gift_points_rate: [ - { required: true, message: '请输入赠送积分比例' }, - { type: 'number', message: '请输入有效的数字' }, - { type: 'number', min: 0, max: 100, message: '比例必须在0-100之间' } - ], + gift_points_rate: [{ required: true, message: '请输入赠送积分比例' }], qty: [{ required: true, message: '请输入库存数量' }], - delivery_type: [{ required: true, message: '请选择配送方式' }], + delivery_time_type: [{ required: true, message: '请选择配送时间类型' }], + // 及时达模式下不需要验证配送日期，定时达模式下验证自提相关字段 pickup_place: [{ required: true, message: '请输入自提点地址', trigger: 'change', validator: (rule, value) => { - if (formState.value.delivery_type === 'PICKUP' && (!value || value.trim() === '')) { + if (formState.value.delivery_time_type === 'SCHEDULED' && (!value || value.trim() === '')) { return Promise.reject('请输入自提点地址'); } return Promise.resolve(); } }], + pickup_date: [{ + required: true, + message: '请选择自提日期', + trigger: 'change', + validator: (rule, value) => { + if (formState.value.delivery_time_type === 'SCHEDULED' && !value) { + return Promise.reject('请选择自提日期'); + } + return Promise.resolve(); + } + }], pickup_time_from: [{ required: true, message: '请选择自提开始时间', trigger: 'change', validator: (rule, value) => { - if (formState.value.delivery_type === 'PICKUP' && (!value || value.trim() === '')) { + if (formState.value.delivery_time_type === 'SCHEDULED' && (!value || value.trim() === '')) { return Promise.reject('请选择自提开始时间'); } return Promise.resolve(); @@ -1262,59 +1299,73 @@ export default defineComponent({ message: '请选择自提结束时间', trigger: 'change', validator: (rule, value) => { - if (formState.value.delivery_type === 'PICKUP' && (!value || value.trim() === '')) { + if (formState.value.delivery_time_type === 'SCHEDULED' && (!value || value.trim() === '')) { return Promise.reject('请选择自提结束时间'); } return Promise.resolve(); } }], - delivery_time_type: [{ required: true, message: '请选择配送时间类型' }], - delivery_date: [{ - required: true, - message: '请选择送货日期', - trigger: 'change', - validator: (rule, value) => { - if (formState.value.delivery_time_type === 'SCHEDULED' && !value) { - return Promise.reject('请选择送货日期'); - } - return Promise.resolve(); - } - }] + product_detail: [{ max: 2000, message: '商品详情不能超过2000个字符' }], } // 提交表单 - const handleSubmit = () => { - formRef.value.validate().then(async () => { - try { - confirmLoading.value = true - // 处理日期格式 - 只取日期部分 - const formData = { ...formState.value }; - if (formData.delivery_date) { - formData.delivery_date = dayjs(formData.delivery_date).format('YYYY-MM-DD'); + const handleSubmit = async () => { + try { + await formRef.value.validate() + + // 设置加载状态 + confirmLoading.value = true + + const formData = { ...formState.value } + + // 根据配送时间类型确定配送类型和日期 + if (formData.delivery_time_type === 'IMMEDIATE') { + // 及时达只能配送到家，自动设置为当天配送 + formData.delivery_type = 'DELIVERY' + formData.delivery_date = dayjs().format('YYYY-MM-DD') + formData.pickup_place = '' + formData.pickup_time_from = '' + formData.pickup_time_to = '' + formData.pickup_date = null + } else if (formData.delivery_time_type === 'SCHEDULED') { + // 定时达只能自提 + formData.delivery_type = 'PICKUP' + formData.delivery_date = null + + // 格式化自提日期 + if (formData.pickup_date) { + formData.pickup_date = dayjs(formData.pickup_date).format('YYYY-MM-DD') } - // 确保product_detail存在并转换为Markdown格式 - if (formData.product_detail) { - formData.product_detail = htmlToMarkdown(formData.product_detail); - } else { - formData.product_detail = ''; + // 格式化自提时间 + if (pickupTimeFrom.value) { + formData.pickup_time_from = dayjs(pickupTimeFrom.value).format('HH:mm') } - - const res = await request.post('/api/merchant/product', formData) - if (res.code === 200) { - message.success('添加成功') - addModalVisible.value = false - fetchData() - } else { - throw new Error(res.message || '添加失败') + if (pickupTimeTo.value) { + formData.pickup_time_to = dayjs(pickupTimeTo.value).format('HH:mm') } - } catch (error) { - console.error('添加商品失败:', error) - message.error(error.message || '添加失败') - } finally { - confirmLoading.value = false } - }) + + // 将HTML转换为Markdown + if (editorRef.value) { + formData.product_detail = turndownService.turndown(editorRef.value.getHTML()) + } + + const res = await request.post('/api/merchant/product', formData) + + if (res.code === 200) { + message.success('添加成功') + handleCancel() + await fetchData() + } else { + throw new Error(res.message || '添加失败') + } + } catch (error) { + console.error('提交表单失败:', error) + message.error(error.message || '添加失败，请检查表单') + } finally { + confirmLoading.value = false + } } // 取消添加 @@ -1337,8 +1388,9 @@ export default defineComponent({ pickup_place: '', pickup_time_from: '', pickup_time_to: '', + pickup_date: null, delivery_time_type: 'IMMEDIATE', - delivery_date: null, + delivery_date: dayjs().format('YYYY-MM-DD'), product_detail: '

商品详情

这里是商品的详细描述，支持富文本格式。

', purchase_note: '' } @@ -1461,38 +1513,63 @@ export default defineComponent({ } // 提交修改 - const handleEditSubmit = () => { - editFormRef.value.validate().then(async () => { - try { - editLoading.value = true - // 处理日期格式 - 只取日期部分 - const formData = { ...editFormState.value }; - if (formData.delivery_date) { - formData.delivery_date = dayjs(formData.delivery_date).format('YYYY-MM-DD'); + const handleEditSubmit = async () => { + try { + await editFormRef.value.validate() + + // 设置加载状态 + editLoading.value = true + + const formData = { ...editFormState.value } + + // 根据配送时间类型确定配送类型和日期 + if (formData.delivery_time_type === 'IMMEDIATE') { + // 及时达只能配送到家，自动设置为当天配送 + formData.delivery_type = 'DELIVERY' + formData.delivery_date = dayjs().format('YYYY-MM-DD') + formData.pickup_place = '' + formData.pickup_time_from = '' + formData.pickup_time_to = '' + formData.pickup_date = null + } else if (formData.delivery_time_type === 'SCHEDULED') { + // 定时达只能自提 + formData.delivery_type = 'PICKUP' + formData.delivery_date = null + + // 格式化自提日期 + if (formData.pickup_date) { + formData.pickup_date = dayjs(formData.pickup_date).format('YYYY-MM-DD') } - // 确保product_detail存在并转换为Markdown格式 - if (formData.product_detail) { - formData.product_detail = htmlToMarkdown(formData.product_detail); - } else { - formData.product_detail = ''; + // 格式化自提时间 + if (editPickupTimeFrom.value) { + formData.pickup_time_from = dayjs(editPickupTimeFrom.value).format('HH:mm') } - - const res = await request.put(`/api/merchant/product/${currentEditId.value}`, formData) - if (res.code === 200) { - message.success('修改成功') - editModalVisible.value = false - fetchData() - } else { - throw new Error(res.message || '修改失败') + if (editPickupTimeTo.value) { + formData.pickup_time_to = dayjs(editPickupTimeTo.value).format('HH:mm') } - } catch (error) { - console.error('修改商品失败:', error) - message.error(error.message || '修改失败') - } finally { - editLoading.value = false } - }) + + // 将HTML转换为Markdown + if (editEditorRef.value) { + formData.product_detail = turndownService.turndown(editEditorRef.value.getHTML()) + } + + const res = await request.put(`/api/merchant/product/${currentEditId.value}`, formData) + + if (res.code === 200) { + message.success('修改成功') + handleEditCancel() + await fetchData() + } else { + throw new Error(res.message || '修改失败') + } + } catch (error) { + console.error('提交编辑表单失败:', error) + message.error(error.message || '修改失败，请检查表单') + } finally { + editLoading.value = false + } } // 取消修改 @@ -1514,8 +1591,9 @@ export default defineComponent({ pickup_place: '', pickup_time_from: '', pickup_time_to: '', + pickup_date: null, delivery_time_type: 'IMMEDIATE', - delivery_date: null, + delivery_date: dayjs().format('YYYY-MM-DD'), product_detail: '

商品详情

这里是商品的详细描述，支持富文本格式。

', purchase_note: '' } @@ -1529,6 +1607,46 @@ export default defineComponent({ editModalVisible.value = false } + // 处理配送时间类型变更 + const handleDeliveryTimeTypeChange = (e) => { + if (e.target.value === 'IMMEDIATE') { + // 及时达 - 只支持配送到家 + formState.value.delivery_type = 'DELIVERY' + formState.value.pickup_place = '' + formState.value.pickup_time_from = '' + formState.value.pickup_time_to = '' + formState.value.pickup_date = null + pickupTimeFrom.value = null + pickupTimeTo.value = null + // 及时达默认设置为当天，但不显示日期选择 + formState.value.delivery_date = dayjs().format('YYYY-MM-DD') + } else if (e.target.value === 'SCHEDULED') { + // 定时达 - 只支持自提 + formState.value.delivery_type = 'PICKUP' + formState.value.delivery_date = null + } + } + + // 处理编辑时配送时间类型变更 + const handleEditDeliveryTimeTypeChange = (e) => { + if (e.target.value === 'IMMEDIATE') { + // 及时达 - 只支持配送到家 + editFormState.value.delivery_type = 'DELIVERY' + editFormState.value.pickup_place = '' + editFormState.value.pickup_time_from = '' + editFormState.value.pickup_time_to = '' + editFormState.value.pickup_date = null + editPickupTimeFrom.value = null + editPickupTimeTo.value = null + // 及时达默认设置为当天，但不显示日期选择 + editFormState.value.delivery_date = dayjs().format('YYYY-MM-DD') + } else if (e.target.value === 'SCHEDULED') { + // 定时达 - 只支持自提 + editFormState.value.delivery_type = 'PICKUP' + editFormState.value.delivery_date = null + } + } + onMounted(() => { fetchMerchantOptions() fetchData() // 直接加载所有商品 @@ -1759,6 +1877,24 @@ export default defineComponent({ border-radius: 12px; } +.delivery-type-tag { + display: inline-block; + padding: 3px 8px; + border-radius: 12px; + font-size: 12px; + font-weight: 500; +} + +.delivery-type-tag.immediate { + background-color: #1890ff; + color: #fff; +} + +.delivery-type-tag.scheduled { + background-color: #52c41a; + color: #fff; +} + .two-column-form { display: flex; flex-wrap: wrap;