代理增加接口

src/views/AgentDashboard.vue

@@ -117,17 +117,6 @@
         </div>
         <el-icon class="arrow"><ArrowRight /></el-icon>
       </div>
-      
-      <!-- <div class="action-card" @click="activeTab = 'merchants'">
-        <div class="action-icon manage">
-          <el-icon><Management /></el-icon>
-        </div>
-        <div class="action-content">
-          <div class="action-title">商户管理</div>
-          <div class="action-desc">查看商户信息</div>
-        </div>
-        <el-icon class="arrow"><ArrowRight /></el-icon>
-      </div> -->
     </div>
 
     <!-- 标签页 -->
@@ -167,32 +156,36 @@
             stripe
             style="width: 100%"
             :row-class-name="({ row }) => row.is_early_merchant ? 'early-merchant' : ''"
+            border
+            size="small"
+            class="responsive-table"
           >
-            <el-table-column prop="username" label="用户名" width="120">
+            <el-table-column prop="username" label="用户名" min-width="80" :width="null">
               <template #default="{ row }">
                 {{ maskUsername(row.username) }}
               </template>
             </el-table-column>
-            <el-table-column prop="real_name" label="真实姓名" width="120" />
-            <el-table-column prop="phone" label="手机号" width="130">
+            <el-table-column prop="real_name" label="真实姓名" min-width="80" :width="null" class-name="hide-on-mobile" />
+            <el-table-column prop="phone" label="手机号" min-width="100" :width="null" class-name="hide-on-small-mobile">
               <template #default="{ row }">
                 {{ maskUsername(row.phone) }}
               </template>
             </el-table-column>
-            <el-table-column prop="audit_status" label="审核状态" width="100">
+            <el-table-column prop="audit_status" label="审核状态" min-width="80" :width="null">
               <template #default="{ row }">
-                <el-tag :type="getAuditStatusType(row.audit_status)">
+                <el-tag size="small" :type="getAuditStatusType(row.audit_status)">
                   {{ getAuditStatusText(row.audit_status) }}
                 </el-tag>
               </template>
             </el-table-column>
-            <el-table-column prop="merchant_status" label="商户类型" width="150">
+            <el-table-column prop="merchant_status" label="商户类型" min-width="100" :width="null">
               <template #default="{ row }">
                 <el-tag 
+                  size="small"
                   :type="row.is_early_merchant ? 'warning' : 'success'"
                   :icon="row.is_early_merchant ? 'Warning' : 'Check'"
                 >
-                  {{ row.merchant_status || '正常商户' }}
+                  {{ row.is_early_merchant ? '早期商户' : '正常商户' }}
                 </el-tag>
                 <el-tooltip 
                   v-if="row.is_early_merchant" 
@@ -203,19 +196,23 @@
                 </el-tooltip>
               </template>
             </el-table-column>
-            <el-table-column prop="commission_count" label="佣金记录" width="100">
-              <template #default="{ row }">
-                <span :class="{ 'text-muted': row.is_early_merchant }">
-                  {{ row.commission_count || 0 }} 笔
-                </span>
-              </template>
-            </el-table-column>
-            <el-table-column prop="completed_matches" label="完成匹配" width="100" />
-            <el-table-column prop="joined_at" label="加入时间" width="160">
+            <el-table-column prop="completed_matches" label="完成匹配" min-width="80" :width="null" class-name="hide-on-mobile" />
+            <el-table-column prop="joined_at" label="加入时间" min-width="100" :width="null" class-name="hide-on-small-mobile">
               <template #default="{ row }">
                 {{ formatDateTime(row.joined_at) }}
               </template>
             </el-table-column>
+            <el-table-column label="操作" min-width="100" :width="null">
+              <template #default="{ row }">
+                <el-button 
+                  type="primary" 
+                  size="small" 
+                  @click="viewMerchantTransfers(row)"
+                >
+                  转账记录
+                </el-button>
+              </template>
+            </el-table-column>
           </el-table>
           
           <div class="pagination-wrapper">
@@ -253,43 +250,48 @@
             </el-button>
           </div>
           
+          <div class="responsive-table">
             <el-table 
               :data="commissions" 
               v-loading="loadingCommissions"
               stripe
+              border
+              size="small"
+              class="responsive-table"
               style="width: 100%"
             >
-            <el-table-column prop="username" label="商户" width="120">
+              <el-table-column prop="username" label="商户" :width="null" min-width="80">
                 <template #default="{ row }">
                   {{ maskUsername(row.username) }}
                 </template>
               </el-table-column>
-            <el-table-column prop="real_name" label="真实姓名" width="120" />
-            <el-table-column prop="commission_amount" label="佣金金额" width="120">
+              <el-table-column prop="real_name" label="真实姓名" :width="null" min-width="80" class-name="hide-on-small-mobile" />
+              <el-table-column prop="commission_amount" label="佣金金额" :width="null" min-width="90">
                 <template #default="{ row }">
                   ¥{{ (Number(row.commission_amount) || 0).toFixed(2) }}
                 </template>
               </el-table-column>
-            <el-table-column prop="commission_type" label="佣金类型" width="120">
+              <el-table-column prop="commission_type" label="佣金类型" :width="null" min-width="90">
                 <template #default="{ row }">
-                <el-tag :type="getCommissionTypeTagType(row.commission_type)">
+                  <el-tag size="small" :type="getCommissionTypeTagType(row.commission_type)">
                     {{ getCommissionTypeText(row.commission_type) }}
                   </el-tag>
                 </template>
               </el-table-column>
-            <el-table-column prop="status" label="状态" width="100">
+              <el-table-column prop="status" label="状态" :width="null" min-width="70">
                 <template #default="{ row }">
-                <el-tag :type="getCommissionStatusType(row.status)">
+                  <el-tag size="small" :type="getCommissionStatusType(row.status)">
                     {{ getCommissionStatusText(row.status) }}
                   </el-tag>
                 </template>
               </el-table-column>
-            <el-table-column prop="created_at" label="生成时间" width="160">
+              <el-table-column prop="created_at" label="生成时间" :width="null" min-width="120" class-name="hide-on-mobile">
                 <template #default="{ row }">
                   {{ formatDateTime(row.created_at) }}
                 </template>
               </el-table-column>
             </el-table>
+          </div>
           
           <div class="pagination-wrapper">
             <el-pagination
@@ -316,6 +318,8 @@
         </div>
       </el-tab-pane>
       
+
+      
       <!-- 佣金提现 -->
       <el-tab-pane label="佣金提现" name="withdrawals">
         <div class="withdrawals-section">
@@ -350,6 +354,97 @@
           </div>
         </div>
       </el-tab-pane>
+      
+      <!-- 商户转账记录 -->
+      <el-tab-pane label="商户转账记录" name="transfers">
+        <div class="transfers-section">
+          <div class="section-header">
+            <h3>商户转账记录</h3>
+            <div class="header-actions">
+              <el-select 
+                v-model="selectedMerchantId" 
+                placeholder="选择商户" 
+                size="small" 
+                style="width: 200px; margin-right: 10px"
+                clearable
+                @change="loadTransfers"
+              >
+                <el-option 
+                  v-for="merchant in merchants" 
+                  :key="merchant.id" 
+                  :label="`${merchant.real_name} (${maskUsername(merchant.phone)})`" 
+                  :value="merchant.id"
+                />
+              </el-select>
+              <el-button @click="loadTransfers" :loading="loadingTransfers">
+                刷新
+              </el-button>
+            </div>
+          </div>
+          
+          <el-table 
+            :data="transfers" 
+            v-loading="loadingTransfers"
+            stripe
+            border
+            size="small"
+            class="responsive-table"
+            style="width: 100%"
+          >
+            <el-table-column prop="id" label="转账ID" min-width="80" :width="null" />
+            <el-table-column prop="from_real_name" label="发送方" min-width="100" :width="null" />
+            <el-table-column prop="to_real_name" label="接收方" min-width="100" :width="null" />
+            <el-table-column prop="amount" label="金额" min-width="100" :width="null">
+              <template #default="{ row }">
+                ¥{{ row.amount }}
+              </template>
+            </el-table-column>
+            <el-table-column prop="status" label="状态" min-width="80" :width="null">
+              <template #default="{ row }">
+                <el-tag :type="getTransferStatusType(row.status)" size="small">
+                  {{ getTransferStatusText(row.status) }}
+                </el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column prop="transfer_type" label="类型" min-width="100" :width="null">
+              <template #default="{ row }">
+                <el-tag :type="getTransferTypeType(row.transfer_type)" size="small">
+                  {{ getTransferTypeText(row.transfer_type) }}
+                </el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column prop="created_at" label="创建时间" min-width="160" :width="null" class-name="hide-on-small-mobile">
+              <template #default="{ row }">
+                {{ formatDateTime(row.created_at) }}
+              </template>
+            </el-table-column>
+            <el-table-column prop="description" label="描述" min-width="150" :width="null" class-name="hide-on-mobile" />
+          </el-table>
+          
+          <div class="pagination-wrapper">
+            <el-pagination
+              v-model:current-page="transfersPage"
+              v-model:page-size="transfersPageSize"
+              :total="transfersTotal"
+              :page-sizes="[10, 20, 50]"
+              layout="total, sizes"
+              @current-change="loadTransfers"
+              @size-change="loadTransfers"
+            />
+          </div>
+          <div class="pagination-wrapper">
+            <el-pagination
+              v-model:current-page="transfersPage"
+              v-model:page-size="transfersPageSize"
+              :total="transfersTotal"
+              :page-sizes="[10, 20, 50]"
+              layout="prev, pager, next, jumper"
+              @current-change="loadTransfers"
+              @size-change="loadTransfers"
+            />
+          </div>
+        </div>
+      </el-tab-pane>
     </el-tabs>
   </div>
 </template>
@@ -382,7 +477,7 @@ import {
   GridComponent
 } from 'echarts/components'
 import VChart from 'vue-echarts'
-import api from '@/utils/api'
+import api, { transferAPI } from '@/utils/api'
 
 // 注册ECharts组件
 use([
@@ -416,6 +511,14 @@ const commissionsPage = ref(1)
 const commissionsPageSize = ref(10)
 const commissionsTotal = ref(0)
 
+// 转账记录数据
+const transfers = ref([])
+const loadingTransfers = ref(false)
+const transfersPage = ref(1)
+const transfersPageSize = ref(10)
+const transfersTotal = ref(0)
+const selectedMerchantId = ref(null)
+
 // 图表相关数据
 const chartPeriod = ref('7d')
 const chartLoading = ref(false)
@@ -513,6 +616,54 @@ const loadCommissions = async () => {
   }
 }
 
+const loadTransfers = async () => {
+  if (!agentInfo.value) return
+  
+  loadingTransfers.value = true
+  try {
+    // 构建请求参数
+    const params = {
+      page: transfersPage.value,
+      limit: transfersPageSize.value
+    }
+    
+    // 如果选择了特定商户，则添加到请求参数中
+    let userId = selectedMerchantId.value
+    
+    // 如果没有选择特定商户，则获取代理下所有商户的转账记录
+    if (!userId) {
+      // 使用代理ID获取所有相关商户的转账记录
+      const { data } = await api.get(`/agents/merchants/${agentInfo.value.id}/transfers`, {
+        params
+      })
+      console.log(data,'data1');
+      
+      transfers.value = data.data.transfers
+      transfersTotal.value = data.data.pagination.total
+    } else {
+      // 获取特定商户的转账记录
+      const { data } = await transferAPI.getUserTransfersByUserId(userId, params)
+      
+      transfers.value = data.data.transfers
+      transfersTotal.value = data.data.pagination.total
+    }
+  } catch (error) {
+    console.error('加载转账记录失败:', error)
+    ElMessage.error('加载转账记录失败')
+  } finally {
+    loadingTransfers.value = false
+  }
+}
+
+const viewMerchantTransfers = (merchant) => {
+  // 设置选中的商户ID
+  selectedMerchantId.value = merchant.id
+  // 切换到转账记录标签页
+  activeTab.value = 'transfers'
+  // 加载该商户的转账记录
+  loadTransfers()
+}
+
 const handleLogout = async () => {
   try {
     await ElMessageBox.confirm('确定要退出登录吗？', '确认退出', {
@@ -592,8 +743,101 @@ const getCommissionStatusText = (status) => {
   return '已生成'
 }
 
+/**
+ * 获取转账状态标签类型
+ * @param {string} status - 转账状态
+ * @returns {string} 标签类型
+ */
+const getTransferStatusType = (status) => {
+  const types = {
+    pending: 'warning',
+    confirmed: 'success',
+    rejected: 'danger',
+    received: 'success',
+    cancelled: 'info'
+  }
+  return types[status] || 'info'
+}
+
+/**
+ * 获取转账状态文本
+ * @param {string} status - 转账状态
+ * @returns {string} 显示文本
+ */
+const getTransferStatusText = (status) => {
+  const texts = {
+    pending: '待确认',
+    confirmed: '已确认',
+    rejected: '已拒绝',
+    received: '已收到',
+    cancelled: '已取消'
+  }
+  return texts[status] || status
+}
+
+/**
+ * 获取转账类型标签类型
+ * @param {string} type - 转账类型
+ * @returns {string} 标签类型
+ */
+const getTransferTypeType = (type) => {
+  const types = {
+    deposit: 'success',
+    withdraw: 'warning',
+    transfer: 'primary',
+    commission: 'success',
+    refund: 'info',
+    penalty: 'danger',
+    initial: 'primary',
+    return: 'info',
+    user_to_user: 'primary',
+    user_to_public: 'warning',
+    public_to_user: 'success'
+  }
+  return types[type] || 'info'
+}
+
+/**
+ * 获取转账类型文本
+ * @param {string} type - 转账类型
+ * @returns {string} 显示文本
+ */
+const getTransferTypeText = (type) => {
+  const texts = {
+    deposit: '充值',
+    withdraw: '提现',
+    transfer: '转账',
+    commission: '佣金',
+    refund: '退款',
+    penalty: '罚金',
+    initial: '初始转账',
+    return: '返还转账',
+    user_to_user: '用户转账',
+    user_to_public: '用户转公户',
+    public_to_user: '公户转用户'
+  }
+  return texts[type] || type
+}
+
+/**
+ * 格式化日期时间
+ * @param {string|Date} date - 需要格式化的日期
+ * @returns {string} - 格式化后的日期字符串或原文本
+ */
 const formatDateTime = (date) => {
-  return new Date(date).toLocaleString('zh-CN')
+  if (!date) return ''
+  
+  // 尝试转换为日期对象
+  const dateObj = new Date(date)
+  
+  // 检查是否为有效日期
+  if (isNaN(dateObj.getTime())) {
+    // 如果不是有效日期，返回原文本
+    return date
+  }
+  
+  // 如果是有效日期，进行格式化
+  return dateObj.toLocaleString('zh-CN')
 }
 
 /**
@@ -839,7 +1083,8 @@ onMounted(async () => {
     await Promise.all([
       loadChartData(),
       loadMerchants(),
-      loadCommissions()
+      loadCommissions(),
+      loadTransfers()
     ])
   }
 })
@@ -1427,7 +1672,37 @@ onMounted(async () => {
   }
 }
 
+/* 响应式表格样式 */
+.responsive-table {
+  width: 100%;
+  overflow-x: auto;
+}
+
+@media (max-width: 768px) {
+  .hide-on-mobile {
+    display: none;
+  }
+  
+  :deep(.el-table .cell) {
+    padding-left: 5px;
+    padding-right: 5px;
+  }
+  
+  :deep(.el-table) {
+    font-size: 12px;
+  }
+  
+  :deep(.el-tag) {
+    transform: scale(0.9);
+    transform-origin: left center;
+  }
+}
+
 @media (max-width: 480px) {
+  .hide-on-small-mobile {
+    display: none;
+  }
+  
   .stats-grid {
     grid-template-columns: 1fr 1fr;
     gap: 8px;
@@ -1471,5 +1746,11 @@ onMounted(async () => {
   .chart-card {
     padding: 16px;
   }
+  
+  :deep(.el-pagination) {
+    justify-content: center;
+    flex-wrap: wrap;
+    row-gap: 8px;
+  }
 }
 </style>