ソースを参照

fix: 修复ElDescriptions对齐问题

dhb52 1 年間 前
コミット
10c121d62d
2 ファイル変更23 行追加28 行削除
  1. 12 16
      src/views/pay/order/OrderDetail.vue
  2. 11 12
      src/views/pay/refund/RefundDetail.vue

+ 12 - 16
src/views/pay/order/OrderDetail.vue

@@ -7,20 +7,17 @@
       <el-descriptions-item label="支付单号">
         <el-tag type="warning" size="small" v-if="detailData.no">{{ detailData.no }}</el-tag>
       </el-descriptions-item>
-    </el-descriptions>
-    <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 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" size="small">
           ¥{{ (detailData.channelFeePrice / 100.0).toFixed(2) }}
@@ -29,16 +26,14 @@
       <el-descriptions-item label="手续费比例">
         {{ (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>
-    <el-descriptions :column="2" label-class-name="desc-label">
+
       <el-descriptions-item label="创建时间">
         {{ formatDate(detailData.createTime) }}
       </el-descriptions-item>
@@ -46,27 +41,26 @@
         {{ formatDate(detailData.updateTime) }}
       </el-descriptions-item>
     </el-descriptions>
+
     <!-- 分割线 -->
     <el-divider />
+
     <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>
-    <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-descriptions :column="2" label-class-name="desc-label">
+
       <el-descriptions-item label="退款金额">
         <el-tag size="mini" type="danger">
           ¥{{ (detailData.refundPrice / 100.0).toFixed(2) }}
@@ -74,8 +68,10 @@
       </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="支付通道异步回调内容">
         {{ detailData.extension.channelNotifyData }}

+ 11 - 12
src/views/pay/refund/RefundDetail.vue

@@ -9,20 +9,17 @@
           refundDetail.channelRefundNo
         }}</el-tag>
       </el-descriptions-item>
-    </el-descriptions>
-    <el-descriptions :column="2" label-class-name="desc-label">
+
       <el-descriptions-item label="商户支付单号">
         <el-tag size="small">{{ refundDetail.merchantOrderId }}</el-tag>
       </el-descriptions-item>
       <el-descriptions-item label="渠道支付单号">
         <el-tag type="success" size="small">{{ refundDetail.channelOrderNo }}</el-tag>
       </el-descriptions-item>
-    </el-descriptions>
-    <el-descriptions :column="2" label-class-name="desc-label">
+
       <el-descriptions-item label="应用编号">{{ refundDetail.appId }}</el-descriptions-item>
       <el-descriptions-item label="应用名称">{{ refundDetail.appName }}</el-descriptions-item>
-    </el-descriptions>
-    <el-descriptions :column="2" label-class-name="desc-label">
+
       <el-descriptions-item label="支付金额">
         <el-tag type="success" size="small"
           >¥{{ (refundDetail.payPrice / 100.0).toFixed(2) }}</el-tag
@@ -33,16 +30,14 @@
           >¥{{ (refundDetail.refundPrice / 100.0).toFixed(2) }}</el-tag
         >
       </el-descriptions-item>
-    </el-descriptions>
-    <el-descriptions :column="2" label-class-name="desc-label">
+
       <el-descriptions-item label="退款状态">
         <dict-tag :type="DICT_TYPE.PAY_REFUND_STATUS" :value="refundDetail.status" />
       </el-descriptions-item>
       <el-descriptions-item label="退款时间">{{
         formatDate(refundDetail.successTime)
       }}</el-descriptions-item>
-    </el-descriptions>
-    <el-descriptions :column="2" label-class-name="desc-label">
+
       <el-descriptions-item label="创建时间">{{
         formatDate(refundDetail.createTime)
       }}</el-descriptions-item>
@@ -50,20 +45,23 @@
         formatDate(refundDetail.updateTime)
       }}</el-descriptions-item>
     </el-descriptions>
+
     <!-- 分割线 -->
     <el-divider />
+
     <el-descriptions :column="2" label-class-name="desc-label">
       <el-descriptions-item label="退款渠道">
         <dict-tag :type="DICT_TYPE.PAY_CHANNEL_CODE" :value="refundDetail.channelCode" />
       </el-descriptions-item>
       <el-descriptions-item label="退款原因">{{ refundDetail.reason }}</el-descriptions-item>
-    </el-descriptions>
-    <el-descriptions :column="2" label-class-name="desc-label">
+
       <el-descriptions-item label="退款 IP">{{ refundDetail.userIp }}</el-descriptions-item>
       <el-descriptions-item label="通知 URL">{{ refundDetail.notifyUrl }}</el-descriptions-item>
     </el-descriptions>
+
     <!-- 分割线 -->
     <el-divider />
+
     <el-descriptions :column="2" label-class-name="desc-label">
       <el-descriptions-item label="渠道错误码">{{
         refundDetail.channelErrorCode
@@ -72,6 +70,7 @@
         refundDetail.channelErrorMsg
       }}</el-descriptions-item>
     </el-descriptions>
+
     <el-descriptions :column="1" label-class-name="desc-label" direction="vertical" border>
       <el-descriptions-item label="支付通道异步回调内容">
         {{ refundDetail.channelNotifyData }}