Skip to content

Commit bf66727

Browse files
YunaiVYunaiV
committed
code review：优化支付订单的实现
1 parent 1ab7ea0 commit bf66727

File tree

2 files changed

+87
-132
lines changed

2 files changed

+87
-132
lines changed

‎src/views/pay/order/OrderDetail.vue

Lines changed: 60 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,79 +1,84 @@
11
<template>
2-
<Dialog v-model="dialogVisible" title="详情" width="50%">
3-
<el-descriptions :column="2">
4-
<el-descriptions-item label="商户名称">{{ detailData.merchantName }}</el-descriptions-item>
5-
<el-descriptions-item label="应用名称">{{ detailData.appName }}</el-descriptions-item>
6-
<el-descriptions-item label="商品名称">{{ detailData.subject }}</el-descriptions-item>
7-
</el-descriptions>
8-
<el-divider />
9-
<el-descriptions :column="2">
10-
<el-descriptions-item label="商户订单号">
11-
<el-tag>{{ detailData.merchantOrderId }}</el-tag>
2+
<Dialog v-model="dialogVisible" title="订单详情" width="700px">
3+
<el-descriptions :column="2" label-class-name="desc-label">
4+
<el-descriptions-item label="商户单号">
5+
<el-tag size="small">{{ detailData.merchantOrderId }}</el-tag>
126
</el-descriptions-item>
13-
<el-descriptions-item label="渠道订单号">
14-
<el-tag class="tag-purple">{{ detailData.channelOrderNo }}</el-tag>
7+
<el-descriptions-item label="支付单号">
8+
<el-tag type="warning" size="small" v-if="detailData.no">{{ detailData.no }}</el-tag>
159
</el-descriptions-item>
16-
<el-descriptions-item label="支付订单号">
17-
<el-tag v-if="detailData.payOrderExtension" class="tag-pink">
18-
{{ detailData.payOrderExtension.no }}
19-
</el-tag>
10+
</el-descriptions>
11+
<el-descriptions :column="2" label-class-name="desc-label">
12+
<el-descriptions-item label="应用编号">{{ detailData.appId }}</el-descriptions-item>
13+
<el-descriptions-item label="应用名称">{{ detailData.appName }}</el-descriptions-item>
14+
</el-descriptions>
15+
<el-descriptions :column="2" label-class-name="desc-label">
16+
<el-descriptions-item label="支付状态">
17+
<dict-tag :type="DICT_TYPE.PAY_ORDER_STATUS" :value="detailData.status" size="small" />
2018
</el-descriptions-item>
21-
<el-descriptions-item label="金额">
22-
<el-tag type="success">￥{{ parseFloat(detailData.price / 100, 2).toFixed(2) }}</el-tag>
19+
<el-descriptions-item label="支付金额">
20+
<el-tag type="success" size="small">￥{{ (detailData.price / 100.0).toFixed(2) }}</el-tag>
2321
</el-descriptions-item>
22+
</el-descriptions>
23+
<el-descriptions :column="2" label-class-name="desc-label">
2424
<el-descriptions-item label="手续费">
25-
<el-tag type="warning">
26-
￥{{ parseFloat(detailData.channelFeePrice / 100, 2).toFixed(2) }}
25+
<el-tag type="warning" size="small">
26+
￥{{ (detailData.channelFeePrice / 100.0).toFixed(2) }}
2727
</el-tag>
2828
</el-descriptions-item>
2929
<el-descriptions-item label="手续费比例">
30-
{{ parseFloat(detailData.channelFeeRate / 100, 2) }}%
31-
</el-descriptions-item>
32-
<el-descriptions-item label="支付状态">
33-
<dict-tag :type="DICT_TYPE.PAY_ORDER_STATUS" :value="detailData.status" />
34-
</el-descriptions-item>
35-
<el-descriptions-item label="回调状态">
36-
<dict-tag :type="DICT_TYPE.PAY_ORDER_NOTIFY_STATUS" :value="detailData.notifyStatus" />
37-
</el-descriptions-item>
38-
<el-descriptions-item label="回调地址">{{ detailData.notifyUrl }}</el-descriptions-item>
39-
<el-descriptions-item label="创建时间">
40-
{{ formatDate(detailData.createTime) }}
30+
{{ (detailData.channelFeeRate / 100.0).toFixed(2) }}%
4131
</el-descriptions-item>
32+
</el-descriptions>
33+
<el-descriptions :column="2" label-class-name="desc-label">
4234
<el-descriptions-item label="支付时间">
4335
{{ formatDate(detailData.successTime) }}
4436
</el-descriptions-item>
4537
<el-descriptions-item label="失效时间">
4638
{{ formatDate(detailData.expireTime) }}
4739
</el-descriptions-item>
48-
<el-descriptions-item label="通知时间">
49-
{{ formatDate(detailData.notifyTime) }}
40+
</el-descriptions>
41+
<el-descriptions :column="2" label-class-name="desc-label">
42+
<el-descriptions-item label="创建时间">
43+
{{ formatDate(detailData.createTime) }}
44+
</el-descriptions-item>
45+
<el-descriptions-item label="更新时间">
46+
{{ formatDate(detailData.updateTime) }}
5047
</el-descriptions-item>
5148
</el-descriptions>
49+
<!-- 分割线 -->
5250
<el-divider />
53-
<el-descriptions :column="2">
54-
<el-descriptions-item label="支付渠道"
55-
>{{ detailData.channelCodeName }}
51+
<el-descriptions :column="2" label-class-name="desc-label">
52+
<el-descriptions-item label="商品标题">{{ detailData.subject }}</el-descriptions-item>
53+
<el-descriptions-item label="商品描述">{{ detailData.body }}</el-descriptions-item>
54+
</el-descriptions>
55+
<el-descriptions :column="2" label-class-name="desc-label">
56+
<el-descriptions-item label="支付渠道">
57+
<dict-tag :type="DICT_TYPE.PAY_CHANNEL_CODE" :value="detailData.channelCode" />
5658
</el-descriptions-item>
57-
<el-descriptions-item label="支付IP">{{ detailData.userIp }}</el-descriptions-item>
58-
<el-descriptions-item label="退款状态">
59-
<dict-tag :type="DICT_TYPE.PAY_ORDER_REFUND_STATUS" :value="detailData.refundStatus" />
59+
<el-descriptions-item label="支付 IP">{{ detailData.userIp }}</el-descriptions-item>
60+
</el-descriptions>
61+
<el-descriptions :column="2" label-class-name="desc-label">
62+
<el-descriptions-item label="渠道单号">
63+
<el-tag size="mini" type="success" v-if="detailData.channelOrderNo">
64+
{{ detailData.channelOrderNo }}
65+
</el-tag>
6066
</el-descriptions-item>
61-
<el-descriptions-item label="退款次数">{{ detailData.refundTimes }}</el-descriptions-item>
67+
<el-descriptions-item label="渠道用户">{{ detailData.channelUserId }}</el-descriptions-item>
68+
</el-descriptions>
69+
<el-descriptions :column="2" label-class-name="desc-label">
6270
<el-descriptions-item label="退款金额">
63-
<el-tag type="warning">
64-
{{ parseFloat(detailData.refundPrice / 100, 2) }}
71+
<el-tag size="mini" type="danger">
72+
￥{{ (detailData.refundPrice / 100.0).toFixed(2) }}
6573
</el-tag>
6674
</el-descriptions-item>
75+
<el-descriptions-item label="通知 URL">{{ detailData.notifyUrl }}</el-descriptions-item>
6776
</el-descriptions>
77+
<!-- 分割线 -->
6878
<el-divider />
69-
<el-descriptions :column="1" border direction="vertical">
70-
<el-descriptions-item label="商品描述">
71-
{{ detailData.body }}
72-
</el-descriptions-item>
79+
<el-descriptions :column="1" label-class-name="desc-label" direction="vertical" border>
7380
<el-descriptions-item label="支付通道异步回调内容">
74-
<div style="width: 700px; overflow: auto">
75-
{{ detailData.payOrderExtension?.channelNotifyData }}
76-
</div>
81+
{{ detailData.extension.channelNotifyData }}
7782
</el-descriptions-item>
7883
</el-descriptions>
7984
</Dialog>
@@ -87,7 +92,9 @@ defineOptions({ name: 'PayOrderDetail' })
8792
8893
const dialogVisible = ref(false) // 弹窗的是否展示
8994
const detailLoading = ref(false) // 表单的加载中
90-
const detailData = ref({})
95+
const detailData = ref({
96+
extension: {}
97+
})
9198
9299
/** 打开弹窗 */
93100
const open = async (id: number) => {
@@ -96,6 +103,9 @@ const open = async (id: number) => {
96103
detailLoading.value = true
97104
try {
98105
detailData.value = await OrderApi.getOrderDetail(id)
106+
if (!detailData.value.extension) {
107+
detailData.value.extension = {}
108+
}
99109
} finally {
100110
detailLoading.value = false
101111
}

‎src/views/pay/order/index.vue

Lines changed: 27 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,8 @@
11
<template>
2+
<doc-alert title="支付宝支付接入" url="https://doc.iocoder.cn/pay/alipay-pay-demo/" />
3+
<doc-alert title="微信公众号支付接入" url="https://doc.iocoder.cn/pay/wx-pub-pay-demo/" />
4+
<doc-alert title="微信小程序支付接入" url="https://doc.iocoder.cn/pay/wx-lite-pay-demo/" />
5+
26
<ContentWrap>
37
<el-form
48
class="-mb-15px"
@@ -7,21 +11,6 @@
711
:inline="true"
812
label-width="100px"
913
>
10-
<el-form-item label="所属商户" prop="merchantId">
11-
<el-select
12-
v-model="queryParams.merchantId"
13-
clearable
14-
placeholder="请选择所属商户"
15-
class="!w-240px"
16-
>
17-
<el-option
18-
v-for="item in merchantList"
19-
:key="item.id"
20-
:label="item.name"
21-
:value="item.id"
22-
/>
23-
</el-select>
24-
</el-form-item>
2514
<el-form-item label="应用编号" prop="appId">
2615
<el-select
2716
clearable
@@ -32,10 +21,10 @@
3221
<el-option v-for="item in appList" :key="item.id" :label="item.name" :value="item.id" />
3322
</el-select>
3423
</el-form-item>
35-
<el-form-item label="渠道编码" prop="channelCode">
24+
<el-form-item label="支付渠道" prop="channelCode">
3625
<el-select
3726
v-model="queryParams.channelCode"
38-
placeholder="请输入渠道编码"
27+
placeholder="请选择支付渠道"
3928
clearable
4029
class="!w-240px"
4130
>
@@ -47,19 +36,28 @@
4736
/>
4837
</el-select>
4938
</el-form-item>
50-
<el-form-item label="商户订单编号" prop="merchantOrderId">
39+
<el-form-item label="商户单号" prop="merchantOrderId">
5140
<el-input
5241
v-model="queryParams.merchantOrderId"
53-
placeholder="请输入商户订单编号"
42+
placeholder="请输入商户单号"
43+
clearable
44+
@keyup.enter="handleQuery"
45+
class="!w-240px"
46+
/>
47+
</el-form-item>
48+
<el-form-item label="支付单号" prop="no">
49+
<el-input
50+
v-model="queryParams.no"
51+
placeholder="请输入支付单号"
5452
clearable
5553
@keyup.enter="handleQuery"
5654
class="!w-240px"
5755
/>
5856
</el-form-item>
59-
<el-form-item label="渠道订单号" prop="channelOrderNo">
57+
<el-form-item label="渠道单号" prop="channelOrderNo">
6058
<el-input
6159
v-model="queryParams.channelOrderNo"
62-
placeholder="请输入渠道订单号"
60+
placeholder="请输入渠道单号"
6361
clearable
6462
@keyup.enter="handleQuery"
6563
class="!w-240px"
@@ -80,36 +78,6 @@
8078
/>
8179
</el-select>
8280
</el-form-item>
83-
<el-form-item label="退款状态" prop="refundStatus">
84-
<el-select
85-
v-model="queryParams.refundStatus"
86-
placeholder="请选择退款状态"
87-
clearable
88-
class="!w-240px"
89-
>
90-
<el-option
91-
v-for="dict in getIntDictOptions(DICT_TYPE.PAY_ORDER_REFUND_STATUS)"
92-
:key="dict.value"
93-
:label="dict.label"
94-
:value="dict.value"
95-
/>
96-
</el-select>
97-
</el-form-item>
98-
<el-form-item label="回调商户状态" prop="notifyStatus">
99-
<el-select
100-
v-model="queryParams.notifyStatus"
101-
placeholder="请选择订单回调商户状态"
102-
clearable
103-
class="!w-240px"
104-
>
105-
<el-option
106-
v-for="dict in getIntDictOptions(DICT_TYPE.PAY_ORDER_NOTIFY_STATUS)"
107-
:key="dict.value"
108-
:label="dict.label"
109-
:value="dict.value"
110-
/>
111-
</el-select>
112-
</el-form-item>
11381
<el-form-item label="创建时间" prop="createTime">
11482
<el-date-picker
11583
v-model="queryParams.createTime"
@@ -137,6 +105,7 @@
137105
</el-form>
138106
</ContentWrap>
139107

108+
<!-- 列表 -->
140109
<ContentWrap>
141110
<el-table v-loading="loading" :data="list">
142111
<el-table-column label="编号" align="center" prop="id" width="80" />
@@ -197,7 +166,6 @@
197166
<el-button
198167
type="primary"
199168
link
200-
size="small"
201169
@click="openDetail(scope.row.id)"
202170
v-hasPermi="['pay:order:query']"
203171
>
@@ -235,34 +203,16 @@ const list = ref([]) // 列表的数据
235203
const queryParams = reactive({
236204
pageNo: 1,
237205
pageSize: 10,
238-
merchantId: undefined,
239-
appId: undefined,
240-
channelId: undefined,
241-
channelCode: undefined,
242-
merchantOrderId: undefined,
243-
subject: undefined,
244-
body: undefined,
245-
notifyUrl: undefined,
246-
notifyStatus: undefined,
247-
amount: undefined,
248-
channelFeeRate: undefined,
249-
channelFeeAmount: undefined,
250-
status: undefined,
251-
userIp: undefined,
252-
successExtensionId: undefined,
253-
refundStatus: undefined,
254-
refundTimes: undefined,
255-
refundAmount: undefined,
256-
channelUserId: undefined,
257-
channelOrderNo: undefined,
258-
expireTime: [],
259-
successTime: [],
260-
notifyTime: [],
206+
appId: null,
207+
channelCode: null,
208+
merchantOrderId: null,
209+
channelOrderNo: null,
210+
no: null,
211+
status: null,
261212
createTime: []
262213
})
263214
const queryFormRef = ref() // 搜索的表单
264215
const exportLoading = ref(false) // 导出等待
265-
const merchantList = ref([]) // 商户列表
266216
const appList = ref([]) // 支付应用列表集合
267217
268218
/** 搜索按钮操作 */
@@ -313,16 +263,11 @@ const openDetail = (id: number) => {
313263
/** 初始化 **/
314264
onMounted(async () => {
315265
await getList()
316-
// 加载商户列表
317-
// merchantList.value = await MerchantApi.getMerchantListByName()
318-
// 加载 App 列表
319-
// TODO 芋艿：候选少一个查询应用列表的接口
320-
// appList.value = await AppApi.getAppListByMerchantId()
321266
})
322267
</script>
323268
<style>
324269
.order-font {
325-
padding: 2px 0;
326270
font-size: 12px;
271+
padding: 2px 0;
327272
}
328273
</style>

0 commit comments

Comments
 (0)