完成修改 商品页面
This commit is contained in:
aaron
parent
a3a6fb1d05
commit
cc8b00446c
@ -174,6 +174,103 @@
|
|||||||
</a-form-item>
|
</a-form-item>
|
||||||
</a-form>
|
</a-form>
|
||||||
</a-modal>
|
</a-modal>
|
||||||
|
|
||||||
|
<!-- 修改商品模态框 -->
|
||||||
|
<a-modal
|
||||||
|
v-model:visible="editModalVisible"
|
||||||
|
title="修改商品"
|
||||||
|
:confirmLoading="editLoading"
|
||||||
|
width="600px"
|
||||||
|
@cancel="handleEditCancel"
|
||||||
|
>
|
||||||
|
<template #footer>
|
||||||
|
<a-space>
|
||||||
|
<a-button @click="handleEditCancel">取消</a-button>
|
||||||
|
<a-button type="primary" :loading="editLoading" @click="handleEditSubmit">
|
||||||
|
保存
|
||||||
|
</a-button>
|
||||||
|
</a-space>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<a-form
|
||||||
|
ref="editFormRef"
|
||||||
|
:model="editFormState"
|
||||||
|
:rules="rules"
|
||||||
|
:label-col="{ span: 6 }"
|
||||||
|
:wrapper-col="{ span: 16 }"
|
||||||
|
>
|
||||||
|
<a-form-item label="商品名称" name="name" required>
|
||||||
|
<a-input v-model:value="editFormState.name" placeholder="请输入商品名称" />
|
||||||
|
</a-form-item>
|
||||||
|
|
||||||
|
<a-form-item label="商品图片" name="image_url" required>
|
||||||
|
<div class="upload-wrapper">
|
||||||
|
<div v-if="editFormState.image_url" class="image-preview">
|
||||||
|
<img :src="editFormState.image_url" alt="商品图片" />
|
||||||
|
<div class="image-actions">
|
||||||
|
<a-button type="link" danger @click="handleEditRemoveImage">删除</a-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<a-upload
|
||||||
|
v-else
|
||||||
|
name="files"
|
||||||
|
:customRequest="handleEditUpload"
|
||||||
|
:show-upload-list="false"
|
||||||
|
accept="image/*"
|
||||||
|
>
|
||||||
|
<a-button>
|
||||||
|
<upload-outlined />
|
||||||
|
上传图片
|
||||||
|
</a-button>
|
||||||
|
</a-upload>
|
||||||
|
</div>
|
||||||
|
</a-form-item>
|
||||||
|
|
||||||
|
<a-form-item label="商品原价" name="product_price" required>
|
||||||
|
<a-input-number
|
||||||
|
v-model:value="editFormState.product_price"
|
||||||
|
:min="0"
|
||||||
|
:precision="2"
|
||||||
|
style="width: 100%"
|
||||||
|
placeholder="请输入商品原价"
|
||||||
|
/>
|
||||||
|
</a-form-item>
|
||||||
|
|
||||||
|
<a-form-item label="销售价格" name="sale_price" required>
|
||||||
|
<a-input-number
|
||||||
|
v-model:value="editFormState.sale_price"
|
||||||
|
:min="0"
|
||||||
|
:precision="2"
|
||||||
|
style="width: 100%"
|
||||||
|
placeholder="请输入销售价格"
|
||||||
|
/>
|
||||||
|
</a-form-item>
|
||||||
|
|
||||||
|
<a-form-item label="结算价格" name="settlement_amount" required>
|
||||||
|
<a-input-number
|
||||||
|
v-model:value="editFormState.settlement_amount"
|
||||||
|
:min="0"
|
||||||
|
:precision="2"
|
||||||
|
style="width: 100%"
|
||||||
|
placeholder="请输入结算价格"
|
||||||
|
/>
|
||||||
|
</a-form-item>
|
||||||
|
|
||||||
|
<a-form-item label="标签" name="tags">
|
||||||
|
<a-input v-model:value="editFormState.tags" placeholder="多个标签用逗号分隔" />
|
||||||
|
</a-form-item>
|
||||||
|
|
||||||
|
<a-form-item label="最高抵扣消费金" name="max_deduct_points" required>
|
||||||
|
<a-input-number
|
||||||
|
v-model:value="editFormState.max_deduct_points"
|
||||||
|
:min="0"
|
||||||
|
:precision="0"
|
||||||
|
style="width: 100%"
|
||||||
|
placeholder="请输入最高抵扣消费金"
|
||||||
|
/>
|
||||||
|
</a-form-item>
|
||||||
|
</a-form>
|
||||||
|
</a-modal>
|
||||||
</div>
|
</div>
|
||||||
</page-container>
|
</page-container>
|
||||||
</template>
|
</template>
|
||||||
@ -327,10 +424,103 @@ export default defineComponent({
|
|||||||
fetchData()
|
fetchData()
|
||||||
}
|
}
|
||||||
|
|
||||||
// 修改商品
|
// 修改商品相关
|
||||||
|
const editModalVisible = ref(false)
|
||||||
|
const editLoading = ref(false)
|
||||||
|
const editFormRef = ref(null)
|
||||||
|
const currentEditId = ref(null)
|
||||||
|
|
||||||
|
const editFormState = ref({
|
||||||
|
name: '',
|
||||||
|
image_url: '',
|
||||||
|
product_price: null,
|
||||||
|
sale_price: null,
|
||||||
|
settlement_amount: null,
|
||||||
|
tags: '',
|
||||||
|
max_deduct_points: null
|
||||||
|
})
|
||||||
|
|
||||||
|
// 显示修改模态框
|
||||||
const handleEdit = (record) => {
|
const handleEdit = (record) => {
|
||||||
// TODO: 实现商品修改功能
|
currentEditId.value = record.id
|
||||||
console.log('修改商品:', record)
|
editFormState.value = {
|
||||||
|
name: record.name,
|
||||||
|
image_url: record.image_url,
|
||||||
|
product_price: record.product_price,
|
||||||
|
sale_price: record.sale_price,
|
||||||
|
settlement_amount: record.settlement_amount,
|
||||||
|
tags: record.tags,
|
||||||
|
max_deduct_points: record.max_deduct_points
|
||||||
|
}
|
||||||
|
editModalVisible.value = true
|
||||||
|
}
|
||||||
|
|
||||||
|
// 处理修改图片上传
|
||||||
|
const handleEditUpload = async ({ file, onSuccess, onError }) => {
|
||||||
|
const formData = new FormData()
|
||||||
|
formData.append('files', file)
|
||||||
|
|
||||||
|
try {
|
||||||
|
const res = await request.post('/api/upload/images', formData, {
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'multipart/form-data'
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
if (res.code === 200 && res.data && res.data.urls && res.data.urls.length > 0) {
|
||||||
|
editFormState.value.image_url = res.data.urls[0]
|
||||||
|
onSuccess()
|
||||||
|
message.success('上传成功')
|
||||||
|
} else {
|
||||||
|
throw new Error('上传失败')
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('上传图片失败:', error)
|
||||||
|
message.error('上传失败')
|
||||||
|
onError()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 删除修改图片
|
||||||
|
const handleEditRemoveImage = () => {
|
||||||
|
editFormState.value.image_url = ''
|
||||||
|
}
|
||||||
|
|
||||||
|
// 提交修改
|
||||||
|
const handleEditSubmit = () => {
|
||||||
|
editFormRef.value.validate().then(async () => {
|
||||||
|
try {
|
||||||
|
editLoading.value = true
|
||||||
|
const res = await request.put(`/api/merchant/product/${currentEditId.value}`, editFormState.value)
|
||||||
|
if (res.code === 200) {
|
||||||
|
message.success('修改成功')
|
||||||
|
editModalVisible.value = false
|
||||||
|
fetchData()
|
||||||
|
} else {
|
||||||
|
throw new Error(res.message || '修改失败')
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('修改商品失败:', error)
|
||||||
|
message.error(error.message || '修改失败')
|
||||||
|
} finally {
|
||||||
|
editLoading.value = false
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 取消修改
|
||||||
|
const handleEditCancel = () => {
|
||||||
|
editFormRef.value?.resetFields()
|
||||||
|
editFormState.value = {
|
||||||
|
name: '',
|
||||||
|
image_url: '',
|
||||||
|
product_price: null,
|
||||||
|
sale_price: null,
|
||||||
|
settlement_amount: null,
|
||||||
|
tags: '',
|
||||||
|
max_deduct_points: null
|
||||||
|
}
|
||||||
|
editModalVisible.value = false
|
||||||
}
|
}
|
||||||
|
|
||||||
// 添加商品相关
|
// 添加商品相关
|
||||||
@ -456,7 +646,15 @@ export default defineComponent({
|
|||||||
handleUpload,
|
handleUpload,
|
||||||
handleRemoveImage,
|
handleRemoveImage,
|
||||||
handleAdd,
|
handleAdd,
|
||||||
handleCancel
|
handleCancel,
|
||||||
|
editModalVisible,
|
||||||
|
editLoading,
|
||||||
|
editFormRef,
|
||||||
|
editFormState,
|
||||||
|
handleEditUpload,
|
||||||
|
handleEditRemoveImage,
|
||||||
|
handleEditSubmit,
|
||||||
|
handleEditCancel
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user