root/ludu-admin-vue3
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

code review：优化支付订单的实现

Browse Source 
(cherry picked from commit bf66727009)
This commit is contained in:
YunaiV 2023-08-11 08:59:08 +08:00 committed by shizhong
parent a7610dbab3
commit 00c319ba41
2 changed files with 89 additions and 134 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

116
src/views/pay/order/OrderDetail.vue
View File

@ -1,79 +1,84 @@
<template>
<Dialog v-model="dialogVisible" title="详情" width="50%">
<el-descriptions :column="2">
<el-descriptions-item label="商户名称">{{ detailData.merchantName }}</el-descriptions-item>
<el-descriptions-item label="应用名称">{{ detailData.appName }}</el-descriptions-item>
<el-descriptions-item label="商品名称">{{ detailData.subject }}</el-descriptions-item>
<Dialog v-model="dialogVisible" title="订单详情" width="700px">
<el-descriptions :column="2" label-class-name="desc-label">
<el-descriptions-item label="商户单号">
<el-tag size="small">{{ detailData.merchantOrderId }}</el-tag>
</el-descriptions-item>
<el-descriptions-item label="支付单号">
<el-tag type="warning" size="small" v-if="detailData.no">{{ detailData.no }}</el-tag>
</el-descriptions-item>
</el-descriptions>
<el-divider />
<el-descriptions :column="2">
<el-descriptions-item label="商户订单号">
<el-tag>{{ detailData.merchantOrderId }}</el-tag>
<el-descriptions :column="2" label-class-name="desc-label">
<el-descriptions-item label="应用编号">{{ detailData.appId }}</el-descriptions-item>
<el-descriptions-item label="应用名称">{{ detailData.appName }}</el-descriptions-item>
</el-descriptions>
<el-descriptions :column="2" label-class-name="desc-label">
<el-descriptions-item label="支付状态">
<dict-tag :type="DICT_TYPE.PAY_ORDER_STATUS" :value="detailData.status" size="small" />
</el-descriptions-item>
<el-descriptions-item label="渠道订单号">
<el-tag class="tag-purple">{{ detailData.channelOrderNo }}</el-tag>
</el-descriptions-item>
<el-descriptions-item label="支付订单号">
<el-tag v-if="detailData.payOrderExtension" class="tag-pink">
{{ detailData.payOrderExtension.no }}
</el-tag>
</el-descriptions-item>
<el-descriptions-item label="金额">
<el-tag type="success">￥{{ parseFloat(detailData.price / 100, 2).toFixed(2) }}</el-tag>
<el-descriptions-item label="支付金额">
<el-tag type="success" size="small">￥{{ (detailData.price / 100.0).toFixed(2) }}</el-tag>
</el-descriptions-item>
</el-descriptions>
<el-descriptions :column="2" label-class-name="desc-label">
<el-descriptions-item label="手续费">
<el-tag type="warning">
￥{{ parseFloat(detailData.channelFeePrice / 100, 2).toFixed(2) }}
<el-tag type="warning" size="small">
￥{{ (detailData.channelFeePrice / 100.0).toFixed(2) }}
</el-tag>
</el-descriptions-item>
<el-descriptions-item label="手续费比例">
{{ parseFloat(detailData.channelFeeRate / 100, 2) }}%
</el-descriptions-item>
<el-descriptions-item label="支付状态">
<dict-tag :type="DICT_TYPE.PAY_ORDER_STATUS" :value="detailData.status" />
</el-descriptions-item>
<el-descriptions-item label="回调状态">
<dict-tag :type="DICT_TYPE.PAY_ORDER_NOTIFY_STATUS" :value="detailData.notifyStatus" />
</el-descriptions-item>
<el-descriptions-item label="回调地址">{{ detailData.notifyUrl }}</el-descriptions-item>
<el-descriptions-item label="创建时间">
{{ formatDate(detailData.createTime) }}
{{ (detailData.channelFeeRate / 100.0).toFixed(2) }}%
</el-descriptions-item>
</el-descriptions>
<el-descriptions :column="2" label-class-name="desc-label">
<el-descriptions-item label="支付时间">
{{ formatDate(detailData.successTime) }}
</el-descriptions-item>
<el-descriptions-item label="失效时间">
{{ formatDate(detailData.expireTime) }}
</el-descriptions-item>
<el-descriptions-item label="通知时间">
{{ formatDate(detailData.notifyTime) }}
</el-descriptions>
<el-descriptions :column="2" label-class-name="desc-label">
<el-descriptions-item label="创建时间">
{{ formatDate(detailData.createTime) }}
</el-descriptions-item>
<el-descriptions-item label="更新时间">
{{ formatDate(detailData.updateTime) }}
</el-descriptions-item>
</el-descriptions>
<!-- 分割线 -->
<el-divider />
<el-descriptions :column="2">
<el-descriptions-item label="支付渠道"
>{{ detailData.channelCodeName }}
<el-descriptions :column="2" label-class-name="desc-label">
<el-descriptions-item label="商品标题">{{ detailData.subject }}</el-descriptions-item>
<el-descriptions-item label="商品描述">{{ detailData.body }}</el-descriptions-item>
</el-descriptions>
<el-descriptions :column="2" label-class-name="desc-label">
<el-descriptions-item label="支付渠道">
<dict-tag :type="DICT_TYPE.PAY_CHANNEL_CODE" :value="detailData.channelCode" />
</el-descriptions-item>
<el-descriptions-item label="支付IP">{{ detailData.userIp }}</el-descriptions-item>
<el-descriptions-item label="退款状态">
<dict-tag :type="DICT_TYPE.PAY_ORDER_REFUND_STATUS" :value="detailData.refundStatus" />
</el-descriptions-item>
<el-descriptions-item label="退款次数">{{ detailData.refundTimes }}</el-descriptions-item>
<el-descriptions-item label="退款金额">
<el-tag type="warning">
{{ parseFloat(detailData.refundPrice / 100, 2) }}
<el-descriptions-item label="支付 IP">{{ detailData.userIp }}</el-descriptions-item>
</el-descriptions>
<el-descriptions :column="2" label-class-name="desc-label">
<el-descriptions-item label="渠道单号">
<el-tag size="mini" type="success" v-if="detailData.channelOrderNo">
{{ detailData.channelOrderNo }}
</el-tag>
</el-descriptions-item>
<el-descriptions-item label="渠道用户">{{ detailData.channelUserId }}</el-descriptions-item>
</el-descriptions>
<el-divider />
<el-descriptions :column="1" border direction="vertical">
<el-descriptions-item label="商品描述">
{{ detailData.body }}
<el-descriptions :column="2" label-class-name="desc-label">
<el-descriptions-item label="退款金额">
<el-tag size="mini" type="danger">
￥{{ (detailData.refundPrice / 100.0).toFixed(2) }}
</el-tag>
</el-descriptions-item>
<el-descriptions-item label="通知 URL">{{ detailData.notifyUrl }}</el-descriptions-item>
</el-descriptions>
<!-- 分割线 -->
<el-divider />
<el-descriptions :column="1" label-class-name="desc-label" direction="vertical" border>
<el-descriptions-item label="支付通道异步回调内容">
<div style="width: 700px; overflow: auto">
{{ detailData.payOrderExtension?.channelNotifyData }}
</div>
{{ detailData.extension.channelNotifyData }}
</el-descriptions-item>
</el-descriptions>
</Dialog>
@ -87,7 +92,9 @@ defineOptions({ name: 'PayOrderDetail' })
const dialogVisible = ref(false) // 弹窗的是否展示
const detailLoading = ref(false) // 表单的加载中
const detailData = ref({})
const detailData = ref({
extension: {}
})
/** 打开弹窗 */
const open = async (id: number) => {
@ -96,6 +103,9 @@ const open = async (id: number) => {
detailLoading.value = true
try {
detailData.value = await OrderApi.getOrderDetail(id)
if (!detailData.value.extension) {
detailData.value.extension = {}
}
} finally {
detailLoading.value = false
}

107
src/views/pay/order/index.vue
View File

@ -1,4 +1,8 @@
<template>
<doc-alert title="支付宝支付接入" url="https://doc.iocoder.cn/pay/alipay-pay-demo/" />
<doc-alert title="微信公众号支付接入" url="https://doc.iocoder.cn/pay/wx-pub-pay-demo/" />
<doc-alert title="微信小程序支付接入" url="https://doc.iocoder.cn/pay/wx-lite-pay-demo/" />
<ContentWrap>
<el-form
class="-mb-15px"
@ -7,21 +11,6 @@
:inline="true"
label-width="100px"
>
<el-form-item label="所属商户" prop="merchantId">
<el-select
v-model="queryParams.merchantId"
clearable
placeholder="请选择所属商户"
class="!w-240px"
>
<el-option
v-for="item in merchantList"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select>
</el-form-item>
<el-form-item label="应用编号" prop="appId">
<el-select
clearable
@ -32,10 +21,10 @@
<el-option v-for="item in appList" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</el-form-item>
<el-form-item label="渠道编码" prop="channelCode">
<el-form-item label="支付渠道" prop="channelCode">
<el-select
v-model="queryParams.channelCode"
placeholder="请输入渠道编码"
placeholder="请选择支付渠道"
clearable
class="!w-240px"
>
@ -47,19 +36,28 @@
/>
</el-select>
</el-form-item>
<el-form-item label="商户订单编号" prop="merchantOrderId">
<el-form-item label="商户单号" prop="merchantOrderId">
<el-input
v-model="queryParams.merchantOrderId"
placeholder="请输入商户订单编号"
placeholder="请输入商户单号"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
<el-form-item label="渠道订单号" prop="channelOrderNo">
<el-form-item label="支付单号" prop="no">
<el-input
v-model="queryParams.no"
placeholder="请输入支付单号"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
<el-form-item label="渠道单号" prop="channelOrderNo">
<el-input
v-model="queryParams.channelOrderNo"
placeholder="请输入渠道订单号"
placeholder="请输入渠道单号"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
@ -80,36 +78,6 @@
/>
</el-select>
</el-form-item>
<el-form-item label="退款状态" prop="refundStatus">
<el-select
v-model="queryParams.refundStatus"
placeholder="请选择退款状态"
clearable
class="!w-240px"
>
<el-option
v-for="dict in getIntDictOptions(DICT_TYPE.PAY_ORDER_REFUND_STATUS)"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item label="回调商户状态" prop="notifyStatus">
<el-select
v-model="queryParams.notifyStatus"
placeholder="请选择订单回调商户状态"
clearable
class="!w-240px"
>
<el-option
v-for="dict in getIntDictOptions(DICT_TYPE.PAY_ORDER_NOTIFY_STATUS)"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item label="创建时间" prop="createTime">
<el-date-picker
v-model="queryParams.createTime"
@ -137,6 +105,7 @@
</el-form>
</ContentWrap>
<!-- 列表 -->
<ContentWrap>
<el-table v-loading="loading" :data="list">
<el-table-column label="编号" align="center" prop="id" width="80" />
@ -197,7 +166,6 @@
<el-button
type="primary"
link
size="small"
@click="openDetail(scope.row.id)"
v-hasPermi="['pay:order:query']"
>
@ -235,34 +203,16 @@ const list = ref([]) // 列表的数据
const queryParams = reactive({
pageNo: 1,
pageSize: 10,
merchantId: undefined,
appId: undefined,
channelId: undefined,
channelCode: undefined,
merchantOrderId: undefined,
subject: undefined,
body: undefined,
notifyUrl: undefined,
notifyStatus: undefined,
amount: undefined,
channelFeeRate: undefined,
channelFeeAmount: undefined,
status: undefined,
userIp: undefined,
successExtensionId: undefined,
refundStatus: undefined,
refundTimes: undefined,
refundAmount: undefined,
channelUserId: undefined,
channelOrderNo: undefined,
expireTime: [],
successTime: [],
notifyTime: [],
appId: null,
channelCode: null,
merchantOrderId: null,
channelOrderNo: null,
no: null,
status: null,
createTime: []
})
const queryFormRef = ref() // 搜索的表单
const exportLoading = ref(false) // 导出等待
const merchantList = ref([]) // 商户列表
const appList = ref([]) // 支付应用列表集合
/** 搜索按钮操作 */
@ -313,11 +263,6 @@ const openDetail = (id: number) => {
/** 初始化 **/
onMounted(async () => {
await getList()
// 加载商户列表
// merchantList.value = await MerchantApi.getMerchantListByName()
// 加载 App 列表
// TODO 芋艿：候选少一个查询应用列表的接口
// appList.value = await AppApi.getAppListByMerchantId()
})
</script>
<style>