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

src/views/pay/order/OrderDetail.vue

@@ -1,79 +1,84 @@
 <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-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" label-class-name="desc-label">
-    <el-descriptions :column="2">
+      <el-descriptions-item label="应用编号">{{ detailData.appId }}</el-descriptions-item>
-      <el-descriptions-item label="商户订单号">
+      <el-descriptions-item label="应用名称">{{ detailData.appName }}</el-descriptions-item>
-        <el-tag>{{ detailData.merchantOrderId }}</el-tag>
+    </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-descriptions-item label="支付金额">
-        <el-tag class="tag-purple">{{ detailData.channelOrderNo }}</el-tag>
+        <el-tag type="success" size="small">￥{{ (detailData.price / 100.0).toFixed(2) }}</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>
+    </el-descriptions>
+    <el-descriptions :column="2" label-class-name="desc-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-descriptions-item>
       <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>
+    <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="通知时间">
+    </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>
+    <!-- 分割线 -->
     <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 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>
+      <el-descriptions-item label="渠道单号">
-      <el-descriptions-item label="退款次数">{{ detailData.refundTimes }}</el-descriptions-item>
+        <el-tag size="mini" type="success" v-if="detailData.channelOrderNo">
-      <el-descriptions-item label="退款金额">
+          {{ detailData.channelOrderNo }}
-        <el-tag type="warning">
-          {{ parseFloat(detailData.refundPrice / 100, 2) }}
         </el-tag>
       </el-descriptions-item>
+      <el-descriptions-item label="渠道用户">{{ detailData.channelUserId }}</el-descriptions-item>
     </el-descriptions>
-    <el-divider />
+    <el-descriptions :column="2" label-class-name="desc-label">
-    <el-descriptions :column="1" border direction="vertical">
+      <el-descriptions-item label="退款金额">
-      <el-descriptions-item label="商品描述">
+        <el-tag size="mini" type="danger">
-        {{ detailData.body }}
+          ￥{{ (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.extension.channelNotifyData }}
-          {{ detailData.payOrderExtension?.channelNotifyData }}
-        </div>
       </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
   }

src/views/pay/order/index.vue

@@ -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: 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: []
 })
 const queryFormRef = ref() // 搜索的表单
 const exportLoading = ref(false) // 导出等待
-const merchantList = ref([]) // 商户列表
 const appList = ref([]) // 支付应用列表集合
 
 /** 搜索按钮操作 */
@@ -313,16 +263,11 @@ const openDetail = (id: number) => {
 /** 初始化 **/
 onMounted(async () => {
   await getList()
-  // 加载商户列表
-  // merchantList.value = await MerchantApi.getMerchantListByName()
-  // 加载 App 列表
-  // TODO 芋艿：候选少一个查询应用列表的接口
-  // appList.value = await AppApi.getAppListByMerchantId()
 })
 </script>
 <style>
 .order-font {
-  padding: 2px 0;
   font-size: 12px;
+  padding: 2px 0;
 }
 </style>