浏览代码

feat(admin): 优化分账订单页面展示信息

- 分账指令流水号展示商户和平台两个字段
- 分账总金额前添加人民币符号
- 接收方商户信息布局调整并增加样式优化
- 详情页补充展示平台分账指令流水号
- 样式文件新增相关类名定义以支持新布局
runphp 4 月之前
父节点
当前提交
408eed00e2
共有 1 个文件被更改,包括 55 次插入13 次删除
  1. 55 13
      resource/admin/ProfitShareOrder.vue

+ 55 - 13
resource/admin/ProfitShareOrder.vue

@@ -47,19 +47,37 @@
         highlight-current-row
       >
         <el-table-column prop="id" label="ID" width="80" align="center" />
-        <el-table-column prop="out_separate_no" label="商户分账指令流水号" min-width="220" />
+        <el-table-column label="分账指令流水号" min-width="240">
+          <template #default="{ row }">
+            <div class="order-numbers">
+              <div class="order-number-item">
+                <span class="label">商户:</span>
+                <span class="value">{{ row.out_separate_no }}</span>
+              </div>
+              <div class="order-number-item">
+                <span class="label">平台:</span>
+                <span class="value">{{ row.separate_no || '--'}}</span>
+              </div>
+            </div>
+          </template>
+        </el-table-column>
         <el-table-column prop="user_id" label="用户ID" width="100" align="center" />
         <el-table-column prop="merchant_no" label="分账商户号" width="160" />
         <el-table-column prop="total_amt" label="分账总金额(元)" width="140" align="center">
           <template #default="{ row }">
-            <span style="font-weight: 600; color: #e6a23c; font-size: 15px">{{ formatAmountToYuan(row.total_amt) }}</span>
+            <span style="font-weight: 600; color: #e6a23c; font-size: 15px">¥{{ formatAmountToYuan(row.total_amt) }}</span>
           </template>
         </el-table-column>
-        <el-table-column label="接收方商户信息" width="180">
+        <el-table-column label="接收方商户信息" width="200">
           <template #default="{ row }">
             <div class="merchant-info">
-              <div class="merchant-no">商户号: {{ row.recv_merchant_no }}</div>
-              <div class="share-amount">分账金额: ¥{{ formatAmountToYuan(row.total_amt - row.separate_value) }}</div>
+              <div class="merchant-no" :title="row.recv_merchant_no">商户号: {{ row.recv_merchant_no }}</div>
+              <div class="amount-details">
+                <div class="amount-row">
+                  <span class="label">分账金额:</span>
+                  <span class="value">¥{{ formatAmountToYuan(row.total_amt - row.separate_value) }}</span>
+                </div>
+              </div>
             </div>
           </template>
         </el-table-column>
@@ -130,6 +148,9 @@
         <el-form-item label="商户分账指令流水号:">
           <span>{{ detailData.out_separate_no }}</span>
         </el-form-item>
+        <el-form-item label="分账指令流水号:">
+          <span>{{ detailData.separate_no }}</span>
+        </el-form-item>
         <el-form-item label="用户ID:">
           <span>{{ detailData.user_id }}</span>
         </el-form-item>
@@ -384,6 +405,31 @@ export default {
   text-align: right;
 }
 
+.order-numbers {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.order-number-item {
+  display: flex;
+}
+
+.order-number-item .label {
+  width: 40px;
+  font-weight: 500;
+  color: #606266;
+  text-align: right;
+  margin-right: 8px;
+  flex-shrink: 0;
+}
+
+.order-number-item .value {
+  flex: 1;
+  color: #303133;
+  word-break: break-all;
+}
+
 .amount-calculation {
   font-size: 12px;
 }
@@ -422,20 +468,16 @@ export default {
 }
 
 .merchant-info {
-  font-size: 12px;
   padding: 8px;
-  background-color: #f5f7fa;
+  background: linear-gradient(135deg, #e8f4ff 0%, #d0e6ff 100%);
   border-radius: 4px;
+  font-size: 12px;
 }
 
 .merchant-info .merchant-no {
-  margin-bottom: 4px;
+  margin-bottom: 5px;
   color: #606266;
-}
-
-.merchant-info .share-amount {
-  color: #303133;
-  font-weight: 600;
+  font-weight: 500;
 }
 
 .receiver-info {