修改商品页面

This commit is contained in:
aaron 2025-03-25 10:59:12 +08:00
parent 373325859c
commit 9ab24be577

View File

@ -255,15 +255,28 @@
<div class="form-item-help">0 次表示不限购</div>
</a-form-item>
<a-form-item label="配送方式" name="delivery_type" required>
<a-radio-group v-model:value="formState.delivery_type">
<a-radio value="DELIVERY">配送到家</a-radio>
<a-radio value="PICKUP">自提</a-radio>
<!-- 配送时间类型 -->
<a-form-item label="配送时间类型" name="delivery_time_type" required>
<a-radio-group
v-model:value="formState.delivery_time_type"
@change="handleDeliveryTimeTypeChange"
>
<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
v-if="formState.delivery_type === 'PICKUP'"
label="自提点"
name="pickup_place"
required
@ -275,7 +288,21 @@
</a-form-item>
<a-form-item
v-if="formState.delivery_type === 'PICKUP'"
label="自提日期"
name="pickup_date"
required
>
<a-date-picker
v-model:value="formState.pickup_date"
:disabled-date="disabledDate"
format="YYYY-MM-DD"
valueFormat="YYYY-MM-DD"
style="width: 100%"
placeholder="请选择自提日期"
/>
</a-form-item>
<a-form-item
label="自提时间"
required
>
@ -310,29 +337,7 @@
</div>
<div class="form-item-help">请选择自提的时间范围</div>
</a-form-item>
<a-form-item label="配送时间类型" name="delivery_time_type" required>
<a-radio-group v-model:value="formState.delivery_time_type">
<a-radio value="IMMEDIATE">及时送</a-radio>
<a-radio value="SCHEDULED">定时送</a-radio>
</a-radio-group>
</a-form-item>
<a-form-item
v-if="formState.delivery_time_type === 'SCHEDULED'"
label="送货时间"
name="delivery_date"
required
>
<a-date-picker
v-model:value="formState.delivery_date"
:disabled-date="disabledDate"
format="YYYY-MM-DD"
valueFormat="YYYY-MM-DD"
style="width: 100%"
placeholder="请选择送货日期"
/>
</a-form-item>
</template>
</div>
</div>
</a-tab-pane>
@ -517,15 +522,28 @@
<div class="form-item-help">0 次表示不限购</div>
</a-form-item>
<a-form-item label="配送方式" name="delivery_type" required>
<a-radio-group v-model:value="editFormState.delivery_type">
<a-radio value="DELIVERY">配送到家</a-radio>
<a-radio value="PICKUP">自提</a-radio>
<!-- 配送时间类型 -->
<a-form-item label="配送时间类型" name="delivery_time_type" required>
<a-radio-group
v-model:value="editFormState.delivery_time_type"
@change="handleEditDeliveryTimeTypeChange"
>
<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
v-if="editFormState.delivery_type === 'PICKUP'"
label="自提点"
name="pickup_place"
required
@ -537,7 +555,21 @@
</a-form-item>
<a-form-item
v-if="editFormState.delivery_type === 'PICKUP'"
label="自提日期"
name="pickup_date"
required
>
<a-date-picker
v-model:value="editFormState.pickup_date"
:disabled-date="disabledDate"
format="YYYY-MM-DD"
valueFormat="YYYY-MM-DD"
style="width: 100%"
placeholder="请选择自提日期"
/>
</a-form-item>
<a-form-item
label="自提时间"
required
>
@ -572,29 +604,7 @@
</div>
<div class="form-item-help">请选择自提的时间范围</div>
</a-form-item>
<a-form-item label="配送时间类型" name="delivery_time_type" required>
<a-radio-group v-model:value="editFormState.delivery_time_type">
<a-radio value="IMMEDIATE">及时送</a-radio>
<a-radio value="SCHEDULED">定时送</a-radio>
</a-radio-group>
</a-form-item>
<a-form-item
v-if="editFormState.delivery_time_type === 'SCHEDULED'"
label="送货时间"
name="delivery_date"
required
>
<a-date-picker
v-model:value="editFormState.delivery_date"
:disabled-date="disabledDate"
format="YYYY-MM-DD"
valueFormat="YYYY-MM-DD"
style="width: 100%"
placeholder="请选择送货日期"
/>
</a-form-item>
</template>
</div>
</div>
</a-tab-pane>
@ -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: '<h1>商品详情</h1><p>这里是商品的详细描述,支持<strong>富文本</strong>格式。</p><ul><li>特点一</li><li>特点二</li><li>特点三</li></ul>',
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: '<h1>商品详情</h1><p>这里是商品的详细描述,支持<strong>富文本</strong>格式。</p><ul><li>特点一</li><li>特点二</li><li>特点三</li></ul>',
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 () => {
const handleSubmit = async () => {
try {
await formRef.value.validate()
//
confirmLoading.value = true
// -
const formData = { ...formState.value };
if (formData.delivery_date) {
formData.delivery_date = dayjs(formData.delivery_date).format('YYYY-MM-DD');
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_detailMarkdown
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')
}
if (pickupTimeTo.value) {
formData.pickup_time_to = dayjs(pickupTimeTo.value).format('HH:mm')
}
}
// HTMLMarkdown
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('添加成功')
addModalVisible.value = false
fetchData()
handleCancel()
await fetchData()
} else {
throw new Error(res.message || '添加失败')
}
} catch (error) {
console.error('添加商品失败:', error)
message.error(error.message || '添加失败')
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: '<h1>商品详情</h1><p>这里是商品的详细描述,支持<strong>富文本</strong>格式。</p><ul><li>特点一</li><li>特点二</li><li>特点三</li></ul>',
purchase_note: ''
}
@ -1461,38 +1513,63 @@ export default defineComponent({
}
//
const handleEditSubmit = () => {
editFormRef.value.validate().then(async () => {
const handleEditSubmit = async () => {
try {
await editFormRef.value.validate()
//
editLoading.value = true
// -
const formData = { ...editFormState.value };
if (formData.delivery_date) {
formData.delivery_date = dayjs(formData.delivery_date).format('YYYY-MM-DD');
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_detailMarkdown
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')
}
if (editPickupTimeTo.value) {
formData.pickup_time_to = dayjs(editPickupTimeTo.value).format('HH:mm')
}
}
// HTMLMarkdown
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('修改成功')
editModalVisible.value = false
fetchData()
handleEditCancel()
await fetchData()
} else {
throw new Error(res.message || '修改失败')
}
} catch (error) {
console.error('修改商品失败:', error)
message.error(error.message || '修改失败')
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: '<h1>商品详情</h1><p>这里是商品的详细描述,支持<strong>富文本</strong>格式。</p><ul><li>特点一</li><li>特点二</li><li>特点三</li></ul>',
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;