ylrz_saas_his_scrm_adminUI/src/views/admin/agentReport/index.vue

<template>
  <div class="page-container">
    <div class="page-header">
      <div>
        <h1 class="page-title">代理收益报表</h1>
        <p class="page-desc">各代理收入排名、趋势与汇总</p>
      </div>
    </div>

    <!-- 时间范围切换 -->
    <el-card shadow="never" class="mb16 filter-card">
      <el-radio-group v-model="daysRange" size="small" @change="fetchData">
        <el-radio-button :label="7">近7天</el-radio-button>
        <el-radio-button :label="30">近30天</el-radio-button>
        <el-radio-button :label="90">近90天</el-radio-button>
      </el-radio-group>
    </el-card>

    <!-- 代理收入排名 -->
    <el-card shadow="hover" style="margin-top:16px;border-radius:16px;border:none">
      <div slot="header" class="card-header">
        <div class="card-header-left">
          <div class="card-header-icon" style="background: linear-gradient(135deg, #3b82f6, #60a5fa);">
            <i class="el-icon-s-data" style="color:#fff;font-size:16px"></i>
          </div>
          <span class="card-header-title">代理收入排名</span>
        </div>
      </div>
      <el-table :data="agentReport" border v-loading="loading" size="small" style="width:100%">
        <el-table-column type="index" label="#" width="60" />
        <el-table-column prop="proxyName" label="代理名称" min-width="120" />
        <el-table-column prop="companyName" label="公司" min-width="140" />
        <el-table-column label="平台折扣(%)" width="110" align="center">
          <template slot-scope="s">{{ s.row.platformDiscount || s.row.profitShareRatio || 0 }}%</template>
        </el-table-column>
        <el-table-column label="本期佣金" min-width="130" sortable :sort-method="(a,b)=>a.commission-b.commission">
          <template slot-scope="s">
            <span style="color:#3b82f6;font-weight:600">¥{{ (s.row.commission || 0).toFixed(2) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="代理余额" min-width="130" sortable>
          <template slot-scope="s">¥{{ (s.row.balance || 0).toFixed(2) }}</template>
        </el-table-column>
        <el-table-column label="累计提现" min-width="130" sortable>
          <template slot-scope="s">¥{{ (s.row.totalWithdrawal || 0).toFixed(2) }}</template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import { listProxy } from '@/api/admin/proxy'

export default {
  name: 'AdminAgentReport',
  data() {
    return {
      loading: false,
      daysRange: 30,
      agentReport: []
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.loading = true
      listProxy({ pageNum: 1, pageSize: 200 }).then(res => {
        this.agentReport = (res.rows || []).map(p => ({
          proxyId: p.proxyId,
          proxyName: p.proxyName,
          companyName: p.companyName,
          platformDiscount: p.platformDiscount || p.profitShareRatio,
          commission: p.totalCommission || 0,
          balance: p.balance || 0,
          totalWithdrawal: p.totalWithdrawal || 0
        }))
      }).catch(() => {}).finally(() => { this.loading = false })
    }
  }
}
</script>

<style scoped>
.page-container { padding: 16px; }
.page-header { margin-bottom: 16px; }
.page-title { font-size: 22px; font-weight: 700; color: #1e293b; margin: 0 0 4px 0; }
.page-desc { font-size: 14px; color: #94a3b8; margin: 0; }
.mb16 { margin-bottom: 16px; }
.filter-card { border-radius: 16px; border: none; padding-bottom: 0; }
.card-header { display: flex; justify-content: space-between; align-items: center; }
.card-header-left { display: flex; align-items: center; gap: 10px; }
.card-header-icon { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
.card-header-title { font-size: 15px; font-weight: 600; color: #1e293b; }
</style>