Skip to content

Commit 8a51c9c

Browse files
author
puhui999
committed
订单售后列表：初始化售后详情
1 parent 4f81468 commit 8a51c9c

File tree

4 files changed

+245
-21
lines changed

4 files changed

+245
-21
lines changed

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

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -40,15 +40,12 @@ export interface ProductPropertiesVO {
4040
valueName?: string // 属性值的名称
4141
}
4242

43-
// 获得交易售后
44-
export function getAfterSale(id) {
45-
return request({
46-
url: '/trade/after-sale/get?id=' + id,
47-
method: 'get'
48-
})
49-
}
50-
5143
// 获得交易售后分页
5244
export const getAfterSalePage = async (params) => {
5345
return await request.get({ url: `/trade/after-sale/page`, params })
5446
}
47+
48+
// 获得交易售后详情
49+
export const getAfterSale = async (id) => {
50+
return await request.get({ url: `/trade/after-sale/get-detail?id=${id}` })
51+
}

‎src/router/modules/remaining.ts

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -401,10 +401,16 @@ const remainingRouter: AppRouteRecordRaw[] = [
401401
},
402402
children: [
403403
{
404-
path: 'detail/:orderId(\\d+)',
404+
path: 'orderDetail/:orderId(\\d+)',
405405
component: () => import('@/views/mall/trade/order/detail/index.vue'),
406406
name: 'TradeOrderDetail',
407407
meta: { title: '订单详情', icon: '', activeMenu: '/trade/trade/order' }
408+
},
409+
{
410+
path: 'afterSaleDetail/:orderId(\\d+)',
411+
component: () => import('@/views/mall/trade/afterSale/detail/index.vue'),
412+
name: 'TradeAfterSaleDetail',
413+
meta: { title: '退款详情', icon: '', activeMenu: '/trade/trade/after-sale' }
408414
}
409415
]
410416
},

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

Lines changed: 190 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,190 @@
1+
<template>
2+
<ContentWrap>
3+
<!-- 订单信息 -->
4+
<el-descriptions title="退款订单信息">
5+
<el-descriptions-item label="订单号: ">{{ orderInfo.orderNo }}</el-descriptions-item>
6+
<el-descriptions-item label="配送方式: ">
7+
<dict-tag :type="DICT_TYPE.TRADE_DELIVERY_TYPE" :value="orderInfo.order.deliveryType" />
8+
</el-descriptions-item>
9+
<el-descriptions-item label="订单类型: ">
10+
<dict-tag :type="DICT_TYPE.TRADE_ORDER_TYPE" :value="orderInfo.order.type" />
11+
</el-descriptions-item>
12+
<el-descriptions-item label="收货人: ">
13+
{{ orderInfo.order.receiverName }}
14+
</el-descriptions-item>
15+
<el-descriptions-item label="买家留言: ">
16+
{{ orderInfo.order.userRemark }}
17+
</el-descriptions-item>
18+
<el-descriptions-item label="订单来源: ">
19+
<dict-tag :type="DICT_TYPE.TERMINAL" :value="orderInfo.order.terminal" />
20+
</el-descriptions-item>
21+
<el-descriptions-item label="联系电话: ">
22+
{{ orderInfo.order.receiverMobile }}
23+
</el-descriptions-item>
24+
<el-descriptions-item label="商家备注: ">{{ orderInfo.order.remark }}</el-descriptions-item>
25+
<el-descriptions-item label="支付单号: ">
26+
{{ orderInfo.order.payOrderId }}
27+
</el-descriptions-item>
28+
<el-descriptions-item label="付款方式: ">
29+
<dict-tag :type="DICT_TYPE.PAY_CHANNEL_CODE" :value="orderInfo.order.payChannelCode" />
30+
</el-descriptions-item>
31+
<!-- TODO 芋艿：待实现：跳转会员 -->
32+
<!-- <el-descriptions-item label="买家: ">{{ orderInfo.user.nickname }}</el-descriptions-item> -->
33+
</el-descriptions>
34+
35+
<!-- 售后信息 -->
36+
<el-descriptions title="售后信息">
37+
<el-descriptions-item label="退款编号: ">{{ orderInfo.no }}</el-descriptions-item>
38+
<el-descriptions-item label="申请时间: ">
39+
{{ formatDate(orderInfo.auditTime) }}
40+
</el-descriptions-item>
41+
<!-- TODO 营销活动待实现 -->
42+
<el-descriptions-item label="售后类型: ">
43+
<dict-tag :type="DICT_TYPE.TRADE_AFTER_SALE_TYPE" :value="orderInfo.type" />
44+
</el-descriptions-item>
45+
<el-descriptions-item label="售后方式: ">
46+
<dict-tag :type="DICT_TYPE.TRADE_AFTER_SALE_WAY" :value="orderInfo.way" />
47+
</el-descriptions-item>
48+
<el-descriptions-item label="退款金额: ">{{ orderInfo.refundPrice }}</el-descriptions-item>
49+
<el-descriptions-item label="退款原因: ">{{ orderInfo.applyReason }}</el-descriptions-item>
50+
<el-descriptions-item label="补充描述: ">
51+
{{ orderInfo.applyDescription }}
52+
</el-descriptions-item>
53+
<el-descriptions-item label="凭证图片: "> {{ orderInfo.applyPicUrls }}</el-descriptions-item>
54+
</el-descriptions>
55+
56+
<!-- 退款状态 -->
57+
<el-descriptions :column="1" title="退款状态">
58+
<el-descriptions-item label="退款状态: ">
59+
<dict-tag :type="DICT_TYPE.TRADE_AFTER_SALE_STATUS" :value="orderInfo.status" />
60+
</el-descriptions-item>
61+
<el-descriptions-item label-class-name="no-colon">
62+
<el-button type="primary" @click="openForm('agree')">同意售后</el-button>
63+
<el-button type="primary" @click="openForm('disagree')">拒绝售后</el-button>
64+
<el-button type="primary" @click="openForm('receive')">确认收货</el-button>
65+
<el-button type="primary" @click="openForm('refuse')">拒绝收货</el-button>
66+
<el-button type="primary" @click="openForm('refund')">确认退款</el-button>
67+
<el-button type="primary" @click="openForm('update-refunded')">
68+
更新售后订单为已退款
69+
</el-button>
70+
</el-descriptions-item>
71+
<el-descriptions-item>
72+
<template #label><span style="color: red">提醒: </span></template>
73+
如果未发货，请点击同意退款给买家。<br />
74+
如果实际已发货，请主动与买家联系。<br />
75+
如果订单整体退款后，优惠券和余额会退还给买家.
76+
</el-descriptions-item>
77+
</el-descriptions>
78+
79+
<!-- 商品信息 -->
80+
<el-descriptions title="商品信息">
81+
<el-descriptions-item labelClassName="no-colon">
82+
<el-row :gutter="20">
83+
<el-col :span="15">
84+
<el-table :data="orderInfo.items" border>
85+
<el-table-column label="商品" prop="spuName" width="auto">
86+
<template #default="{ row }">
87+
{{ row.spuName }}
88+
<el-tag v-for="property in row.properties" :key="property.propertyId">
89+
{{ property.propertyName }}: {{ property.valueName }}
90+
</el-tag>
91+
</template>
92+
</el-table-column>
93+
<el-table-column label="商品原价" prop="price" width="150">
94+
<template #default="{ row }">{{ floatToFixed2(row.price) }}元</template>
95+
</el-table-column>
96+
<el-table-column label="数量" prop="count" width="100" />
97+
<el-table-column label="合计" prop="payPrice" width="150">
98+
<template #default="{ row }">{{ floatToFixed2(row.payPrice) }}元</template>
99+
</el-table-column>
100+
<el-table-column label="售后状态" prop="afterSaleStatus" width="120">
101+
<template #default="{ row }">
102+
<dict-tag
103+
:type="DICT_TYPE.TRADE_ORDER_ITEM_AFTER_SALE_STATUS"
104+
:value="row.afterSaleStatus"
105+
/>
106+
</template>
107+
</el-table-column>
108+
</el-table>
109+
</el-col>
110+
<el-col :span="10" />
111+
</el-row>
112+
</el-descriptions-item>
113+
</el-descriptions>
114+
<!-- 售后信息 -->
115+
<el-descriptions title="售后日志" />
116+
</ContentWrap>
117+
</template>
118+
<script lang="ts" setup>
119+
import * as AfterSaleApi from '@/api/mall/trade/afterSale/index'
120+
import { floatToFixed2 } from '@/utils'
121+
import { DICT_TYPE } from '@/utils/dict'
122+
import { formatDate } from '@/utils/formatTime'
123+
124+
defineOptions({ name: 'TradeOrderDetailForm' })
125+
126+
const { params } = useRoute() // 查询参数
127+
const orderInfo = ref({
128+
order: {}
129+
})
130+
/** 获得详情 */
131+
const getDetail = async () => {
132+
const id = params.orderId as unknown as number
133+
if (id) {
134+
const res = (await AfterSaleApi.getAfterSale(id)) as AfterSaleApi.TradeAfterSaleVO
135+
orderInfo.value = res
136+
}
137+
}
138+
const openForm = (type: string) => {
139+
switch (type) {
140+
case 'agree':
141+
break
142+
case 'disagree':
143+
break
144+
case 'receive':
145+
break
146+
case 'refuse':
147+
break
148+
case 'refund':
149+
break
150+
case 'update-refunded':
151+
break
152+
}
153+
}
154+
onMounted(async () => {
155+
await getDetail()
156+
})
157+
</script>
158+
<style lang="scss" scoped>
159+
:deep(.el-descriptions) {
160+
&:not(:nth-child(1)) {
161+
margin-top: 20px;
162+
}
163+
164+
.el-descriptions__title {
165+
display: flex;
166+
align-items: center;
167+
168+
&::before {
169+
display: inline-block;
170+
width: 3px;
171+
height: 20px;
172+
margin-right: 10px;
173+
background-color: #409eff;
174+
content: '';
175+
}
176+
}
177+
178+
.el-descriptions-item__container {
179+
margin: 0 10px;
180+
181+
.no-colon {
182+
margin: 0;
183+
184+
&::after {
185+
content: '';
186+
}
187+
}
188+
}
189+
}
190+
</style>

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

Lines changed: 43 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -91,19 +91,32 @@
9191
</el-tabs>
9292
<!-- 列表 -->
9393
<el-table v-loading="loading" :data="list">
94-
<el-table-column align="center" label="退款编号" prop="no" />
95-
<el-table-column align="center" label="订单编号" prop="orderNo" />
96-
<!-- TODO 芋艿：未来要加个订单链接 -->
97-
<el-table-column align="center" label="商品信息" min-width="300" prop="spuName" width="auto">
98-
<!-- TODO @小红：样式不太对，辛苦改改 -->
99-
<!-- <div v-slot="{ row }" class="goods-info">-->
100-
<!-- <img :src="row.picUrl"/>-->
101-
<!-- <span class="ellipsis-2" :title="row.name">{{row.name}}</span>-->
102-
<!-- </div>-->
94+
<el-table-column align="center" label="退款编号" min-width="200" prop="no" />
95+
<el-table-column align="center" label="订单编号" min-width="200" prop="orderNo">
96+
<template #default="{ row }">
97+
<el-button link type="primary" @click="openOrderDetail(row.orderId)">
98+
{{ row.orderNo }}
99+
</el-button>
100+
</template>
101+
</el-table-column>
102+
<el-table-column label="商品信息" min-width="600" prop="spuName">
103+
<template #default="{ row }">
104+
<div class="flex items-center">
105+
<el-image
106+
:src="row.picUrl"
107+
class="w-30px h-30px mr-10px"
108+
@click="imagePreview(row.picUrl)"
109+
/>
110+
<span class="mr-10px">{{ row.spuName }}</span>
111+
<el-tag v-for="property in row.properties" :key="property.propertyId" class="mr-10px">
112+
{{ property.propertyName }}: {{ property.valueName }}
113+
</el-tag>
114+
</div>
115+
</template>
103116
</el-table-column>
104117
<el-table-column align="center" label="订单金额" prop="refundPrice">
105118
<template #default="scope">
106-
<span>￥{{ (scope.row.refundPrice / 100.0).toFixed(2) }}</span>
119+
<span>{{ floatToFixed2(scope.row.refundPrice) }}元</span>
107120
</template>
108121
</el-table-column>
109122
<el-table-column align="center" label="买家" prop="user.nickname" />
@@ -124,8 +137,8 @@
124137
</template>
125138
</el-table-column>
126139
<el-table-column align="center" fixed="right" label="操作" width="160">
127-
<template #default>
128-
<el-button icon="el-icon-thumb" link type="primary">处理退款</el-button>
140+
<template #default="{ row }">
141+
<el-button link type="primary" @click="openAfterSaleDetail(row.id)">处理退款</el-button>
129142
</template>
130143
</el-table-column>
131144
</el-table>
@@ -142,11 +155,20 @@
142155
import * as AfterSaleApi from '@/api/mall/trade/afterSale/index'
143156
import { DICT_TYPE, getDictOptions } from '@/utils/dict'
144157
import { formatDate } from '@/utils/formatTime'
158+
import { createImageViewer } from '@/components/ImageViewer'
145159
import { TabsPaneContext } from 'element-plus'
146160
import { cloneDeep } from 'lodash-es'
161+
import { floatToFixed2 } from '@/utils'
147162
148163
defineOptions({ name: 'TradeAfterSale' })
149164
165+
const { push } = useRouter() // 路由跳转
166+
/** 商品图预览 */
167+
const imagePreview = (imgUrl: string) => {
168+
createImageViewer({
169+
urlList: [imgUrl]
170+
})
171+
}
150172
const loading = ref(true) // 列表的加载中
151173
const total = ref(0) // 列表的总页数
152174
const list = ref<AfterSaleApi.TradeAfterSaleVO[]>([]) // 列表的数据
@@ -202,6 +224,15 @@ const tabClick = async (tab: TabsPaneContext) => {
202224
await getList()
203225
}
204226
227+
/** 处理退款 */
228+
const openAfterSaleDetail = (id: number) => {
229+
push({ name: 'TradeAfterSaleDetail', params: { orderId: id } })
230+
}
231+
/** 查看订单详情 */
232+
const openOrderDetail = (id: number) => {
233+
push({ name: 'TradeOrderDetail', params: { orderId: id } })
234+
}
235+
205236
onMounted(async () => {
206237
await getList()
207238
// 设置 statuses 过滤

0 commit comments

Comments
 (0)