ysc/thebet365
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 开户备注、账单展示优化与后台代理管理增强

Browse Source 
- 新增初始上分备注（日常上分/开户赠金/自定义）及前后台校验与展示

- 优化钱包流水类型与备注显示，区分管理员/代理/玩家上下分

- 修复登录后语言被后端覆盖的问题，登录时同步当前语言到服务端

- 后台代理/玩家表格操作栏重构，充值订单增加备注列

- 前台个人中心、充值、账单与验证码组件体验优化

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Mars
2026-06-11 17:23:58 +08:00
parent 10485ecfaf
commit 03e72ca9b2
46 changed files with 3721 additions and 1059 deletions
Download Patch File Download Diff File Expand all files Collapse all files

578
apps/player/src/views/ProfileView.vue
View File

@@ -3,7 +3,7 @@ import { ref, onMounted, computed } from 'vue';
import { useRouter, RouterLink } from 'vue-router';
import { useI18n } from 'vue-i18n';
import api from '../api';
import { formatMoney, formatMoneyCompact } from '../utils/localeDisplay';
import { formatMoney } from '../utils/localeDisplay';
import LocaleFlag from '../components/LocaleFlag.vue';
import { useAuthStore } from '../stores/auth';
import { useAppLocale } from '../composables/useAppLocale';
@@ -21,49 +21,49 @@ const profile = ref<{
wallet?: { availableBalance: string; frozenBalance: string };
} | null>(null);
const loading = ref(true);
const error = ref(false);
const rulesExpanded = ref(false);
const cashbackTotal = ref('0');
const displayAmount = ref(0);
const animating = ref(false);
function amountValue(value: unknown): number {
if (value == null) return 0;
const n = Number(value);
return Number.isFinite(n) ? n : 0;
}
function runCountUp(target: number) {
const duration = 3000;
const start = performance.now();
animating.value = true;
function step(now: number) {
const progress = Math.min((now - start) / duration, 1);
const eased = 1 - Math.pow(1 - progress, 5);
displayAmount.value = target * eased;
if (progress < 1) {
requestAnimationFrame(step);
} else {
displayAmount.value = target;
animating.value = false;
}
}
requestAnimationFrame(step);
}
const displayedBalance = computed(() =>
animating.value
? formatMoney(displayAmount.value, locale.value)
: formatMoneyCompact(profile.value?.wallet?.availableBalance, locale.value),
);
async function fetchProfile() {
const { data } = await api.get('/player/profile');
profile.value = data.data;
initFromUser(data.data?.locale);
runCountUp(amountValue(data.data?.wallet?.availableBalance));
loading.value = true;
error.value = false;
try {
const { data } = await api.get('/player/profile');
profile.value = data.data;
initFromUser(data.data?.locale);
// Fetch cashback total in parallel
void fetchCashbackTotal();
} catch {
error.value = true;
} finally {
loading.value = false;
}
}
onMounted(fetchProfile);
async function fetchCashbackTotal() {
try {
const { data } = await api.get('/player/wallet/transactions/stats');
const byType = data.data?.byType ?? [];
let sum = 0;
for (const g of byType) {
if (['CASHBACK', 'CASHBACK_DEPOSIT'].includes(g.transactionType?.toUpperCase())) {
sum += Math.abs(parseFloat(g.totalAmount ?? '0'));
}
}
cashbackTotal.value = sum.toString();
} catch {
// Ignore errors, keep default value
}
}
onMounted(() => {
void fetchProfile();
});
const { pullDistance, refreshing, spinning, progress } = usePullToRefresh({
onRefresh: async () => { await fetchProfile(); },
@@ -82,6 +82,19 @@ function logout() {
auth.logout();
router.push('/');
}
const balanceDisplay = computed(() =>
formatMoney(profile.value?.wallet?.availableBalance, locale.value),
);
const balanceAmountClass = computed(() => {
const len = balanceDisplay.value.length;
if (len <= 10) return 'balance-amount--xl';
if (len <= 13) return 'balance-amount--lg';
if (len <= 16) return 'balance-amount--md';
if (len <= 19) return 'balance-amount--sm';
return 'balance-amount--xs';
});
</script>
<template>
@@ -93,30 +106,55 @@ function logout() {
<GoldSpinner v-if="spinning" :size="28" :progress="progress" :active="spinning" />
</div>
<div v-if="loading" class="loading-state">
<GoldSpinner :size="36" :active="true" />
</div>
<div v-else-if="error" class="error-state">
<p class="error-text">{{ t('common.load_failed') }}</p>
<button type="button" class="retry-btn" @click="fetchProfile">{{ t('common.retry') }}</button>
</div>
<template v-else>
<div class="wallet-banner">
<img class="wallet-banner-img" :src="walletBg" alt="" />
<img src="/logo.png" alt="TheBet365" class="wallet-card-logo" />
<div class="wallet-banner-info">
<div class="card-balance-block">
<span class="card-kicker">
<LocaleFlag :locale="locale" :size="14" />
{{ t('wallet.balance') }}
</span>
<div class="card-balance-row">
<p class="card-balance">{{ displayedBalance }}</p>
<button type="button" class="card-recharge-btn" @click.stop="router.push('/wallet/recharge')">
{{ t('recharge.title') }}
</button>
<div class="wallet-banner-scrim" aria-hidden="true" />
<div class="card-overlay">
<div class="bank-card-top">
<div class="bank-card-top-left">
<div class="bank-card-chip" aria-hidden="true">
<span /><span /><span />
</div>
<img src="/logo.png" alt="TheBet365" class="brand-logo" />
<div class="bank-card-brand-text">
<span class="brand-name">THEBET365</span>
<span class="bank-card-type">MEMBER</span>
</div>
</div>
<RouterLink to="/wallet/recharge" class="recharge-btn">
<span class="recharge-icon">+</span>
<span>{{ t('recharge.title') }}</span>
</RouterLink>
</div>
<div class="card-foot">
<div class="card-holder">
<span class="card-kicker">{{ t('wallet.card_holder') }}</span>
<span class="card-name">{{ profile?.username }}</span>
<div class="bank-card-balance">
<span class="bank-card-label">当前余额</span>
<p class="bank-card-number balance-amount" :class="balanceAmountClass">{{ balanceDisplay }}</p>
</div>
<div class="bank-card-footer">
<div class="bank-card-field">
<span class="bank-card-label">持卡人</span>
<span class="bank-card-holder">{{ profile?.username }}</span>
</div>
<div class="card-pending">
<span class="card-kicker">{{ t('wallet.unsettled') }}</span>
<span class="card-pending-val">{{ formatMoney(profile?.wallet?.frozenBalance, locale) }}</span>
<div class="bank-card-field bank-card-field--center">
<span class="bank-card-label">累计返水</span>
<span class="bank-card-stat">{{ formatMoney(cashbackTotal, locale) }}</span>
</div>
<div class="bank-card-field bank-card-field--right">
<span class="bank-card-label">未结算</span>
<span class="bank-card-stat">{{ formatMoney(profile?.wallet?.frozenBalance, locale) }}</span>
</div>
</div>
</div>
@@ -124,17 +162,46 @@ function logout() {
<section class="settings-group">
<RouterLink to="/wallet/detail" class="settings-cell settings-cell--gold-entry">
<span class="cell-label">{{ t('wallet.view_all') }}</span>
<span class="cell-main">
<svg class="cell-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true">
<path d="M9 5H5a2 2 0 00-2 2v12a2 2 0 002 2h14a2 2 0 002-2V9" />
<path d="M9 5a2 2 0 012-2h2a2 2 0 012 2v0M9 12h6M9 16h4" />
</svg>
<span class="cell-label">{{ t('wallet.view_all') }}</span>
</span>
<span class="cell-chevron" aria-hidden="true">›</span>
</RouterLink>
<RouterLink to="/profile/cashbacks" class="settings-cell settings-cell--gold-entry">
<span class="cell-label">{{ t('wallet.view_cashbacks') }}</span>
<span class="cell-main">
<svg class="cell-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true">
<circle cx="12" cy="12" r="8" />
<path d="M12 8v4l2.5 2.5" />
</svg>
<span class="cell-label">{{ t('wallet.view_cashbacks') }}</span>
</span>
<span class="cell-chevron" aria-hidden="true">›</span>
</RouterLink>
<RouterLink to="/wallet/recharge/history" class="settings-cell settings-cell--gold-entry">
<span class="cell-main">
<svg class="cell-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true">
<path d="M12 8v8M8 12h8" />
<circle cx="12" cy="12" r="8" />
</svg>
<span class="cell-label">{{ t('recharge.history_title') }}</span>
</span>
<span class="cell-chevron" aria-hidden="true">›</span>
</RouterLink>
<RouterLink to="/profile/edit" class="settings-cell">
<span class="cell-label">{{ t('profile.edit') }}</span>
<span class="cell-main">
<svg class="cell-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true">
<circle cx="12" cy="8" r="3.5" />
<path d="M5 20c0-3.5 3.1-6 7-6s7 2.5 7 6" />
</svg>
<span class="cell-label">{{ t('profile.edit') }}</span>
</span>
<span class="cell-chevron" aria-hidden="true">›</span>
</RouterLink>
@@ -145,7 +212,13 @@ function logout() {
:aria-expanded="rulesExpanded"
@click="rulesExpanded = !rulesExpanded"
>
<span class="cell-label">{{ t('profile.rules_title') }}</span>
<span class="cell-main">
<svg class="cell-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true">
<path d="M7 4h10v16H7z" />
<path d="M10 8h6M10 12h6M10 16h4" />
</svg>
<span class="cell-label">{{ t('profile.rules_title') }}</span>
</span>
<span class="cell-chevron" :class="{ open: rulesExpanded }" aria-hidden="true">›</span>
</button>
<div v-show="rulesExpanded" class="rules-body">
@@ -159,6 +232,10 @@ function logout() {
<div class="settings-cell settings-cell--stack">
<div class="cell-head">
<svg class="cell-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true">
<circle cx="12" cy="12" r="9" />
<path d="M3 12h18M12 3c2.5 2.8 4 6 4 9s-1.5 6.2-4 9M12 3c-2.5 2.8-4 6-4 9s1.5 6.2 4 9" />
</svg>
<span class="cell-label">{{ t('profile.language') }}</span>
</div>
<div class="lang-segment" role="group" :aria-label="t('profile.language')">
@@ -180,6 +257,7 @@ function logout() {
<button type="button" class="logout-btn" @click="logout">
{{ t('auth.logout') }}
</button>
</template>
</div>
</template>
@@ -196,173 +274,292 @@ function logout() {
padding: 8px 0 12px;
}
.loading-state {
display: flex;
justify-content: center;
align-items: center;
min-height: 60vh;
}
.error-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
min-height: 60vh;
}
.error-text {
color: var(--text-muted);
font-size: 14px;
font-weight: 600;
}
.retry-btn {
padding: 8px 24px;
border-radius: 6px;
border: 1px solid var(--primary);
background: transparent;
color: var(--primary-light);
font-size: 13px;
font-weight: 700;
cursor: pointer;
}
.retry-btn:active {
background: rgba(200, 168, 78, 0.15);
}
.wallet-banner {
position: relative;
width: 100%;
margin-bottom: 12px;
margin-left: -5px;
margin-right: -5px;
line-height: 0;
box-sizing: border-box;
aspect-ratio: 2 / 1;
border-radius: 16px;
overflow: hidden;
box-shadow:
0 3px 10px rgba(0, 0, 0, 0.28),
0 1px 3px rgba(0, 0, 0, 0.18);
}
.wallet-banner::after {
content: '';
position: absolute;
inset: 0;
z-index: 1;
border-radius: inherit;
box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.22);
pointer-events: none;
}
.wallet-banner-img {
position: absolute;
inset: 0;
width: 100%;
height: auto;
height: 100%;
display: block;
}
.wallet-card-logo {
position: absolute;
top: 9%;
right: 5.5%;
z-index: 2;
width: clamp(42px, 12.8vw, 64px);
height: auto;
object-fit: contain;
object-fit: cover;
object-position: center center;
transform: scale(1.12);
transform-origin: center center;
filter: brightness(0.86);
pointer-events: none;
filter:
drop-shadow(0 2px 6px rgba(0, 0, 0, 0.45))
drop-shadow(0 0 5px rgba(212, 175, 55, 0.32))
drop-shadow(0 0 10px rgba(240, 216, 117, 0.18));
user-select: none;
}
.wallet-banner-info {
.wallet-banner-scrim {
position: absolute;
inset: 11% 12% 9% 19%;
inset: 0;
z-index: 2;
pointer-events: none;
background: linear-gradient(
180deg,
rgba(0, 0, 0, 0.4) 0%,
rgba(0, 0, 0, 0.18) 42%,
rgba(0, 0, 0, 0.46) 100%
);
}
.card-overlay {
position: absolute;
inset: 0;
z-index: 3;
display: flex;
flex-direction: column;
gap: clamp(14px, 3.5vw, 20px);
line-height: normal;
box-sizing: border-box;
pointer-events: none;
font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei UI', 'Helvetica Neue', Arial, sans-serif;
font-stretch: semi-expanded;
padding: 14px 16px 12px;
line-height: 1.3;
-webkit-font-smoothing: antialiased;
}
.card-kicker {
.bank-card-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
flex-shrink: 0;
}
.bank-card-top-left {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
}
.bank-card-chip {
width: 34px;
height: 24px;
border-radius: 5px;
background: linear-gradient(135deg, #e8c96a 0%, #c9a227 40%, #a8841f 100%);
border: 1px solid rgba(255, 255, 255, 0.25);
box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.3), 0 2px 4px rgba(0, 0, 0, 0.3);
display: flex;
flex-direction: column;
justify-content: center;
gap: 3px;
padding: 0 7px;
flex-shrink: 0;
}
.bank-card-chip span {
display: block;
height: 2px;
border-radius: 1px;
background: rgba(0, 0, 0, 0.25);
}
.bank-card-chip span:nth-child(2) { width: 70%; }
.bank-card-chip span:nth-child(3) { width: 50%; }
.brand-logo {
width: 22px;
height: 22px;
flex-shrink: 0;
object-fit: contain;
}
.bank-card-brand-text {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.brand-name {
font-size: 11px;
font-weight: 700;
color: #fff;
letter-spacing: 0.14em;
line-height: 1;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
.bank-card-type {
font-size: 8px;
font-weight: 800;
letter-spacing: 0.14em;
color: rgba(212, 175, 55, 0.65);
font-style: italic;
line-height: 1;
}
.bank-card-label {
display: block;
font-size: 9px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.82);
line-height: 1.3;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}
.recharge-btn {
flex-shrink: 0;
display: inline-flex;
align-items: center;
gap: 6px;
font-size: clamp(10px, 2.5vw, 11px);
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(180, 180, 185, 0.92);
text-shadow:
0 1px 2px rgba(0, 0, 0, 0.75),
0 2px 5px rgba(0, 0, 0, 0.35);
gap: 3px;
padding: 5px 10px;
border-radius: 14px;
background: rgba(0, 0, 0, 0.45);
border: 1px solid rgba(212, 175, 55, 0.35);
color: var(--primary-light);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.04em;
line-height: 1;
text-decoration: none;
backdrop-filter: blur(6px);
transition: background 0.15s ease;
}
.card-balance-block {
.recharge-btn:active {
background: rgba(212, 175, 55, 0.15);
}
.recharge-icon {
font-size: 12px;
font-weight: 700;
line-height: 1;
}
.bank-card-balance {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
gap: clamp(3px, 1vw, 6px);
min-height: clamp(44px, 12vw, 60px);
min-height: 0;
padding: 2px 0;
gap: 5px;
}
.card-balance {
.bank-card-number {
margin: 0;
font-size: clamp(22px, 6.8vw, 36px);
font-weight: 900;
letter-spacing: -0.02em;
font-family: 'SF Mono', 'Consolas', 'Courier New', monospace;
font-weight: 700;
font-style: normal;
font-variant-numeric: tabular-nums;
line-height: 1.05;
color: var(--primary-light);
line-height: 1.1;
letter-spacing: 0.04em;
white-space: nowrap;
background: var(--gradient-gold);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
filter:
drop-shadow(0 1px 2px rgba(0, 0, 0, 0.85))
drop-shadow(0 3px 6px rgba(0, 0, 0, 0.45))
drop-shadow(0 0 10px rgba(212, 175, 55, 0.22));
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
}
.card-balance-row {
display: flex;
align-items: center;
.balance-amount {
margin: 0;
}
.balance-amount--xl { font-size: clamp(24px, 6.2vw, 30px); }
.balance-amount--lg { font-size: clamp(21px, 5.6vw, 26px); }
.balance-amount--md { font-size: clamp(18px, 4.9vw, 22px); }
.balance-amount--sm { font-size: clamp(16px, 4.2vw, 19px); }
.balance-amount--xs { font-size: clamp(14px, 3.6vw, 16px); }
.bank-card-footer {
flex-shrink: 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
padding-top: 8px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.card-foot {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 16px;
margin-top: auto;
padding-top: 2px;
}
.card-holder,
.card-pending {
.bank-card-field {
display: flex;
flex-direction: column;
gap: 6px;
gap: 4px;
min-width: 0;
}
.card-pending {
align-items: flex-end;
text-align: right;
}
.bank-card-field--center { text-align: center; }
.bank-card-field--right { text-align: right; }
.card-name {
font-size: clamp(12px, 3.2vw, 15px);
font-weight: 900;
letter-spacing: 0.06em;
text-transform: uppercase;
line-height: 1.25;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 44vw;
background: linear-gradient(180deg, #fff6d8 0%, #e8c96a 38%, #c9a227 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
filter:
drop-shadow(0 1px 2px rgba(0, 0, 0, 0.8))
drop-shadow(0 2px 5px rgba(0, 0, 0, 0.4));
}
.card-pending-val {
font-size: clamp(12px, 3.2vw, 14px);
font-weight: 900;
letter-spacing: -0.01em;
font-variant-numeric: tabular-nums;
color: rgba(210, 210, 215, 0.95);
text-shadow:
0 1px 2px rgba(0, 0, 0, 0.75),
0 2px 5px rgba(0, 0, 0, 0.35);
white-space: nowrap;
}
.card-recharge-btn {
z-index: 3;
background: linear-gradient(135deg, #f0d060, #d4a830);
color: #1a1a1a;
border: none;
border-radius: 16px;
padding: 5px 14px;
.bank-card-holder {
font-size: 12px;
font-weight: 800;
letter-spacing: 0.04em;
cursor: pointer;
box-shadow:
0 2px 8px rgba(0, 0, 0, 0.4),
0 0 12px rgba(212, 175, 55, 0.25);
pointer-events: auto;
transition: transform 0.1s;
white-space: nowrap;
flex-shrink: 0;
font-weight: 700;
color: #fff;
text-transform: uppercase;
letter-spacing: 0.06em;
line-height: 1.2;
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
word-break: break-all;
}
.card-recharge-btn:active {
transform: scale(0.95);
.bank-card-stat {
font-size: 12px;
font-weight: 600;
font-variant-numeric: tabular-nums;
color: #fff;
line-height: 1.2;
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}
.settings-group {
background: var(--bg-card);
border: 1px solid var(--border);
@@ -429,9 +626,28 @@ function logout() {
min-height: auto;
}
.cell-main {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
}
.cell-icon {
width: 18px;
height: 18px;
flex-shrink: 0;
color: var(--text-muted);
}
.settings-cell--gold-entry .cell-icon {
color: var(--primary-light);
}
.cell-head {
display: flex;
align-items: center;
gap: 10px;
}
.cell-label {