feat(admin,api,player): 优胜赛配置、赛事管理重构与玩家端投注体验优化
管理端拆分赛事/优胜赛 Tab,新增联赛优胜赔率面板(批量、排序、外侧删除);统一 list-chrome 工具栏对齐与列表页布局;Dashboard 失败重试、Users 操作下拉、小屏侧栏等体验修复。 API 扩展优胜赛与赛事目录接口,完善投注与钱包查询;玩家端重构赛事卡片、串关面板、注单/钱包页,新增注单详情、下注成功动画与下拉刷新。 Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
104
apps/player/src/components/WalletStatsPanel.vue
Normal file
104
apps/player/src/components/WalletStatsPanel.vue
Normal file
@@ -0,0 +1,104 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { formatMoney, parseAmount } from '../utils/localeDisplay';
|
||||
|
||||
interface Transaction {
|
||||
transactionType: string;
|
||||
amount: string;
|
||||
createdAt: string;
|
||||
transactionId?: string;
|
||||
}
|
||||
|
||||
const props = defineProps<{ items: Transaction[] }>();
|
||||
const { t, locale } = useI18n();
|
||||
|
||||
const stats = computed(() => {
|
||||
let income = 0;
|
||||
let expense = 0;
|
||||
|
||||
for (const tx of props.items) {
|
||||
const amt = parseAmount(tx.amount);
|
||||
if (amt >= 0) income += amt;
|
||||
else expense += Math.abs(amt);
|
||||
}
|
||||
|
||||
const net = income - expense;
|
||||
|
||||
return { income, expense, net };
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="wallet-stats-panel">
|
||||
<div class="stats-row">
|
||||
<div class="stat-item">
|
||||
<span class="stat-val income">{{ formatMoney(stats.income, locale) }}</span>
|
||||
<span class="stat-label">{{ t('wallet.stats_income') }}</span>
|
||||
</div>
|
||||
<div class="stat-divider" />
|
||||
<div class="stat-item">
|
||||
<span class="stat-val expense">{{ formatMoney(stats.expense, locale) }}</span>
|
||||
<span class="stat-label">{{ t('wallet.stats_expense') }}</span>
|
||||
</div>
|
||||
<div class="stat-divider" />
|
||||
<div class="stat-item">
|
||||
<span class="stat-val" :class="stats.net >= 0 ? 'income' : 'expense'">
|
||||
{{ formatMoney(stats.net, locale) }}
|
||||
</span>
|
||||
<span class="stat-label">{{ t('wallet.stats_net') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.wallet-stats-panel {
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
padding: 14px 12px;
|
||||
margin-bottom: 12px;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.stats-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.stat-divider {
|
||||
width: 1px;
|
||||
height: 32px;
|
||||
background: var(--border);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.stat-val {
|
||||
display: block;
|
||||
font-size: 15px;
|
||||
font-weight: 900;
|
||||
font-variant-numeric: tabular-nums;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.stat-val.income { color: #3db865; }
|
||||
.stat-val.expense { color: #e05050; }
|
||||
|
||||
.stat-label {
|
||||
display: block;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
color: var(--text-muted);
|
||||
letter-spacing: 0.04em;
|
||||
margin-top: 3px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user