Skip to content

Commit bcfb98c

Browse files
GoldenZqqqGoldenZqqq
committed
feat: 初始化会员详情-售后管理页面
1 parent d3f38c6 commit bcfb98c

File tree

2 files changed

+275
-1
lines changed

2 files changed

+275
-1
lines changed

‎src/views/member/user/detail/UserAftersaleList.vue

Lines changed: 271 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,271 @@
1+
<template>
2+
<!-- 搜索 -->
3+
<ContentWrap>
4+
<el-form ref="queryFormRef" :inline="true" :model="queryParams" label-width="68px">
5+
<el-form-item label="商品名称" prop="spuName">
6+
<el-input
7+
v-model="queryParams.spuName"
8+
class="!w-280px"
9+
clearable
10+
placeholder="请输入商品 SPU 名称"
11+
@keyup.enter="handleQuery"
12+
/>
13+
</el-form-item>
14+
<el-form-item label="退款编号" prop="no">
15+
<el-input
16+
v-model="queryParams.no"
17+
class="!w-280px"
18+
clearable
19+
placeholder="请输入退款编号"
20+
@keyup.enter="handleQuery"
21+
/>
22+
</el-form-item>
23+
<el-form-item label="订单编号" prop="orderNo">
24+
<el-input
25+
v-model="queryParams.orderNo"
26+
class="!w-280px"
27+
clearable
28+
placeholder="请输入订单编号"
29+
@keyup.enter="handleQuery"
30+
/>
31+
</el-form-item>
32+
<el-form-item label="售后状态" prop="status">
33+
<el-select
34+
v-model="queryParams.status"
35+
class="!w-280px"
36+
clearable
37+
placeholder="请选择售后状态"
38+
>
39+
<el-option label="全部" value="0" />
40+
<el-option
41+
v-for="dict in getDictOptions(DICT_TYPE.TRADE_AFTER_SALE_STATUS)"
42+
:key="dict.value"
43+
:label="dict.label"
44+
:value="dict.value"
45+
/>
46+
</el-select>
47+
</el-form-item>
48+
<el-form-item label="售后方式" prop="way">
49+
<el-select
50+
v-model="queryParams.way"
51+
class="!w-280px"
52+
clearable
53+
placeholder="请选择售后方式"
54+
>
55+
<el-option
56+
v-for="dict in getDictOptions(DICT_TYPE.TRADE_AFTER_SALE_WAY)"
57+
:key="dict.value"
58+
:label="dict.label"
59+
:value="dict.value"
60+
/>
61+
</el-select>
62+
</el-form-item>
63+
<el-form-item label="售后类型" prop="type">
64+
<el-select
65+
v-model="queryParams.type"
66+
class="!w-280px"
67+
clearable
68+
placeholder="请选择售后类型"
69+
>
70+
<el-option
71+
v-for="dict in getDictOptions(DICT_TYPE.TRADE_AFTER_SALE_TYPE)"
72+
:key="dict.value"
73+
:label="dict.label"
74+
:value="dict.value"
75+
/>
76+
</el-select>
77+
</el-form-item>
78+
<el-form-item label="创建时间" prop="createTime">
79+
<el-date-picker
80+
v-model="queryParams.createTime"
81+
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
82+
class="!w-260px"
83+
end-placeholder="自定义时间"
84+
start-placeholder="自定义时间"
85+
type="daterange"
86+
value-format="YYYY-MM-DD HH:mm:ss"
87+
/>
88+
</el-form-item>
89+
<el-form-item>
90+
<el-button @click="handleQuery">
91+
<Icon class="mr-5px" icon="ep:search" />
92+
搜索
93+
</el-button>
94+
<el-button @click="resetQuery">
95+
<Icon class="mr-5px" icon="ep:refresh" />
96+
重置
97+
</el-button>
98+
</el-form-item>
99+
</el-form>
100+
</ContentWrap>
101+
102+
<ContentWrap>
103+
<el-tabs v-model="queryParams.status" @tab-click="tabClick">
104+
<el-tab-pane
105+
v-for="item in statusTabs"
106+
:key="item.label"
107+
:label="item.label"
108+
:name="item.value"
109+
/>
110+
</el-tabs>
111+
<!-- 列表 -->
112+
<el-table v-loading="loading" :data="list">
113+
<el-table-column align="center" label="退款编号" min-width="200" prop="no" />
114+
<el-table-column align="center" label="订单编号" min-width="200" prop="orderNo">
115+
<template #default="{ row }">
116+
<el-button link type="primary" @click="openOrderDetail(row.orderId)">
117+
{{ row.orderNo }}
118+
</el-button>
119+
</template>
120+
</el-table-column>
121+
<el-table-column label="商品信息" min-width="600" prop="spuName">
122+
<template #default="{ row }">
123+
<div class="flex items-center">
124+
<el-image
125+
:src="row.picUrl"
126+
class="mr-10px h-30px w-30px"
127+
@click="imagePreview(row.picUrl)"
128+
/>
129+
<span class="mr-10px">{{ row.spuName }}</span>
130+
<el-tag v-for="property in row.properties" :key="property.propertyId" class="mr-10px">
131+
{{ property.propertyName }}: {{ property.valueName }}
132+
</el-tag>
133+
</div>
134+
</template>
135+
</el-table-column>
136+
<el-table-column align="center" label="订单金额" prop="refundPrice">
137+
<template #default="scope">
138+
<span>{{ fenToYuan(scope.row.refundPrice) }} 元</span>
139+
</template>
140+
</el-table-column>
141+
<el-table-column align="center" label="买家" prop="user.nickname" />
142+
<el-table-column align="center" label="申请时间" prop="createTime" width="180">
143+
<template #default="scope">
144+
<span>{{ formatDate(scope.row.createTime) }}</span>
145+
</template>
146+
</el-table-column>
147+
<el-table-column align="center" label="售后状态" width="100">
148+
<template #default="scope">
149+
<dict-tag :type="DICT_TYPE.TRADE_AFTER_SALE_STATUS" :value="scope.row.status" />
150+
</template>
151+
</el-table-column>
152+
<el-table-column align="center" label="售后方式">
153+
<template #default="scope">
154+
<dict-tag :type="DICT_TYPE.TRADE_AFTER_SALE_WAY" :value="scope.row.way" />
155+
</template>
156+
</el-table-column>
157+
<el-table-column align="center" fixed="right" label="操作" width="160">
158+
<template #default="{ row }">
159+
<el-button link type="primary" @click="openAfterSaleDetail(row.id)">处理退款</el-button>
160+
</template>
161+
</el-table-column>
162+
</el-table>
163+
<!-- 分页 -->
164+
<Pagination
165+
v-model:limit="queryParams.pageSize"
166+
v-model:page="queryParams.pageNo"
167+
:total="total"
168+
@pagination="getList"
169+
/>
170+
</ContentWrap>
171+
</template>
172+
<script lang="ts" setup>
173+
import * as AfterSaleApi from '@/api/mall/trade/afterSale/index'
174+
import { DICT_TYPE, getDictOptions } from '@/utils/dict'
175+
import { formatDate } from '@/utils/formatTime'
176+
import { createImageViewer } from '@/components/ImageViewer'
177+
import { TabsPaneContext } from 'element-plus'
178+
import { cloneDeep } from 'lodash-es'
179+
import { fenToYuan } from '@/utils'
180+
181+
defineOptions({ name: 'UserAfterSaleList' })
182+
183+
const { push } = useRouter() // 路由跳转
184+
const { userId } = defineProps<{
185+
userId: number
186+
}>()
187+
const loading = ref(true) // 列表的加载中
188+
const total = ref(0) // 列表的总页数
189+
const list = ref<AfterSaleApi.TradeAfterSaleVO[]>([]) // 列表的数据
190+
const statusTabs = ref([
191+
{
192+
label: '全部',
193+
value: '0'
194+
}
195+
])
196+
const queryFormRef = ref() // 搜索的表单
197+
// 查询参数
198+
const queryParams = ref({
199+
pageNo: 1,
200+
pageSize: 10,
201+
userId: userId,
202+
no: null,
203+
status: '0',
204+
orderNo: null,
205+
spuName: null,
206+
createTime: [],
207+
way: null,
208+
type: null
209+
})
210+
/** 查询列表 */
211+
const getList = async () => {
212+
loading.value = true
213+
try {
214+
const data = cloneDeep(queryParams.value)
215+
// 处理掉全部的状态，不传就是全部
216+
if (data.status === '0') {
217+
delete data.status
218+
}
219+
// 执行查询
220+
const res = (await AfterSaleApi.getAfterSalePage(data)) as AfterSaleApi.TradeAfterSaleVO[]
221+
list.value = res.list
222+
total.value = res.total
223+
} finally {
224+
loading.value = false
225+
}
226+
}
227+
/** 搜索按钮操作 */
228+
const handleQuery = async () => {
229+
queryParams.value.pageNo = 1
230+
await getList()
231+
}
232+
/** 重置按钮操作 */
233+
const resetQuery = () => {
234+
queryFormRef.value?.resetFields()
235+
queryParams.value.userId = userId
236+
handleQuery()
237+
}
238+
/** tab 切换 */
239+
const tabClick = async (tab: TabsPaneContext) => {
240+
queryParams.value.status = tab.paneName
241+
await getList()
242+
}
243+
244+
/** 处理退款 */
245+
const openAfterSaleDetail = (id: number) => {
246+
push({ name: 'TradeAfterSaleDetail', params: { id } })
247+
}
248+
249+
/** 查看订单详情 */
250+
const openOrderDetail = (id: number) => {
251+
push({ name: 'TradeOrderDetail', params: { id } })
252+
}
253+
254+
/** 商品图预览 */
255+
const imagePreview = (imgUrl: string) => {
256+
createImageViewer({
257+
urlList: [imgUrl]
258+
})
259+
}
260+
261+
onMounted(async () => {
262+
await getList()
263+
// 设置 statuses 过滤
264+
for (const dict of getDictOptions(DICT_TYPE.TRADE_AFTER_SALE_STATUS)) {
265+
statusTabs.value.push({
266+
label: dict.label,
267+
value: dict.value
268+
})
269+
}
270+
})
271+
</script>

‎src/views/member/user/detail/index.vue

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,9 @@
4747
<el-tab-pane label="订单管理" lazy>
4848
<UserOrderList :user-id="id" />
4949
</el-tab-pane>
50-
<el-tab-pane label="售后管理" lazy>售后管理(WIP)</el-tab-pane>
50+
<el-tab-pane label="售后管理" lazy>
51+
<UserAfterSaleList :user-id="id" />
52+
</el-tab-pane>
5153
<el-tab-pane label="收藏记录" lazy>
5254
<UserFavoriteList :user-id="id" />
5355
</el-tab-pane>
@@ -79,6 +81,7 @@ import UserOrderList from './UserOrderList.vue'
7981
import UserPointList from './UserPointList.vue'
8082
import UserSignList from './UserSignList.vue'
8183
import UserFavoriteList from './UserFavoriteList.vue'
84+
import UserAfterSaleList from './UserAftersaleList.vue'
8285
import { CardTitle } from '@/components/Card/index'
8386
import { ElMessage } from 'element-plus'
8487

0 commit comments

Comments
 (0)