增加上下架商品功能。
This commit is contained in:
aaron
parent
d3d72f843e
commit
d602175913
@ -3,7 +3,15 @@ import request from '@/utils/request'
|
||||
// 获取商家商品列表
|
||||
export function getMerchantProducts(merchantId) {
|
||||
return request({
|
||||
url: `/api/merchant/product/merchant/${merchantId}`,
|
||||
method: 'get'
|
||||
url: `/api/merchant/product/list`,
|
||||
method: 'get',
|
||||
params: {
|
||||
merchant_id: merchantId
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 修改商品状态
|
||||
export const updateProductStatus = (productId, data) => {
|
||||
return request.put(`/api/merchant/product/${productId}`, data)
|
||||
}
|
||||
@ -29,45 +29,63 @@
|
||||
</a-form>
|
||||
</div>
|
||||
|
||||
<a-table
|
||||
:columns="columns"
|
||||
:data-source="tableData"
|
||||
:pagination="pagination"
|
||||
:loading="loading"
|
||||
@change="handleTableChange"
|
||||
row-key="id"
|
||||
>
|
||||
<template #bodyCell="{ column, text, record }">
|
||||
<!-- 图片列 -->
|
||||
<template v-if="column.key === 'image_url'">
|
||||
<div class="product-image">
|
||||
<img :src="text" :alt="record.name" />
|
||||
</div>
|
||||
<div class="table-container">
|
||||
<a-table
|
||||
:columns="columns"
|
||||
:data-source="tableData"
|
||||
:pagination="pagination"
|
||||
:loading="loading"
|
||||
@change="handleTableChange"
|
||||
row-key="id"
|
||||
:scroll="{ x: 1500 }"
|
||||
>
|
||||
<template #bodyCell="{ column, text, record }">
|
||||
<!-- 图片列 -->
|
||||
<template v-if="column.key === 'image_url'">
|
||||
<div class="product-image">
|
||||
<img :src="text" :alt="record.name" />
|
||||
</div>
|
||||
</template>
|
||||
<!-- 价格列 -->
|
||||
<template v-if="['product_price', 'sale_price', 'settlement_amount'].includes(column.key)">
|
||||
¥{{ text }}
|
||||
</template>
|
||||
<!-- 标签列 -->
|
||||
<template v-if="column.key === 'tags'">
|
||||
<a-tag
|
||||
v-for="tag in text?.split(',')"
|
||||
:key="tag"
|
||||
color="blue"
|
||||
>
|
||||
{{ tag }}
|
||||
</a-tag>
|
||||
</template>
|
||||
<!-- 最高抵扣金额 -->
|
||||
<template v-if="column.key === 'max_deduct_points'">
|
||||
{{ text }} 消费金
|
||||
</template>
|
||||
<!-- 状态列 -->
|
||||
<template v-if="column.key === 'status'">
|
||||
<a-tag :color="getStatusColor(record.status)">
|
||||
{{ getStatusText(record.status) }}
|
||||
</a-tag>
|
||||
</template>
|
||||
<!-- 操作列 -->
|
||||
<template v-if="column.key === 'action'">
|
||||
<a-space>
|
||||
<a-button type="link" @click="handleEdit(record)">修改</a-button>
|
||||
<a-button
|
||||
type="link"
|
||||
:loading="record.statusLoading"
|
||||
@click="handleToggleStatus(record)"
|
||||
>
|
||||
{{ record.status === 'LISTING' ? '下架' : '上架' }}
|
||||
</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
</template>
|
||||
<!-- 价格列 -->
|
||||
<template v-if="['product_price', 'sale_price', 'settlement_amount'].includes(column.key)">
|
||||
¥{{ text }}
|
||||
</template>
|
||||
<!-- 标签列 -->
|
||||
<template v-if="column.key === 'tags'">
|
||||
<a-tag
|
||||
v-for="tag in text?.split(',')"
|
||||
:key="tag"
|
||||
color="blue"
|
||||
>
|
||||
{{ tag }}
|
||||
</a-tag>
|
||||
</template>
|
||||
<!-- 最高抵扣金额 -->
|
||||
<template v-if="column.key === 'max_deduct_points'">
|
||||
{{ text }} 消费金
|
||||
</template>
|
||||
<!-- 操作列 -->
|
||||
<template v-if="column.key === 'action'">
|
||||
<a-button type="link" @click="handleEdit(record)">修改</a-button>
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
</a-table>
|
||||
</div>
|
||||
|
||||
<!-- 添加商品模态框 -->
|
||||
<a-modal
|
||||
@ -280,7 +298,7 @@ import { defineComponent, ref, onMounted } from 'vue'
|
||||
import { message, Upload, InputNumber, Tag } from 'ant-design-vue'
|
||||
import { UploadOutlined } from '@ant-design/icons-vue'
|
||||
import PageContainer from '@/components/PageContainer.vue'
|
||||
import { getMerchantProducts } from '@/api/merchant'
|
||||
import { getMerchantProducts, updateProductStatus } from '@/api/merchant'
|
||||
import request from '@/utils/request'
|
||||
|
||||
export default defineComponent({
|
||||
@ -323,6 +341,13 @@ export default defineComponent({
|
||||
width: 100,
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '所属商家',
|
||||
dataIndex: 'merchant_name',
|
||||
key: 'merchant_name',
|
||||
width: 160,
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: '商品名称',
|
||||
dataIndex: 'name',
|
||||
@ -363,6 +388,13 @@ export default defineComponent({
|
||||
width: 120,
|
||||
align: 'right'
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
key: 'status',
|
||||
width: 100,
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
@ -391,21 +423,34 @@ export default defineComponent({
|
||||
|
||||
// 获取商品列表
|
||||
const fetchData = async () => {
|
||||
if (!filterForm.value.merchant_id) {
|
||||
tableData.value = []
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
loading.value = true
|
||||
const params = {
|
||||
skip: (pagination.value.current - 1) * pagination.value.pageSize,
|
||||
limit: pagination.value.pageSize
|
||||
}
|
||||
|
||||
// 如果选择了商家，添加商家ID参数
|
||||
if (filterForm.value.merchant_id) {
|
||||
params.merchant_id = filterForm.value.merchant_id
|
||||
}
|
||||
|
||||
const res = await getMerchantProducts(filterForm.value.merchant_id)
|
||||
if (res.code === 200) {
|
||||
tableData.value = res.data || []
|
||||
pagination.value.total = res.data.length
|
||||
tableData.value = (res.data.items || []).map(item => ({
|
||||
...item,
|
||||
statusLoading: false
|
||||
}))
|
||||
pagination.value.total = res.data.total
|
||||
} else {
|
||||
tableData.value = []
|
||||
pagination.value.total = 0
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取商品列表失败:', error)
|
||||
message.error('获取商品列表失败')
|
||||
tableData.value = []
|
||||
pagination.value.total = 0
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
@ -623,8 +668,55 @@ export default defineComponent({
|
||||
addModalVisible.value = false
|
||||
}
|
||||
|
||||
// 获取状态文本
|
||||
const getStatusText = (status) => {
|
||||
const statusMap = {
|
||||
'LISTING': '上架',
|
||||
'UNLISTING': '下架'
|
||||
}
|
||||
return statusMap[status] || status
|
||||
}
|
||||
|
||||
// 获取状态标签颜色
|
||||
const getStatusColor = (status) => {
|
||||
const colorMap = {
|
||||
'LISTING': 'green',
|
||||
'UNLISTING': 'red'
|
||||
}
|
||||
return colorMap[status] || 'default'
|
||||
}
|
||||
|
||||
// 处理状态切换
|
||||
const handleToggleStatus = async (record) => {
|
||||
const newStatus = record.status === 'LISTING' ? 'UNLISTING' : 'LISTING'
|
||||
const actionText = newStatus === 'LISTING' ? '上架' : '下架'
|
||||
|
||||
try {
|
||||
// 添加局部loading状态
|
||||
record.statusLoading = true
|
||||
|
||||
const res = await updateProductStatus(record.id, {
|
||||
status: newStatus
|
||||
})
|
||||
|
||||
if (res.code === 200) {
|
||||
message.success(`${actionText}成功`)
|
||||
// 更新本地数据状态
|
||||
record.status = newStatus
|
||||
} else {
|
||||
throw new Error(res.message || `${actionText}失败`)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(`${actionText}商品失败:`, error)
|
||||
message.error(error.message || `${actionText}失败`)
|
||||
} finally {
|
||||
record.statusLoading = false
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
fetchMerchantOptions()
|
||||
fetchData() // 直接加载所有商品
|
||||
})
|
||||
|
||||
return {
|
||||
@ -654,14 +746,16 @@ export default defineComponent({
|
||||
handleEditUpload,
|
||||
handleEditRemoveImage,
|
||||
handleEditSubmit,
|
||||
handleEditCancel
|
||||
handleEditCancel,
|
||||
getStatusText,
|
||||
getStatusColor,
|
||||
handleToggleStatus
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.table-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
@ -731,4 +825,56 @@ export default defineComponent({
|
||||
.image-actions .ant-btn {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
:deep(.ant-tag) {
|
||||
min-width: 60px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
:deep(.ant-space) {
|
||||
gap: 8px !important;
|
||||
}
|
||||
|
||||
:deep(.ant-table-cell) {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
:deep(.ant-table-cell-ellipsis) {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.product-list {
|
||||
background: #fff;
|
||||
padding: 24px;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
.table-container {
|
||||
overflow-x: auto;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
:deep(.ant-table-wrapper) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
:deep(.ant-table) {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
:deep(.ant-table-body) {
|
||||
overflow-x: auto !important;
|
||||
}
|
||||
|
||||
:deep(.ant-table-cell) {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
:deep(.ant-table-cell-ellipsis) {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user