357 lines
10 KiB
Vue
357 lines
10 KiB
Vue
<template>
|
|
<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"></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"></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"></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"></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"></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"></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>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { CommissionService } from '@/api/modules'
|
|
import type { MyCommissionSummary } from '@/types/api/commission'
|
|
import { useUserStore } from '@/store/modules/user'
|
|
import { formatMoney } from '@/utils/business/format'
|
|
|
|
defineOptions({ name: 'CommissionSummaryWidget' })
|
|
|
|
const userStore = useUserStore()
|
|
|
|
const currentShopId = computed(() => userStore.info?.shop_id)
|
|
|
|
const errorMsg = ref<string>('')
|
|
|
|
const summary = ref<MyCommissionSummary>({
|
|
main_balance: 0,
|
|
total_commission: 0,
|
|
available_commission: 0,
|
|
frozen_commission: 0,
|
|
withdrawing_commission: 0,
|
|
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 = '当前账号未关联店铺'
|
|
return
|
|
}
|
|
|
|
try {
|
|
const res = await CommissionService.getShopFundSummary({
|
|
page: 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)
|
|
if (myShopData) {
|
|
summary.value = {
|
|
main_balance: myShopData.main_balance || 0,
|
|
total_commission: myShopData.total_commission,
|
|
available_commission: myShopData.available_commission,
|
|
frozen_commission: myShopData.frozen_commission,
|
|
withdrawing_commission: myShopData.withdrawing_commission,
|
|
withdrawn_commission: myShopData.withdrawn_commission
|
|
}
|
|
errorMsg.value = ''
|
|
} else {
|
|
errorMsg.value = '未找到佣金数据'
|
|
}
|
|
} else {
|
|
errorMsg.value = res.msg || '获取佣金概览失败'
|
|
}
|
|
} catch (error: any) {
|
|
console.error('获取佣金概览失败:', error)
|
|
if (error?.response?.data?.msg) {
|
|
errorMsg.value = error.response.data.msg
|
|
} else {
|
|
errorMsg.value = '获取佣金概览失败'
|
|
}
|
|
}
|
|
}
|
|
|
|
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;
|
|
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;
|
|
color: var(--el-text-color-primary);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@media (width <= 768px) {
|
|
.commission-summary-widget {
|
|
.stats-info {
|
|
grid-template-columns: 1fr;
|
|
gap: 12px;
|
|
}
|
|
|
|
.stats-breakdown {
|
|
.breakdown-content {
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|