Skip to content

phsl / admin

Go to a project
Commit bf667270 by YunaiV
Options

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

parent 1ab7ea06
Showing with 87 additions and 132 deletions
src/views/pay/order/OrderDetail.vue
<template> <template>
<Dialog v-model="dialogVisible" title="详情" width="50%"> <Dialog v-model="dialogVisible" title="订单详情" width="700px">
<el-descriptions :column="2"> <el-descriptions :column="2" label-class-name="desc-label">
<el-descriptions-item label="商户名称">{{ detailData.merchantName }}</el-descriptions-item> <el-descriptions-item label="商户单号">
<el-descriptions-item label="应用名称">{{ detailData.appName }}</el-descriptions-item> <el-tag size="small">{{ detailData.merchantOrderId }}</el-tag>
<el-descriptions-item label="商品名称">{{ detailData.subject }}</el-descriptions-item>
</el-descriptions>
<el-divider />
<el-descriptions :column="2">
<el-descriptions-item label="商户订单号">
<el-tag>{{ detailData.merchantOrderId }}</el-tag>
</el-descriptions-item> </el-descriptions-item>
<el-descriptions-item label="渠道订单号"> <el-descriptions-item label="支付单号">
<el-tag class="tag-purple">{{ detailData.channelOrderNo }}</el-tag> <el-tag type="warning" size="small" v-if="detailData.no">{{ detailData.no }}</el-tag>
</el-descriptions-item> </el-descriptions-item>
<el-descriptions-item label="支付订单号"> </el-descriptions>
<el-tag v-if="detailData.payOrderExtension" class="tag-pink"> <el-descriptions :column="2" label-class-name="desc-label">
{{ detailData.payOrderExtension.no }} <el-descriptions-item label="应用编号">{{ detailData.appId }}</el-descriptions-item>
</el-tag> <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>
<el-descriptions-item label="金额"> <el-descriptions-item label="支付金额">
<el-tag type="success">￥{{ parseFloat(detailData.price / 100, 2).toFixed(2) }}</el-tag> <el-tag type="success" size="small">￥{{ (detailData.price / 100.0).toFixed(2) }}</el-tag>
</el-descriptions-item> </el-descriptions-item>
</el-descriptions>
<el-descriptions :column="2" label-class-name="desc-label">
<el-descriptions-item label="手续费"> <el-descriptions-item label="手续费">
<el-tag type="warning"> <el-tag type="warning" size="small">
￥{{ parseFloat(detailData.channelFeePrice / 100, 2).toFixed(2) }} ￥{{ (detailData.channelFeePrice / 100.0).toFixed(2) }}
</el-tag> </el-tag>
</el-descriptions-item> </el-descriptions-item>
<el-descriptions-item label="手续费比例"> <el-descriptions-item label="手续费比例">
{{ parseFloat(detailData.channelFeeRate / 100, 2) }}% {{ (detailData.channelFeeRate / 100.0).toFixed(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) }}
</el-descriptions-item> </el-descriptions-item>
</el-descriptions>
<el-descriptions :column="2" label-class-name="desc-label">
<el-descriptions-item label="支付时间"> <el-descriptions-item label="支付时间">
{{ formatDate(detailData.successTime) }} {{ formatDate(detailData.successTime) }}
</el-descriptions-item> </el-descriptions-item>
<el-descriptions-item label="失效时间"> <el-descriptions-item label="失效时间">
{{ formatDate(detailData.expireTime) }} {{ formatDate(detailData.expireTime) }}
</el-descriptions-item> </el-descriptions-item>
<el-descriptions-item label="通知时间"> </el-descriptions>
{{ formatDate(detailData.notifyTime) }} <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-item>
</el-descriptions> </el-descriptions>
<!-- 分割线 -->
<el-divider /> <el-divider />
<el-descriptions :column="2"> <el-descriptions :column="2" label-class-name="desc-label">
<el-descriptions-item label="支付渠道" <el-descriptions-item label="商品标题">{{ detailData.subject }}</el-descriptions-item>
>{{ detailData.channelCodeName }} <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>
<el-descriptions-item label="支付IP">{{ detailData.userIp }}</el-descriptions-item> <el-descriptions-item label="支付 IP">{{ detailData.userIp }}</el-descriptions-item>
<el-descriptions-item label="退款状态"> </el-descriptions>
<dict-tag :type="DICT_TYPE.PAY_ORDER_REFUND_STATUS" :value="detailData.refundStatus" /> <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>
<el-descriptions-item label="退款次数">{{ detailData.refundTimes }}</el-descriptions-item> <el-descriptions-item label="渠道用户">{{ detailData.channelUserId }}</el-descriptions-item>
</el-descriptions>
<el-descriptions :column="2" label-class-name="desc-label">
<el-descriptions-item label="退款金额"> <el-descriptions-item label="退款金额">
<el-tag type="warning"> <el-tag size="mini" type="danger">
{{ parseFloat(detailData.refundPrice / 100, 2) }} ￥{{ (detailData.refundPrice / 100.0).toFixed(2) }}
</el-tag> </el-tag>
</el-descriptions-item> </el-descriptions-item>
<el-descriptions-item label="通知 URL">{{ detailData.notifyUrl }}</el-descriptions-item>
</el-descriptions> </el-descriptions>
<!-- 分割线 -->
<el-divider /> <el-divider />
<el-descriptions :column="1" border direction="vertical"> <el-descriptions :column="1" label-class-name="desc-label" direction="vertical" border>
<el-descriptions-item label="商品描述">
{{ detailData.body }}
</el-descriptions-item>
<el-descriptions-item label="支付通道异步回调内容"> <el-descriptions-item label="支付通道异步回调内容">
<div style="width: 700px; overflow: auto"> {{ detailData.extension.channelNotifyData }}
{{ detailData.payOrderExtension?.channelNotifyData }}
</div>
</el-descriptions-item> </el-descriptions-item>
</el-descriptions> </el-descriptions>
</Dialog> </Dialog>
...@@ -87,7 +92,9 @@ defineOptions({ name: 'PayOrderDetail' }) ...@@ -87,7 +92,9 @@ defineOptions({ name: 'PayOrderDetail' })
const dialogVisible = ref(false) // 弹窗的是否展示 const dialogVisible = ref(false) // 弹窗的是否展示
const detailLoading = ref(false) // 表单的加载中 const detailLoading = ref(false) // 表单的加载中
const detailData = ref({}) const detailData = ref({
extension: {}
})
/** 打开弹窗 */ /** 打开弹窗 */
const open = async (id: number) => { const open = async (id: number) => {
...@@ -96,6 +103,9 @@ const open = async (id: number) => { ...@@ -96,6 +103,9 @@ const open = async (id: number) => {
detailLoading.value = true detailLoading.value = true
try { try {
detailData.value = await OrderApi.getOrderDetail(id) detailData.value = await OrderApi.getOrderDetail(id)
if (!detailData.value.extension) {
detailData.value.extension = {}
}
} finally { } finally {
detailLoading.value = false detailLoading.value = false
} }
......
src/views/pay/order/index.vue
<template> <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> <ContentWrap>
<el-form <el-form
class="-mb-15px" class="-mb-15px"
...@@ -7,21 +11,6 @@ ...@@ -7,21 +11,6 @@
:inline="true" :inline="true"
label-width="100px" 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-form-item label="应用编号" prop="appId">
<el-select <el-select
clearable clearable
...@@ -32,10 +21,10 @@ ...@@ -32,10 +21,10 @@
<el-option v-for="item in appList" :key="item.id" :label="item.name" :value="item.id" /> <el-option v-for="item in appList" :key="item.id" :label="item.name" :value="item.id" />
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="渠道编码" prop="channelCode"> <el-form-item label="支付渠道" prop="channelCode">
<el-select <el-select
v-model="queryParams.channelCode" v-model="queryParams.channelCode"
placeholder="请输入渠道编码" placeholder="请选择支付渠道"
clearable clearable
class="!w-240px" class="!w-240px"
> >
...@@ -47,19 +36,28 @@ ...@@ -47,19 +36,28 @@
/> />
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="商户订单编号" prop="merchantOrderId"> <el-form-item label="商户单号" prop="merchantOrderId">
<el-input <el-input
v-model="queryParams.merchantOrderId" v-model="queryParams.merchantOrderId"
placeholder="请输入商户订单编号" placeholder="请输入商户单号"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
<el-form-item label="支付单号" prop="no">
<el-input
v-model="queryParams.no"
placeholder="请输入支付单号"
clearable clearable
@keyup.enter="handleQuery" @keyup.enter="handleQuery"
class="!w-240px" class="!w-240px"
/> />
</el-form-item> </el-form-item>
<el-form-item label="渠道订单号" prop="channelOrderNo"> <el-form-item label="渠道单号" prop="channelOrderNo">
<el-input <el-input
v-model="queryParams.channelOrderNo" v-model="queryParams.channelOrderNo"
placeholder="请输入渠道订单号" placeholder="请输入渠道单号"
clearable clearable
@keyup.enter="handleQuery" @keyup.enter="handleQuery"
class="!w-240px" class="!w-240px"
...@@ -80,36 +78,6 @@ ...@@ -80,36 +78,6 @@
/> />
</el-select> </el-select>
</el-form-item> </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-form-item label="创建时间" prop="createTime">
<el-date-picker <el-date-picker
v-model="queryParams.createTime" v-model="queryParams.createTime"
...@@ -137,6 +105,7 @@ ...@@ -137,6 +105,7 @@
</el-form> </el-form>
</ContentWrap> </ContentWrap>
<!-- 列表 -->
<ContentWrap> <ContentWrap>
<el-table v-loading="loading" :data="list"> <el-table v-loading="loading" :data="list">
<el-table-column label="编号" align="center" prop="id" width="80" /> <el-table-column label="编号" align="center" prop="id" width="80" />
...@@ -197,7 +166,6 @@ ...@@ -197,7 +166,6 @@
<el-button <el-button
type="primary" type="primary"
link link
size="small"
@click="openDetail(scope.row.id)" @click="openDetail(scope.row.id)"
v-hasPermi="['pay:order:query']" v-hasPermi="['pay:order:query']"
> >
...@@ -235,34 +203,16 @@ const list = ref([]) // 列表的数据 ...@@ -235,34 +203,16 @@ const list = ref([]) // 列表的数据
const queryParams = reactive({ const queryParams = reactive({
pageNo: 1, pageNo: 1,
pageSize: 10, pageSize: 10,
merchantId: undefined, appId: null,
appId: undefined, channelCode: null,
channelId: undefined, merchantOrderId: null,
channelCode: undefined, channelOrderNo: null,
merchantOrderId: undefined, no: null,
subject: undefined, status: null,
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: [],
createTime: [] createTime: []
}) })
const queryFormRef = ref() // 搜索的表单 const queryFormRef = ref() // 搜索的表单
const exportLoading = ref(false) // 导出等待 const exportLoading = ref(false) // 导出等待
const merchantList = ref([]) // 商户列表
const appList = ref([]) // 支付应用列表集合 const appList = ref([]) // 支付应用列表集合
/** 搜索按钮操作 */ /** 搜索按钮操作 */
...@@ -313,16 +263,11 @@ const openDetail = (id: number) => { ...@@ -313,16 +263,11 @@ const openDetail = (id: number) => {
/** 初始化 **/ /** 初始化 **/
onMounted(async () => { onMounted(async () => {
await getList() await getList()
// 加载商户列表
// merchantList.value = await MerchantApi.getMerchantListByName()
// 加载 App 列表
// TODO 芋艿：候选少一个查询应用列表的接口
// appList.value = await AppApi.getAppListByMerchantId()
}) })
</script> </script>
<style> <style>
.order-font { .order-font {
padding: 2px 0;
font-size: 12px; font-size: 12px;
padding: 2px 0;
} }
</style> </style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment