Skip to content

Commit 61b3bdf

Browse files
owen118zowen118z
committed
交易：核销订单
1 parent 57f6367 commit 61b3bdf

File tree

3 files changed

+328
-1
lines changed

3 files changed

+328
-1
lines changed

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

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -108,11 +108,28 @@ export interface ProductPropertiesVO {
108108
valueName?: string // 属性值的名称
109109
}
110110

111+
/** 交易订单统计 */
112+
export interface TradeOrderSummaryRespVO {
113+
/** 订单数量 */
114+
orderCount?: number
115+
/** 订单金额 */
116+
orderPayPrice?: string
117+
/** 退款单数 */
118+
afterSaleCount?: number
119+
/** 退款金额 */
120+
afterSalePrice?: string
121+
}
122+
111123
// 查询交易订单列表
112-
export const getOrderPage = async (params) => {
124+
export const getOrderPage = async (params: any) => {
113125
return await request.get({ url: `/trade/order/page`, params })
114126
}
115127

128+
// 查询交易订单统计
129+
export const getOrderSummary = async (params: any) => {
130+
return await request.get<TradeOrderSummaryRespVO>({ url: `/trade/order/summary`, params })
131+
}
132+
116133
// 查询交易订单详情
117134
export const getOrder = async (id: number | null) => {
118135
return await request.get({ url: `/trade/order/get-detail?id=` + id })

‎src/views/mall/trade/delivery/pickUpOrder/index.vue

Lines changed: 309 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,309 @@
1+
<template>
2+
<!-- 搜索 -->
3+
<ContentWrap>
4+
<el-form
5+
ref="queryFormRef"
6+
:inline="true"
7+
:model="queryParams"
8+
class="-mb-15px"
9+
label-width="68px"
10+
>
11+
<el-form-item label="创建时间" prop="createTime">
12+
<el-date-picker
13+
v-model="queryParams.createTime"
14+
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
15+
class="!w-280px"
16+
end-placeholder="自定义时间"
17+
start-placeholder="自定义时间"
18+
type="daterange"
19+
value-format="YYYY-MM-DD HH:mm:ss"
20+
/>
21+
</el-form-item>
22+
<el-form-item label="自提门店" prop="pickUpStoreId">
23+
<el-select
24+
v-model="queryParams.pickUpStoreId"
25+
class="!w-280px"
26+
clearable
27+
multiple
28+
placeholder="全部"
29+
>
30+
<el-option
31+
v-for="item in pickUpStoreList"
32+
:key="item.id"
33+
:label="item.name"
34+
:value="item.id"
35+
/>
36+
</el-select>
37+
</el-form-item>
38+
<el-form-item label="聚合搜索">
39+
<el-input
40+
v-show="true"
41+
v-model="queryParams[queryType.queryParam]"
42+
class="!w-280px"
43+
clearable
44+
placeholder="请输入"
45+
:type="queryType.queryParam === 'userId' ? 'number' : 'text'"
46+
>
47+
<template #prepend>
48+
<el-select
49+
v-model="queryType.queryParam"
50+
class="!w-110px"
51+
placeholder="全部"
52+
@change="inputChangeSelect"
53+
>
54+
<el-option
55+
v-for="dict in dynamicSearchList"
56+
:key="dict.value"
57+
:label="dict.label"
58+
:value="dict.value"
59+
/>
60+
</el-select>
61+
</template>
62+
</el-input>
63+
</el-form-item>
64+
<el-form-item>
65+
<el-button @click="handleQuery">
66+
<Icon class="mr-5px" icon="ep:search" />
67+
搜索
68+
</el-button>
69+
<el-button @click="resetQuery">
70+
<Icon class="mr-5px" icon="ep:refresh" />
71+
重置
72+
</el-button>
73+
</el-form-item>
74+
</el-form>
75+
</ContentWrap>
76+
<!-- 统计卡片 -->
77+
<el-row :gutter="16" class="summary">
78+
<el-col :sm="6" :xs="12" v-loading="loading">
79+
<TradeTrendValue
80+
title="订单数量"
81+
icon="icon-park-outline:transaction-order"
82+
icon-color="bg-blue-100"
83+
icon-bg-color="text-blue-500"
84+
:value="summary?.orderCount || 0"
85+
/>
86+
</el-col>
87+
<el-col :sm="6" :xs="12" v-loading="loading">
88+
<TradeTrendValue
89+
title="订单金额"
90+
icon="streamline:money-cash-file-dollar-common-money-currency-cash-file"
91+
icon-color="bg-purple-100"
92+
icon-bg-color="text-purple-500"
93+
prefix="￥"
94+
:decimals="2"
95+
:value="fenToYuan(summary?.orderPayPrice || 0)"
96+
/>
97+
</el-col>
98+
<el-col :sm="6" :xs="12" v-loading="loading">
99+
<TradeTrendValue
100+
title="退款单数"
101+
icon="heroicons:receipt-refund"
102+
icon-color="bg-yellow-100"
103+
icon-bg-color="text-yellow-500"
104+
:value="summary?.afterSaleCount || 0"
105+
/>
106+
</el-col>
107+
<el-col :sm="6" :xs="12" v-loading="loading">
108+
<TradeTrendValue
109+
title="退款金额"
110+
icon="ri:refund-2-line"
111+
icon-color="bg-green-100"
112+
icon-bg-color="text-green-500"
113+
prefix="￥"
114+
:decimals="2"
115+
:value="fenToYuan(summary?.afterSalePrice || 0)"
116+
/>
117+
</el-col>
118+
</el-row>
119+
120+
<!-- 列表 -->
121+
<ContentWrap>
122+
<el-table v-loading="loading" :data="list">
123+
<el-table-column label="订单号" align="center" prop="no" min-width="180" />
124+
<el-table-column label="用户信息" align="center" prop="user.nickname" min-width="80" />
125+
<el-table-column
126+
label="推荐人信息"
127+
align="center"
128+
prop="brokerageUser.nickname"
129+
min-width="100"
130+
/>
131+
<el-table-column label="商品信息" align="center" prop="spuName" min-width="300">
132+
<template #default="{ row }">
133+
<div class="flex items-center" v-for="item in row.items" :key="item.id">
134+
<el-image
135+
:src="item.picUrl"
136+
class="mr-10px h-30px w-30px flex-shrink-0"
137+
:preview-src-list="[item.picUrl]"
138+
preview-teleported
139+
/>
140+
<span class="mr-10px">{{ item.spuName }}</span>
141+
<div class="flex flex-col flex-wrap gap-1">
142+
<el-tag
143+
v-for="property in item.properties"
144+
:key="property.propertyId"
145+
class="mr-10px"
146+
>
147+
{{ property.propertyName }}: {{ property.valueName }}
148+
</el-tag>
149+
<span>{{ floatToFixed2(item.price) }} 元 x {{ item.count }}</span>
150+
</div>
151+
</div>
152+
</template>
153+
</el-table-column>
154+
<el-table-column
155+
label="实付金额(元)"
156+
align="center"
157+
prop="payPrice"
158+
min-width="110"
159+
:formatter="fenToYuanFormat"
160+
/>
161+
<el-table-column label="核销员" align="center" prop="storeStaffName" min-width="70" />
162+
<el-table-column label="核销门店" align="center" prop="pickUpStoreId" min-width="80">
163+
<template #default="{ row }">
164+
{{ pickUpStoreList.find((p) => p.id === row.pickUpStoreId)?.name }}
165+
</template>
166+
</el-table-column>
167+
<el-table-column label="支付状态" align="center" prop="payStatus" min-width="80">
168+
<template #default="{ row }">
169+
<dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="row.payStatus || false" />
170+
</template>
171+
</el-table-column>
172+
<el-table-column align="center" label="订单状态" prop="status" width="120">
173+
<template #default="{ row }">
174+
<dict-tag :type="DICT_TYPE.TRADE_ORDER_STATUS" :value="row.status" />
175+
</template>
176+
</el-table-column>
177+
<el-table-column
178+
label="下单时间"
179+
align="center"
180+
prop="createTime"
181+
min-width="170"
182+
:formatter="dateFormatter"
183+
/>
184+
</el-table>
185+
<!-- 分页 -->
186+
<Pagination
187+
v-model:limit="queryParams.pageSize"
188+
v-model:page="queryParams.pageNo"
189+
:total="total"
190+
@pagination="getList"
191+
/>
192+
</ContentWrap>
193+
</template>
194+
195+
<script lang="ts" setup>
196+
import type { FormInstance } from 'element-plus'
197+
import * as TradeOrderApi from '@/api/mall/trade/order'
198+
import * as PickUpStoreApi from '@/api/mall/trade/delivery/pickUpStore'
199+
import { DICT_TYPE } from '@/utils/dict'
200+
import { fenToYuan, floatToFixed2 } from '@/utils'
201+
import { fenToYuanFormat } from '@/utils/formatter'
202+
import TradeTrendValue from '@/views/mall/statistics/trade/components/TradeTrendValue.vue'
203+
import { dateFormatter } from '@/utils/formatTime'
204+
import { DeliveryTypeEnum } from '@/utils/constants'
205+
import { TradeOrderSummaryRespVO } from '@/api/mall/trade/order'
206+
import { DeliveryPickUpStoreVO } from '@/api/mall/trade/delivery/pickUpStore'
207+
208+
defineOptions({ name: 'PickUpOrder' })
209+
210+
// 列表的加载中
211+
const loading = ref(true)
212+
// 列表的总页数
213+
const total = ref(2)
214+
// 列表的数据
215+
const list = ref<TradeOrderApi.OrderVO[]>([])
216+
// 搜索的表单
217+
const queryFormRef = ref<FormInstance>()
218+
// 初始表单参数
219+
const INIT_QUERY_PARAMS = {
220+
// 页数
221+
pageNo: 1,
222+
// 每页显示数量
223+
pageSize: 10,
224+
// 创建时间
225+
createTime: undefined,
226+
// 配送方式
227+
deliveryType: DeliveryTypeEnum.PICK_UP.type,
228+
// 自提门店
229+
pickUpStoreId: undefined
230+
}
231+
// 表单搜索
232+
const queryParams = ref({ ...INIT_QUERY_PARAMS })
233+
// 订单搜索类型 queryParam
234+
const queryType = reactive({ queryParam: 'no' })
235+
// 订单统计数据
236+
const summary = ref<TradeOrderSummaryRespVO>()
237+
238+
// 订单聚合搜索 select 类型配置（动态搜索）
239+
const dynamicSearchList = ref([
240+
{ value: 'no', label: '订单号' },
241+
{ value: 'userId', label: '用户UID' },
242+
{ value: 'userNickname', label: '用户昵称' },
243+
{ value: 'userMobile', label: '用户电话' }
244+
])
245+
/**
246+
* 聚合搜索切换查询对象时触发
247+
* @param val
248+
*/
249+
const inputChangeSelect = (val: string) => {
250+
dynamicSearchList.value
251+
.filter((item) => item.value !== val)
252+
?.forEach((item) => {
253+
// 清除集合搜索无用属性
254+
if (queryParams.value.hasOwnProperty(item.value)) {
255+
delete queryParams.value[item.value]
256+
}
257+
})
258+
}
259+
260+
/** 查询列表 */
261+
const getList = async () => {
262+
loading.value = true
263+
try {
264+
// 统计
265+
summary.value = await TradeOrderApi.getOrderSummary(unref(queryParams))
266+
// 分页
267+
const data = await TradeOrderApi.getOrderPage(unref(queryParams))
268+
list.value = data.list
269+
total.value = data.total
270+
} finally {
271+
loading.value = false
272+
}
273+
}
274+
275+
/** 搜索按钮操作 */
276+
const handleQuery = async () => {
277+
queryParams.value.pageNo = 1
278+
await getList()
279+
}
280+
281+
/** 重置按钮操作 */
282+
const resetQuery = () => {
283+
queryFormRef.value?.resetFields()
284+
queryParams.value = { ...INIT_QUERY_PARAMS }
285+
handleQuery()
286+
}
287+
288+
/** 自提门店精简列表 */
289+
const pickUpStoreList = ref<DeliveryPickUpStoreVO[]>([])
290+
const getPickUpStoreList = async () => {
291+
pickUpStoreList.value = await PickUpStoreApi.getListAllSimple()
292+
}
293+
294+
/** 初始化 **/
295+
onMounted(() => {
296+
getList()
297+
getPickUpStoreList()
298+
})
299+
</script>
300+
<style lang="scss" scoped>
301+
:deep(.order-table-col > .cell) {
302+
padding: 0;
303+
}
304+
.summary {
305+
.el-col {
306+
margin-bottom: 1rem;
307+
}
308+
}
309+
</style>

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -128,6 +128,7 @@
128128
class="!w-280px"
129129
clearable
130130
placeholder="请输入"
131+
:type="queryType.queryParam === 'userId' ? 'number' : 'text'"
131132
>
132133
<template #prepend>
133134
<el-select

0 commit comments

Comments
 (0)