fix: 我的佣金

src/types/api/commission.ts

@@ -164,6 +164,7 @@ export interface MyCommissionSummary {
   frozen_commission: number // 冻结中佣金(分)
   withdrawing_commission: number // 提现中佣金(分)
   withdrawn_commission: number // 已提现佣金(分)
+  unwithdraw_commission?: number // 未提现佣金(分)
 }
 
 /**

src/views/commission-management/my-commission/index.vue

@@ -28,9 +28,45 @@
                 v-permission="'my_commission:add'"
                 >发起提现</ElButton
               >
-              <span class="available-commission">
+
-                可提现金额：<strong>{{ formatMoney(summary.available_commission) }}</strong>
+              <div class="commission-summary">
-              </span>
+                <div class="commission-summary-item">
+                  <span class="summary-label">总佣金</span>
+                  <strong class="summary-value">{{
+                    formatMoney(summary.total_commission, false)
+                  }}</strong>
+                </div>
+                <div class="commission-summary-item">
+                  <span class="summary-label">可提现</span>
+                  <strong class="summary-value is-success">{{
+                    formatMoney(summary.available_commission, false)
+                  }}</strong>
+                </div>
+                <div class="commission-summary-item">
+                  <span class="summary-label">冻结中</span>
+                  <strong class="summary-value">{{
+                    formatMoney(summary.frozen_commission, false)
+                  }}</strong>
+                </div>
+                <div class="commission-summary-item">
+                  <span class="summary-label">提现中</span>
+                  <strong class="summary-value is-warning">{{
+                    formatMoney(summary.withdrawing_commission, false)
+                  }}</strong>
+                </div>
+                <div class="commission-summary-item">
+                  <span class="summary-label">已提现</span>
+                  <strong class="summary-value">{{
+                    formatMoney(summary.withdrawn_commission, false)
+                  }}</strong>
+                </div>
+                <div class="commission-summary-item">
+                  <span class="summary-label">未提现</span>
+                  <strong class="summary-value">{{
+                    formatMoney(summary.unwithdraw_commission, false)
+                  }}</strong>
+                </div>
+              </div>
             </template>
           </ArtTableHeader>
 
@@ -242,7 +278,8 @@
     available_commission: 0,
     frozen_commission: 0,
     withdrawing_commission: 0,
-    withdrawn_commission: 0
+    withdrawn_commission: 0,
+    unwithdraw_commission: 0
   })
 
   // ==================== 佣金明细 ====================
@@ -403,19 +440,16 @@
       {
         prop: 'iccid',
         label: 'ICCID',
-        width: 160,
         formatter: (row: ShopCommissionRecordItem) => row.iccid || '-'
       },
       {
         prop: 'virtual_no',
         label: '虚拟号',
-        width: 160,
         formatter: (row: ShopCommissionRecordItem) => row.virtual_no || '-'
       },
       {
         prop: 'order_no',
         label: '订单号',
-        width: 220,
         formatter: (row: ShopCommissionRecordItem) => row.order_no || '-'
       },
       {
@@ -873,7 +907,8 @@
             available_commission: myShopData.available_commission,
             frozen_commission: myShopData.frozen_commission,
             withdrawing_commission: myShopData.withdrawing_commission,
-            withdrawn_commission: myShopData.withdrawn_commission
+            withdrawn_commission: myShopData.withdrawn_commission,
+            unwithdraw_commission: myShopData.unwithdraw_commission
           }
         }
       }
@@ -902,22 +937,41 @@
 </script>
 
 <style scoped lang="scss">
-  .available-commission {
+  .commission-summary {
     display: inline-flex;
     align-items: center;
-    padding: 5px 12px;
+    flex-wrap: wrap;
+    gap: 8px 14px;
     margin-left: 12px;
-    font-size: 14px;
-    color: var(--el-text-color-secondary);
-    background: var(--el-color-primary-light-9);
-    border: 1px solid var(--el-color-primary-light-5);
-    border-radius: 4px;
 
-    strong {
+    .commission-summary-item {
-      margin-left: 2px;
+      display: inline-flex;
-      font-size: 16px;
+      align-items: center;
-      font-weight: 600;
+      gap: 4px;
-      color: var(--el-color-primary);
+      padding: 5px 10px;
+      white-space: nowrap;
+      background: var(--el-color-primary-light-9);
+      border: 1px solid var(--el-color-primary-light-5);
+      border-radius: 4px;
+
+      .summary-label {
+        font-size: 13px;
+        color: var(--el-text-color-secondary);
+      }
+
+      .summary-value {
+        font-size: 14px;
+        font-weight: 600;
+        color: var(--el-color-primary);
+
+        &.is-success {
+          color: var(--el-color-success);
+        }
+
+        &.is-warning {
+          color: var(--el-color-warning);
+        }
+      }
     }
   }
 </style>