From 30cf8008ce967dc9f14b09ce7cc7b2d814552c4b Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Tue, 11 Apr 2023 23:01:51 +0800
Subject: [PATCH] =?UTF-8?q?REVIEW=20=E9=80=80=E6=AC=BE=E8=AE=A2=E5=8D=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/views/pay/order/index.vue | 4 +-
src/views/pay/refund/RefundDetail.vue | 115 +++++++++
src/views/pay/refund/index.vue | 338 ++++++++++++--------------
src/views/pay/refund/refundForm.vue | 154 ------------
4 files changed, 277 insertions(+), 334 deletions(-)
create mode 100644 src/views/pay/refund/RefundDetail.vue
delete mode 100644 src/views/pay/refund/refundForm.vue
diff --git a/src/views/pay/order/index.vue b/src/views/pay/order/index.vue
index ba04d0d9..72e5128b 100644
--- a/src/views/pay/order/index.vue
+++ b/src/views/pay/order/index.vue
@@ -233,7 +233,7 @@ import { DICT_TYPE, getIntDictOptions, getStrDictOptions } from '@/utils/dict'
import { dateFormatter } from '@/utils/formatTime'
import * as MerchantApi from '@/api/pay/merchant'
import * as OrderApi from '@/api/pay/order'
-import OrderDetail from '@/views/pay/order/OrderDetail.vue'
+import OrderDetail from './OrderDetail.vue'
const message = useMessage() // 消息弹窗
import download from '@/utils/download'
@@ -314,7 +314,7 @@ const handleExport = async () => {
/** 预览详情 */
const detailRef = ref()
-const openDetail = (id?: number) => {
+const openDetail = (id: number) => {
detailRef.value.open(id)
}
diff --git a/src/views/pay/refund/RefundDetail.vue b/src/views/pay/refund/RefundDetail.vue
new file mode 100644
index 00000000..8a47c6f6
--- /dev/null
+++ b/src/views/pay/refund/RefundDetail.vue
@@ -0,0 +1,115 @@
+<template>
+ <Dialog title="详情" v-model="dialogVisible" 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>
+ </el-descriptions>
+ <el-divider />
+ <el-descriptions :column="2">
+ <el-descriptions-item label="商户退款单号">
+ <el-tag>{{ detailData.merchantRefundNo }}</el-tag>
+ </el-descriptions-item>
+ <el-descriptions-item label="商户订单号">
+ {{ detailData.merchantOrderId }}
+ </el-descriptions-item>
+ <el-descriptions-item label="交易订单号">{{ detailData.tradeNo }}</el-descriptions-item>
+ </el-descriptions>
+ <el-divider />
+ <el-descriptions :column="2">
+ <el-descriptions-item label="支付金额">
+ <el-tag type="success">￥{{ parseFloat(detailData.payAmount / 100, 2).toFixed(2) }}</el-tag>
+ </el-descriptions-item>
+ <el-descriptions-item label="退款金额">
+ <el-tag class="tag-purple">
+ ￥{{ parseFloat(detailData.refundAmount / 100).toFixed(2) }}
+ </el-tag>
+ </el-descriptions-item>
+ <el-descriptions-item label="退款类型">
+ <dict-tag :type="DICT_TYPE.PAY_REFUND_ORDER_TYPE" :value="detailData.type" />
+ </el-descriptions-item>
+ <el-descriptions-item label="退款状态">
+ <dict-tag :type="DICT_TYPE.PAY_REFUND_ORDER_STATUS" :value="detailData.status" />
+ </el-descriptions-item>
+ <el-descriptions-item label="创建时间">
+ {{ formatDate(detailData.createTime) }}
+ </el-descriptions-item>
+ <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.updateTime) }}
+ </el-descriptions-item>
+ </el-descriptions>
+ <el-divider />
+ <el-descriptions :column="2">
+ <el-descriptions-item label="支付渠道">
+ {{ detailData.channelCodeName }}
+ </el-descriptions-item>
+ <el-descriptions-item label="支付 IP">
+ {{ detailData.userIp }}
+ </el-descriptions-item>
+ <el-descriptions-item label="回调地址">{{ detailData.notifyUrl }}</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="回调时间">
+ {{ formatDate(detailData.notifyTime) }}
+ </el-descriptions-item>
+ </el-descriptions>
+ <el-divider />
+ <el-descriptions :column="2">
+ <el-descriptions-item label="渠道订单号">
+ {{ detailData.channelOrderNo }}
+ </el-descriptions-item>
+ <el-descriptions-item label="渠道退款单号">
+ {{ detailData.channelRefundNo }}
+ </el-descriptions-item>
+ <el-descriptions-item label="渠道错误码">
+ {{ detailData.channelErrorCode }}
+ </el-descriptions-item>
+ <el-descriptions-item label="渠道错误码描述">
+ {{ detailData.channelErrorMsg }}
+ </el-descriptions-item>
+ </el-descriptions>
+ <br />
+ <el-descriptions :column="1" direction="vertical" border>
+ <el-descriptions-item label="渠道额外参数">
+ {{ detailData.channelExtras }}
+ </el-descriptions-item>
+ <el-descriptions-item label="退款原因">{{ detailData.reason }}</el-descriptions-item>
+ </el-descriptions>
+ </Dialog>
+</template>
+<script setup lang="ts" name="refundForm">
+import { DICT_TYPE } from '@/utils/dict'
+import { formatDate } from '@/utils/formatTime'
+import * as RefundApi from '@/api/pay/refund'
+
+const dialogVisible = ref(false) // 弹窗的是否展示
+const detailLoading = ref(false) // 表单的加载中
+const detailData = ref({})
+
+/** 打开弹窗 */
+const open = async (id: number) => {
+ dialogVisible.value = true
+ // 设置数据
+ detailLoading.value = true
+ try {
+ detailData.value = await RefundApi.getRefund(id)
+ } finally {
+ detailLoading.value = false
+ }
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+</script>
+<style>
+.tag-purple {
+ color: #722ed1;
+ background: #f9f0ff;
+ border-color: #d3adf7;
+}
+</style>
diff --git a/src/views/pay/refund/index.vue b/src/views/pay/refund/index.vue
index a17f5552..17ca2a0d 100644
--- a/src/views/pay/refund/index.vue
+++ b/src/views/pay/refund/index.vue
@@ -1,10 +1,10 @@
<template>
+ <!-- 搜索工作栏 -->
<ContentWrap>
- <!-- 搜索工作栏 -->
<el-form
+ class="-mb-15px"
:model="queryParams"
ref="queryFormRef"
- size="small"
:inline="true"
label-width="120px"
>
@@ -12,18 +12,8 @@
<el-select
v-model="queryParams.merchantId"
clearable
- @clear="
- () => {
- queryParams.merchantId = null
- }
- "
- filterable
- remote
- reserve-keyword
placeholder="请选择所属商户"
- @change="handleGetAppListByMerchantId"
- :remote-method="handleGetMerchantListByName"
- :loading="merchantLoading"
+ class="!w-240px"
>
<el-option
v-for="item in merchantList"
@@ -34,7 +24,12 @@
</el-select>
</el-form-item>
<el-form-item label="应用编号" prop="appId">
- <el-select clearable v-model="queryParams.appId" filterable placeholder="请选择应用信息">
+ <el-select
+ v-model="queryParams.appId"
+ clearable
+ placeholder="请选择应用信息"
+ class="!w-240px"
+ >
<el-option v-for="item in appList" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</el-form-item>
@@ -43,14 +38,10 @@
v-model="queryParams.channelCode"
placeholder="请输入渠道编码"
clearable
- @clear="
- () => {
- queryParams.channelCode = null
- }
- "
+ class="!w-240px"
>
<el-option
- v-for="dict in getDictOptions(DICT_TYPE.PAY_CHANNEL_CODE_TYPE)"
+ v-for="dict in getStrDictOptions(DICT_TYPE.PAY_CHANNEL_CODE_TYPE)"
:key="dict.value"
:label="dict.label"
:value="dict.value"
@@ -58,12 +49,17 @@
</el-select>
</el-form-item>
<el-form-item label="退款类型" prop="type">
- <el-select v-model="queryParams.type" placeholder="请选择退款类型" clearable>
+ <el-select
+ v-model="queryParams.type"
+ placeholder="请选择退款类型"
+ clearable
+ class="!w-240px"
+ >
<el-option
- v-for="dict in getDictOptions(DICT_TYPE.PAY_REFUND_ORDER_TYPE)"
- :key="parseInt(dict.value)"
+ v-for="dict in getIntDictOptions(DICT_TYPE.PAY_REFUND_ORDER_TYPE)"
+ :key="dict.value"
:label="dict.label"
- :value="parseInt(dict.value)"
+ :value="dict.value"
/>
</el-select>
</el-form-item>
@@ -73,15 +69,21 @@
placeholder="请输入商户退款订单号"
clearable
@keyup.enter="handleQuery"
+ class="!w-240px"
/>
</el-form-item>
<el-form-item label="退款状态" prop="status">
- <el-select v-model="queryParams.status" placeholder="请选择退款状态" clearable>
+ <el-select
+ v-model="queryParams.status"
+ placeholder="请选择退款状态"
+ clearable
+ class="!w-240px"
+ >
<el-option
- v-for="dict in getDictOptions(DICT_TYPE.PAY_REFUND_ORDER_STATUS)"
- :key="parseInt(dict.value)"
+ v-for="dict in getIntDictOptions(DICT_TYPE.PAY_REFUND_ORDER_STATUS)"
+ :key="dict.value"
:label="dict.label"
- :value="parseInt(dict.value)"
+ :value="dict.value"
/>
</el-select>
</el-form-item>
@@ -90,12 +92,13 @@
v-model="queryParams.notifyStatus"
placeholder="请选择通知商户退款结果的回调状态"
clearable
+ class="!w-240px"
>
<el-option
- v-for="dict in getDictOptions(DICT_TYPE.PAY_ORDER_NOTIFY_STATUS)"
- :key="parseInt(dict.value)"
+ v-for="dict in getIntDictOptions(DICT_TYPE.PAY_ORDER_NOTIFY_STATUS)"
+ :key="dict.value"
:label="dict.label"
- :value="parseInt(dict.value)"
+ :value="dict.value"
/>
</el-select>
</el-form-item>
@@ -111,14 +114,8 @@
/>
</el-form-item>
<el-form-item>
- <el-button @click="handleQuery">
- <Icon icon="ep:search" class="mr-5px" />
- 搜索
- </el-button>
- <el-button @click="resetQuery">
- <Icon icon="ep:refresh" class="mr-5px" />
- 重置
- </el-button>
+ <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
+ <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
<el-button
type="success"
plain
@@ -126,108 +123,103 @@
:loading="exportLoading"
v-hasPermi="['system:tenant:export']"
>
- <Icon icon="ep:download" class="mr-5px" />
- 导出
+ <Icon icon="ep:download" class="mr-5px" /> 导出
</el-button>
</el-form-item>
</el-form>
</ContentWrap>
- <el-table v-loading="loading" :data="list">
- <el-table-column label="编号" align="center" prop="id" />
- <el-table-column label="商户名称" align="center" prop="merchantName" width="120" />
- <el-table-column label="应用名称" align="center" prop="appName" width="120" />
- <el-table-column label="渠道名称" align="center" prop="channelCodeName" width="120" />
- <el-table-column label="交易订单号" align="center" prop="tradeNo" width="140" />
- <el-table-column label="商户订单编号" align="center" prop="merchantOrderId" width="140" />
- <el-table-column label="商户订单号" align="left" width="230">
- <template #default="scope">
- <p class="order-font">
- <el-tag size="small">退款</el-tag>
- {{ scope.row.merchantRefundNo }}
- </p>
- <p class="order-font">
- <el-tag type="success">交易</el-tag>
- {{ scope.row.merchantOrderId }}
- </p>
- </template>
- </el-table-column>
- <el-table-column label="支付订单号" align="center" prop="merchantRefundNo" width="250">
- <template #default="scope">
- <p class="order-font">
- <el-tag size="small">交易</el-tag>
- {{ scope.row.tradeNo }}
- </p>
- <p class="order-font">
- <el-tag size="small" type="warning">渠道</el-tag>
- {{ scope.row.channelOrderNo }}
- </p>
- </template>
- </el-table-column>
- <el-table-column label="支付金额(元)" align="center" prop="payAmount" width="100">
- <template #default="scope">
- ￥{{ parseFloat(scope.row.payAmount / 100).toFixed(2) }}
- </template>
- </el-table-column>
- <el-table-column label="退款金额(元)" align="center" prop="refundAmount" width="100">
- <template #default="scope">
- ￥{{ parseFloat(scope.row.refundAmount / 100).toFixed(2) }}
- </template>
- </el-table-column>
- <el-table-column label="退款类型" align="center" prop="type" width="80">
- <template #default="scope">
- <dict-tag :type="DICT_TYPE.PAY_REFUND_ORDER_TYPE" :value="scope.row.type" />
- </template>
- </el-table-column>
- <el-table-column label="退款状态" align="center" prop="status">
- <template #default="scope">
- <dict-tag :type="DICT_TYPE.PAY_REFUND_ORDER_STATUS" :value="scope.row.status" />
- </template>
- </el-table-column>
- <el-table-column label="回调状态" align="center" prop="notifyStatus">
- <template #default="scope">
- <dict-tag :type="DICT_TYPE.PAY_ORDER_NOTIFY_STATUS" :value="scope.row.notifyStatus" />
- </template>
- </el-table-column>
- <el-table-column
- label="退款原因"
- align="center"
- prop="reason"
- width="140"
- :show-overflow-tooltip="true"
- />
- <el-table-column
- label="创建时间"
- align="center"
- prop="createTime"
- width="100"
- :formatter="dateFormatter"
- />
- <el-table-column
- label="退款成功时间"
- align="center"
- prop="successTime"
- width="100"
- :formatter="dateFormatter"
- />
- <el-table-column
- label="操作"
- align="center"
- fixed="right"
- class-name="small-padding fixed-width"
- >
- <template #default="scope">
- <el-button
- size="small"
- type="text"
- icon="el-icon-search"
- @click="openForm(scope.row.id)"
- v-hasPermi="['pay:order:query']"
- >查看详情
- </el-button>
- </template>
- </el-table-column>
- </el-table>
+
<ContentWrap>
+ <el-table v-loading="loading" :data="list">
+ <el-table-column label="编号" align="center" prop="id" />
+ <el-table-column label="商户名称" align="center" prop="merchantName" width="120" />
+ <el-table-column label="应用名称" align="center" prop="appName" width="120" />
+ <el-table-column label="渠道名称" align="center" prop="channelCodeName" width="120" />
+ <el-table-column label="交易订单号" align="center" prop="tradeNo" width="140" />
+ <el-table-column label="商户订单编号" align="center" prop="merchantOrderId" width="140" />
+ <el-table-column label="商户订单号" align="left" width="230">
+ <template #default="scope">
+ <p class="order-font">
+ <el-tag>退款</el-tag>
+ {{ scope.row.merchantRefundNo }}
+ </p>
+ <p class="order-font">
+ <el-tag type="success">交易</el-tag>
+ {{ scope.row.merchantOrderId }}
+ </p>
+ </template>
+ </el-table-column>
+ <el-table-column label="支付订单号" align="center" prop="merchantRefundNo" width="250">
+ <template #default="scope">
+ <p class="order-font">
+ <el-tag>交易</el-tag>
+ {{ scope.row.tradeNo }}
+ </p>
+ <p class="order-font">
+ <el-tag type="warning">渠道</el-tag>
+ {{ scope.row.channelOrderNo }}
+ </p>
+ </template>
+ </el-table-column>
+ <el-table-column label="支付金额(元)" align="center" prop="payAmount" width="100">
+ <template #default="scope">
+ ￥{{ parseFloat(scope.row.payAmount / 100).toFixed(2) }}
+ </template>
+ </el-table-column>
+ <el-table-column label="退款金额(元)" align="center" prop="refundAmount" width="100">
+ <template #default="scope">
+ ￥{{ parseFloat(scope.row.refundAmount / 100).toFixed(2) }}
+ </template>
+ </el-table-column>
+ <el-table-column label="退款类型" align="center" prop="type" width="80">
+ <template #default="scope">
+ <dict-tag :type="DICT_TYPE.PAY_REFUND_ORDER_TYPE" :value="scope.row.type" />
+ </template>
+ </el-table-column>
+ <el-table-column label="退款状态" align="center" prop="status">
+ <template #default="scope">
+ <dict-tag :type="DICT_TYPE.PAY_REFUND_ORDER_STATUS" :value="scope.row.status" />
+ </template>
+ </el-table-column>
+ <el-table-column label="回调状态" align="center" prop="notifyStatus">
+ <template #default="scope">
+ <dict-tag :type="DICT_TYPE.PAY_ORDER_NOTIFY_STATUS" :value="scope.row.notifyStatus" />
+ </template>
+ </el-table-column>
+ <el-table-column
+ label="退款原因"
+ align="center"
+ prop="reason"
+ width="140"
+ :show-overflow-tooltip="true"
+ />
+ <el-table-column
+ label="创建时间"
+ align="center"
+ prop="createTime"
+ width="180"
+ :formatter="dateFormatter"
+ />
+ <el-table-column
+ label="退款成功时间"
+ align="center"
+ prop="successTime"
+ width="180"
+ :formatter="dateFormatter"
+ />
+ <el-table-column label="操作" align="center" fixed="right">
+ <template #default="scope">
+ <el-button
+ type="primary"
+ link
+ @click="openDetail(scope.row.id)"
+ v-hasPermi="['pay:order:query']"
+ >
+ 详情
+ </el-button>
+ </template>
+ </el-table-column>
+ </el-table>
<!-- 分页 -->
<Pagination
:total="total"
@@ -236,27 +228,22 @@
@pagination="getList"
/>
</ContentWrap>
+
<!-- 表单弹窗：预览 -->
- <RefundForm ref="formRef" @success="getList" />
+ <RefundDetail ref="detailRef" @success="getList" />
</template>
-<script setup lang="ts" name="Refund">
-import * as AppApi from '@/api/pay/app'
+<script setup lang="ts" name="PayRefund">
+import { DICT_TYPE, getIntDictOptions, getStrDictOptions } from '@/utils/dict'
+import { dateFormatter } from '@/utils/formatTime'
import * as MerchantApi from '@/api/pay/merchant'
import * as RefundApi from '@/api/pay/refund'
-import { DICT_TYPE, getDictOptions } from '@/utils/dict'
-import download from '@/utils/download'
-import { dateFormatter } from '@/utils/formatTime'
-import RefundForm from '@/views/pay/refund/refundForm.vue'
-
-const merchantLoading = ref(false) // 商户加载遮罩层
+import RefundDetail from './RefundDetail.vue'
const message = useMessage() // 消息弹窗
-const appList = ref([]) // 支付应用列表集合
-const merchantList = ref([]) // 商户列表
-const exportLoading = ref(false) // 导出等待
+import download from '@/utils/download'
+
const loading = ref(false) // 列表遮罩层
const total = ref(0) // 列表的总页数
const list = ref([]) // 列表的数据
-const queryFormRef = ref() // 搜索的表单
const queryParams = reactive({
pageNo: 1,
pageSize: 10,
@@ -286,26 +273,10 @@ const queryParams = reactive({
notifyTime: [],
createTime: []
})
-
-/**
- * 根据商户 ID 查询支付应用信息
- */
-const handleGetAppListByMerchantId = () => {
- queryParams.appId = undefined
- if (queryParams.merchantId) {
- AppApi.getAppListByMerchantId(queryParams.merchantId).then((response) => {
- appList.value = response.data
- })
- }
-}
-
-/**
- * 根据商户名称模糊匹配商户信息
- * @param name 商户名称
- */
-const handleGetMerchantListByName = async (name) => {
- merchantList.value = await MerchantApi.getMerchantListByName(name)
-}
+const queryFormRef = ref() // 搜索的表单
+const exportLoading = ref(false) // 导出等待
+const appList = ref([]) // 支付应用列表集合
+const merchantList = ref([]) // 商户列表
/** 搜索按钮操作 */
const handleQuery = () => {
@@ -333,21 +304,32 @@ const resetQuery = () => {
/** 导出按钮操作 */
const handleExport = async () => {
- // 导出的二次确认
- await message.exportConfirm()
- // 发起导出
- exportLoading.value = true
- const data = await RefundApi.exportRefund(queryParams)
- download.excel(data, '退款订单.xls')
+ try {
+ // 导出的二次确认
+ await message.exportConfirm()
+ // 发起导出
+ exportLoading.value = true
+ const data = await RefundApi.exportRefund(queryParams)
+ download.excel(data, '支付订单.xls')
+ } catch {
+ } finally {
+ exportLoading.value = false
+ }
}
+
/** 预览详情 */
-const formRef = ref()
-const openForm = (id?: number) => {
- formRef.value.open(id)
+const detailRef = ref()
+const openDetail = (id: number) => {
+ detailRef.value.open(id)
}
+
/** 初始化 **/
onMounted(async () => {
await getList()
+ // 加载商户列表
+ merchantList.value = await MerchantApi.getMerchantListByName()
+ // TODO 芋艿：候选少一个查询应用列表的接口
+ // appList.value = await AppApi.getAppListByMerchantId()
})
</script>
diff --git a/src/views/pay/refund/refundForm.vue b/src/views/pay/refund/refundForm.vue
deleted file mode 100644
index cc9d8726..00000000
--- a/src/views/pay/refund/refundForm.vue
+++ /dev/null
@@ -1,154 +0,0 @@
-<template>
- <Dialog :title="dialogTitle" v-model="dialogVisible" width="50%">
- <el-descriptions :column="2" label-class-name="desc-label">
- <el-descriptions-item label="商户名称">{{ refundDetail.merchantName }}</el-descriptions-item>
- <el-descriptions-item label="应用名称">{{ refundDetail.appName }}</el-descriptions-item>
- <el-descriptions-item label="商品名称">{{ refundDetail.subject }}</el-descriptions-item>
- </el-descriptions>
- <el-divider />
- <el-descriptions :column="2" label-class-name="desc-label">
- <el-descriptions-item label="商户退款单号">
- <el-tag size="small">{{ refundDetail.merchantRefundNo }}</el-tag>
- </el-descriptions-item>
- <el-descriptions-item label="商户订单号"
- >{{ refundDetail.merchantOrderId }}
- </el-descriptions-item>
- <el-descriptions-item label="交易订单号">{{ refundDetail.tradeNo }}</el-descriptions-item>
- </el-descriptions>
- <el-divider />
- <el-descriptions :column="2" label-class-name="desc-label">
- <el-descriptions-item label="支付金额">
- {{ parseFloat(refundDetail.payAmount / 100).toFixed(2) }}
- </el-descriptions-item>
- <el-descriptions-item label="退款金额" size="small">
- <el-tag class="tag-purple" size="small">
- {{ parseFloat(refundDetail.refundAmount / 100).toFixed(2) }}
- </el-tag>
- </el-descriptions-item>
- <el-descriptions-item label="退款类型">
- <dict-tag :type="DICT_TYPE.PAY_REFUND_ORDER_TYPE" :value="refundDetail.type" />
- </el-descriptions-item>
- <el-descriptions-item label="退款状态">
- <dict-tag :type="DICT_TYPE.PAY_REFUND_ORDER_STATUS" :value="refundDetail.status" />
- </el-descriptions-item>
- <el-descriptions-item label="创建时间"
- >{{ formatDate(refundDetail.createTime) }}
- </el-descriptions-item>
- <el-descriptions-item label="退款成功时间"
- >{{ formatDate(refundDetail.successTime) }}
- </el-descriptions-item>
- <el-descriptions-item label="退款失效时间"
- >{{ formatDate(refundDetail.expireTime) }}
- </el-descriptions-item>
- <el-descriptions-item label="更新时间"
- >{{ formatDate(refundDetail.updateTime) }}
- </el-descriptions-item>
- </el-descriptions>
- <el-divider />
- <el-descriptions :column="2" label-class-name="desc-label">
- <el-descriptions-item label="支付渠道">
- {{ refundDetail.channelCodeName }}
- </el-descriptions-item>
- <el-descriptions-item label="支付IP" size="small">
- {{ refundDetail.userIp }}
- </el-descriptions-item>
- <el-descriptions-item label="回调地址">{{ refundDetail.notifyUrl }}</el-descriptions-item>
- <el-descriptions-item label="回调状态">
- <dict-tag :type="DICT_TYPE.PAY_ORDER_NOTIFY_STATUS" :value="refundDetail.notifyStatus" />
- </el-descriptions-item>
- <el-descriptions-item label="回调时间"
- >{{ formatDate(refundDetail.notifyTime) }}
- </el-descriptions-item>
- </el-descriptions>
- <el-divider />
- <el-descriptions :column="2" label-class-name="desc-label">
- <el-descriptions-item label="渠道订单号"
- >{{ refundDetail.channelOrderNo }}
- </el-descriptions-item>
- <el-descriptions-item label="渠道退款单号"
- >{{ refundDetail.channelRefundNo }}
- </el-descriptions-item>
- <el-descriptions-item label="渠道错误码"
- >{{ refundDetail.channelErrorCode }}
- </el-descriptions-item>
- <el-descriptions-item label="渠道错误码描述"
- >{{ refundDetail.channelErrorMsg }}
- </el-descriptions-item>
- </el-descriptions>
- <br />
- <el-descriptions :column="1" label-class-name="desc-label" direction="vertical" border>
- <el-descriptions-item label="渠道额外参数"
- >{{ refundDetail.channelExtras }}
- </el-descriptions-item>
- <el-descriptions-item label="退款原因">{{ refundDetail.reason }}</el-descriptions-item>
- </el-descriptions>
- </Dialog>
-</template>
-<script setup lang="ts" name="refundForm">
-import { DICT_TYPE } from '@/utils/dict'
-import * as RefundApi from '@/api/pay/refund'
-import { formatDate } from '@/utils/formatTime'
-
-const { t } = useI18n() // 国际化
-// const message = useMessage() // 消息弹窗
-const dialogVisible = ref(false) // 弹窗的是否展示
-const dialogTitle = ref('退款订单详情') // 弹窗的标题
-const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
-const defaultrefundDetail = {
- id: null,
- appId: null,
- appName: '',
- channelCode: '',
- channelCodeName: '',
- channelErrorCode: '',
- channelErrorMsg: '',
- channelExtras: '',
- channelId: null,
- channelOrderNo: '',
- channelRefundNo: '',
- createTime: null,
- expireTime: null,
- merchantId: null,
- merchantName: '',
- merchantOrderId: '',
- merchantRefundNo: '',
- notifyStatus: null,
- notifyTime: null,
- notifyUrl: '',
- orderId: null,
- payAmount: null,
- reason: '',
- refundAmount: null,
- status: null,
- subject: '',
- successTime: null,
- tradeNo: '',
- type: null,
- userIp: ''
-}
-const refundDetail = ref(JSON.parse(JSON.stringify(defaultrefundDetail)))
-
-/** 打开弹窗 */
-const open = async (id?: number) => {
- dialogVisible.value = true
- dialogTitle.value = t('action.preview')
- // 修改时，设置数据
- if (id) {
- formLoading.value = true
- try {
- refundDetail.value = await RefundApi.getRefundApi(id)
- } finally {
- formLoading.value = false
- }
- }
-}
-defineExpose({ open }) // 提供 open 方法，用于打开弹窗
-</script>
-
-<style>
-.tag-purple {
- color: #722ed1;
- background: #f9f0ff;
- border-color: #d3adf7;
-}
-</style>