luo/one-pipe-system
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改bug
All checks were successful
构建并部署前端到测试环境 / build-and-deploy (push) Successful in 8m39s
Details

Browse Source
This commit is contained in:
sexygoat
2026-03-11 17:09:35 +08:00
parent bd45f7a224
commit d43de4cd06
37 changed files with 2552 additions and 1696 deletions
Download Patch File Download Diff File Expand all files Collapse all files

175
src/views/dashboard/analysis/widget/CommissionSummary.vue Normal file
View File

@@ -0,0 +1,175 @@
<template>
<ElRow :gutter="20" class="commission-summary-widget">
<ElCol :xs="24" :sm="12" :md="12" :lg="8" :xl="4">
<ElCard shadow="hover" class="stat-card-wrapper">
<div class="stat-card">
<div
class="stat-icon"
style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%)"
>
<i class="iconfont-sys">&#xe71d;</i>
</div>
<div class="stat-content">
<div class="stat-label">总佣金</div>
<div class="stat-value">{{ formatMoney(summary.total_commission) }}</div>
</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
class="stat-icon"
style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%)"
>
<i class="iconfont-sys">&#xe71e;</i>
</div>
<div class="stat-content">
<div class="stat-label">可提现佣金</div>
<div class="stat-value">{{ formatMoney(summary.available_commission) }}</div>
</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
class="stat-icon"
style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)"
>
<i class="iconfont-sys">&#xe720;</i>
</div>
<div class="stat-content">
<div class="stat-label">冻结佣金</div>
<div class="stat-value">{{ formatMoney(summary.frozen_commission) }}</div>
</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
class="stat-icon"
style="background: linear-gradient(135deg, #fa709a 0%, #fee140 100%)"
>
<i class="iconfont-sys">&#xe71f;</i>
</div>
<div class="stat-content">
<div class="stat-label">提现中佣金</div>
<div class="stat-value">{{ formatMoney(summary.withdrawing_commission) }}</div>
</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
class="stat-icon"
style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)"
>
<i class="iconfont-sys">&#xe721;</i>
</div>
<div class="stat-content">
<div class="stat-label">已提现佣金</div>
<div class="stat-value">{{ formatMoney(summary.withdrawn_commission) }}</div>
</div>
</div>
</ElCard>
</ElCol>
</ElRow>
</template>
<script setup lang="ts">
import { CommissionService } from '@/api/modules'
import type { MyCommissionSummary } from '@/types/api/commission'
import { formatMoney } from '@/utils/business/format'
defineOptions({ name: 'CommissionSummaryWidget' })
// 佣金概览
const summary = ref<MyCommissionSummary>({
total_commission: 0,
available_commission: 0,
frozen_commission: 0,
withdrawing_commission: 0,
withdrawn_commission: 0
})
// 加载佣金概览
const loadSummary = async () => {
try {
const res = await CommissionService.getMyCommissionSummary()
if (res.code === 0) {
summary.value = res.data
}
} catch (error) {
console.error('获取佣金概览失败:', error)
}
}
onMounted(() => {
loadSummary()
})
</script>
<style lang="scss" scoped>
.commission-summary-widget {
.stat-card-wrapper {
margin-bottom: 20px;
:deep(.el-card__body) {
padding: 20px;
}
}
.stat-card {
display: flex;
gap: 16px;
align-items: center;
.stat-icon {
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
font-size: 24px;
color: white;
border-radius: 8px;
flex-shrink: 0;
}
.stat-content {
flex: 1;
min-width: 0;
.stat-label {
margin-bottom: 6px;
font-size: 13px;
color: var(--el-text-color-secondary);
}
.stat-value {
font-size: 20px;
font-weight: 600;
color: var(--el-text-color-primary);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
}
@media (max-width: 768px) {
.commission-summary-widget {
.stat-card-wrapper {
margin-bottom: 12px;
}
}
}
</style>