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 7m10s
Details

Browse Source
This commit is contained in:
sexygoat
2026-04-11 12:19:35 +08:00
parent 90ae585651
commit 33e15314ac
30 changed files with 1077 additions and 532 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
src/views/dashboard/analysis/index.vue
View File

@@ -1,19 +1,9 @@
<template>
<div class="analysis-dashboard">
<!-- 轮询统计 -->
<div class="section-title">轮询统计</div>
<PollingStats />
<!-- 佣金概览 -->
<div class="section-title">佣金概览</div>
<CommissionSummary />
<!-- 提现配置 -->
<div class="section-title">提现配置</div>
<CommissionStats />
<WithdrawalSettings />
<!-- 支付配置 -->
<div class="section-title">支付配置</div>
<ActiveWechatConfig />
<!--<el-row :gutter="20">-->
@@ -52,16 +42,9 @@
</template>
<script setup lang="ts">
import TodaySales from './widget/TodaySales.vue'
import VisitorInsights from './widget/VisitorInsights.vue'
import TotalRevenue from './widget/TotalRevenue.vue'
import CustomerSatisfaction from './widget/CustomerSatisfaction.vue'
import TargetVsReality from './widget/TargetVsReality.vue'
import TopProducts from './widget/TopProducts.vue'
import SalesMappingByCountry from './widget/SalesMappingByCountry.vue'
import VolumeServiceLevel from './widget/VolumeServiceLevel.vue'
import PollingStats from './widget/PollingStats.vue'
import CommissionSummary from './widget/CommissionSummary.vue'
import CommissionStats from './widget/CommissionStats.vue'
import WithdrawalSettings from './widget/WithdrawalSettings.vue'
import ActiveWechatConfig from './widget/ActiveWechatConfig.vue'
@@ -71,15 +54,9 @@
<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;
}
.analysis-dashboard {
display: flex;
flex-direction: column;
gap: 16px;
}
</style>

35
src/views/dashboard/analysis/widget/ActiveWechatConfig.vue
View File

@@ -1,17 +1,18 @@
<template>
<ElCard shadow="never" class="active-wechat-config-widget" v-if="activeConfig">
<ElCard shadow="never" class="active-wechat-config-widget">
<template #header>
<div class="card-header">
<div class="header-left">
<span class="header-title">当前生效支付配置</span>
<ElTag type="success" effect="dark" size="small">生效中</ElTag>
<ElTag v-if="activeConfig" type="success" effect="dark" size="small">生效中</ElTag>
<ElTag v-else type="info" effect="plain" size="small">未配置</ElTag>
</div>
<div class="header-right">
<div v-if="activeConfig" class="header-right">
<span class="creator-info">创建于 {{ formatDateTime(activeConfig.created_at) }}</span>
</div>
</div>
</template>
<div class="config-info">
<div v-if="activeConfig" class="config-info">
<div class="info-card">
<div
class="info-icon"
@@ -61,9 +62,7 @@
</div>
</div>
</div>
</ElCard>
<ElCard shadow="never" v-else class="active-wechat-config-widget empty-state">
<div class="empty-content">
<div v-else class="empty-content">
<i class="el-icon-info" style="font-size: 48px; color: var(--el-text-color-placeholder)"></i>
<p>暂无生效的支付配置</p>
</div>
@@ -203,19 +202,17 @@
}
}
&.empty-state {
.empty-content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 40px 20px;
color: var(--el-text-color-secondary);
.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;
}
p {
margin-top: 12px;
font-size: 14px;
}
}
}

267
src/views/dashboard/analysis/widget/CommissionStats.vue Normal file
View File

@@ -0,0 +1,267 @@
<template>
<ElCard shadow="never" class="commission-stats-widget" v-if="stats">
<template #header>
<div class="card-header">
<div class="header-left">
<span class="header-title">佣金资金统计</span>
</div>
<div class="header-right">
<span class="date-range">{{ startTime }} ~ {{ endTime }}</span>
</div>
</div>
</template>
<div class="stats-info">
<div class="stats-card">
<div
class="stats-icon"
style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%)"
>
<i class="el-icon">💰</i>
</div>
<div class="stats-content">
<div class="stats-label">总收入</div>
<div class="stats-value">{{ formatMoney(stats.total_amount) }}</div>
</div>
</div>
<div class="stats-card">
<div
class="stats-icon"
style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)"
>
<i class="el-icon">📊</i>
</div>
<div class="stats-content">
<div class="stats-label">总笔数</div>
<div class="stats-value">{{ stats.total_count }} 笔</div>
</div>
</div>
<div class="stats-card">
<div
class="stats-icon"
style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)"
>
<i class="el-icon">📈</i>
</div>
<div class="stats-content">
<div class="stats-label">成本价差收入</div>
<div class="stats-value">{{ formatMoney(stats.cost_diff_amount) }}</div>
</div>
</div>
<div class="stats-card">
<div
class="stats-icon"
style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%)"
>
<i class="el-icon">⚡</i>
</div>
<div class="stats-content">
<div class="stats-label">一次性佣金收入</div>
<div class="stats-value">{{ formatMoney(stats.one_time_amount) }}</div>
</div>
</div>
</div>
<div class="stats-breakdown">
<div class="breakdown-item">
<span class="breakdown-label">成本价差占比</span>
<span class="breakdown-value">{{ formatPercent(stats.cost_diff_percent) }}</span>
</div>
<div class="breakdown-item">
<span class="breakdown-label">一次性佣金占比</span>
<span class="breakdown-value">{{ formatPercent(stats.one_time_percent) }}</span>
</div>
</div>
</ElCard>
<ElCard shadow="never" v-else class="commission-stats-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 type { CommissionStatsResponse } from '@/types/api/commission'
import { useUserStore } from '@/store/modules/user'
import { formatMoney } from '@/utils/business/format'
defineOptions({ name: 'CommissionStatsWidget' })
const userStore = useUserStore()
const currentShopId = computed(() => userStore.info?.shop_id)
const stats = ref<CommissionStatsResponse | null>(null)
const startTime = ref('')
const endTime = ref('')
const formatPercent = (value: number) => {
return (value / 10).toFixed(1) + '%'
}
const loadCommissionStats = async () => {
if (!currentShopId.value) return
try {
const res = await CommissionService.getShopCommissionStats(currentShopId.value)
if (res.code === 0 && res.data) {
stats.value = res.data
}
} catch (error) {
console.error('获取佣金资金统计失败:', error)
}
}
onMounted(() => {
loadCommissionStats()
})
</script>
<style lang="scss" scoped>
.commission-stats-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;
flex-wrap: wrap;
gap: 12px;
align-items: center;
justify-content: space-between;
.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 {
.date-range {
font-size: 13px;
color: var(--el-text-color-secondary);
}
}
}
.stats-info {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 16px;
margin-bottom: 20px;
.stats-card {
display: flex;
gap: 12px;
align-items: center;
padding: 16px;
background: var(--el-fill-color-blank);
border-radius: 8px;
.stats-icon {
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
font-size: 20px;
border-radius: 8px;
}
.stats-content {
flex: 1;
min-width: 0;
.stats-label {
margin-bottom: 4px;
font-size: 13px;
color: var(--el-text-color-secondary);
}
.stats-value {
overflow: hidden;
font-size: 16px;
font-weight: 600;
color: var(--el-text-color-primary);
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
}
.stats-breakdown {
display: flex;
gap: 24px;
padding: 16px;
background: var(--el-fill-color-light);
border-radius: 8px;
.breakdown-item {
display: flex;
gap: 8px;
align-items: center;
.breakdown-label {
font-size: 13px;
color: var(--el-text-color-secondary);
}
.breakdown-value {
font-size: 14px;
font-weight: 600;
color: var(--el-text-color-primary);
}
}
}
&.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 (width <= 768px) {
.commission-stats-widget {
.card-header {
.header-left,
.header-right {
width: 100%;
}
}
.stats-info {
grid-template-columns: 1fr;
gap: 12px;
}
.stats-breakdown {
flex-direction: column;
gap: 12px;
}
}
}
</style>

452
src/views/dashboard/analysis/widget/CommissionSummary.vue
View File

@@ -1,101 +1,116 @@
<template>
<!-- 错误状态 -->
<ElCard shadow="never" v-if="errorMsg" class="commission-summary-widget error-state">
<ElCard shadow="never" class="commission-summary-widget" v-if="!errorMsg">
<template #header>
<div class="card-header">
<div class="header-left">
<span class="header-title">我的佣金概览</span>
</div>
</div>
</template>
<div class="stats-info">
<div class="stats-card">
<div
class="stats-icon"
style="background: linear-gradient(135deg, #ff6b6b 0%, #ff8e53 100%)"
>
<i class="iconfont-sys">&#xe722;</i>
</div>
<div class="stats-content">
<div class="stats-label">预充值余额</div>
<div class="stats-value">{{ formatMoney(summary.main_balance) }}</div>
</div>
</div>
<div class="stats-card">
<div
class="stats-icon"
style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%)"
>
<i class="iconfont-sys">&#xe71d;</i>
</div>
<div class="stats-content">
<div class="stats-label">总佣金</div>
<div class="stats-value">{{ formatMoney(summary.total_commission) }}</div>
</div>
</div>
<div class="stats-card">
<div
class="stats-icon"
style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%)"
>
<i class="iconfont-sys">&#xe71e;</i>
</div>
<div class="stats-content">
<div class="stats-label">可提现佣金</div>
<div class="stats-value">{{ formatMoney(summary.available_commission) }}</div>
</div>
</div>
<div class="stats-card">
<div
class="stats-icon"
style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)"
>
<i class="iconfont-sys">&#xe720;</i>
</div>
<div class="stats-content">
<div class="stats-label">冻结佣金</div>
<div class="stats-value">{{ formatMoney(summary.frozen_commission) }}</div>
</div>
</div>
<div class="stats-card">
<div
class="stats-icon"
style="background: linear-gradient(135deg, #fa709a 0%, #fee140 100%)"
>
<i class="iconfont-sys">&#xe71f;</i>
</div>
<div class="stats-content">
<div class="stats-label">提现中佣金</div>
<div class="stats-value">{{ formatMoney(summary.withdrawing_commission) }}</div>
</div>
</div>
<div class="stats-card">
<div
class="stats-icon"
style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)"
>
<i class="iconfont-sys">&#xe721;</i>
</div>
<div class="stats-content">
<div class="stats-label">已提现佣金</div>
<div class="stats-value">{{ formatMoney(summary.withdrawn_commission) }}</div>
</div>
</div>
</div>
<div class="stats-breakdown" v-if="withdrawalSetting">
<div class="breakdown-title">当前提现配置</div>
<div class="breakdown-content">
<div class="breakdown-item">
<span class="breakdown-label">最低提现金额</span>
<span class="breakdown-value">{{
formatMoney(withdrawalSetting.min_withdrawal_amount)
}}</span>
</div>
<div class="breakdown-item">
<span class="breakdown-label">手续费率</span>
<span class="breakdown-value">{{ (withdrawalSetting.fee_rate / 100).toFixed(2) }}%</span>
</div>
<div class="breakdown-item">
<span class="breakdown-label">每日提现次数</span>
<span class="breakdown-value">{{ withdrawalSetting.daily_withdrawal_limit }} 次</span>
</div>
<div class="breakdown-item">
<span class="breakdown-label">到账天数</span>
<span class="breakdown-value">{{ withdrawalSetting.arrival_days }} 天</span>
</div>
</div>
</div>
</ElCard>
<ElCard shadow="never" v-else class="commission-summary-widget error-state">
<div class="error-content">
<i class="el-icon-warning" style="font-size: 48px; color: var(--el-color-warning)"></i>
<p>{{ errorMsg }}</p>
</div>
</ElCard>
<!-- 正常显示 -->
<div v-else class="commission-summary-widget">
<div class="stats-container">
<ElCard shadow="hover" class="stat-card-wrapper">
<div class="stat-card">
<div
class="stat-icon"
style="background: linear-gradient(135deg, #ff6b6b 0%, #ff8e53 100%)"
>
<i class="iconfont-sys">&#xe722;</i>
</div>
<div class="stat-content">
<div class="stat-label">预充值余额</div>
<div class="stat-value">{{ formatMoney(summary.main_balance) }}</div>
</div>
</div>
</ElCard>
<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>
<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>
<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>
<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>
<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>
</div>
</div>
</template>
<script setup lang="ts">
@@ -108,13 +123,10 @@
const userStore = useUserStore()
// 获取当前用户的 shop_id
const currentShopId = computed(() => userStore.userInfo?.shop_id)
const currentShopId = computed(() => userStore.info?.shop_id)
// 错误信息
const errorMsg = ref<string>('')
// 佣金概览
const summary = ref<MyCommissionSummary>({
main_balance: 0,
total_commission: 0,
@@ -124,7 +136,13 @@
withdrawn_commission: 0
})
// 加载佣金概览
const withdrawalSetting = ref<{
min_withdrawal_amount: number
fee_rate: number
daily_withdrawal_limit: number
arrival_days: number
} | null>(null)
const loadSummary = async () => {
if (!currentShopId.value) {
errorMsg.value = '当前账号未关联店铺'
@@ -132,14 +150,12 @@
}
try {
// 调用 fund-summary 接口，通过 shop_id 过滤获取自己的数据
const res = await CommissionService.getShopFundSummary({
page: 1,
pageSize: 1
page_size: 1
})
if (res.code === 0 && res.data.items && res.data.items.length > 0) {
// 从结果中找到当前用户的店铺数据
const myShopData = res.data.items.find(item => item.shop_id === currentShopId.value)
const myShopData = res.data.items.find((item) => item.shop_id === currentShopId.value)
if (myShopData) {
summary.value = {
main_balance: myShopData.main_balance || 0,
@@ -158,7 +174,6 @@
}
} catch (error: any) {
console.error('获取佣金概览失败:', error)
// 尝试从错误响应中提取 msg
if (error?.response?.data?.msg) {
errorMsg.value = error.response.data.msg
} else {
@@ -167,13 +182,144 @@
}
}
const loadWithdrawalSetting = async () => {
try {
const res = await CommissionService.getCurrentWithdrawalSetting()
if (res.code === 0 && res.data) {
withdrawalSetting.value = {
min_withdrawal_amount: res.data.min_withdrawal_amount,
fee_rate: res.data.fee_rate,
daily_withdrawal_limit: res.data.daily_withdrawal_limit,
arrival_days: res.data.arrival_days
}
}
} catch (error) {
console.error('获取提现设置失败:', error)
}
}
onMounted(() => {
loadSummary()
loadWithdrawalSetting()
})
</script>
<style lang="scss" scoped>
.commission-summary-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;
flex-wrap: wrap;
gap: 12px;
align-items: center;
justify-content: space-between;
.header-left {
display: flex;
gap: 10px;
align-items: center;
.header-title {
font-size: 15px;
font-weight: 600;
color: var(--el-text-color-primary);
}
}
}
.stats-info {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 16px;
margin-bottom: 20px;
.stats-card {
display: flex;
gap: 12px;
align-items: center;
padding: 16px;
background: var(--el-fill-color-blank);
border-radius: 8px;
.stats-icon {
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
font-size: 20px;
color: white;
border-radius: 8px;
}
.stats-content {
flex: 1;
min-width: 0;
.stats-label {
margin-bottom: 4px;
font-size: 13px;
color: var(--el-text-color-secondary);
}
.stats-value {
overflow: hidden;
font-size: 16px;
font-weight: 600;
color: var(--el-text-color-primary);
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
}
.stats-breakdown {
padding: 16px;
background: var(--el-fill-color-light);
border-radius: 8px;
.breakdown-title {
margin-bottom: 12px;
font-size: 14px;
font-weight: 600;
color: var(--el-text-color-primary);
}
.breakdown-content {
display: flex;
flex-wrap: wrap;
gap: 24px;
.breakdown-item {
display: flex;
gap: 8px;
align-items: center;
.breakdown-label {
font-size: 13px;
color: var(--el-text-color-secondary);
}
.breakdown-value {
font-size: 14px;
font-weight: 600;
color: var(--el-text-color-primary);
}
}
}
}
&.error-state {
.error-content {
display: flex;
@@ -190,108 +336,20 @@
}
}
}
.stats-container {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
.stat-card-wrapper {
flex: 1;
min-width: 180px;
:deep(.el-card__body) {
padding: 16px;
}
}
.stat-card {
display: flex;
gap: 12px;
align-items: center;
.stat-icon {
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
font-size: 20px;
color: white;
border-radius: 8px;
}
.stat-content {
flex: 1;
min-width: 0;
.stat-label {
margin-bottom: 4px;
font-size: 12px;
color: var(--el-text-color-secondary);
white-space: nowrap;
}
.stat-value {
overflow: hidden;
font-size: 18px;
font-weight: 600;
color: var(--el-text-color-primary);
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
}
@media (width <= 1400px) {
.commission-summary-widget {
.stats-container {
gap: 12px;
}
.stat-card-wrapper {
min-width: 160px;
}
.stat-card {
.stat-content {
.stat-value {
font-size: 16px;
}
}
}
}
}
@media (width <= 1200px) {
.commission-summary-widget {
.stat-card-wrapper {
flex: 1 1 calc(33.333% - 12px);
min-width: 200px;
}
}
}
@media (width <= 768px) {
.commission-summary-widget {
.stats-container {
.stats-info {
grid-template-columns: 1fr;
gap: 12px;
}
.stat-card-wrapper {
flex: 1 1 calc(50% - 8px);
min-width: 150px;
}
}
}
@media (width <= 480px) {
.commission-summary-widget {
.stat-card-wrapper {
flex: 1 1 100%;
.stats-breakdown {
.breakdown-content {
flex-direction: column;
gap: 12px;
}
}
}
}

204
src/views/dashboard/analysis/widget/WithdrawalSettings.vue
View File

@@ -1,110 +1,136 @@
<template>
<ElCard shadow="never" class="withdrawal-settings-widget" v-if="currentSetting">
<ElCard shadow="never" class="daily-commission-stats-widget" v-if="statsList.length > 0">
<template #header>
<div class="card-header">
<div class="header-left">
<span class="header-title">当前生效配置</span>
<ElTag type="success" effect="dark" size="small">生效中</ElTag>
<span class="header-title">每日佣金统计</span>
</div>
<div class="header-right">
<span class="creator-info"
>{{ currentSetting.creator_name || '-' }} 创建于
{{ formatDateTime(currentSetting.created_at) }}</span
<span class="date-range"
>{{ formatDateRange(startDate) }} ~ {{ formatDateRange(endDate) }}</span
>
</div>
</div>
</template>
<div class="setting-info">
<div class="info-card">
<div class="stats-info">
<div class="stats-card">
<div
class="info-icon"
class="stats-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 class="stats-content">
<div class="stats-label">总收入</div>
<div class="stats-value">{{ formatMoney(totalAmount) }}</div>
</div>
</div>
<div class="info-card">
<div class="stats-card">
<div
class="info-icon"
style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%)"
class="stats-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">{{ formatFeeRate(currentSetting.fee_rate) }}</div>
<div class="stats-content">
<div class="stats-label">总笔数</div>
<div class="stats-value">{{ totalCount }} 笔</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 class="stats-chart">
<div class="chart-bar" v-for="item in statsList" :key="item.date">
<div class="bar-label">{{ formatDateShort(item.date) }}</div>
<div class="bar-value" :style="{ height: getBarHeight(item.total_amount) + 'px' }">
<ElTooltip :content="formatMoney(item.total_amount)" placement="top">
<div class="bar-fill"></div>
</ElTooltip>
</div>
</div>
</div>
</ElCard>
<ElCard shadow="never" v-else class="withdrawal-settings-widget empty-state">
<ElCard shadow="never" v-else class="daily-commission-stats-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>
<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'
import { ElTooltip } from 'element-plus'
import type { DailyCommissionStatsItem } from '@/types/api/commission'
import { useUserStore } from '@/store/modules/user'
import { formatMoney } from '@/utils/business/format'
defineOptions({ name: 'WithdrawalSettingsWidget' })
defineOptions({ name: 'DailyCommissionStatsWidget' })
// 当前生效的配置
const currentSetting = ref<WithdrawalSettingItem | null>(null)
const userStore = useUserStore()
const currentShopId = computed(() => userStore.info?.shop_id)
// 加载当前生效配置
const loadCurrentSetting = async () => {
const statsList = ref<DailyCommissionStatsItem[]>([])
const loading = ref(false)
const startDate = ref('')
const endDate = ref('')
const totalAmount = computed(() =>
statsList.value.reduce((sum, item) => sum + item.total_amount, 0)
)
const totalCount = computed(() =>
statsList.value.reduce((sum, item) => sum + item.total_count, 0)
)
const maxAmount = computed(() => {
if (statsList.value.length === 0) return 0
return Math.max(...statsList.value.map((item) => item.total_amount))
})
const getBarHeight = (amount: number) => {
if (maxAmount.value === 0) return 0
return Math.max(4, (amount / maxAmount.value) * 100)
}
const formatDateShort = (dateStr: string) => {
if (!dateStr) return '-'
return dateStr.slice(5) // MM-DD
}
const formatDateRange = (dateStr: string) => {
if (!dateStr) return '-'
return dateStr // API already returns YYYY-MM-DD format
}
const loadDailyStats = async () => {
if (!currentShopId.value) return
loading.value = true
try {
const res = await CommissionService.getCurrentWithdrawalSetting()
const res = await CommissionService.getShopDailyCommissionStats(currentShopId.value, {
days: 30
})
if (res.code === 0 && res.data) {
currentSetting.value = res.data
statsList.value = res.data
if (res.data.length > 0) {
startDate.value = res.data[res.data.length - 1]?.date || ''
endDate.value = res.data[0]?.date || ''
}
}
} catch (error) {
console.error('获取当前配置失败:', error)
console.error('获取每日佣金统计失败:', error)
} finally {
loading.value = false
}
}
onMounted(() => {
loadCurrentSetting()
loadDailyStats()
})
</script>
<style lang="scss" scoped>
.withdrawal-settings-widget {
.daily-commission-stats-widget {
:deep(.el-card__header) {
padding: 18px 20px;
background: var(--el-fill-color-light);
@@ -135,19 +161,20 @@
}
.header-right {
.creator-info {
.date-range {
font-size: 13px;
color: var(--el-text-color-secondary);
}
}
}
.setting-info {
.stats-info {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 16px;
margin-bottom: 20px;
.info-card {
.stats-card {
display: flex;
gap: 12px;
align-items: center;
@@ -155,7 +182,7 @@
background: var(--el-fill-color-blank);
border-radius: 8px;
.info-icon {
.stats-icon {
display: flex;
flex-shrink: 0;
align-items: center;
@@ -166,17 +193,17 @@
border-radius: 8px;
}
.info-content {
.stats-content {
flex: 1;
min-width: 0;
.info-label {
.stats-label {
margin-bottom: 4px;
font-size: 13px;
color: var(--el-text-color-secondary);
}
.info-value {
.stats-value {
overflow: hidden;
font-size: 16px;
font-weight: 600;
@@ -188,6 +215,46 @@
}
}
.stats-chart {
display: flex;
align-items: flex-end;
gap: 8px;
height: 120px;
padding-top: 10px;
.chart-bar {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
.bar-label {
font-size: 11px;
color: var(--el-text-color-secondary);
}
.bar-value {
width: 100%;
display: flex;
justify-content: center;
.bar-fill {
width: 80%;
max-width: 24px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 4px 4px 0 0;
cursor: pointer;
transition: opacity 0.2s;
&:hover {
opacity: 0.8;
}
}
}
}
}
&.empty-state {
.empty-content {
display: flex;
@@ -206,7 +273,7 @@
}
@media (width <= 768px) {
.withdrawal-settings-widget {
.daily-commission-stats-widget {
.card-header {
.header-left,
.header-right {
@@ -214,10 +281,15 @@
}
}
.setting-info {
.stats-info {
grid-template-columns: 1fr;
gap: 12px;
}
.stats-chart {
overflow-x: auto;
padding-bottom: 10px;
}
}
}
</style>