Skip to content

Commit ed739ae

Browse files
author
puhui999
committed
订单售后列表：完善售后详情及相关操作
1 parent 8a51c9c commit ed739ae

File tree

5 files changed

+134
-34
lines changed

5 files changed

+134
-34
lines changed

‎src/api/mall/trade/afterSale/index.ts

Lines changed: 21 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import request from '@/config/axios'
22

3-
// 定义 TradeAfterSaleDTO 接口，映射 TradeAfterSaleDO
43
export interface TradeAfterSaleVO {
54
id?: number | null // 售后编号，主键自增
65
no?: string // 售后单号
@@ -44,8 +43,27 @@ export interface ProductPropertiesVO {
4443
export const getAfterSalePage = async (params) => {
4544
return await request.get({ url: `/trade/after-sale/page`, params })
4645
}
47-
4846
// 获得交易售后详情
49-
export const getAfterSale = async (id) => {
47+
export const getAfterSale = async (id: any) => {
5048
return await request.get({ url: `/trade/after-sale/get-detail?id=${id}` })
5149
}
50+
// 同意售后
51+
export const agree = async (id: any) => {
52+
return await request.put({ url: `/trade/after-sale/agree?id=${id}` })
53+
}
54+
// 拒绝售后
55+
export const disagree = async (data: any) => {
56+
return await request.put({ url: `/trade/after-sale/disagree`, data })
57+
}
58+
// 确认收货
59+
export const receive = async (id: any) => {
60+
return await request.put({ url: `/trade/after-sale/receive?id=${id}` })
61+
}
62+
// 拒绝收货
63+
export const refuse = async (id: any) => {
64+
return await request.put({ url: `/trade/after-sale/refuse?id=${id}` })
65+
}
66+
// 确认退款
67+
export const refund = async (id: any) => {
68+
return await request.put({ url: `/trade/after-sale/refund?id=${id}` })
69+
}

‎src/views/mall/trade/afterSale/components/UpdateAuditReasonForm.vue

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
<template>
2+
<Dialog v-model="dialogVisible" title="拒绝售后" width="45%">
3+
<el-form ref="formRef" v-loading="formLoading" :model="formData" label-width="80px">
4+
<el-form-item label="审批备注">
5+
<el-input
6+
v-model="formData.auditReason"
7+
:rows="3"
8+
placeholder="请输入审批备注"
9+
type="textarea"
10+
/>
11+
</el-form-item>
12+
</el-form>
13+
<template #footer>
14+
<el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
15+
<el-button @click="dialogVisible = false">取 消</el-button>
16+
</template>
17+
</Dialog>
18+
</template>
19+
<script lang="ts" setup>
20+
import * as AfterSaleApi from '@/api/mall/trade/afterSale/index'
21+
22+
defineOptions({ name: 'UpdateAuditReasonForm' })
23+
24+
const { t } = useI18n() // 国际化
25+
const message = useMessage() // 消息弹窗
26+
27+
const dialogVisible = ref(false) // 弹窗的是否展示
28+
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
29+
const formData = ref({
30+
id: 0, // 售后订单编号
31+
auditReason: '' // 审批备注
32+
})
33+
const formRef = ref() // 表单 Ref
34+
35+
/** 打开弹窗 */
36+
const open = async (row: AfterSaleApi.TradeAfterSaleVO) => {
37+
resetForm()
38+
// 设置数据
39+
formData.value.id = row.id
40+
formData.value.auditReason = row.auditReason
41+
dialogVisible.value = true
42+
}
43+
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
44+
45+
/** 提交表单 */
46+
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
47+
const submitForm = async () => {
48+
// 提交请求
49+
formLoading.value = true
50+
try {
51+
const data = unref(formData)
52+
await AfterSaleApi.disagree(data)
53+
message.success(t('common.updateSuccess'))
54+
dialogVisible.value = false
55+
// 发送操作成功的事件
56+
emit('success', true)
57+
} finally {
58+
formLoading.value = false
59+
}
60+
}
61+
62+
/** 重置表单 */
63+
const resetForm = () => {
64+
formData.value = {
65+
id: 0, // 售后订单编号
66+
auditReason: '' // 审批备注
67+
}
68+
formRef.value?.resetFields()
69+
}
70+
</script>

‎src/views/mall/trade/afterSale/detail/index.vue

Lines changed: 42 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -2,71 +2,68 @@
22
<ContentWrap>
33
<!-- 订单信息 -->
44
<el-descriptions title="退款订单信息">
5-
<el-descriptions-item label="订单号: ">{{ orderInfo.orderNo }}</el-descriptions-item>
5+
<el-descriptions-item label="订单号: ">{{ formData.orderNo }}</el-descriptions-item>
66
<el-descriptions-item label="配送方式: ">
7-
<dict-tag :type="DICT_TYPE.TRADE_DELIVERY_TYPE" :value="orderInfo.order.deliveryType" />
7+
<dict-tag :type="DICT_TYPE.TRADE_DELIVERY_TYPE" :value="formData.order.deliveryType" />
88
</el-descriptions-item>
99
<el-descriptions-item label="订单类型: ">
10-
<dict-tag :type="DICT_TYPE.TRADE_ORDER_TYPE" :value="orderInfo.order.type" />
10+
<dict-tag :type="DICT_TYPE.TRADE_ORDER_TYPE" :value="formData.order.type" />
1111
</el-descriptions-item>
1212
<el-descriptions-item label="收货人: ">
13-
{{ orderInfo.order.receiverName }}
13+
{{ formData.order.receiverName }}
1414
</el-descriptions-item>
1515
<el-descriptions-item label="买家留言: ">
16-
{{ orderInfo.order.userRemark }}
16+
{{ formData.order.userRemark }}
1717
</el-descriptions-item>
1818
<el-descriptions-item label="订单来源: ">
19-
<dict-tag :type="DICT_TYPE.TERMINAL" :value="orderInfo.order.terminal" />
19+
<dict-tag :type="DICT_TYPE.TERMINAL" :value="formData.order.terminal" />
2020
</el-descriptions-item>
2121
<el-descriptions-item label="联系电话: ">
22-
{{ orderInfo.order.receiverMobile }}
22+
{{ formData.order.receiverMobile }}
2323
</el-descriptions-item>
24-
<el-descriptions-item label="商家备注: ">{{ orderInfo.order.remark }}</el-descriptions-item>
24+
<el-descriptions-item label="商家备注: ">{{ formData.order.remark }}</el-descriptions-item>
2525
<el-descriptions-item label="支付单号: ">
26-
{{ orderInfo.order.payOrderId }}
26+
{{ formData.order.payOrderId }}
2727
</el-descriptions-item>
2828
<el-descriptions-item label="付款方式: ">
29-
<dict-tag :type="DICT_TYPE.PAY_CHANNEL_CODE" :value="orderInfo.order.payChannelCode" />
29+
<dict-tag :type="DICT_TYPE.PAY_CHANNEL_CODE" :value="formData.order.payChannelCode" />
3030
</el-descriptions-item>
3131
<!-- TODO 芋艿：待实现：跳转会员 -->
32-
<!-- <el-descriptions-item label="买家: ">{{ orderInfo.user.nickname }}</el-descriptions-item> -->
32+
<!-- <el-descriptions-item label="买家: ">{{ formData.user.nickname }}</el-descriptions-item> -->
3333
</el-descriptions>
3434

3535
<!-- 售后信息 -->
3636
<el-descriptions title="售后信息">
37-
<el-descriptions-item label="退款编号: ">{{ orderInfo.no }}</el-descriptions-item>
37+
<el-descriptions-item label="退款编号: ">{{ formData.no }}</el-descriptions-item>
3838
<el-descriptions-item label="申请时间: ">
39-
{{ formatDate(orderInfo.auditTime) }}
39+
{{ formatDate(formData.auditTime) }}
4040
</el-descriptions-item>
4141
<!-- TODO 营销活动待实现 -->
4242
<el-descriptions-item label="售后类型: ">
43-
<dict-tag :type="DICT_TYPE.TRADE_AFTER_SALE_TYPE" :value="orderInfo.type" />
43+
<dict-tag :type="DICT_TYPE.TRADE_AFTER_SALE_TYPE" :value="formData.type" />
4444
</el-descriptions-item>
4545
<el-descriptions-item label="售后方式: ">
46-
<dict-tag :type="DICT_TYPE.TRADE_AFTER_SALE_WAY" :value="orderInfo.way" />
46+
<dict-tag :type="DICT_TYPE.TRADE_AFTER_SALE_WAY" :value="formData.way" />
4747
</el-descriptions-item>
48-
<el-descriptions-item label="退款金额: ">{{ orderInfo.refundPrice }}</el-descriptions-item>
49-
<el-descriptions-item label="退款原因: ">{{ orderInfo.applyReason }}</el-descriptions-item>
48+
<el-descriptions-item label="退款金额: ">{{ formData.refundPrice }}</el-descriptions-item>
49+
<el-descriptions-item label="退款原因: ">{{ formData.applyReason }}</el-descriptions-item>
5050
<el-descriptions-item label="补充描述: ">
51-
{{ orderInfo.applyDescription }}
51+
{{ formData.applyDescription }}
5252
</el-descriptions-item>
53-
<el-descriptions-item label="凭证图片: "> {{ orderInfo.applyPicUrls }}</el-descriptions-item>
53+
<el-descriptions-item label="凭证图片: "> {{ formData.applyPicUrls }}</el-descriptions-item>
5454
</el-descriptions>
5555

5656
<!-- 退款状态 -->
5757
<el-descriptions :column="1" title="退款状态">
5858
<el-descriptions-item label="退款状态: ">
59-
<dict-tag :type="DICT_TYPE.TRADE_AFTER_SALE_STATUS" :value="orderInfo.status" />
59+
<dict-tag :type="DICT_TYPE.TRADE_AFTER_SALE_STATUS" :value="formData.status" />
6060
</el-descriptions-item>
6161
<el-descriptions-item label-class-name="no-colon">
6262
<el-button type="primary" @click="openForm('agree')">同意售后</el-button>
6363
<el-button type="primary" @click="openForm('disagree')">拒绝售后</el-button>
6464
<el-button type="primary" @click="openForm('receive')">确认收货</el-button>
6565
<el-button type="primary" @click="openForm('refuse')">拒绝收货</el-button>
6666
<el-button type="primary" @click="openForm('refund')">确认退款</el-button>
67-
<el-button type="primary" @click="openForm('update-refunded')">
68-
更新售后订单为已退款
69-
</el-button>
7067
</el-descriptions-item>
7168
<el-descriptions-item>
7269
<template #label><span style="color: red">提醒: </span></template>
@@ -81,7 +78,7 @@
8178
<el-descriptions-item labelClassName="no-colon">
8279
<el-row :gutter="20">
8380
<el-col :span="15">
84-
<el-table :data="orderInfo.items" border>
81+
<el-table :data="formData.items" border>
8582
<el-table-column label="商品" prop="spuName" width="auto">
8683
<template #default="{ row }">
8784
{{ row.spuName }}
@@ -114,40 +111,56 @@
114111
<!-- 售后信息 -->
115112
<el-descriptions title="售后日志" />
116113
</ContentWrap>
114+
115+
<!-- 各种操作的弹窗 -->
116+
<UpdateAuditReasonForm ref="updateAuditReasonFormRef" @success="getDetail" />
117117
</template>
118118
<script lang="ts" setup>
119119
import * as AfterSaleApi from '@/api/mall/trade/afterSale/index'
120120
import { floatToFixed2 } from '@/utils'
121121
import { DICT_TYPE } from '@/utils/dict'
122122
import { formatDate } from '@/utils/formatTime'
123+
import UpdateAuditReasonForm from '@/views/mall/trade/afterSale/components/UpdateAuditReasonForm.vue'
123124
124125
defineOptions({ name: 'TradeOrderDetailForm' })
125126
127+
const message = useMessage() // 消息弹窗
126128
const { params } = useRoute() // 查询参数
127-
const orderInfo = ref({
129+
const formData = ref({
128130
order: {}
129131
})
132+
const updateAuditReasonFormRef = ref() // 拒绝售后表单 Ref
130133
/** 获得详情 */
131134
const getDetail = async () => {
132135
const id = params.orderId as unknown as number
133136
if (id) {
134-
const res = (await AfterSaleApi.getAfterSale(id)) as AfterSaleApi.TradeAfterSaleVO
135-
orderInfo.value = res
137+
formData.value = await AfterSaleApi.getAfterSale(id)
136138
}
137139
}
138140
const openForm = (type: string) => {
139141
switch (type) {
140142
case 'agree':
143+
message.confirm('是否同意售后？').then(() => {
144+
AfterSaleApi.agree(formData.value.id)
145+
})
141146
break
142147
case 'disagree':
148+
updateAuditReasonFormRef.value?.open(formData.value)
143149
break
144150
case 'receive':
151+
message.confirm('是否确认收货？').then(() => {
152+
AfterSaleApi.receive(formData.value.id)
153+
})
145154
break
146155
case 'refuse':
156+
message.confirm('是否拒绝收货？').then(() => {
157+
AfterSaleApi.refuse(formData.value.id)
158+
})
147159
break
148160
case 'refund':
149-
break
150-
case 'update-refunded':
161+
message.confirm('是否确认退款？').then(() => {
162+
AfterSaleApi.refund(formData.value.id)
163+
})
151164
break
152165
}
153166
}

‎src/views/mall/trade/afterSale/index.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -119,8 +119,8 @@
119119
<span>{{ floatToFixed2(scope.row.refundPrice) }}元</span>
120120
</template>
121121
</el-table-column>
122-
<el-table-column align="center" label="买家" prop="user.nickname" />
123122
<!-- TODO 芋艿：未来要加个会员链接 -->
123+
<el-table-column align="center" label="买家" prop="user.nickname" />
124124
<el-table-column align="center" label="申请时间" prop="createTime" width="180">
125125
<template #default="scope">
126126
<span>{{ formatDate(scope.row.createTime) }}</span>

‎src/views/mall/trade/order/components/OrderUpdateRemarkForm.vue

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,6 @@ const submitForm = async () => {
4949
formLoading.value = true
5050
try {
5151
const data = unref(formData)
52-
console.log(data)
5352
await TradeOrderApi.updateRemark(data)
5453
message.success(t('common.updateSuccess'))
5554
dialogVisible.value = false

0 commit comments

Comments
 (0)