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

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

View File

@@ -1,6 +1,13 @@
<template>
<div class="analysis-dashboard">
开发中敬请期待...
<!-- 佣金概览 -->
<div class="section-title">佣金概览</div>
<CommissionSummary />
<!-- 提现配置 -->
<div class="section-title">提现配置</div>
<WithdrawalSettings />
<!--<el-row :gutter="20">-->
<!-- <el-col :xl="14" :lg="15" :xs="24">-->
<!-- <TodaySales />-->
@@ -45,10 +52,24 @@
import TopProducts from './widget/TopProducts.vue'
import SalesMappingByCountry from './widget/SalesMappingByCountry.vue'
import VolumeServiceLevel from './widget/VolumeServiceLevel.vue'
import CommissionSummary from './widget/CommissionSummary.vue'
import WithdrawalSettings from './widget/WithdrawalSettings.vue'
defineOptions({ name: 'Analysis' })
</script>
<style lang="scss" scoped>
@use './style';
.section-title {
margin-top: 24px;
margin-bottom: 16px;
font-size: 18px;
font-weight: 600;
color: var(--el-text-color-primary);
&:first-child {
margin-top: 0;
}
}
</style>

View File

@@ -31,7 +31,7 @@
}
.el-card {
border: 1px solid #e8ebf1;
border: none;
box-shadow: none;
}

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>

View File

@@ -0,0 +1,223 @@
<template>
<ElCard shadow="never" class="withdrawal-settings-widget" v-if="currentSetting">
<template #header>
<div class="card-header">
<div class="header-left">
<span class="header-title">当前生效配置</span>
<ElTag type="success" effect="dark" size="small">生效中</ElTag>
</div>
<div class="header-right">
<span class="creator-info"
>{{ currentSetting.creator_name || '-' }} 创建于
{{ formatDateTime(currentSetting.created_at) }}</span
>
</div>
</div>
</template>
<div class="setting-info">
<div class="info-card">
<div
class="info-icon"
style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%)"
>
<i class="el-icon">💰</i>
</div>
<div class="info-content">
<div class="info-label">最低提现金额</div>
<div class="info-value">{{ formatMoney(currentSetting.min_withdrawal_amount) }}</div>
</div>
</div>
<div class="info-card">
<div
class="info-icon"
style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%)"
>
<i class="el-icon">📊</i>
</div>
<div class="info-content">
<div class="info-label">手续费率</div>
<div class="info-value">{{ formatFeeRate(currentSetting.fee_rate) }}</div>
</div>
</div>
<div class="info-card">
<div
class="info-icon"
style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)"
>
<i class="el-icon">🔢</i>
</div>
<div class="info-content">
<div class="info-label">每日提现次数</div>
<div class="info-value">{{ currentSetting.daily_withdrawal_limit }} </div>
</div>
</div>
<div class="info-card">
<div
class="info-icon"
style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)"
>
<i class="el-icon"></i>
</div>
<div class="info-content">
<div class="info-label">到账天数</div>
<div class="info-value">{{
currentSetting.arrival_days === 0 ? '实时到账' : `${currentSetting.arrival_days}`
}}</div>
</div>
</div>
</div>
</ElCard>
<ElCard shadow="never" v-else class="withdrawal-settings-widget empty-state">
<div class="empty-content">
<i class="el-icon-info" style="font-size: 48px; color: var(--el-text-color-placeholder)"></i>
<p>暂无提现配置</p>
</div>
</ElCard>
</template>
<script setup lang="ts">
import { CommissionService } from '@/api/modules'
import { ElTag } from 'element-plus'
import type { WithdrawalSettingItem } from '@/types/api/commission'
import { formatDateTime, formatMoney, formatFeeRate } from '@/utils/business/format'
defineOptions({ name: 'WithdrawalSettingsWidget' })
// 当前生效的配置
const currentSetting = ref<WithdrawalSettingItem | null>(null)
// 加载当前生效配置
const loadCurrentSetting = async () => {
try {
const res = await CommissionService.getCurrentWithdrawalSetting()
if (res.code === 0 && res.data) {
currentSetting.value = res.data
}
} catch (error) {
console.error('获取当前配置失败:', error)
}
}
onMounted(() => {
loadCurrentSetting()
})
</script>
<style lang="scss" scoped>
.withdrawal-settings-widget {
:deep(.el-card__header) {
padding: 18px 20px;
background: var(--el-fill-color-light);
border-bottom: 1px solid var(--el-border-color-lighter);
}
:deep(.el-card__body) {
padding: 20px;
}
.card-header {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
.header-left {
display: flex;
gap: 10px;
align-items: center;
.header-title {
font-size: 15px;
font-weight: 600;
color: var(--el-text-color-primary);
}
}
.header-right {
.creator-info {
font-size: 13px;
color: var(--el-text-color-secondary);
}
}
}
.setting-info {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 16px;
.info-card {
display: flex;
gap: 12px;
align-items: center;
padding: 16px;
background: var(--el-fill-color-blank);
border-radius: 8px;
.info-icon {
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
font-size: 20px;
border-radius: 8px;
}
.info-content {
flex: 1;
min-width: 0;
.info-label {
margin-bottom: 4px;
font-size: 13px;
color: var(--el-text-color-secondary);
}
.info-value {
overflow: hidden;
font-size: 16px;
font-weight: 600;
color: var(--el-text-color-primary);
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
}
&.empty-state {
.empty-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;
}
}
}
}
@media (max-width: 768px) {
.withdrawal-settings-widget {
.card-header {
.header-left,
.header-right {
width: 100%;
}
}
.setting-info {
grid-template-columns: 1fr;
gap: 12px;
}
}
}
</style>