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

91
apps/player/src/views/CashbackRecordsView.vue
View File

@@ -1,5 +1,5 @@
<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';
import { ref, computed, onMounted, onUnmounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useI18n } from 'vue-i18n';
import api from '../api';
@@ -31,7 +31,13 @@ type CashbackRecord = {
};
const items = ref<CashbackRecord[]>([]);
const loading = ref(true);
const loading = ref(false);
const initialLoading = ref(true);
const page = ref(1);
const hasMore = ref(true);
const sentinel = ref<HTMLElement | null>(null);
let observer: IntersectionObserver | null = null;
const totalAmount = computed(() =>
items.value.reduce((sum, row) => sum + Math.abs(parseFloat(row.amount) || 0), 0),
@@ -61,25 +67,59 @@ function formatTime(v: string | null) {
});
}
async function fetchRecords() {
async function fetchRecords(p = 1) {
if (loading.value) return;
loading.value = true;
try {
const { data } = await api.get('/player/cashbacks');
items.value = data.data ?? [];
const { data } = await api.get('/player/cashbacks', { params: { page: p } });
const result = data.data ?? { items: [], total: 0, pageSize: 20 };
const newItems = result.items ?? [];
if (p === 1) {
items.value = newItems;
} else {
items.value = [...items.value, ...newItems];
}
const pageSize = result.pageSize ?? 20;
hasMore.value = newItems.length >= pageSize;
page.value = p;
} catch {
items.value = [];
if (p === 1) items.value = [];
} finally {
loading.value = false;
initialLoading.value = false;
}
}
useOnLocaleChange(fetchRecords);
const { pullDistance, spinning, progress } = usePullToRefresh({
onRefresh: fetchRecords,
useOnLocaleChange(() => {
items.value = [];
page.value = 1;
hasMore.value = true;
initialLoading.value = true;
fetchRecords(1);
});
onMounted(fetchRecords);
const { pullDistance, spinning, progress } = usePullToRefresh({
onRefresh: async () => { await fetchRecords(1); },
});
onMounted(() => {
fetchRecords(1);
observer = new IntersectionObserver(
(entries) => {
if (entries[0].isIntersecting && hasMore.value && !loading.value) {
fetchRecords(page.value + 1);
}
},
{ rootMargin: '200px' },
);
if (sentinel.value) observer.observe(sentinel.value);
});
onUnmounted(() => {
observer?.disconnect();
});
const pullIndicatorStyle = () => ({
height: `${pullDistance.value}px`,
@@ -144,6 +184,16 @@ const pullIndicatorStyle = () => ({
</article>
</div>
<div ref="sentinel" class="sentinel" />
<div v-if="loading && items.length > 0" class="load-more-spinner">
<GoldSpinner :size="24" />
</div>
<div v-else-if="!hasMore && items.length > 0" class="end-hint">
{{ t('common.no_more') }}
</div>
<div v-else class="empty">
<p class="empty-title">{{ t('cashback.empty') }}</p>
<p class="empty-hint">{{ t('cashback.empty_hint') }}</p>
@@ -351,4 +401,23 @@ const pullIndicatorStyle = () => ({
line-height: 1.5;
color: #666;
}
.sentinel {
height: 1px;
}
.load-more-spinner {
display: flex;
justify-content: center;
padding: 20px 0 8px;
}
.end-hint {
text-align: center;
font-size: 12px;
color: #555;
font-weight: 600;
padding: 16px 0 4px;
letter-spacing: 0.03em;
}
</style>

4
apps/player/src/views/LoginView.vue
View File

@@ -9,7 +9,7 @@ import RobotVerify from '../components/RobotVerify.vue';
import loginBg from '../assets/images/h5bg.png';
const { t } = useI18n();
const { initFromUser } = useAppLocale();
const { syncLocaleToBackend } = useAppLocale();
const auth = useAuthStore();
const router = useRouter();
const route = useRoute();
@@ -29,7 +29,7 @@ async function submit() {
error.value = '';
try {
await auth.login(username.value, password.value);
initFromUser(auth.user?.locale);
await syncLocaleToBackend();
const redirectTo = (route.query.redirect as string) || '/';
router.push(redirectTo);
} catch (e: unknown) {

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 {

77
apps/player/src/views/RechargeHistoryView.vue
View File

@@ -1,5 +1,5 @@
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { ref, onMounted, onUnmounted } from 'vue';
import { useRouter } from 'vue-router';
import { useI18n } from 'vue-i18n';
import api from '../api';
@@ -25,24 +25,58 @@ interface DepositOrder {
}
const items = ref<DepositOrder[]>([]);
const loading = ref(true);
const loading = ref(false);
const initialLoading = ref(true);
const page = ref(1);
const total = ref(0);
const hasMore = ref(true);
async function fetchOrders() {
const sentinel = ref<HTMLElement | null>(null);
let observer: IntersectionObserver | null = null;
async function fetchOrders(p = 1) {
if (loading.value) return;
loading.value = true;
try {
const { data } = await api.get('/player/deposit-orders', { params: { page: page.value } });
const result = data.data ?? { items: [], total: 0 };
items.value = result.items ?? [];
const { data } = await api.get('/player/deposit-orders', { params: { page: p } });
const result = data.data ?? { items: [], total: 0, pageSize: 20 };
const newItems = result.items ?? [];
if (p === 1) {
items.value = newItems;
} else {
items.value = [...items.value, ...newItems];
}
total.value = result.total ?? 0;
const pageSize = result.pageSize ?? 20;
hasMore.value = newItems.length >= pageSize && items.value.length < total.value;
page.value = p;
} catch { /* */ } finally {
loading.value = false;
initialLoading.value = false;
}
}
const { pullDistance, spinning, progress } = usePullToRefresh({
onRefresh: fetchOrders,
onRefresh: async () => { await fetchOrders(1); },
});
onMounted(() => {
fetchOrders(1);
observer = new IntersectionObserver(
(entries) => {
if (entries[0].isIntersecting && hasMore.value && !loading.value) {
fetchOrders(page.value + 1);
}
},
{ rootMargin: '200px' },
);
if (sentinel.value) observer.observe(sentinel.value);
});
onUnmounted(() => {
observer?.disconnect();
});
function statusClass(s: string) {
@@ -123,6 +157,16 @@ onMounted(fetchOrders);
</div>
</div>
</div>
<div ref="sentinel" class="sentinel" />
<div v-if="loading && items.length > 0" class="load-more-spinner">
<GoldSpinner :size="24" />
</div>
<div v-else-if="!hasMore && items.length > 0" class="end-hint">
{{ t('common.no_more') }}
</div>
</template>
</div>
</template>
@@ -205,4 +249,23 @@ onMounted(fetchOrders);
border-left: 2px solid rgba(212, 175, 55, 0.3);
}
.reject-reason { margin-top: 8px; font-size: 12px; color: #f56c6c; background: #2a1515; padding: 6px 10px; border-radius: 6px; }
.sentinel {
height: 1px;
}
.load-more-spinner {
display: flex;
justify-content: center;
padding: 20px 0 8px;
}
.end-hint {
text-align: center;
font-size: 12px;
color: #555;
font-weight: 600;
padding: 16px 0 4px;
letter-spacing: 0.03em;
}
</style>

253
apps/player/src/views/RechargeView.vue
View File

@@ -154,6 +154,12 @@ function copyText(text: string) {
navigator.clipboard?.writeText(text);
}
function formatCardNumber(num: string | null): string {
if (!num) return '—';
const digits = num.replace(/\s/g, '');
return digits.replace(/(\d{4})(?=\d)/g, '$1 ').trim();
}
onMounted(fetchMethods);
</script>
@@ -202,25 +208,43 @@ onMounted(fetchMethods);
</div>
<div v-else class="empty-methods">{{ t('recharge.no_methods') }}</div>
<div v-if="selectedMethod" class="method-info">
<template v-if="selectedMethod.methodType === 'BANK'">
<div class="info-row">
<span class="info-label">{{ t('recharge.bank_name') }}</span>
<span class="info-value">{{ selectedMethod.bankName }}</span>
<div v-if="selectedMethod && selectedMethod.methodType === 'BANK'" class="bank-card-wrap">
<div class="bank-card-face">
<div class="bank-card-shine" aria-hidden="true" />
<div class="bank-card-deco bank-card-deco--1" aria-hidden="true" />
<div class="bank-card-deco bank-card-deco--2" aria-hidden="true" />
<div class="bank-card-top">
<div class="bank-card-chip" aria-hidden="true">
<span /><span /><span />
</div>
<div class="bank-card-bank">{{ selectedMethod.bankName }}</div>
</div>
<div class="info-row">
<span class="info-label">{{ t('recharge.account_holder') }}</span>
<span class="info-value">{{ selectedMethod.accountHolder }}</span>
<div class="bank-card-number-row">
<span class="bank-card-number">{{ formatCardNumber(selectedMethod.accountNumber) }}</span>
<button
type="button"
class="bank-card-copy"
:aria-label="t('recharge.account_number')"
@click="copyText(selectedMethod.accountNumber || '')"
>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<rect x="9" y="9" width="13" height="13" rx="2" />
<path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1" />
</svg>
</button>
</div>
<div class="info-row">
<span class="info-label">{{ t('recharge.account_number') }}</span>
<span class="info-value copyable" @click="copyText(selectedMethod!.accountNumber || '')">
{{ selectedMethod.accountNumber }}
<svg class="copy-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/></svg>
</span>
<div class="bank-card-bottom">
<div class="bank-card-holder">
<span class="bank-card-holder-label">{{ t('recharge.account_holder') }}</span>
<span class="bank-card-holder-name">{{ selectedMethod.accountHolder }}</span>
</div>
<div class="bank-card-type">DEBIT</div>
</div>
</template>
<template v-else>
</div>
</div>
<div v-else-if="selectedMethod" class="method-info">
<template v-if="selectedMethod.methodType !== 'BANK'">
<div class="info-row">
<span class="info-label">{{ t('recharge.usdt_address') }}</span>
<span class="info-value copyable" @click="copyText(selectedMethod!.usdtAddress || '')">
@@ -317,6 +341,203 @@ onMounted(fetchMethods);
.pill-sub { font-size: 10px; color: var(--text-muted); }
.empty-methods { text-align: center; color: var(--text-muted); padding: 20px; font-size: 12px; }
.bank-card-wrap {
margin-bottom: 16px;
perspective: 800px;
}
.bank-card-face {
position: relative;
aspect-ratio: 2 / 1;
border-radius: 14px;
padding: 14px 18px 12px;
display: flex;
flex-direction: column;
justify-content: space-between;
overflow: hidden;
background:
radial-gradient(ellipse 80% 60% at 100% 0%, rgba(212, 175, 55, 0.22), transparent 55%),
radial-gradient(ellipse 50% 50% at 0% 100%, rgba(212, 175, 55, 0.1), transparent 50%),
linear-gradient(135deg, #2a2218 0%, #1a1610 35%, #12100c 70%, #0a0908 100%);
border: 1px solid rgba(212, 175, 55, 0.35);
box-shadow:
0 8px 24px rgba(0, 0, 0, 0.55),
0 2px 8px rgba(212, 175, 55, 0.12),
inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.bank-card-shine {
position: absolute;
inset: 0;
background: linear-gradient(
115deg,
transparent 30%,
rgba(255, 255, 255, 0.04) 45%,
rgba(255, 255, 255, 0.08) 50%,
rgba(255, 255, 255, 0.04) 55%,
transparent 70%
);
pointer-events: none;
}
.bank-card-deco {
position: absolute;
border-radius: 50%;
border: 1px solid rgba(212, 175, 55, 0.12);
pointer-events: none;
}
.bank-card-deco--1 {
width: 180px;
height: 180px;
right: -60px;
bottom: -80px;
background: radial-gradient(circle, rgba(212, 175, 55, 0.08), transparent 70%);
}
.bank-card-deco--2 {
width: 100px;
height: 100px;
right: 40px;
bottom: 20px;
border-color: rgba(212, 175, 55, 0.08);
}
.bank-card-top,
.bank-card-number-row,
.bank-card-bottom {
position: relative;
z-index: 1;
}
.bank-card-top {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
}
.bank-card-chip {
width: 36px;
height: 26px;
border-radius: 6px;
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: 4px;
padding: 0 8px;
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%; }
.bank-card-bank {
font-size: 15px;
font-weight: 800;
color: #fff;
text-align: right;
letter-spacing: 0.5px;
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
line-height: 1.3;
max-width: 58%;
word-break: break-all;
}
.bank-card-number-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin: 4px 0 2px;
}
.bank-card-number {
font-family: 'SF Mono', 'Consolas', 'Courier New', monospace;
font-size: clamp(15px, 4.2vw, 19px);
font-weight: 700;
letter-spacing: 0.14em;
color: var(--primary-light);
text-shadow: 0 0 12px rgba(240, 216, 117, 0.25);
word-break: break-all;
line-height: 1.3;
}
.bank-card-copy {
flex-shrink: 0;
width: 30px;
height: 30px;
border-radius: 8px;
border: 1px solid rgba(212, 175, 55, 0.35);
background: rgba(0, 0, 0, 0.25);
color: var(--primary-light);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 0.15s, opacity 0.15s;
}
.bank-card-copy svg {
width: 16px;
height: 16px;
}
.bank-card-copy:active {
opacity: 0.65;
background: rgba(212, 175, 55, 0.12);
}
.bank-card-bottom {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 12px;
}
.bank-card-holder {
display: flex;
flex-direction: column;
gap: 3px;
min-width: 0;
}
.bank-card-holder-label {
font-size: 9px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.45);
}
.bank-card-holder-name {
font-size: 14px;
font-weight: 700;
color: #fff;
letter-spacing: 0.04em;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
word-break: break-all;
}
.bank-card-type {
flex-shrink: 0;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.18em;
color: rgba(212, 175, 55, 0.55);
font-style: italic;
}
.method-info {
background: rgba(17, 17, 17, 0.9);
border-radius: 8px; padding: 10px 12px;

37
apps/player/src/views/WalletDetailView.vue
View File

@@ -4,7 +4,7 @@ import { useRouter } from 'vue-router';
import { useI18n } from 'vue-i18n';
import api from '../api';
import { formatMoney } from '../utils/localeDisplay';
import { isBetType, isDepositType, isWithdrawType, isCashbackType, txTypeKey } from '../utils/walletTx';
import { isBetType, isDepositType, isWithdrawType, isCashbackType, txTypeKey, txDisplayType, txSummaryLabel } from '../utils/walletTx';
import GoldSpinner from '../components/GoldSpinner.vue';
import WalletStatsPanel from '../components/WalletStatsPanel.vue';
import { usePullToRefresh } from '../composables/usePullToRefresh';
@@ -14,6 +14,10 @@ const { t, locale } = useI18n();
type Transaction = {
transactionType: string;
displayType?: string;
summary?: string | null;
summaryKind?: 'opening_bonus' | null;
referenceType?: string | null;
amount: string;
createdAt: string;
transactionId: string;
@@ -57,13 +61,17 @@ async function fetchCashbackTotal() {
}
}
function txLabel(type: string): string {
const key = txTypeKey(type);
function txLabel(tx: Transaction): string {
const key = txTypeKey(txDisplayType(tx));
if (key) {
const translated = t(key);
if (translated !== key) return translated;
}
return type;
return tx.transactionType;
}
function txSubtitle(tx: Transaction): string {
return txSummaryLabel(tx, t);
}
function goDetail(tx: Transaction) {
@@ -186,7 +194,10 @@ const pullIndicatorStyle = () => ({
@click="goDetail(tx)"
>
<div class="tx-main">
<span class="tx-type">{{ txLabel(tx.transactionType) }}</span>
<div class="tx-text">
<span class="tx-type">{{ txLabel(tx) }}</span>
<span v-if="txSubtitle(tx)" class="tx-summary">{{ txSubtitle(tx) }}</span>
</div>
<span :class="parseFloat(tx.amount) >= 0 ? 'pos' : 'neg'">
{{ formatMoney(tx.amount, locale) }}
</span>
@@ -321,6 +332,22 @@ const pullIndicatorStyle = () => ({
gap: 12px;
}
.tx-text {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.tx-summary {
font-size: 11px;
color: var(--text-muted);
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.tx-meta {
display: flex;
justify-content: space-between;

31
apps/player/src/views/WalletTransactionDetailView.vue
View File

@@ -4,13 +4,16 @@ import { useRoute, useRouter } from 'vue-router';
import { useI18n } from 'vue-i18n';
import api from '../api';
import { formatMoney } from '../utils/localeDisplay';
import { txTypeKey, isCashbackType } from '../utils/walletTx';
import { txTypeKey, isCashbackType, txDisplayType, txSummaryLabel } from '../utils/walletTx';
import GoldSpinner from '../components/GoldSpinner.vue';
import { usePullToRefresh } from '../composables/usePullToRefresh';
type TransactionDetail = {
transactionId: string;
transactionType: string;
displayType?: string;
summary?: string | null;
summaryKind?: 'opening_bonus' | null;
amount: string;
balanceBefore: string;
balanceAfter: string;
@@ -21,6 +24,7 @@ type TransactionDetail = {
remark: string | null;
createdAt: string;
betNo: string | null;
cashbackBatchNo?: string | null;
};
const route = useRoute();
@@ -67,6 +71,16 @@ function txLabel(type: string): string {
return type;
}
const displayTypeLabel = computed(() => {
if (!tx.value) return '';
return txLabel(txDisplayType(tx.value));
});
const summaryText = computed(() => {
if (!tx.value) return '';
return txSummaryLabel(tx.value, t);
});
const amountClass = computed(() => {
if (!tx.value) return '';
return parseFloat(tx.value.amount) >= 0 ? 'pos' : 'neg';
@@ -87,8 +101,8 @@ const isCashbackTx = computed(
);
const cashbackBatchNo = computed(() => {
if (!isCashbackTx.value || !tx.value?.referenceId) return null;
return tx.value.referenceId;
if (!isCashbackTx.value) return null;
return tx.value?.cashbackBatchNo ?? tx.value?.referenceId ?? null;
});
const referenceLabel = computed(() => {
@@ -132,7 +146,8 @@ function goCashbackDetail() {
<template v-else>
<div class="hero" :class="amountClass">
<span class="hero-type">{{ txLabel(tx.transactionType) }}</span>
<span class="hero-type">{{ displayTypeLabel }}</span>
<span v-if="summaryText" class="hero-summary">{{ summaryText }}</span>
<span class="hero-amount">{{ formatMoney(tx.amount, locale) }}</span>
<span class="hero-time">{{ formattedTime }}</span>
</div>
@@ -266,6 +281,14 @@ function goCashbackDetail() {
color: #888;
}
.hero-summary {
font-size: 13px;
font-weight: 600;
color: #bbb;
max-width: 100%;
word-break: break-all;
}
.hero-amount {
font-size: 34px;
font-weight: 900;

61
apps/player/src/views/WalletView.vue
View File

@@ -3,8 +3,8 @@ import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { useI18n } from 'vue-i18n';
import api from '../api';
import { formatMoney } from '../utils/localeDisplay';
import { txTypeKey } from '../utils/walletTx';
import { formatMoney, formatMoneyCompact } from '../utils/localeDisplay';
import { txTypeKey, txDisplayType, txSummaryLabel } from '../utils/walletTx';
import GoldSpinner from '../components/GoldSpinner.vue';
import { usePullToRefresh } from '../composables/usePullToRefresh';
@@ -13,22 +13,31 @@ const { t, locale } = useI18n();
type Transaction = {
transactionType: string;
displayType?: string;
summary?: string | null;
summaryKind?: 'opening_bonus' | null;
referenceType?: string | null;
amount: string;
createdAt: string;
transactionId: string;
};
const items = ref<Transaction[]>([]);
const cashbackTotal = ref<string>('0');
const loading = ref(true);
const PREVIEW_COUNT = 15;
function txLabel(type: string): string {
const key = txTypeKey(type);
function txLabel(tx: Transaction): string {
const key = txTypeKey(txDisplayType(tx));
if (key) {
const translated = t(key);
if (translated !== key) return translated;
}
return type;
return tx.transactionType;
}
function txSubtitle(tx: Transaction): string {
return txSummaryLabel(tx, t);
}
function goDetail(tx: Transaction) {
@@ -36,20 +45,21 @@ function goDetail(tx: Transaction) {
router.push(`/wallet/transactions/${tx.transactionId}`);
}
function goWalletDetail() {
router.push('/wallet/detail');
}
function goCashbacks() {
router.push('/wallet/cashbacks');
}
async function fetchTransactions() {
async function fetchData() {
loading.value = true;
try {
const { data } = await api.get('/player/wallet/transactions', { params: { page: 1 } });
const result = data.data ?? { items: [] };
const [txRes, cbRes] = await Promise.all([
api.get('/player/wallet/transactions', { params: { page: 1 } }),
api.get('/player/cashbacks').catch(() => ({ data: { data: { items: [], totalAmount: '0' } } })),
]);
const result = txRes.data.data ?? { items: [] };
items.value = (result.items ?? []).slice(0, PREVIEW_COUNT);
const cbData = cbRes.data?.data;
cashbackTotal.value = cbData?.totalAmount ?? cbData?.items?.reduce((s: number, r: { amount: string }) => s + Math.abs(parseFloat(r.amount) || 0), 0)?.toString() ?? '0';
} catch {
/* ignore */
} finally {
@@ -58,10 +68,10 @@ async function fetchTransactions() {
}
const { pullDistance, spinning, progress } = usePullToRefresh({
onRefresh: fetchTransactions,
onRefresh: fetchData,
});
onMounted(fetchTransactions);
onMounted(fetchData);
const pullIndicatorStyle = () => ({
height: `${pullDistance.value}px`,
@@ -92,7 +102,7 @@ const pullIndicatorStyle = () => ({
v-if="items.length"
type="button"
class="more-link"
@click="goWalletDetail"
@click="router.push('/wallet/detail')"
>{{ t('wallet.view_all') }} &#x203A;</button>
</div>
@@ -105,7 +115,10 @@ const pullIndicatorStyle = () => ({
@click="goDetail(tx)"
>
<div class="tx-main">
<span class="tx-type">{{ txLabel(tx.transactionType) }}</span>
<div class="tx-text">
<span class="tx-type">{{ txLabel(tx) }}</span>
<span v-if="txSubtitle(tx)" class="tx-summary">{{ txSubtitle(tx) }}</span>
</div>
<span :class="parseFloat(tx.amount) >= 0 ? 'pos' : 'neg'">
{{ formatMoney(tx.amount, locale) }}
</span>
@@ -184,6 +197,22 @@ const pullIndicatorStyle = () => ({
gap: 12px;
}
.tx-text {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.tx-summary {
font-size: 11px;
color: var(--text-muted);
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.tx-meta {
display: flex;
justify-content: space-between;