新增: 微信配置-代理充值

src/views/dashboard/analysis/widget/CommissionSummary.vue

@@ -1,6 +1,15 @@
 <template>
-  <ElRow :gutter="20" class="commission-summary-widget">
-    <ElCol :xs="24" :sm="12" :md="12" :lg="8" :xl="4">
+  <!-- 错误状态 -->
+  <ElCard shadow="never" v-if="errorMsg" class="commission-summary-widget error-state">
+    <div class="error-content">
+      <i class="el-icon-warning" style="font-size: 48px; color: var(--el-color-warning)"></i>
+      <p>{{ errorMsg }}</p>
+    </div>
+  </ElCard>
+
+  <!-- 正常显示 -->
+  <div v-else class="commission-summary-widget">
+    <div class="stats-container">
       <ElCard shadow="hover" class="stat-card-wrapper">
         <div class="stat-card">
           <div
@@ -15,8 +24,6 @@
           </div>
         </div>
       </ElCard>
-    </ElCol>
-    <ElCol :xs="24" :sm="12" :md="12" :lg="8" :xl="4">
       <ElCard shadow="hover" class="stat-card-wrapper">
         <div class="stat-card">
           <div
@@ -31,8 +38,6 @@
           </div>
         </div>
       </ElCard>
-    </ElCol>
-    <ElCol :xs="24" :sm="12" :md="12" :lg="8" :xl="4">
       <ElCard shadow="hover" class="stat-card-wrapper">
         <div class="stat-card">
           <div
@@ -47,8 +52,6 @@
           </div>
         </div>
       </ElCard>
-    </ElCol>
-    <ElCol :xs="24" :sm="12" :md="12" :lg="8" :xl="4">
       <ElCard shadow="hover" class="stat-card-wrapper">
         <div class="stat-card">
           <div
@@ -63,8 +66,6 @@
           </div>
         </div>
       </ElCard>
-    </ElCol>
-    <ElCol :xs="24" :sm="12" :md="12" :lg="8" :xl="4">
       <ElCard shadow="hover" class="stat-card-wrapper">
         <div class="stat-card">
           <div
@@ -79,8 +80,8 @@
           </div>
         </div>
       </ElCard>
-    </ElCol>
-  </ElRow>
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -90,6 +91,9 @@
 
   defineOptions({ name: 'CommissionSummaryWidget' })
 
+  // 错误信息
+  const errorMsg = ref<string>('')
+
   // 佣金概览
   const summary = ref<MyCommissionSummary>({
     total_commission: 0,
@@ -105,9 +109,19 @@
       const res = await CommissionService.getMyCommissionSummary()
       if (res.code === 0) {
         summary.value = res.data
+        errorMsg.value = ''
+      } else {
+        // 显示错误信息
+        errorMsg.value = res.msg || '获取佣金概览失败'
       }
-    } catch (error) {
+    } catch (error: any) {
       console.error('获取佣金概览失败:', error)
+      // 尝试从错误响应中提取 msg
+      if (error?.response?.data?.msg) {
+        errorMsg.value = error.response.data.msg
+      } else {
+        errorMsg.value = '获取佣金概览失败'
+      }
     }
   }
 
@@ -118,26 +132,50 @@
 
 <style lang="scss" scoped>
   .commission-summary-widget {
+    &.error-state {
+      .error-content {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        padding: 40px 20px;
+        color: var(--el-text-color-secondary);
+
+        p {
+          margin-top: 12px;
+          font-size: 14px;
+          color: var(--el-text-color-primary);
+        }
+      }
+    }
+
+    .stats-container {
+      display: flex;
+      gap: 16px;
+      flex-wrap: wrap;
+    }
+
     .stat-card-wrapper {
-      margin-bottom: 20px;
+      flex: 1;
+      min-width: 180px;
 
       :deep(.el-card__body) {
-        padding: 20px;
+        padding: 16px;
       }
     }
 
     .stat-card {
       display: flex;
-      gap: 16px;
+      gap: 12px;
       align-items: center;
 
       .stat-icon {
         display: flex;
         align-items: center;
         justify-content: center;
-        width: 48px;
-        height: 48px;
-        font-size: 24px;
+        width: 40px;
+        height: 40px;
+        font-size: 20px;
         color: white;
         border-radius: 8px;
         flex-shrink: 0;
@@ -148,13 +186,14 @@
         min-width: 0;
 
         .stat-label {
-          margin-bottom: 6px;
-          font-size: 13px;
+          margin-bottom: 4px;
+          font-size: 12px;
           color: var(--el-text-color-secondary);
+          white-space: nowrap;
         }
 
         .stat-value {
-          font-size: 20px;
+          font-size: 18px;
           font-weight: 600;
           color: var(--el-text-color-primary);
           overflow: hidden;
@@ -165,10 +204,52 @@
     }
   }
 
-  @media (max-width: 768px) {
+  @media (max-width: 1400px) {
+    .commission-summary-widget {
+      .stats-container {
+        gap: 12px;
+      }
+
+      .stat-card-wrapper {
+        min-width: 160px;
+      }
+
+      .stat-card {
+        .stat-content {
+          .stat-value {
+            font-size: 16px;
+          }
+        }
+      }
+    }
+  }
+
+  @media (max-width: 1200px) {
     .commission-summary-widget {
       .stat-card-wrapper {
-        margin-bottom: 12px;
+        flex: 1 1 calc(33.333% - 12px);
+        min-width: 200px;
+      }
+    }
+  }
+
+  @media (max-width: 768px) {
+    .commission-summary-widget {
+      .stats-container {
+        gap: 12px;
+      }
+
+      .stat-card-wrapper {
+        flex: 1 1 calc(50% - 8px);
+        min-width: 150px;
+      }
+    }
+  }
+
+  @media (max-width: 480px) {
+    .commission-summary-widget {
+      .stat-card-wrapper {
+        flex: 1 1 100%;
       }
     }
   }