feat: 更新团队统计数据接口，优化统计信息展示样式
This commit is contained in:
@@ -19,10 +19,11 @@ const [depth3Query] = useResetRef({
|
||||
pageSize: 10,
|
||||
});
|
||||
// 统计数据
|
||||
const { data: statistics } = safeClient(client.api.team.stats.get());
|
||||
const { data: statistics } = safeClient(client.api.team.dashboard.summary.get());
|
||||
const { data: earnings } = safeClient(client.api.team.earnings.get());
|
||||
const { data: depth1, execute: executeDepth1 } = safeClient(() => client.api.team.members.get({ query: { ...depth1Query.value } }));
|
||||
const { data: depth2, execute: executeDepth2 } = safeClient(() => client.api.team.members.get({ query: { ...depth2Query.value } }));
|
||||
const { data: depth3, execute: executeDepth3 } = safeClient(() => client.api.team.members.get({ query: { ...depth3Query.value } }));
|
||||
const { data: depth2, execute: executeDepth2 } = safeClient(() => client.api.team.members.get({ query: { ...depth2Query.value } }), { immediate: false });
|
||||
const { data: depth3, execute: executeDepth3 } = safeClient(() => client.api.team.members.get({ query: { ...depth3Query.value } }), { immediate: false });
|
||||
|
||||
// 当前选中的级别
|
||||
const selectedLevel = ref<1 | 2 | 3>(1);
|
||||
@@ -133,91 +134,158 @@ function nextPage() {
|
||||
<ion-icon :icon="peopleOutline" class="title-icon" />
|
||||
<span>团队规模</span>
|
||||
</div>
|
||||
<div class="team-size-card">
|
||||
<div class="team-total">
|
||||
<div class="total-value">
|
||||
{{ statistics?.totalCount }}
|
||||
<div class="stats-grid">
|
||||
<div class="stat-card primary">
|
||||
<div class="stat-value">
|
||||
{{ statistics?.totalCount || 0 }}
|
||||
</div>
|
||||
<div class="total-label">
|
||||
<div class="stat-label">
|
||||
团队总人数
|
||||
</div>
|
||||
</div>
|
||||
<div class="team-growth">
|
||||
<div class="growth-item">
|
||||
<span class="growth-label">今日新增</span>
|
||||
<span class="growth-value">{{ statistics?.todayCount }}</span>
|
||||
<div class="stat-card">
|
||||
<div class="stat-value small">
|
||||
{{ statistics?.todayCount || 0 }}
|
||||
</div>
|
||||
<div class="growth-item">
|
||||
<span class="growth-label">昨日新增</span>
|
||||
<span class="growth-value">{{ statistics?.yesterdayCount }}</span>
|
||||
<div class="stat-label">
|
||||
今日新增
|
||||
</div>
|
||||
<div class="growth-item">
|
||||
<span class="growth-label">本月新增</span>
|
||||
<span class="growth-value">{{ statistics?.monthCount }}</span>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-value small">
|
||||
{{ statistics?.monthCount || 0 }}
|
||||
</div>
|
||||
<div class="stat-label">
|
||||
本月新增
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stats-grid mt-3">
|
||||
<div class="stat-card">
|
||||
<div class="stat-value small">
|
||||
{{ statistics?.totalRegister || 0 }}
|
||||
</div>
|
||||
<div class="stat-label">
|
||||
总注册
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-value small">
|
||||
{{ statistics?.totalKyc || 0 }}
|
||||
</div>
|
||||
<div class="stat-label">
|
||||
总实名
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-value small">
|
||||
{{ statistics?.totalActivated || 0 }}
|
||||
</div>
|
||||
<div class="stat-label">
|
||||
总激活
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 助力统计 -->
|
||||
<!-- <div class="stats-section">
|
||||
<div class="section-title">
|
||||
<ion-icon :icon="trendingUpOutline" class="title-icon" />
|
||||
<span>团队助力</span>
|
||||
</div>
|
||||
<div class="unified-card">
|
||||
<div class="unified-left">
|
||||
<div class="unified-value">
|
||||
¥{{ statistics?.totalSupport.toFixed(2) }}
|
||||
</div>
|
||||
<div class="unified-label">
|
||||
团队总助力
|
||||
</div>
|
||||
</div>
|
||||
<div class="unified-right">
|
||||
<div class="unified-item">
|
||||
<span class="unified-item-label">本月助力</span>
|
||||
<span class="unified-item-value">¥{{ statistics?.monthSupport.toFixed(2) }}</span>
|
||||
</div>
|
||||
<div class="unified-item">
|
||||
<span class="unified-item-label">较上月</span>
|
||||
<span class="unified-item-value" :class="supportChange.isPositive ? 'success' : 'danger'">
|
||||
{{ supportChange.isPositive ? '+' : '' }}{{ supportChange.percent }}%
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<!-- 收益统计 -->
|
||||
<!-- <div class="stats-section">
|
||||
<div class="stats-section">
|
||||
<div class="section-title">
|
||||
<ion-icon :icon="walletOutline" class="title-icon" />
|
||||
<span>团队收益</span>
|
||||
<span>团队助力</span>
|
||||
</div>
|
||||
<div class="unified-card">
|
||||
<div class="unified-left">
|
||||
<div class="unified-value">
|
||||
¥{{ statistics?.todayIncome.toFixed(2) }}
|
||||
|
||||
<!-- 总助力 -->
|
||||
<div class="earnings-main-card">
|
||||
<div class="earnings-total">
|
||||
<div class="earnings-label">
|
||||
团队总助力
|
||||
</div>
|
||||
<div class="unified-label">
|
||||
今日收益
|
||||
</div>
|
||||
</div>
|
||||
<div class="unified-right">
|
||||
<div class="unified-item">
|
||||
<span class="unified-item-label">本周收益</span>
|
||||
<span class="unified-item-value">¥{{ statistics.weekIncome.toFixed(2) }}</span>
|
||||
</div>
|
||||
<div class="unified-item">
|
||||
<span class="unified-item-label">较上月</span>
|
||||
<span class="unified-item-value" :class="incomeChange.isPositive ? 'success' : 'danger'">
|
||||
{{ incomeChange.isPositive ? '+' : '' }}{{ incomeChange.percent }}%
|
||||
</span>
|
||||
<div class="earnings-value">
|
||||
¥{{ Number(earnings?.totalAmount || 0).toFixed(2) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<!-- 本月数据 -->
|
||||
<div class="earnings-section">
|
||||
<div class="earnings-section-title">
|
||||
本月助力
|
||||
</div>
|
||||
<div class="stats-grid">
|
||||
<div class="stat-card accent">
|
||||
<div class="stat-value small">
|
||||
¥{{ Number(earnings?.monthAmount || 0).toFixed(2) }}
|
||||
</div>
|
||||
<div class="stat-label">
|
||||
本月金额
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-value small">
|
||||
¥{{ Number(earnings?.lastMonthAmount || 0).toFixed(2) }}
|
||||
</div>
|
||||
<div class="stat-label">
|
||||
上月金额
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-card" :class="Number(earnings?.monthIncreaseAmount || 0) >= 0 ? 'success' : 'danger'">
|
||||
<div class="stat-value small">
|
||||
{{ Number(earnings?.monthIncreaseAmount || 0) >= 0 ? '+' : '' }}¥{{ Number(earnings?.monthIncreaseAmount || 0).toFixed(2) }}
|
||||
</div>
|
||||
<div class="stat-label">
|
||||
月增长
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 本周数据 -->
|
||||
<div class="earnings-section">
|
||||
<div class="earnings-section-title">
|
||||
本周助力
|
||||
</div>
|
||||
<div class="stats-grid">
|
||||
<div class="stat-card accent">
|
||||
<div class="stat-value small">
|
||||
¥{{ Number(earnings?.weekAmount || 0).toFixed(2) }}
|
||||
</div>
|
||||
<div class="stat-label">
|
||||
本周金额
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-value small">
|
||||
¥{{ Number(earnings?.lastWeekAmount || 0).toFixed(2) }}
|
||||
</div>
|
||||
<div class="stat-label">
|
||||
上周金额
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-card" :class="Number(earnings?.weekIncreaseAmount || 0) >= 0 ? 'success' : 'danger'">
|
||||
<div class="stat-value small">
|
||||
{{ Number(earnings?.weekIncreaseAmount || 0) >= 0 ? '+' : '' }}¥{{ Number(earnings?.weekIncreaseAmount || 0).toFixed(2) }}
|
||||
</div>
|
||||
<div class="stat-label">
|
||||
周增长
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 今日数据 -->
|
||||
<div class="today-earnings-card">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="text-sm text-gray-600">
|
||||
今日助力
|
||||
</div>
|
||||
<div class="text-xl font-bold text-[#c41e3a]">
|
||||
¥{{ Number(earnings?.todayAmount || 0).toFixed(2) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 团队列表 -->
|
||||
<div class="team-list-section">
|
||||
@@ -328,6 +396,7 @@ function nextPage() {
|
||||
overflow: hidden;
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
.stats-section {
|
||||
background: white;
|
||||
padding: 20px;
|
||||
@@ -349,113 +418,116 @@ function nextPage() {
|
||||
color: #c41e3a;
|
||||
}
|
||||
|
||||
.team-size-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: linear-gradient(135deg, #fff7f0 0%, #ffe8e8 100%);
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.team-total {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
padding-right: 20px;
|
||||
border-right: 1px solid #333;
|
||||
}
|
||||
|
||||
.total-value {
|
||||
font-size: 36px;
|
||||
font-weight: 700;
|
||||
color: #c41e3a;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.total-label {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.team-growth {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.growth-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.growth-label {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.growth-value {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.unified-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: linear-gradient(135deg, #f5f7fa 0%, #e8edf3 100%);
|
||||
.stat-card {
|
||||
background: #f5f7fa;
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.unified-left {
|
||||
flex: 1;
|
||||
padding: 16px 12px;
|
||||
text-align: center;
|
||||
padding-right: 20px;
|
||||
border-right: 1px solid #333;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.unified-value {
|
||||
.stat-card.primary {
|
||||
background: linear-gradient(135deg, #c41e3a 0%, #8b1a2e 100%);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.stat-card.accent {
|
||||
background: linear-gradient(135deg, #fff7f0 0%, #ffe8e8 100%);
|
||||
}
|
||||
|
||||
.stat-card.success {
|
||||
background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
|
||||
}
|
||||
|
||||
.stat-card.danger {
|
||||
background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.stat-card.primary .stat-value {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.stat-card.accent .stat-value {
|
||||
color: #c41e3a;
|
||||
}
|
||||
|
||||
.stat-card.success .stat-value {
|
||||
color: #16a34a;
|
||||
}
|
||||
|
||||
.stat-card.danger .stat-value {
|
||||
color: #dc2626;
|
||||
}
|
||||
|
||||
.stat-value.small {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.stat-card.primary .stat-label {
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
.earnings-main-card {
|
||||
background: linear-gradient(135deg, #c41e3a 0%, #8b1a2e 100%);
|
||||
border-radius: 16px;
|
||||
padding: 24px;
|
||||
margin-bottom: 16px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.earnings-total {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.earnings-label {
|
||||
font-size: 14px;
|
||||
opacity: 0.9;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.unified-label {
|
||||
.earnings-value {
|
||||
font-size: 36px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.earnings-section {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.earnings-section:last-of-type {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.earnings-section-title {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.unified-right {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.unified-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.unified-item-label {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.unified-item-value {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
color: #666;
|
||||
margin-bottom: 12px;
|
||||
padding-left: 12px;
|
||||
border-left: 3px solid #c41e3a;
|
||||
}
|
||||
|
||||
.unified-item-value.success {
|
||||
color: #52c41a;
|
||||
}
|
||||
|
||||
.unified-item-value.danger {
|
||||
color: #ff4d4f;
|
||||
.today-earnings-card {
|
||||
background: linear-gradient(135deg, #fff7f0 0%, #ffe8e8 100%);
|
||||
border-radius: 12px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.team-list-section {
|
||||
|
||||
Reference in New Issue
Block a user