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

feat(admin,api,player): 优胜赛配置、赛事管理重构与玩家端投注体验优化

Browse Source 
管理端拆分赛事/优胜赛 Tab，新增联赛优胜赔率面板（批量、排序、外侧删除）；统一 list-chrome 工具栏对齐与列表页布局；Dashboard 失败重试、Users 操作下拉、小屏侧栏等体验修复。

API 扩展优胜赛与赛事目录接口，完善投注与钱包查询；玩家端重构赛事卡片、串关面板、注单/钱包页，新增注单详情、下注成功动画与下拉刷新。

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Mars
2026-06-08 09:55:56 +08:00
parent efff7c27e6
commit 24fa1b275c
66 changed files with 6289 additions and 1426 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
apps/player/index.html
View File

@@ -8,8 +8,64 @@
<link rel="apple-touch-icon" href="/logo.png" />
<link rel="manifest" href="/site.webmanifest" />
<title>TheBet365</title>
<style>
html, body { margin: 0; padding: 0; height: 100%; background: #000; }
#app-loading {
position: fixed;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: #000;
z-index: 9999;
}
#app-loading svg {
width: 48px;
height: 48px;
animation: gs-spin 0.8s linear infinite;
}
@keyframes gs-spin {
to { transform: rotate(360deg); }
}
</style>
</head>
<body>
<div id="app-loading">
<svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="gs-track" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#D4AF37" stop-opacity="0.18" />
<stop offset="50%" stop-color="#F0D875" stop-opacity="0.25" />
<stop offset="100%" stop-color="#D4AF37" stop-opacity="0.18" />
</linearGradient>
<linearGradient id="gs-arc" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#FFF4C8" />
<stop offset="22%" stop-color="#F0D875" />
<stop offset="50%" stop-color="#D4AF37" />
<stop offset="78%" stop-color="#B8942B" />
<stop offset="100%" stop-color="#8B6914" />
</linearGradient>
<filter id="gs-glow">
<feGaussianBlur stdDeviation="1.2" result="blur" />
<feMerge>
<feMergeNode in="blur" />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
<radialGradient id="gs-dot" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#FFF4C8" />
<stop offset="60%" stop-color="#F0D875" />
<stop offset="100%" stop-color="#D4AF37" />
</radialGradient>
</defs>
<circle cx="24" cy="24" r="20" stroke="url(#gs-track)" stroke-width="3" fill="none" />
<circle cx="24" cy="24" r="20" stroke="url(#gs-arc)" stroke-width="3" fill="none" stroke-linecap="round" stroke-dasharray="31.4 94.2" filter="url(#gs-glow)" />
<circle cx="24" cy="4" r="2.5" fill="url(#gs-dot)" filter="url(#gs-glow)">
<animate attributeName="r" values="2.5;3.2;2.5" dur="1.2s" repeatCount="indefinite" />
</circle>
</svg>
</div>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>

368
apps/player/src/components/BetHistoryCard.vue
View File

@@ -1,12 +1,19 @@
<script setup lang="ts">
import { computed } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRouter } from 'vue-router';
import { formatMoney } from '../utils/localeDisplay';
export interface BetScore {
ht: string | null;
ft: string | null;
}
export interface BetHistoryItem {
betNo: string;
betType: string;
stake: unknown;
totalOdds?: unknown;
potentialReturn: unknown;
actualReturn: unknown;
status: string;
@@ -16,17 +23,20 @@ export interface BetHistoryItem {
pickLabel: string;
isParlay?: boolean;
legCount?: number;
matchScore?: BetScore | null;
legs?: Array<{
marketLabel: string;
selectionName: string;
matchTitle: string;
odds: unknown;
resultStatus?: string | null;
score?: BetScore | null;
}>;
}
const props = defineProps<{ bet: BetHistoryItem }>();
const { t, locale } = useI18n();
const router = useRouter();
const statusKey = computed(() => {
const s = props.bet.status.toUpperCase();
@@ -40,13 +50,11 @@ const statusLabel = computed(() => t(`history.status_${statusKey.value}`));
const placedDate = computed(() =>
new Date(props.bet.placedAt).toLocaleDateString(locale.value, {
year: 'numeric',
month: 'short',
day: 'numeric',
month: 'short', day: 'numeric',
}),
);
const matchTitle = computed(() => {
const title = computed(() => {
if (props.bet.isParlay) {
const n = props.bet.legCount ?? props.bet.legs?.length ?? 0;
return t('history.parlay_title', { n });
@@ -54,319 +62,135 @@ const matchTitle = computed(() => {
return props.bet.matchTitle;
});
const pickLabel = computed(() => {
if (props.bet.isParlay) return '';
// pickLabel format is "marketLabel: selectionName"
const raw = props.bet.pickLabel;
if (locale.value === 'zh-CN' || !raw) return raw;
const colonIdx = raw.indexOf(': ');
if (colonIdx < 0) return raw;
const sel = raw.slice(colonIdx + 2);
return raw.slice(0, colonIdx + 2) + translateSelection(sel);
const subtitle = computed(() => {
if (props.bet.isParlay) return props.bet.leagueName || t('history.parlay_league');
return props.bet.pickLabel || props.bet.leagueName || '';
});
const returnLabel = computed(() =>
statusKey.value === 'pending' ? t('history.est_return') : t('history.return'),
);
const returnAmount = computed(() => {
if (statusKey.value === 'won') return formatMoney(props.bet.actualReturn, locale.value);
if (statusKey.value === 'pending') return formatMoney(props.bet.potentialReturn, locale.value);
if (statusKey.value === 'lost') return formatMoney(0, locale.value);
if (statusKey.value === 'lost') return formatMoney(-parseFloat(String(props.bet.stake ?? 0)), locale.value);
return formatMoney(props.bet.actualReturn ?? props.bet.potentialReturn, locale.value);
});
const returnHighlight = computed(() => statusKey.value === 'won');
const returnPending = computed(() => statusKey.value === 'pending');
const returnLost = computed(() => statusKey.value === 'lost');
// Translate Chinese selection-name snapshots stored in DB
const SEL_TRANS: Record<string, Record<string, string>> = {
'主胜': { 'en-US': 'Home Win', 'ms-MY': 'Rumah Menang' },
'客胜': { 'en-US': 'Away Win', 'ms-MY': 'Tandang Menang' },
'和局': { 'en-US': 'Draw', 'ms-MY': 'Seri' },
'主': { 'en-US': 'Home', 'ms-MY': 'Rumah' },
'客': { 'en-US': 'Away', 'ms-MY': 'Tandang' },
'大': { 'en-US': 'Over', 'ms-MY': 'Atas' },
'小': { 'en-US': 'Under', 'ms-MY': 'Bawah' },
'单': { 'en-US': 'Odd', 'ms-MY': 'Ganjil' },
'双': { 'en-US': 'Even', 'ms-MY': 'Genap' },
'冠军': { 'en-US': 'Winner', 'ms-MY': 'Juara' },
};
function translateSelection(name: string): string {
if (locale.value === 'zh-CN') return name;
// exact match
const exact = SEL_TRANS[name];
if (exact) return exact[locale.value] ?? exact['en-US'] ?? name;
// e.g. "大 2.5" → translate first token, keep rest
const spaceIdx = name.indexOf(' ');
if (spaceIdx > 0) {
const head = name.slice(0, spaceIdx);
const tail = name.slice(spaceIdx);
const m = SEL_TRANS[head];
if (m) return (m[locale.value] ?? m['en-US'] ?? head) + tail;
}
return name;
function goDetail() {
router.push(`/bets/${props.bet.betNo}`);
}
// use grid when 3+ legs
const useGrid = computed(() => (props.bet.legs?.length ?? 0) >= 3);
</script>
<template>
<article class="bet-card">
<!-- top strip: meta + badge -->
<header class="card-head">
<div class="meta">
<span class="sport-icon" aria-hidden="true">⚽</span>
<span class="league">{{
bet.isParlay ? t('history.parlay_league') : bet.leagueName || t('history.league_default')
}}</span>
<span class="dot">·</span>
<span class="date">{{ placedDate }}</span>
</div>
<span class="status-badge" :class="statusKey">{{ statusLabel }}</span>
</header>
<!-- title -->
<h3 class="match-title">{{ matchTitle }}</h3>
<p v-if="pickLabel" class="pick-line">{{ pickLabel }}</p>
<!-- parlay legs -->
<div v-if="bet.isParlay && bet.legs?.length" class="parlay-legs" :class="{ grid: useGrid }">
<div v-for="(leg, i) in bet.legs" :key="i" class="leg">
<span class="leg-num">{{ i + 1 }}</span>
<div class="leg-info">
<span class="leg-match">{{ leg.matchTitle }}</span>
<span class="leg-pick">{{ leg.marketLabel }}: {{ translateSelection(leg.selectionName) }}</span>
</div>
</div>
<article class="bet-card" @click="goDetail">
<span
class="watermark"
:class="statusKey"
>{{ statusLabel }}</span>
<div class="card-left">
<span class="title">{{ title }}</span>
<span class="subtitle">{{ subtitle }} · {{ placedDate }}</span>
</div>
<!-- footer -->
<footer class="card-foot">
<div class="money-col">
<span class="money-label">{{ t('history.stake') }}</span>
<span class="money-value stake">{{ formatMoney(bet.stake, locale) }}</span>
</div>
<div class="money-col align-right">
<span class="money-label">{{ returnLabel }}</span>
<span
class="money-value return"
:class="{ highlight: returnHighlight, pending: statusKey === 'pending' }"
>{{ returnAmount }}</span>
</div>
</footer>
<div class="card-right">
<span class="return-amt" :class="{ highlight: returnHighlight, pending: returnPending, lost: returnLost }">
{{ returnAmount }}
</span>
</div>
<span class="chevron">›</span>
</article>
</template>
<style scoped>
.bet-card {
background: #141414;
border: 1px solid #252525;
border-radius: 12px;
padding: 0;
margin-bottom: 10px;
overflow: hidden;
position: relative;
}
.card-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 10px 14px 8px 16px;
background: #181818;
border-bottom: 1px solid #222;
gap: 10px;
padding: 14px 16px;
border-bottom: 1px solid var(--border);
cursor: pointer;
transition: background 0.15s;
-webkit-tap-highlight-color: transparent;
overflow: hidden;
}
.meta {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 5px;
font-size: 11.5px;
color: #888;
font-weight: 600;
.bet-card:active {
background: rgba(255, 255, 255, 0.02);
}
.sport-icon {
font-size: 13px;
line-height: 1;
}
.dot { opacity: 0.4; }
.date { color: #666; }
.status-badge {
flex-shrink: 0;
padding: 3px 10px;
border-radius: 20px;
font-size: 10.5px;
font-weight: 800;
letter-spacing: 0.07em;
white-space: nowrap;
text-transform: uppercase;
}
.status-badge.won {
color: #3db865;
background: rgba(61, 184, 101, 0.12);
border: 1px solid rgba(61, 184, 101, 0.3);
}
.status-badge.pending {
color: #e8c84a;
background: rgba(232, 200, 74, 0.1);
border: 1px solid rgba(232, 200, 74, 0.3);
}
.status-badge.lost {
color: #e05050;
background: rgba(224, 80, 80, 0.1);
border: 1px solid rgba(224, 80, 80, 0.28);
}
.status-badge.push {
color: #888;
background: #1e1e1e;
border: 1px solid #333;
}
/* body */
.match-title {
font-size: 16px;
.watermark {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(-35deg);
font-size: 28px;
font-weight: 900;
color: #f0f0f0;
line-height: 1.3;
padding: 10px 14px 4px 16px;
letter-spacing: 0.01em;
letter-spacing: 0.06em;
white-space: nowrap;
pointer-events: none;
text-transform: uppercase;
opacity: 0.18;
max-width: 90%;
overflow: hidden;
text-overflow: ellipsis;
}
.pick-line {
font-size: 12.5px;
color: #888;
font-weight: 600;
line-height: 1.4;
padding: 0 14px 8px 16px;
}
.watermark.won { color: #3db865; }
.watermark.lost { color: #e05050; }
.watermark.push { color: #888; }
.watermark.pending { color: #e8c84a; }
/* ── parlay legs ── */
.parlay-legs {
padding: 4px 14px 8px 16px;
.card-left {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 5px;
gap: 3px;
}
/* grid mode: 2-column when 3+ legs */
.parlay-legs.grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 5px 8px;
}
.leg {
display: flex;
align-items: flex-start;
gap: 6px;
background: #1a1a1a;
border: 1px solid #252525;
border-radius: 7px;
padding: 6px 8px;
min-width: 0;
}
.leg-num {
flex-shrink: 0;
width: 16px;
height: 16px;
border-radius: 50%;
background: #2a2a2a;
color: #777;
font-size: 9px;
.title {
font-size: 14px;
font-weight: 800;
display: flex;
align-items: center;
justify-content: center;
margin-top: 1px;
line-height: 1;
color: #e8e8e8;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.leg-info {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.leg-match {
.subtitle {
font-size: 11px;
font-weight: 700;
color: #c0c0c0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.leg-pick {
font-size: 10.5px;
color: #777;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* footer */
.card-foot {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 16px;
padding: 8px 14px 12px 16px;
border-top: 1px solid #1e1e1e;
margin-top: 2px;
}
.money-col {
display: flex;
flex-direction: column;
gap: 2px;
}
.money-col.align-right {
align-items: flex-end;
text-align: right;
}
.money-label {
font-size: 10px;
color: #666;
font-weight: 600;
letter-spacing: 0.02em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.money-value {
font-size: 19px;
.card-right {
flex-shrink: 0;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 4px;
}
.return-amt {
font-size: 15px;
font-weight: 900;
letter-spacing: 0.01em;
color: #888;
}
.money-value.stake {
color: #c8c8c8;
}
.return-amt.highlight { color: #3db865; }
.return-amt.pending { color: #e8c84a; }
.return-amt.lost { color: #e05050; }
.money-value.return {
color: #c8c8c8;
}
.money-value.return.pending {
color: #e8c84a;
text-shadow: 0 0 14px rgba(232, 200, 74, 0.3);
}
.money-value.highlight {
color: #3db865;
text-shadow: 0 0 14px rgba(61, 184, 101, 0.35);
font-size: 21px;
.chevron {
flex-shrink: 0;
font-size: 18px;
color: #333;
margin-left: 2px;
line-height: 1;
}
</style>

140
apps/player/src/components/BetSlipDrawer.vue
View File

@@ -3,6 +3,7 @@ import { ref, computed } from 'vue';
import { useI18n } from 'vue-i18n';
import { PARLAY_MIN_LEGS, PARLAY_MAX_LEGS } from '@thebet365/shared';
import { useBetSlipStore } from '../stores/betSlip';
import BetSuccessOverlay from './BetSuccessOverlay.vue';
import api from '../api';
const props = defineProps<{ modelValue: boolean }>();
@@ -18,11 +19,18 @@ const show = computed({
const loading = ref(false);
const error = ref('');
const success = ref('');
const showSuccess = ref(false);
function genId() {
return `${Date.now()}-${Math.random().toString(36).slice(2)}`;
}
function onSuccessDone() {
showSuccess.value = false;
show.value = false;
success.value = '';
}
async function placeBet() {
if (!slip.items.length) return;
loading.value = true;
@@ -58,10 +66,14 @@ async function placeBet() {
}
success.value = t('bet.place_success');
slip.clear();
showSuccess.value = true;
setTimeout(() => {
show.value = false;
success.value = '';
}, 1500);
if (showSuccess.value) {
showSuccess.value = false;
show.value = false;
success.value = '';
}
}, 2500);
} catch (e: unknown) {
error.value =
(e as { response?: { data?: { error?: string } } })?.response?.data?.error ||
@@ -75,58 +87,64 @@ async function placeBet() {
<template>
<div v-if="show" class="overlay" @click.self="show = false">
<div class="drawer">
<div class="drawer-header">
<h3>{{ t('bet.bet_slip') }} <span class="count">({{ slip.count }})</span></h3>
<button type="button" class="close-btn" :aria-label="t('bet.cancel')" @click="show = false">
✕
<div class="drawer-body">
<div class="drawer-header">
<h3>{{ t('bet.bet_slip') }} <span class="count">({{ slip.count }})</span></h3>
<button type="button" class="close-btn" :aria-label="t('bet.cancel')" @click="show = false">
✕
</button>
</div>
<div v-if="!slip.items.length" class="empty">{{ t('bet.slip_empty_hint') }}</div>
<div v-for="item in slip.items" :key="item.selectionId" class="slip-item">
<div class="item-name">{{ item.matchName }}</div>
<div class="item-sel">
{{ item.selectionName }} @ <span class="odds">{{ item.odds }}</span>
</div>
<button type="button" class="remove" @click="slip.removeItem(item.selectionId)">
{{ t('bet.slip_remove') }}
</button>
</div>
<p v-if="slip.canPlaceParlay" class="mode-hint mode-hint--parlay">
{{ t('bet.parlay') }} · {{ t('bet.slip_parlay_odds', { odds: slip.totalOdds.toFixed(2) }) }}
</p>
<p v-else-if="slip.canPlaceBatchSingles && slip.count > 1" class="mode-hint">
{{ t('bet.slip_singles_hint', { n: slip.count }) }}
</p>
<div v-if="slip.items.length" class="stake-area">
<label>{{
slip.canPlaceBatchSingles && slip.count > 1
? t('bet.slip_stake_per_bet')
: t('bet.stake')
}}</label>
<input v-model.number="slip.stake" type="number" min="1" />
<div class="return">
{{ t('bet.slip_est_return') }}:
<strong>{{ slip.potentialReturn.toFixed(2) }}</strong>
</div>
</div>
<p v-if="error" class="error">{{ error }}</p>
<p v-if="success" class="success">{{ success }}</p>
</div>
<div class="drawer-foot">
<button
type="button"
class="btn-primary"
:disabled="loading || !slip.canSubmit"
@click="placeBet"
>
{{ loading ? t('bet.placing') : t('bet.place_bet') }}
</button>
</div>
<div v-if="!slip.items.length" class="empty">{{ t('bet.slip_empty_hint') }}</div>
<div v-for="item in slip.items" :key="item.selectionId" class="slip-item">
<div class="item-name">{{ item.matchName }}</div>
<div class="item-sel">
{{ item.selectionName }} @ <span class="odds">{{ item.odds }}</span>
</div>
<button type="button" class="remove" @click="slip.removeItem(item.selectionId)">
{{ t('bet.slip_remove') }}
</button>
</div>
<p v-if="slip.canPlaceParlay" class="mode-hint mode-hint--parlay">
{{ t('bet.parlay') }} · {{ t('bet.slip_parlay_odds', { odds: slip.totalOdds.toFixed(2) }) }}
</p>
<p v-else-if="slip.canPlaceBatchSingles && slip.count > 1" class="mode-hint">
{{ t('bet.slip_singles_hint', { n: slip.count }) }}
</p>
<div v-if="slip.items.length" class="stake-area">
<label>{{
slip.canPlaceBatchSingles && slip.count > 1
? t('bet.slip_stake_per_bet')
: t('bet.stake')
}}</label>
<input v-model.number="slip.stake" type="number" min="1" />
<div class="return">
{{ t('bet.slip_est_return') }}:
<strong>{{ slip.potentialReturn.toFixed(2) }}</strong>
</div>
</div>
<p v-if="error" class="error">{{ error }}</p>
<p v-if="success" class="success">{{ success }}</p>
<button
type="button"
class="btn-primary"
:disabled="loading || !slip.canSubmit"
@click="placeBet"
>
{{ loading ? t('bet.placing') : t('bet.place_bet') }}
</button>
</div>
</div>
<BetSuccessOverlay :show="showSuccess" @done="onSuccessDone" />
</template>
<style scoped>
@@ -144,9 +162,25 @@ async function placeBet() {
width: 100%;
max-height: 80vh;
border-radius: 16px 16px 0 0;
padding: 14px 14px calc(14px + env(safe-area-inset-bottom, 0));
overflow-y: auto;
border-top: 1px solid var(--border);
display: flex;
flex-direction: column;
overflow: hidden;
}
.drawer-body {
flex: 1;
overflow-y: auto;
padding: 14px 14px 0;
-webkit-overflow-scrolling: touch;
}
.drawer-foot {
flex-shrink: 0;
padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
background: rgba(14, 14, 14, 0.98);
border-top: 1px solid var(--border-gold-soft);
box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.45);
}
.drawer-header {

154
apps/player/src/components/BetStatsPanel.vue Normal file
View File

@@ -0,0 +1,154 @@
<script setup lang="ts">
import { computed } from 'vue';
import { useI18n } from 'vue-i18n';
import { formatMoney, parseAmount } from '../utils/localeDisplay';
import type { BetHistoryItem } from './BetHistoryCard.vue';
const props = defineProps<{ items: BetHistoryItem[] }>();
const { t, locale } = useI18n();
const stats = computed(() => {
let total = 0;
let won = 0;
let lost = 0;
let pending = 0;
let push = 0;
let totalStake = 0;
let totalReturn = 0;
for (const bet of props.items) {
total++;
const s = bet.status.toUpperCase();
if (s === 'WON' || s === 'WIN') { won++; totalReturn += parseAmount(bet.actualReturn); }
else if (s === 'LOST' || s === 'LOSE') lost++;
else if (s === 'PUSH' || s === 'VOID' || s === 'CANCELLED') push++;
else pending++;
totalStake += parseAmount(bet.stake);
if (s === 'WON' || s === 'WIN') totalReturn += parseAmount(bet.actualReturn);
else if (s === 'PENDING') totalReturn += parseAmount(bet.potentialReturn);
}
return { total, won, lost, pending, push, totalStake, totalReturn };
});
</script>
<template>
<div class="stats-panel">
<div class="stats-row">
<div class="stat-item">
<span class="stat-val">{{ stats.total }}</span>
<span class="stat-label">{{ t('history.stats_total') }}</span>
</div>
<div class="stat-item won">
<span class="stat-val">{{ stats.won }}</span>
<span class="stat-label">{{ t('history.stats_won') }}</span>
</div>
<div class="stat-item lost">
<span class="stat-val">{{ stats.lost }}</span>
<span class="stat-label">{{ t('history.stats_lost') }}</span>
</div>
<div class="stat-item pending">
<span class="stat-val">{{ stats.pending }}</span>
<span class="stat-label">{{ t('history.stats_pending') }}</span>
</div>
<div class="stat-item push">
<span class="stat-val">{{ stats.push }}</span>
<span class="stat-label">{{ t('history.stats_push') }}</span>
</div>
</div>
<div class="stats-bar">
<div class="bar-seg won" :style="{ flex: stats.won || 0.001 }" />
<div class="bar-seg lost" :style="{ flex: stats.lost || 0.001 }" />
<div class="bar-seg pending" :style="{ flex: stats.pending || 0.001 }" />
<div class="bar-seg push" :style="{ flex: stats.push || 0.001 }" />
</div>
<div class="stats-row secondary">
<div class="stat-item">
<span class="stat-val small">{{ formatMoney(stats.totalStake, locale) }}</span>
<span class="stat-label">{{ t('history.stats_stake') }}</span>
</div>
<div class="stat-item">
<span class="stat-val small gold">{{ formatMoney(stats.totalReturn, locale) }}</span>
<span class="stat-label">{{ t('history.stats_return') }}</span>
</div>
</div>
</div>
</template>
<style scoped>
.stats-panel {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 14px 12px 10px;
margin-bottom: 12px;
backdrop-filter: blur(10px);
}
.stats-row {
display: flex;
gap: 4px;
margin-bottom: 8px;
}
.stats-row.secondary {
margin-bottom: 0;
margin-top: 8px;
justify-content: space-around;
}
.stat-item {
flex: 1;
text-align: center;
min-width: 0;
}
.stat-val {
display: block;
font-size: 18px;
font-weight: 900;
font-variant-numeric: tabular-nums;
}
.stat-val.small {
font-size: 14px;
color: var(--text-muted);
}
.stat-val.gold {
color: var(--primary-light);
}
.stat-item.won .stat-val { color: #3db865; }
.stat-item.lost .stat-val { color: #e05050; }
.stat-item.pending .stat-val { color: #e8c84a; }
.stat-item.push .stat-val { color: #888; }
.stat-label {
display: block;
font-size: 10px;
font-weight: 700;
color: var(--text-muted);
letter-spacing: 0.04em;
margin-top: 2px;
}
.stats-bar {
display: flex;
height: 4px;
border-radius: 2px;
overflow: hidden;
gap: 2px;
}
.bar-seg {
min-width: 2px;
border-radius: 2px;
transition: flex 0.3s ease;
}
.bar-seg.won { background: #3db865; }
.bar-seg.lost { background: #e05050; }
.bar-seg.pending { background: #e8c84a; }
.bar-seg.push { background: #444; }
</style>

193
apps/player/src/components/BetSuccessOverlay.vue Normal file
View File

@@ -0,0 +1,193 @@
<script setup lang="ts">
import { ref, watch, onUnmounted, nextTick } from 'vue';
import { useI18n } from 'vue-i18n';
const props = defineProps<{ show: boolean }>();
const emit = defineEmits<{ done: [] }>();
const { t } = useI18n();
const canvasRef = ref<HTMLCanvasElement | null>(null);
let raf = 0;
let particles: Particle[] = [];
interface Particle {
x: number; y: number; vx: number; vy: number;
life: number; maxLife: number; size: number;
color: string; shape: number;
}
const COLORS = ['#D4AF37', '#FFD700', '#F0C040', '#C8A02E', '#E6C84C', '#B8960C'];
let w = 0;
let h = 0;
function spawnBurst() {
const cx = w / 2;
const cy = h * 0.38;
for (let i = 0; i < 80; i++) {
const angle = Math.random() * Math.PI * 2;
const speed = 1.5 + Math.random() * 5;
const color = COLORS[Math.floor(Math.random() * COLORS.length)];
particles.push({
x: cx + (Math.random() - 0.5) * 60,
y: cy + (Math.random() - 0.5) * 20,
vx: Math.cos(angle) * speed,
vy: Math.sin(angle) * speed - 2,
life: 0,
maxLife: 60 + Math.random() * 80,
size: 3 + Math.random() * 5,
color,
shape: Math.floor(Math.random() * 3),
});
}
}
function draw() {
if (!canvasRef.value) return;
const ctx = canvasRef.value.getContext('2d');
if (!ctx) return;
ctx.clearRect(0, 0, w, h);
for (const p of particles) {
p.x += p.vx;
p.y += p.vy;
p.vy += 0.06;
p.life++;
const alpha = 1 - p.life / p.maxLife;
if (alpha <= 0) continue;
ctx.globalAlpha = alpha;
ctx.fillStyle = p.color;
if (p.shape === 0) {
ctx.beginPath();
ctx.arc(p.x, p.y, p.size * 0.5, 0, Math.PI * 2);
ctx.fill();
} else if (p.shape === 1) {
ctx.fillRect(p.x - p.size * 0.35, p.y - p.size * 0.35, p.size * 0.7, p.size * 0.7);
} else {
ctx.beginPath();
ctx.moveTo(p.x, p.y - p.size * 0.5);
ctx.lineTo(p.x + p.size * 0.4, p.y + p.size * 0.3);
ctx.lineTo(p.x - p.size * 0.4, p.y + p.size * 0.3);
ctx.closePath();
ctx.fill();
}
}
ctx.globalAlpha = 1;
particles = particles.filter((p) => p.life < p.maxLife);
raf = requestAnimationFrame(draw);
}
function start() {
setTimeout(() => { emit('done'); }, 2200);
void nextTick(() => {
if (!canvasRef.value) return;
const rect = canvasRef.value.getBoundingClientRect();
w = rect.width;
h = rect.height;
particles = [];
spawnBurst();
cancelAnimationFrame(raf);
raf = requestAnimationFrame(draw);
});
}
function stop() {
cancelAnimationFrame(raf);
particles = [];
}
watch(() => props.show, (v) => {
if (v) start();
else stop();
});
onUnmounted(stop);
</script>
<template>
<Teleport to="body">
<div v-if="show" class="bet-success-overlay" @click="emit('done')">
<canvas ref="canvasRef" class="confetti-canvas" />
<div class="success-card">
<svg class="check" viewBox="0 0 52 52" xmlns="http://www.w3.org/2000/svg">
<circle class="check-circle" cx="26" cy="26" r="24" fill="none" stroke="#D4AF37" stroke-width="3" />
<path class="check-mark" d="M14 27l7 7 16-16" fill="none" stroke="#D4AF37" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<p class="success-text">{{ t('bet.place_success') }}</p>
</div>
</div>
</Teleport>
</template>
<style scoped>
.bet-success-overlay {
position: fixed;
inset: 0;
z-index: 300;
background: rgba(0, 0, 0, 0.82);
display: flex;
align-items: center;
justify-content: center;
}
.confetti-canvas {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
.success-card {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 18px;
animation: card-pop 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.2);
}
.check {
width: 72px;
height: 72px;
}
.check-circle {
stroke-dasharray: 151;
stroke-dashoffset: 151;
animation: circle-draw 0.5s 0.15s ease forwards;
}
.check-mark {
stroke-dasharray: 42;
stroke-dashoffset: 42;
animation: check-draw 0.35s 0.45s ease forwards;
}
.success-text {
color: var(--primary-light);
font-size: 18px;
font-weight: 800;
letter-spacing: 0.04em;
animation: text-up 0.4s 0.4s ease both;
}
@keyframes card-pop {
0% { transform: scale(0.6); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
@keyframes circle-draw {
to { stroke-dashoffset: 0; }
}
@keyframes check-draw {
to { stroke-dashoffset: 0; }
}
@keyframes text-up {
0% { opacity: 0; transform: translateY(8px); }
100% { opacity: 1; transform: translateY(0); }
}
</style>

19
apps/player/src/components/CashBalanceChip.vue
View File

@@ -1,11 +1,12 @@
<script setup lang="ts">
import { ref, onMounted, computed } from 'vue';
import { ref, onMounted, onUnmounted, computed } from 'vue';
import { useI18n } from 'vue-i18n';
import api from '../api';
import { formatMoney } from '../utils/localeDisplay';
const { locale, t } = useI18n();
const open = ref(false);
const root = ref<HTMLElement | null>(null);
const wallet = ref<{ availableBalance?: unknown; frozenBalance?: unknown; currency?: string } | null>(null);
function amountValue(value: unknown): number {
@@ -48,10 +49,24 @@ function toggle() {
function close() {
open.value = false;
}
function onOutsideClick(e: Event) {
if (!root.value?.contains(e.target as Node)) open.value = false;
}
onMounted(() => {
document.addEventListener('click', onOutsideClick);
document.addEventListener('touchend', onOutsideClick);
});
onUnmounted(() => {
document.removeEventListener('click', onOutsideClick);
document.removeEventListener('touchend', onOutsideClick);
});
</script>
<template>
<div class="cash-chip-wrap">
<div ref="root" class="cash-chip-wrap">
<button type="button" class="cash-chip" @click="toggle">
<span class="chip-body">
<span class="chip-label">{{ t('wallet.cash_balance') }}</span>

102
apps/player/src/components/GoldSpinner.vue Normal file
View File

@@ -0,0 +1,102 @@
<script setup lang="ts">
import { computed } from 'vue';
const props = defineProps<{
size?: number;
progress?: number;
active?: boolean;
}>();
const rotation = computed(() => (props.progress ?? 0) * 360);
const wrapperStyle = computed(() => {
if (props.active) return {};
return {
transform: `rotate(${rotation.value}deg)`,
transition: 'transform 0.05s linear',
};
});
</script>
<template>
<svg
:class="['gold-spinner', { 'is-active': active }]"
:width="size ?? 48"
:height="size ?? 48"
viewBox="0 0 48 48"
fill="none"
xmlns="http://www.w3.org/2000/svg"
:style="!active ? wrapperStyle : undefined"
>
<defs>
<linearGradient id="gs-track" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#D4AF37" stop-opacity="0.18" />
<stop offset="50%" stop-color="#F0D875" stop-opacity="0.25" />
<stop offset="100%" stop-color="#D4AF37" stop-opacity="0.18" />
</linearGradient>
<linearGradient id="gs-arc" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#FFF4C8" />
<stop offset="22%" stop-color="#F0D875" />
<stop offset="50%" stop-color="#D4AF37" />
<stop offset="78%" stop-color="#B8942B" />
<stop offset="100%" stop-color="#8B6914" />
</linearGradient>
<filter id="gs-glow">
<feGaussianBlur stdDeviation="1.2" result="blur" />
<feMerge>
<feMergeNode in="blur" />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
<radialGradient id="gs-dot" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#FFF4C8" />
<stop offset="60%" stop-color="#F0D875" />
<stop offset="100%" stop-color="#D4AF37" />
</radialGradient>
</defs>
<circle cx="24" cy="24" r="20" stroke="url(#gs-track)" stroke-width="3" fill="none" />
<circle
cx="24"
cy="24"
r="20"
stroke="url(#gs-arc)"
stroke-width="3"
fill="none"
stroke-linecap="round"
stroke-dasharray="31.4 94.2"
filter="url(#gs-glow)"
/>
<circle cx="24" cy="4" r="2.5" fill="url(#gs-dot)" filter="url(#gs-glow)">
<animate
v-if="active"
attributeName="r"
values="2.5;3.2;2.5"
dur="1.2s"
repeatCount="indefinite"
/>
</circle>
<circle v-if="active" cx="36" cy="13.5" r="1.8" fill="#F0D875" opacity="0.6">
<animate attributeName="opacity" values="0.6;0.15;0.6" dur="0.9s" repeatCount="indefinite" begin="0.15s" />
</circle>
<circle v-if="active" cx="34" cy="34" r="1.5" fill="#D4AF37" opacity="0.4">
<animate attributeName="opacity" values="0.4;0.1;0.4" dur="1.1s" repeatCount="indefinite" begin="0.35s" />
</circle>
<circle v-if="active" cx="14" cy="34" r="1.5" fill="#D4AF37" opacity="0.4">
<animate attributeName="opacity" values="0.4;0.1;0.4" dur="1s" repeatCount="indefinite" begin="0.55s" />
</circle>
</svg>
</template>
<style scoped>
.gold-spinner {
display: block;
will-change: transform;
}
.gold-spinner.is-active {
animation: gs-spin 0.8s linear infinite;
}
@keyframes gs-spin {
to { transform: rotate(360deg); }
}
</style>

15
apps/player/src/components/LeagueAccordionItem.vue
View File

@@ -52,6 +52,10 @@ const emit = defineEmits<{ toggle: []; bet: [id: string] }>();
<style scoped>
.league-block {
margin-bottom: 10px;
border: 1px solid #2e2e2e;
border-radius: 6px;
overflow: hidden;
background: #141414;
}
.league-row {
@@ -60,9 +64,9 @@ const emit = defineEmits<{ toggle: []; bet: [id: string] }>();
align-items: center;
gap: 10px;
padding: 12px 12px;
background: #141414;
border: 1px solid #2e2e2e;
border-radius: 6px;
background: none;
border: none;
border-radius: 0;
text-align: left;
cursor: pointer;
}
@@ -117,7 +121,8 @@ const emit = defineEmits<{ toggle: []; bet: [id: string] }>();
.match-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 6px;
grid-template-columns: repeat(1, minmax(0, 1fr));
gap: 8px;
padding: 0 4px;
}
</style>

12
apps/player/src/components/LocaleSwitcher.vue
View File

@@ -30,12 +30,18 @@ function toggle() {
open.value = !open.value;
}
function onDocClick(e: MouseEvent) {
function onOutsideClick(e: Event) {
if (!root.value?.contains(e.target as Node)) open.value = false;
}
onMounted(() => document.addEventListener('click', onDocClick));
onUnmounted(() => document.removeEventListener('click', onDocClick));
onMounted(() => {
document.addEventListener('click', onOutsideClick);
document.addEventListener('touchend', onOutsideClick);
});
onUnmounted(() => {
document.removeEventListener('click', onOutsideClick);
document.removeEventListener('touchend', onOutsideClick);
});
</script>
<template>

196
apps/player/src/components/MatchBetCard.vue
View File

@@ -1,7 +1,7 @@
<script setup lang="ts">
import { computed } from 'vue';
import { useI18n } from 'vue-i18n';
import TeamEmblem from './TeamEmblem.vue';
import { teamFlagUrl } from '../utils/teamFlag';
const props = defineProps<{
match: {
@@ -18,44 +18,50 @@ const props = defineProps<{
const emit = defineEmits<{ bet: [id: string] }>();
const { t, locale } = useI18n();
const { t } = useI18n();
const kickoff = computed(() => {
const d = new Date(props.match.startTime);
return d.toLocaleString(locale.value, {
month: '2-digit',
day: '2-digit',
hour: '2-digit',
minute: '2-digit',
hour12: true,
});
});
function teamBgStyle(
code?: string,
name?: string,
logoUrl?: string | null,
) {
const url = teamFlagUrl(code, name, logoUrl);
if (!url) return {};
const isCustomLogo = Boolean(logoUrl?.trim());
return {
backgroundImage: `url(${url})`,
backgroundSize: isCustomLogo ? '36px auto' : '48px auto',
};
}
const homeBgStyle = computed(() =>
teamBgStyle(
props.match.homeTeamCode,
props.match.homeTeamName,
props.match.homeTeamLogoUrl,
),
);
const awayBgStyle = computed(() =>
teamBgStyle(
props.match.awayTeamCode,
props.match.awayTeamName,
props.match.awayTeamLogoUrl,
),
);
</script>
<template>
<article class="match-card">
<div class="kickoff">{{ kickoff }}</div>
<div class="teams-stack">
<div class="side">
<TeamEmblem
size="sm"
:team-code="match.homeTeamCode"
:team-name="match.homeTeamName"
:logo-url="match.homeTeamLogoUrl"
/>
<span class="name">{{ match.homeTeamName }}</span>
</div>
<div class="bg-split" aria-hidden="true">
<div class="bg-half home-bg" :style="homeBgStyle" />
<div class="bg-half away-bg" :style="awayBgStyle" />
<div class="bg-veil" />
</div>
<div class="teams-row">
<span class="name home-name">{{ match.homeTeamName }}</span>
<span class="vs">VS</span>
<div class="side">
<TeamEmblem
size="sm"
:team-code="match.awayTeamCode"
:team-name="match.awayTeamName"
:logo-url="match.awayTeamLogoUrl"
/>
<span class="name">{{ match.awayTeamName }}</span>
</div>
<span class="name away-name">{{ match.awayTeamName }}</span>
</div>
<button type="button" class="bet-btn btn-gold-outline" @click="emit('bet', match.id)">
{{ t('bet.place_bet_short') }}
@@ -65,69 +71,105 @@ const kickoff = computed(() => {
<style scoped>
.match-card {
background: #1a1a1a;
border: 1px solid #2a2a2a;
position: relative;
overflow: hidden;
background: #0d0d0d;
border: 1px solid rgba(255, 215, 0, 0.25);
border-radius: 6px;
padding: 6px 4px 5px;
padding: 8px 10px 10px;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
min-width: 0;
}
.bg-split {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
}
.bg-half {
position: absolute;
inset: 0;
background-repeat: no-repeat;
opacity: 0.48;
}
.home-bg {
clip-path: polygon(0 0, 54% 0, 46% 100%, 0 100%);
background-position: 22% 50%;
}
.away-bg {
clip-path: polygon(54% 0, 100% 0, 100% 100%, 46% 100%);
background-position: 78% 50%;
}
.bg-veil {
position: absolute;
inset: 0;
background: linear-gradient(
102deg,
rgba(0, 0, 0, 0.52) 0%,
rgba(0, 0, 0, 0.28) 46%,
rgba(0, 0, 0, 0.28) 54%,
rgba(0, 0, 0, 0.52) 100%
);
}
.teams-row {
position: relative;
z-index: 1;
width: 100%;
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 4px;
min-width: 0;
}
.kickoff {
width: 100%;
text-align: center;
font-size: 9px;
line-height: 1.25;
color: var(--text-muted);
font-weight: 600;
}
.teams-stack {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
}
.side {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
min-width: 0;
min-height: 32px;
}
.name {
width: 100%;
font-size: 10px;
font-weight: 800;
font-size: 14px;
font-weight: 900;
color: var(--primary-light);
line-height: 1.2;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding: 0 2px;
line-height: 1.25;
text-shadow: 0 1px 5px rgba(0, 0, 0, 0.9);
word-break: keep-all;
}
.home-name {
text-align: left;
padding-left: 2px;
}
.away-name {
text-align: right;
padding-right: 2px;
}
.vs {
font-size: 9px;
flex-shrink: 0;
font-size: 10px;
font-weight: 800;
color: var(--text-muted);
line-height: 1;
letter-spacing: 0.06em;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
}
.bet-btn {
width: 100%;
margin-top: 2px;
padding: 3px 2px;
border-radius: 4px;
font-size: 10px;
position: relative;
z-index: 1;
width: auto;
min-width: 72px;
max-width: 42%;
margin-top: 0;
padding: 5px 18px;
border-radius: 6px;
font-size: 12px;
letter-spacing: 0.04em;
line-height: 1.2;
}

18
apps/player/src/components/UserAvatarMenu.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 { useRouter } from 'vue-router';
import { useI18n } from 'vue-i18n';
import { playerAvatarUrl, randomAvatarKey } from '@thebet365/shared';
@@ -11,6 +11,7 @@ const auth = useAuthStore();
const router = useRouter();
const { avatarUrl, loadProfile } = usePlayerProfile();
const open = ref(false);
const root = ref<HTMLElement | null>(null);
const displayAvatarUrl = computed(() => {
if (avatarUrl.value) return avatarUrl.value;
@@ -30,6 +31,19 @@ function close() {
open.value = false;
}
function onOutsideClick(e: Event) {
if (!root.value?.contains(e.target as Node)) open.value = false;
}
onMounted(() => {
document.addEventListener('click', onOutsideClick);
document.addEventListener('touchend', onOutsideClick);
});
onUnmounted(() => {
document.removeEventListener('click', onOutsideClick);
document.removeEventListener('touchend', onOutsideClick);
});
function goEdit() {
close();
router.push('/profile/edit');
@@ -43,7 +57,7 @@ function logout() {
</script>
<template>
<div class="avatar-wrap">
<div ref="root" class="avatar-wrap">
<button type="button" class="avatar-btn" :aria-expanded="open" @click="toggle">
<img v-if="displayAvatarUrl" :src="displayAvatarUrl" alt="" class="avatar-img" />
</button>

104
apps/player/src/components/WalletStatsPanel.vue Normal file
View 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>

82
apps/player/src/components/match-detail/CorrectScoreConfirmModal.vue
View File

@@ -52,38 +52,42 @@ function formatOdds(odds: string) {
</button>
</div>
<div class="slip-item">
<div class="item-name">{{ homeTeamName }} vs {{ awayTeamName }}</div>
<div class="item-sel">{{ marketLabel }}</div>
</div>
<div class="drawer-body">
<div class="slip-item">
<div class="item-name">{{ homeTeamName }} vs {{ awayTeamName }}</div>
<div class="item-sel">{{ marketLabel }}</div>
</div>
<div v-for="(line, idx) in lines" :key="idx" class="slip-item">
<div class="item-name">{{ line.scoreDisplay }}</div>
<div class="item-sel">
@ <span class="odds">{{ formatOdds(line.odds) }}</span>
· {{ formatMoney(line.stake, locale) }}
<div v-for="(line, idx) in lines" :key="idx" class="slip-item">
<div class="item-name">{{ line.scoreDisplay }}</div>
<div class="item-sel">
@ <span class="odds">{{ formatOdds(line.odds) }}</span>
· {{ formatMoney(line.stake, locale) }}
</div>
</div>
</div>
<div class="stake-area">
<div class="summary-row">
<span>{{ t('bet.cs_confirm_total_stake') }}</span>
<strong>{{ formatMoney(totalStake, locale) }}</strong>
<div class="drawer-foot">
<div class="stake-area">
<div class="summary-row">
<span>{{ t('bet.cs_confirm_total_stake') }}</span>
<strong>{{ formatMoney(totalStake, locale) }}</strong>
</div>
<div class="return">
{{ t('bet.slip_est_return') }}:
<strong>{{ formatMoney(totalReturn, locale) }}</strong>
</div>
</div>
<div class="return">
{{ t('bet.slip_est_return') }}:
<strong>{{ formatMoney(totalReturn, locale) }}</strong>
</div>
</div>
<button
type="button"
class="btn-primary"
:disabled="loading"
@click="emit('confirm')"
>
{{ loading ? t('bet.placing') : t('bet.place_bet') }}
</button>
<button
type="button"
class="btn-primary"
:disabled="loading"
@click="emit('confirm')"
>
{{ loading ? t('bet.placing') : t('bet.place_bet') }}
</button>
</div>
</div>
</div>
</template>
@@ -103,16 +107,36 @@ function formatOdds(odds: string) {
width: 100%;
max-height: 80vh;
border-radius: 16px 16px 0 0;
padding: 14px 14px calc(14px + env(safe-area-inset-bottom, 0));
overflow-y: auto;
border-top: 1px solid var(--border);
display: flex;
flex-direction: column;
overflow: hidden;
}
.drawer-body {
flex: 1;
overflow-y: auto;
padding: 10px 14px 0;
-webkit-overflow-scrolling: touch;
}
.drawer-foot {
flex-shrink: 0;
padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
background: rgba(14, 14, 14, 0.98);
border-top: 1px solid var(--border-gold-soft);
box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.45);
}
.drawer-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
padding: 14px 14px 12px;
flex-shrink: 0;
background: rgba(14, 14, 14, 0.98);
border-bottom: 1px solid #2a2a2a;
z-index: 2;
}
.drawer-header h3 {

32
apps/player/src/components/match-detail/MarketTypeTile.vue
View File

@@ -21,9 +21,9 @@ const { t } = useI18n();
@click="emit('toggle')"
>
<span class="row-label">{{ label }}</span>
<span v-if="promoLabel" class="row-promo">{{ promoLabel }}</span>
<span v-if="promoLabel" class="row-promo">{{ promoLabel }}</span>
<span v-if="!hasMarket" class="row-muted">{{ t('bet.market_closed') }}</span>
<span v-else class="row-chevron" aria-hidden="true">{{ expanded ? '▾' : '▸' }}</span>
<span v-else class="row-chevron" :class="{ open: expanded }" aria-hidden="true">▸</span>
</button>
</template>
@@ -33,16 +33,35 @@ const { t } = useI18n();
align-items: center;
gap: 8px;
width: 100%;
padding: 10px 12px;
padding: 13px 12px;
background: transparent;
border: none;
text-align: left;
transition: background 0.15s ease;
border-radius: 0;
position: relative;
overflow: hidden;
}
.row:not(.disabled):active {
background: rgba(255, 255, 255, 0.025);
}
.row.expanded {
background: rgba(255, 255, 255, 0.03);
}
.row.expanded::before {
content: '';
position: absolute;
top: 0;
left: 12px;
right: 12px;
height: 2px;
background: linear-gradient(90deg, transparent 0%, var(--primary) 30%, var(--primary-light) 50%, var(--primary) 70%, transparent 100%);
opacity: 0.6;
}
.row.disabled {
opacity: 0.4;
}
@@ -53,6 +72,7 @@ const { t } = useI18n();
font-size: 13px;
font-weight: 700;
color: var(--text);
letter-spacing: 0.02em;
}
.row-promo {
@@ -73,14 +93,18 @@ const { t } = useI18n();
.row-muted {
font-size: 10px;
color: var(--text-muted);
font-weight: 600;
}
.row-chevron {
font-size: 11px;
color: var(--text-muted);
transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s;
flex-shrink: 0;
}
.row.expanded .row-chevron {
.row-chevron.open {
transform: rotate(90deg);
color: var(--primary-light);
}
</style>

5
apps/player/src/components/outright/OutrightBetModal.vue
View File

@@ -4,6 +4,7 @@ import { useI18n } from 'vue-i18n';
import api from '../../api';
import { formatMoney, parseAmount } from '../../utils/localeDisplay';
import { teamFlagUrl } from '../../utils/teamFlag';
import BetSuccessOverlay from '../BetSuccessOverlay.vue';
export interface OutrightPick {
selectionId: string;
@@ -30,6 +31,7 @@ const error = ref('');
const balance = ref(0);
const successBalance = ref(0);
const successStake = ref(0);
const showSuccess = ref(false);
const flagUrl = computed(() =>
props.pick ? teamFlagUrl(props.pick.teamCode, props.pick.teamName) : null,
@@ -102,6 +104,7 @@ async function submit() {
successBalance.value = balance.value - stake.value;
balance.value = successBalance.value;
step.value = 'success';
showSuccess.value = true;
} catch (e: unknown) {
error.value =
(e as { response?: { data?: { error?: string } } })?.response?.data?.error ||
@@ -206,6 +209,8 @@ function formatOdds(odds: string) {
</template>
</div>
</div>
<BetSuccessOverlay :show="showSuccess" @done="showSuccess = false" />
</template>
<style scoped>

91
apps/player/src/components/outright/OutrightEventSection.vue
View File

@@ -26,20 +26,15 @@ export interface OutrightEvent {
const props = defineProps<{
event: OutrightEvent;
expanded: boolean;
visibleLimit: number;
loadingMore: boolean;
}>();
const emit = defineEmits<{
toggle: [];
loadMore: [];
pick: [selection: OutrightSelection];
}>();
const { t } = useI18n();
const INITIAL_BATCH = 20;
const headTitle = computed(() => {
const raw = props.event.title.replace(/^\*+/, '').trim();
return raw || props.event.leagueName || t('bet.tab_outright');
@@ -49,28 +44,16 @@ const headMeta = computed(() => {
const total = props.event.selectionCount ?? props.event.selections.length;
return t('bet.outright_teams_count', { n: total });
});
const visibleSelections = computed(() =>
props.event.selections.slice(0, props.visibleLimit),
);
const hasMore = computed(
() => props.event.selections.length > props.visibleLimit,
);
const showLoadMore = computed(
() => props.event.selections.length > INITIAL_BATCH && hasMore.value,
);
</script>
<template>
<section class="event-block">
<button type="button" class="event-head" :aria-expanded="expanded" @click="emit('toggle')">
<button type="button" class="event-head" :class="{ 'is-expanded': expanded }" :aria-expanded="expanded" @click="emit('toggle')">
<span class="toggle-icon" :class="{ open: expanded }">
<span class="toggle-mark">{{ expanded ? '−' : '+' }}</span>
</span>
<span class="event-head-text">
<span class="event-title">*{{ headTitle }}</span>
<span class="event-title">{{ headTitle }}</span>
<span v-if="event.leagueName && event.leagueName !== headTitle" class="event-league">
{{ event.leagueName }}
</span>
@@ -79,10 +62,10 @@ const showLoadMore = computed(
<img :src="saishiImg" alt="" class="event-saishi" />
</button>
<div v-show="expanded" class="options-wrap">
<div v-show="expanded" class="options-scroll">
<div class="options-grid">
<OutrightOptionCard
v-for="sel in visibleSelections"
v-for="sel in event.selections"
:key="sel.id"
:team-code="sel.teamCode"
:team-name="sel.teamName"
@@ -91,24 +74,6 @@ const showLoadMore = computed(
@pick="emit('pick', sel)"
/>
</div>
<div v-if="showLoadMore" class="load-more-zone">
<p class="load-more-hint">
{{
t('bet.outright_shown_count', {
shown: visibleSelections.length,
total: event.selections.length,
})
}}
</p>
<button
type="button"
class="load-more-btn"
:disabled="loadingMore"
@click="emit('loadMore')"
>
{{ loadingMore ? t('bet.loading') : t('bet.outright_load_more') }}
</button>
</div>
</div>
</section>
</template>
@@ -116,6 +81,9 @@ const showLoadMore = computed(
<style scoped>
.event-block {
margin-bottom: 10px;
border: 1px solid #2e2e2e;
border-radius: 6px;
overflow: hidden;
}
.event-head {
@@ -125,8 +93,8 @@ const showLoadMore = computed(
gap: 10px;
padding: 12px 10px;
background: #141414;
border: 1px solid #2e2e2e;
border-radius: 6px;
border: none;
border-radius: 0;
text-align: left;
}
@@ -192,43 +160,18 @@ const showLoadMore = computed(
border-left: 1px solid #2a2a2a;
}
.options-wrap {
padding: 10px 0 4px;
.options-scroll {
max-height: 408px;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding: 8px 2px 2px;
scrollbar-width: thin;
scrollbar-color: #333 transparent;
}
.options-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 8px;
}
.load-more-zone {
padding: 14px 8px 6px;
text-align: center;
}
.load-more-hint {
margin: 0 0 10px;
font-size: 12px;
font-weight: 600;
color: var(--text-muted);
}
.load-more-btn {
width: 100%;
max-width: 280px;
padding: 11px 16px;
border-radius: 8px;
border: 1px solid var(--border-gold-soft);
background: linear-gradient(180deg, #1f1f1f, #141414);
color: var(--primary-light);
font-size: 13px;
font-weight: 800;
font-family: inherit;
letter-spacing: 0.04em;
}
.load-more-btn:disabled {
opacity: 0.65;
gap: 6px;
}
</style>

29
apps/player/src/components/outright/OutrightOptionCard.vue
View File

@@ -1,5 +1,5 @@
<script setup lang="ts">
import { computed, ref, watch } from 'vue';
import { computed, ref, watch, onMounted, onUnmounted } from 'vue';
import { teamFlagUrl } from '../../utils/teamFlag';
const props = defineProps<{
@@ -15,6 +15,9 @@ const flag = computed(
() => props.logoUrl?.trim() || teamFlagUrl(props.teamCode, props.teamName),
);
const flagFailed = ref(false);
const imgVisible = ref(false);
const cardRef = ref<HTMLElement | null>(null);
let observer: IntersectionObserver | null = null;
function onFlagError() {
flagFailed.value = true;
@@ -31,16 +34,34 @@ function formatOdds(odds: string) {
const n = parseFloat(odds);
return Number.isFinite(n) ? n.toFixed(2) : odds;
}
onMounted(() => {
if (!cardRef.value) return;
observer = new IntersectionObserver(
(entries) => {
const entry = entries[0];
if (entry.isIntersecting) {
imgVisible.value = true;
observer?.disconnect();
}
},
{ rootMargin: '120px' }
);
observer.observe(cardRef.value);
});
onUnmounted(() => {
observer?.disconnect();
});
</script>
<template>
<button type="button" class="option-card" @click="emit('pick')">
<button ref="cardRef" type="button" class="option-card" @click="emit('pick')">
<img
v-if="flag && !flagFailed"
v-if="imgVisible && flag && !flagFailed"
:src="flag"
alt=""
class="flag"
loading="lazy"
@error="onFlagError"
/>
<span v-else class="flag-placeholder" aria-hidden="true">⚽</span>

104
apps/player/src/components/outright/OutrightPanel.vue
View File

@@ -8,19 +8,15 @@ import OutrightEventSection, {
} from './OutrightEventSection.vue';
import OutrightBetModal, { type OutrightPick } from './OutrightBetModal.vue';
import emptyMatchesImg from '../../assets/images/empty-matches.svg';
import GoldSpinner from '../../components/GoldSpinner.vue';
import { useOnLocaleChange } from '../../composables/useOnLocaleChange';
const { t } = useI18n();
const INITIAL_BATCH = 20;
const LOAD_MORE_STEP = 28;
const loading = ref(true);
const loadError = ref('');
const loadingMoreId = ref<string | null>(null);
const events = ref<OutrightEvent[]>([]);
const expanded = ref<Set<string>>(new Set());
const visibleLimits = ref<Record<string, number>>({});
const modalOpen = ref(false);
const activePick = ref<OutrightPick | null>(null);
@@ -29,60 +25,37 @@ const totalSelections = computed(() =>
events.value.reduce((sum, e) => sum + e.selections.length, 0),
);
function resetVisibleLimits() {
const next: Record<string, number> = {};
for (const e of events.value) {
next[e.id] =
e.selections.length <= INITIAL_BATCH
? e.selections.length
: INITIAL_BATCH;
}
visibleLimits.value = next;
}
function syncExpandedAfterLoad() {
const ids = events.value.map((e) => e.id);
const kept = new Set([...expanded.value].filter((id) => ids.includes(id)));
if (kept.size > 0) {
expanded.value = kept;
// 只保留仍然存在的 id，且最多保留 1 个
const kept = [...expanded.value].filter((id) => ids.includes(id));
if (kept.length > 0) {
expanded.value = new Set([kept[0]]);
return;
}
if (ids.length === 1) {
expanded.value = new Set(ids);
} else if (ids.length <= 3) {
expanded.value = new Set(ids);
} else {
if (ids.length > 0) {
expanded.value = new Set([ids[0]]);
} else {
expanded.value = new Set();
}
}
function hasMoreSelections(event: OutrightEvent) {
const limit = visibleLimits.value[event.id] ?? INITIAL_BATCH;
return event.selections.length > limit;
}
function loadMore(event: OutrightEvent) {
if (loadingMoreId.value || !hasMoreSelections(event)) return;
loadingMoreId.value = event.id;
const current = visibleLimits.value[event.id] ?? INITIAL_BATCH;
visibleLimits.value = {
...visibleLimits.value,
[event.id]: Math.min(current + LOAD_MORE_STEP, event.selections.length),
};
loadingMoreId.value = null;
}
async function load() {
loading.value = true;
const hadData = events.value.length > 0;
if (!hadData) loading.value = true;
loadError.value = '';
try {
const { data } = await api.get('/player/outrights');
const list = (data?.data ?? []) as OutrightEvent[];
events.value = list.filter((e) => e.selections?.length > 0);
resetVisibleLimits();
syncExpandedAfterLoad();
const fresh = list.filter((e) => e.selections?.length > 0);
if (!hadData) {
events.value = fresh;
syncExpandedAfterLoad();
} else {
mergeOddsOnly(fresh);
}
} catch (e: unknown) {
events.value = [];
if (!hadData) events.value = [];
const err = e as { response?: { status?: number; data?: { error?: string } } };
if (err.response?.status === 403) {
loadError.value = t('bet.outright_player_only');
@@ -90,7 +63,26 @@ async function load() {
loadError.value = err.response?.data?.error ?? t('bet.outright_load_failed');
}
} finally {
loading.value = false;
if (!hadData) loading.value = false;
}
}
function mergeOddsOnly(fresh: OutrightEvent[]) {
const freshMap = new Map<string, OutrightEvent>();
for (const e of fresh) freshMap.set(e.id, e);
for (const event of events.value) {
const freshEvent = freshMap.get(event.id);
if (!freshEvent) continue;
const selMap = new Map<string, OutrightSelection>();
for (const s of freshEvent.selections) selMap.set(s.id, s);
for (const sel of event.selections) {
const fs = selMap.get(sel.id);
if (fs) {
sel.odds = fs.odds;
sel.oddsVersion = fs.oddsVersion;
}
}
}
}
@@ -101,18 +93,6 @@ function toggle(id: string) {
if (next.has(id)) next.delete(id);
else next.add(id);
expanded.value = next;
if (next.has(id) && visibleLimits.value[id] == null) {
const event = events.value.find((e) => e.id === id);
if (event) {
visibleLimits.value = {
...visibleLimits.value,
[id]:
event.selections.length <= INITIAL_BATCH
? event.selections.length
: INITIAL_BATCH,
};
}
}
}
function openBet(event: OutrightEvent, sel: OutrightSelection) {
@@ -135,8 +115,9 @@ function closeModal() {
<template>
<div class="outright-panel">
<div v-if="loading" class="state">{{ t('bet.loading') }}</div>
<div v-if="loading" class="state">
<GoldSpinner :size="36" />
</div>
<template v-else-if="events.length">
<p v-if="eventCount > 1" class="panel-summary">
{{ t('bet.outright_events_summary', { events: eventCount, teams: totalSelections }) }}
@@ -148,10 +129,7 @@ function closeModal() {
:key="event.id"
:event="event"
:expanded="expanded.has(event.id)"
:visible-limit="visibleLimits[event.id] ?? INITIAL_BATCH"
:loading-more="loadingMoreId === event.id"
@toggle="toggle(event.id)"
@load-more="loadMore(event)"
@pick="openBet(event, $event)"
/>
</div>

400
apps/player/src/components/parlay/ParlayPanel.vue
View File

@@ -6,6 +6,8 @@ import { useBetSlipStore } from '../../stores/betSlip';
import { PARLAY_MAX_LEGS, canSelectForParlay } from '@thebet365/shared';
import { PARLAY_MARKET_TYPES, PARLAY_SELECTION_KEYS } from '../../utils/parlayColumns';
import BetGuideHelp from '../BetGuideHelp.vue';
import GoldSpinner from '../GoldSpinner.vue';
import TeamEmblem from '../TeamEmblem.vue';
import { useOnLocaleChange } from '../../composables/useOnLocaleChange';
type TimeFilter = 'all' | 'today';
@@ -29,8 +31,13 @@ interface Market {
interface ParlayMatch {
id: string;
leagueName: string;
leagueId?: string;
homeTeamName: string;
awayTeamName: string;
homeTeamCode?: string;
awayTeamCode?: string;
homeTeamLogoUrl?: string | null;
awayTeamLogoUrl?: string | null;
startTime: string;
markets: Market[];
}
@@ -41,23 +48,87 @@ const slip = useBetSlipStore();
const loading = ref(true);
const matches = ref<ParlayMatch[]>([]);
const timeFilter = ref<TimeFilter>('all');
const leagueFilter = ref('');
const collapsed = ref<Set<string>>(new Set());
const parlayMarketKeys = PARLAY_MARKET_TYPES.map((c) => c.key);
async function loadParlayMatches() {
loading.value = true;
const hadData = matches.value.length > 0;
if (!hadData) loading.value = true;
try {
const { data } = await api.get('/player/matches');
matches.value = (data.data ?? []).filter(
const fresh = (data.data ?? []).filter(
(m: ParlayMatch) => m.markets?.length && hasParlayMarkets(m),
);
if (!hadData) {
matches.value = fresh;
syncCollapsedAfterLoad();
} else {
mergeOddsOnly(fresh);
}
} finally {
loading.value = false;
if (!hadData) loading.value = false;
}
}
function syncCollapsedAfterLoad() {
const ids = matches.value.map((m) => m.id);
// 只保留仍然存在的 id
const kept = [...collapsed.value].filter((id) => ids.includes(id));
if (kept.length > 0) {
collapsed.value = new Set(kept);
return;
}
// 默认只展开第一个，其余折叠
if (ids.length > 1) {
collapsed.value = new Set(ids.slice(1));
} else {
collapsed.value = new Set();
}
}
function mergeOddsOnly(fresh: ParlayMatch[]) {
const matchMap = new Map<string, ParlayMatch>();
for (const m of fresh) matchMap.set(m.id, m);
for (const match of matches.value) {
const freshMatch = matchMap.get(match.id);
if (!freshMatch) continue;
const marketMap = new Map<string, Market>();
for (const mk of freshMatch.markets) marketMap.set(mk.id, mk);
for (const market of match.markets) {
const freshMarket = marketMap.get(market.id);
if (!freshMarket) continue;
const selMap = new Map<string, Selection>();
for (const s of freshMarket.selections) selMap.set(s.id, s);
for (const sel of market.selections) {
const fs = selMap.get(sel.id);
if (fs) {
sel.odds = fs.odds;
sel.oddsVersion = fs.oddsVersion;
}
}
}
}
}
useOnLocaleChange(loadParlayMatches);
const leagues = computed(() => {
const seen = new Set<string>();
const list: { id: string; name: string }[] = [];
for (const m of matches.value) {
const id = m.leagueId ?? m.leagueName;
if (!seen.has(id)) {
seen.add(id);
list.push({ id, name: m.leagueName });
}
}
list.sort((a, b) => a.name.localeCompare(b.name));
return list;
});
function parseLine(v: string | number | null | undefined) {
if (v == null || v === '') return null;
const n = typeof v === 'number' ? v : parseFloat(String(v));
@@ -100,8 +171,14 @@ function isKickoffToday(startTime: string) {
}
const filteredMatches = computed(() => {
if (timeFilter.value === 'all') return matches.value;
return matches.value.filter((m) => isKickoffToday(m.startTime));
let list = matches.value;
if (timeFilter.value === 'today') {
list = list.filter((m) => isKickoffToday(m.startTime));
}
if (leagueFilter.value) {
list = list.filter((m) => (m.leagueId ?? m.leagueName) === leagueFilter.value);
}
return list;
});
function formatKickoff(startTime: string) {
@@ -163,76 +240,101 @@ const showParlayFoot = computed(() => slip.mode === 'parlay' && slip.count > 0);
const footConfirmLabel = computed(() =>
slip.canPlaceParlay ? t('bet.parlay_confirm_parlay') : t('bet.cs_confirm_cell'),
);
function toggleCollapse(id: string) {
const next = new Set(collapsed.value);
if (next.has(id)) next.delete(id);
else next.add(id);
collapsed.value = next;
}
</script>
<template>
<div class="parlay-panel" :class="{ 'has-fixed-foot': showParlayFoot }">
<div class="toolbar">
<div class="toolbar-filters">
<select v-model="timeFilter" class="filter-select">
<select v-model="timeFilter" class="filter-select">
<option value="all">{{ t('bet.parlay_filter_all') }}</option>
<option value="today">{{ t('bet.tab_today') }}</option>
</select>
<BetGuideHelp
:title="t('bet.parlay_guide_title')"
:aria-label="t('bet.parlay_guide_help')"
storage-key="thebet365_parlay_guide_seen"
>
<p class="intro">{{ t('bet.parlay_desc') }}</p>
<ol>
<li>{{ t('bet.parlay_guide_1') }}</li>
<li>{{ t('bet.parlay_guide_2') }}</li>
<li>{{ t('bet.parlay_guide_3') }}</li>
</ol>
<p class="rules-link">{{ t('bet.guide_rules_link') }}</p>
</BetGuideHelp>
</div>
<div class="col-headers">
<span v-for="col in PARLAY_MARKET_TYPES" :key="col.key" class="col-head">{{ colLabel(col.labelKey) }}</span>
</div>
</select>
<select v-model="leagueFilter" class="filter-select">
<option value="">{{ t('bet.parlay_filter_all') }}</option>
<option v-for="lg in leagues" :key="lg.id" :value="lg.id">{{ lg.name }}</option>
</select>
<BetGuideHelp
:title="t('bet.parlay_guide_title')"
:aria-label="t('bet.parlay_guide_help')"
storage-key="thebet365_parlay_guide_seen"
>
<p class="intro">{{ t('bet.parlay_desc') }}</p>
<ol>
<li>{{ t('bet.parlay_guide_1') }}</li>
<li>{{ t('bet.parlay_guide_2') }}</li>
<li>{{ t('bet.parlay_guide_3') }}</li>
</ol>
<p class="rules-link">{{ t('bet.guide_rules_link') }}</p>
</BetGuideHelp>
</div>
<div v-if="loading" class="state">{{ t('bet.loading') }}</div>
<div v-if="loading" class="state">
<GoldSpinner :size="36" />
</div>
<div v-else-if="filteredMatches.length" class="table-wrap">
<div v-for="match in filteredMatches" :key="match.id" class="match-row">
<div class="match-info">
<div class="league">{{ match.leagueName }}</div>
<div class="teams">{{ match.homeTeamName }} vs {{ match.awayTeamName }}</div>
<div class="time">{{ formatKickoff(match.startTime) }}</div>
</div>
<div class="odds-cells">
<div v-else-if="filteredMatches.length" class="match-list">
<div v-for="match in filteredMatches" :key="match.id" class="match-card" :class="{ collapsed: collapsed.has(match.id) }">
<button type="button" class="match-head" @click="toggleCollapse(match.id)">
<span class="m-league">{{ match.leagueName }}</span>
<TeamEmblem
size="sm"
:team-code="match.homeTeamCode"
:team-name="match.homeTeamName"
:logo-url="match.homeTeamLogoUrl"
/>
<span class="m-teams">{{ match.homeTeamName }} vs {{ match.awayTeamName }}</span>
<TeamEmblem
size="sm"
:team-code="match.awayTeamCode"
:team-name="match.awayTeamName"
:logo-url="match.awayTeamLogoUrl"
/>
<span class="m-time">{{ formatKickoff(match.startTime) }}</span>
<span class="toggle-dot" :class="{ open: !collapsed.has(match.id) }">{{ collapsed.has(match.id) ? '+' : '−' }}</span>
</button>
<div v-show="!collapsed.has(match.id)" class="market-blocks">
<div
v-for="col in PARLAY_MARKET_TYPES"
:key="col.key"
class="market-cell"
class="market-block"
>
<template
v-if="
getMarket(match, col.key) &&
isParlayEligibleMarket(getMarket(match, col.key)!)
"
>
<button
v-for="sel in getMarket(match, col.key)!.selections"
:key="sel.id"
type="button"
class="odd-btn"
:class="{ picked: isPicked(sel.id) }"
@click="pickSelection(match, getMarket(match, col.key)!, sel)"
<span class="block-label">{{ colLabel(col.labelKey) }}</span>
<div class="block-btns">
<template
v-if="
getMarket(match, col.key) &&
isParlayEligibleMarket(getMarket(match, col.key)!)
"
>
<span class="odd-label">{{ selLabel(sel) }}</span>
<span class="odd-val">{{ formatOdds(sel.odds) }}</span>
</button>
</template>
<span v-else class="market-empty">—</span>
<button
v-for="sel in getMarket(match, col.key)!.selections"
:key="sel.id"
type="button"
class="odd-btn"
:class="{ picked: isPicked(sel.id) }"
@click="pickSelection(match, getMarket(match, col.key)!, sel)"
>
<span class="odd-label">{{ selLabel(sel) }}</span>
<span class="odd-val">{{ formatOdds(sel.odds) }}</span>
</button>
</template>
<span v-else class="market-empty">—</span>
</div>
</div>
</div>
</div>
</div>
<div v-else class="empty">
<span class="empty-icon" aria-hidden="true">📅</span>
<span class="empty-icon" aria-hidden="true">&#9917;</span>
<p>{{ t('bet.parlay_empty') }}</p>
</div>
@@ -267,11 +369,23 @@ const footConfirmLabel = computed(() =>
padding-bottom: 100px;
}
.toolbar-filters {
.toolbar {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
margin-bottom: 8px;
flex-wrap: wrap;
}
.filter-select {
padding: 7px 10px;
border-radius: 6px;
background: #141414;
border: 1px solid var(--border-gold-soft);
color: var(--primary-light);
font-size: 12px;
font-weight: 700;
max-width: 140px;
}
.parlay-foot-fixed {
@@ -297,12 +411,6 @@ const footConfirmLabel = computed(() =>
text-align: center;
}
.foot-hint--info {
color: var(--primary-light);
text-align: center;
font-weight: 600;
}
.foot-meta {
color: var(--primary-light);
font-weight: 600;
@@ -324,102 +432,118 @@ const footConfirmLabel = computed(() =>
opacity: 0.45;
}
.toolbar {
display: flex;
align-items: stretch;
gap: 8px;
margin-bottom: 8px;
overflow-x: auto;
}
.filter-select {
flex-shrink: 0;
min-width: 72px;
padding: 8px 10px;
border-radius: 6px;
background: #141414;
border: 1px solid var(--border-gold-soft);
color: var(--primary-light);
font-size: 12px;
font-weight: 700;
}
.col-headers {
display: grid;
grid-template-columns: repeat(7, minmax(52px, 1fr));
gap: 4px;
flex: 1;
min-width: 360px;
align-items: center;
}
.col-head {
font-size: 10px;
font-weight: 800;
color: var(--text-muted);
text-align: center;
line-height: 1.25;
word-break: keep-all;
}
.table-wrap {
.match-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.match-row {
display: flex;
gap: 8px;
padding: 10px 8px;
.match-card {
background: #141414;
border: 1px solid #2a2a2a;
border-radius: 6px;
overflow-x: auto;
border-radius: 8px;
overflow: hidden;
}
.match-info {
.match-card.collapsed {
border-color: #222;
}
.match-head {
width: 100%;
display: flex;
align-items: center;
gap: 6px;
padding: 10px;
background: none;
border: none;
color: inherit;
font-family: inherit;
cursor: pointer;
}
.match-head:active {
background: rgba(255, 255, 255, 0.015);
}
.toggle-dot {
flex-shrink: 0;
width: 88px;
min-width: 88px;
width: 20px;
height: 20px;
border-radius: 50%;
background: #1a1a1a;
border: 1px solid #333;
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
font-weight: 900;
color: #666;
line-height: 1;
transition: all 0.15s;
}
.league {
font-size: 9px;
.toggle-dot.open {
border-color: var(--border-gold-soft);
color: var(--primary-light);
}
.m-league {
font-size: 10px;
color: var(--text-muted);
margin-bottom: 2px;
font-weight: 600;
flex-shrink: 0;
}
.m-teams {
font-size: 12px;
font-weight: 800;
color: var(--primary-light);
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.teams {
font-size: 11px;
font-weight: 800;
color: var(--primary-light);
line-height: 1.25;
margin-bottom: 4px;
}
.time {
font-size: 9px;
.m-time {
font-size: 10px;
color: var(--text-muted);
flex-shrink: 0;
}
.odds-cells {
display: grid;
grid-template-columns: repeat(7, minmax(52px, 1fr));
gap: 4px;
flex: 1;
min-width: 360px;
align-items: stretch;
.match-head :deep(.team-emblem) {
width: 18px;
height: 18px;
flex-shrink: 0;
}
.market-cell {
.market-blocks {
display: flex;
flex-wrap: wrap;
gap: 6px;
padding: 8px 10px 10px;
}
.market-block {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.block-label {
font-size: 9.5px;
font-weight: 800;
color: var(--text-muted);
letter-spacing: 0.03em;
padding: 0 2px;
}
.block-btns {
display: flex;
gap: 3px;
min-height: 36px;
flex-wrap: wrap;
}
.odd-btn {
@@ -428,12 +552,12 @@ const footConfirmLabel = computed(() =>
align-items: center;
justify-content: center;
gap: 1px;
padding: 4px 2px;
padding: 5px 8px;
border-radius: 4px;
background: #0d0d0d;
border: 1px solid #333;
min-height: 32px;
width: 100%;
min-width: 44px;
min-height: 36px;
}
.odd-btn.picked {
@@ -442,7 +566,7 @@ const footConfirmLabel = computed(() =>
}
.odd-label {
font-size: 9px;
font-size: 8.5px;
font-weight: 700;
color: var(--text-muted);
line-height: 1;
@@ -456,13 +580,13 @@ const footConfirmLabel = computed(() =>
}
.market-empty {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
min-width: 44px;
min-height: 36px;
color: #444;
font-size: 12px;
min-height: 32px;
}
.state,

107
apps/player/src/composables/usePullToRefresh.ts Normal file
View File

@@ -0,0 +1,107 @@
import { ref, computed, onMounted, onUnmounted } from 'vue';
export interface PullToRefreshOptions {
onRefresh: () => Promise<void>;
threshold?: number;
maxPull?: number;
}
export function usePullToRefresh(options: PullToRefreshOptions) {
const { onRefresh, threshold = 48, maxPull = 128 } = options;
const pullDistance = ref(0);
const spinning = ref(false);
const refreshing = ref(false);
const progress = computed(() => Math.min(pullDistance.value / maxPull, 1));
let scrollEl: HTMLElement | null = null;
let startY = 0;
let pulling = false;
function findScrollEl(): HTMLElement | null {
return document.querySelector('.layout > .main') as HTMLElement | null;
}
function isInsideScrollableChild(target: EventTarget | null): boolean {
let el = target as HTMLElement | null;
while (el && el !== scrollEl) {
const style = getComputedStyle(el);
const overflowY = style.overflowY;
if ((overflowY === 'auto' || overflowY === 'scroll') && el.scrollTop > 2) {
return true;
}
el = el.parentElement;
}
return false;
}
function handleTouchStart(e: TouchEvent) {
scrollEl = findScrollEl();
if (!scrollEl || refreshing.value) return;
if (scrollEl.scrollTop > 4) return;
if (isInsideScrollableChild(e.target)) return;
startY = e.touches[0].clientY;
pulling = true;
}
function handleTouchMove(e: TouchEvent) {
if (!pulling || refreshing.value) return;
const delta = e.touches[0].clientY - startY;
if (delta <= 0) {
pullDistance.value = 0;
spinning.value = false;
return;
}
const damped = Math.min(delta * 0.7, maxPull);
pullDistance.value = damped;
spinning.value = damped >= threshold * 0.5;
}
function handleTouchEnd() {
if (!pulling) return;
pulling = false;
if (pullDistance.value >= threshold && !refreshing.value) {
refreshing.value = true;
spinning.value = true;
pullDistance.value = threshold;
setTimeout(() => {
void onRefresh().finally(() => {
refreshing.value = false;
spinning.value = false;
pullDistance.value = 0;
});
}, 900);
} else {
pullDistance.value = 0;
spinning.value = false;
}
}
let attached = false;
function attach() {
if (attached) return;
const el = findScrollEl();
if (!el) return;
el.addEventListener('touchstart', handleTouchStart, { passive: true });
el.addEventListener('touchmove', handleTouchMove, { passive: false });
el.addEventListener('touchend', handleTouchEnd);
attached = true;
}
function detach() {
const el = findScrollEl();
if (!el) return;
el.removeEventListener('touchstart', handleTouchStart);
el.removeEventListener('touchmove', handleTouchMove);
el.removeEventListener('touchend', handleTouchEnd);
attached = false;
}
onMounted(attach);
onUnmounted(detach);
return { pullDistance, spinning, refreshing, progress };
}

26
apps/player/src/layouts/MainLayout.vue
View File

@@ -21,7 +21,19 @@ const { initFromUser } = useAppLocale();
const route = useRoute();
const slip = useBetSlipStore();
const showAnnouncement = computed(() => !route.path.startsWith('/profile'));
const isDetailPage = computed(() => {
const p = route.path;
return p.startsWith('/match/') || p.startsWith('/bet/') || p.startsWith('/bets/');
});
const showHeader = computed(() => !isDetailPage.value);
const showAnnouncement = computed(() => !isDetailPage.value && !route.path.startsWith('/profile'));
const showBottomNav = computed(() => {
const p = route.path;
if (p === '/' || p === '/bet' || p === '/bets' || p === '/wallet' || p === '/profile') return true;
return false;
});
const { announcements, load: loadPlayerHome } = usePlayerHome();
const { loadProfile } = usePlayerProfile();
@@ -45,7 +57,7 @@ watch(
<template>
<div class="layout">
<header class="header">
<header v-if="showHeader" class="header">
<img src="/logo.png" alt="TheBet365" class="logo" />
<div class="header-actions">
<LocaleSwitcher />
@@ -58,11 +70,11 @@ watch(
<AnnouncementMarquee :items="announcements" embedded />
</div>
<main class="main">
<main :class="['main', { 'has-nav': showBottomNav }]">
<RouterView />
</main>
<nav class="bottom-nav" aria-label="Main">
<nav v-if="showBottomNav" class="bottom-nav" aria-label="Main">
<RouterLink to="/" class="nav-item" :class="{ active: route.path === '/' }">
<BottomNavIcon name="home" />
<span class="nav-label">{{ t('nav.home') }}</span>
@@ -143,7 +155,11 @@ watch(
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding: 12px 16px 16px;
padding: 12px 16px 0;
}
.main.has-nav {
padding-bottom: 16px;
}
.bottom-nav {
display: flex;

154
apps/player/src/main.ts
View File

@@ -11,6 +11,13 @@ const i18n = createI18n({
fallbackLocale: ['en-US', 'zh-CN'],
messages: {
'zh-CN': {
common: {
pull_refresh: '下拉刷新',
release_refresh: '释放刷新',
refreshing: '刷新中…',
loading_more: '加载更多…',
no_more: '没有更多了',
},
nav: { home: '主页', bet: '投注', bet_history: '历史投注', wallet: '账单', profile: '我的' },
home: {
hot_matches: '热门赛事',
@@ -25,17 +32,39 @@ const i18n = createI18n({
},
history: {
league_default: '足球',
stake: '投注 Stake',
return: '回报 Return',
est_return: '预计回报 Est. Return',
stake: '投注',
return: '回报',
est_return: '预计回报',
odds: '赔率',
ft: '全场',
ht: '半场',
parlay_title: '串关 · {n} 场',
parlay_league: '串关 Parlay',
empty: '暂无投注记录',
no_more: '没有更多记录了',
status_won: 'WON 赢',
status_pending: 'PENDING 待定',
status_lost: 'LOST 输',
status_push: 'PUSH 走盘',
status_won: '赢',
status_pending: '待定',
status_lost: '输',
status_push: '走盘',
back: '返回',
not_found: '注单不存在',
my_pick: '我的选择',
legs: '串关明细',
summary: '投注摘要',
bet_no: '注单号',
awaiting_result: '等待比赛结果…',
filter_all: '全部',
filter_won: '已赢',
filter_lost: '已输',
filter_pending: '待定',
filter_push: '走盘',
stats_total: '总投注',
stats_won: '赢',
stats_lost: '输',
stats_pending: '待定',
stats_push: '走盘',
stats_stake: '总投注额',
stats_return: '总回报',
},
auth: {
login: '登录',
@@ -65,6 +94,13 @@ const i18n = createI18n({
tx_bet_void: '投注撤销',
tx_cashback: '返水发放',
tx_resettle: '重新结算',
stats_income: '收入',
stats_expense: '支出',
stats_net: '净额',
filter_all: '全部',
filter_deposit: '存款',
filter_withdraw: '提款',
filter_bet: '投注',
},
bet: {
bet_slip: '投注单',
@@ -154,6 +190,7 @@ const i18n = createI18n({
cs_confirm_total_stake: '总投注额',
cs_place_success: '下注成功',
cs_place_failed: '下注失败',
kickoff_time: '开赛时间：',
guide_title: '怎么下注？',
guide_help_aria: '查看下注说明',
guide_got_it: '知道了',
@@ -239,6 +276,13 @@ const i18n = createI18n({
},
},
'en-US': {
common: {
pull_refresh: 'Pull to refresh',
release_refresh: 'Release to refresh',
refreshing: 'Refreshing…',
loading_more: 'Loading more…',
no_more: 'No more',
},
nav: { home: 'Home', bet: 'Bet', bet_history: 'History', wallet: 'Wallet', profile: 'Profile' },
home: {
hot_matches: 'Hot matches',
@@ -253,20 +297,42 @@ const i18n = createI18n({
},
history: {
league_default: 'Football',
stake: 'Stake 投注',
return: 'Return 回报',
est_return: 'Est. Return 预计回报',
stake: 'Stake',
return: 'Return',
est_return: 'Est. Return',
odds: 'Odds',
ft: 'FT',
ht: 'HT',
parlay_title: 'Parlay · {n} legs',
parlay_league: 'Parlay 串关',
parlay_league: 'Parlay',
empty: 'No bets yet',
no_more: 'No more bets',
status_won: 'WON 赢',
status_pending: 'PENDING 待定',
status_lost: 'LOST 输',
status_push: 'PUSH 走盘',
status_won: 'WON',
status_pending: 'PENDING',
status_lost: 'LOST',
status_push: 'PUSH',
back: 'Back',
not_found: 'Bet not found',
my_pick: 'My pick',
legs: 'Parlay legs',
summary: 'Summary',
bet_no: 'Bet ID',
awaiting_result: 'Awaiting result…',
filter_all: 'All',
filter_won: 'Won',
filter_lost: 'Lost',
filter_pending: 'Pending',
filter_push: 'Push',
stats_total: 'Total',
stats_won: 'Won',
stats_lost: 'Lost',
stats_pending: 'Pending',
stats_push: 'Push',
stats_stake: 'Total Stake',
stats_return: 'Total Return',
},
auth: {
login: 'Login',
auth:
{ login: 'Login',
logout: 'Log out',
username: 'Username',
password: 'Password',
@@ -293,6 +359,13 @@ const i18n = createI18n({
tx_bet_void: 'Bet Voided',
tx_cashback: 'Cashback Distribution',
tx_resettle: 'Resettlement',
stats_income: 'Income',
stats_expense: 'Expense',
stats_net: 'Net',
filter_all: 'All',
filter_deposit: 'Deposit',
filter_withdraw: 'Withdraw',
filter_bet: 'Bet',
},
bet: {
bet_slip: 'Bet Slip',
@@ -382,6 +455,7 @@ const i18n = createI18n({
cs_confirm_total_stake: 'Total stake',
cs_place_success: 'Bet placed',
cs_place_failed: 'Bet failed',
kickoff_time: 'Kickoff: ',
guide_title: 'How to bet',
guide_help_aria: 'Betting help',
guide_got_it: 'Got it',
@@ -467,6 +541,13 @@ const i18n = createI18n({
},
},
'ms-MY': {
common: {
pull_refresh: 'Tarik untuk segar',
release_refresh: 'Lepas untuk segar',
refreshing: 'Menyegarkan…',
loading_more: 'Memuat lagi…',
no_more: 'Tiada lagi',
},
nav: {
home: 'Laman Utama',
bet: 'Pertaruhan',
@@ -487,9 +568,12 @@ const i18n = createI18n({
},
history: {
league_default: 'Bola Sepak',
stake: 'Stake',
stake: 'Jumlah',
return: 'Pulangan',
est_return: 'Anggaran pulangan',
odds: 'Odds',
ft: 'PT',
ht: 'SP',
parlay_title: 'Berganda · {n} perlawanan',
parlay_league: 'Berganda',
empty: 'Tiada rekod pertaruhan',
@@ -498,6 +582,25 @@ const i18n = createI18n({
status_pending: 'MENUNGGU',
status_lost: 'KALAH',
status_push: 'SERI',
back: 'Kembali',
not_found: 'Pertaruhan tidak dijumpai',
my_pick: 'Pilihan saya',
legs: 'Butiran berganda',
summary: 'Ringkasan',
bet_no: 'ID Pertaruhan',
awaiting_result: 'Menunggu keputusan…',
filter_all: 'Semua',
filter_won: 'Menang',
filter_lost: 'Kalah',
filter_pending: 'Menunggu',
filter_push: 'Seri',
stats_total: 'Jumlah',
stats_won: 'Menang',
stats_lost: 'Kalah',
stats_pending: 'Menunggu',
stats_push: 'Seri',
stats_stake: 'Jumlah Taruhan',
stats_return: 'Jumlah Pulangan',
},
auth: {
login: 'Log Masuk',
@@ -527,6 +630,13 @@ const i18n = createI18n({
tx_bet_void: 'Pertaruhan Dibatalkan',
tx_cashback: 'Pembayaran Cashback',
tx_resettle: 'Penyelesaian Semula',
stats_income: 'Pendapatan',
stats_expense: 'Perbelanjaan',
stats_net: 'Bersih',
filter_all: 'Semua',
filter_deposit: 'Deposit',
filter_withdraw: 'Pengeluaran',
filter_bet: 'Pertaruhan',
},
bet: {
bet_slip: 'Slip Pertaruhan',
@@ -616,6 +726,7 @@ const i18n = createI18n({
cs_confirm_total_stake: 'Jumlah pertaruhan',
cs_place_success: 'Pertaruhan berjaya',
cs_place_failed: 'Pertaruhan gagal',
kickoff_time: 'Masa mula: ',
guide_title: 'Cara pertaruhan',
guide_help_aria: 'Bantuan pertaruhan',
guide_got_it: 'Faham',
@@ -704,3 +815,10 @@ const i18n = createI18n({
});
createApp(App).use(createPinia()).use(router).use(i18n).mount('#app');
const loader = document.getElementById('app-loading');
if (loader) {
loader.style.opacity = '0';
loader.style.transition = 'opacity 0.3s ease';
setTimeout(() => loader.remove(), 350);
}

1
apps/player/src/router/index.ts
View File

@@ -15,6 +15,7 @@ const router = createRouter({
{ path: 'football', redirect: '/bet' },
{ path: 'match/:id', component: () => import('../views/MatchDetailView.vue') },
{ path: 'bets', component: () => import('../views/MyBetsView.vue') },
{ path: 'bets/:betNo', component: () => import('../views/BetDetailView.vue') },
{ path: 'wallet', component: () => import('../views/WalletView.vue') },
{ path: 'profile', component: () => import('../views/ProfileView.vue') },
{ path: 'profile/edit', component: () => import('../views/ProfileEditView.vue') },

13
apps/player/src/styles.css
View File

@@ -303,3 +303,16 @@ input:-webkit-autofill:active {
letter-spacing: 0.06em;
text-transform: uppercase;
}
.state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 60vh;
gap: 12px;
text-align: center;
color: var(--text-muted);
font-weight: 600;
font-size: 14px;
}

580
apps/player/src/views/BetDetailView.vue Normal file
View File

@@ -0,0 +1,580 @@
<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useI18n } from 'vue-i18n';
import api from '../api';
import { formatMoney } from '../utils/localeDisplay';
import GoldSpinner from '../components/GoldSpinner.vue';
import type { BetHistoryItem } from '../components/BetHistoryCard.vue';
const route = useRoute();
const router = useRouter();
const { t, locale } = useI18n();
const bet = ref<BetHistoryItem | null>(null);
const loading = ref(true);
const notFound = ref(false);
onMounted(async () => {
try {
const { data } = await api.get(`/player/bets/${route.params.betNo}`);
if (!data.data) { notFound.value = true; return; }
bet.value = data.data;
} catch {
notFound.value = true;
} finally {
loading.value = false;
}
});
const statusKey = computed(() => {
const s = (bet.value?.status ?? '').toUpperCase();
if (s === 'WON' || s === 'WIN') return 'won';
if (s === 'LOST' || s === 'LOSE') return 'lost';
if (s === 'PUSH' || s === 'VOID' || s === 'CANCELLED') return 'push';
return 'pending';
});
const statusLabel = computed(() => t(`history.status_${statusKey.value}`));
const placedDateTime = computed(() => {
if (!bet.value) return '';
const d = new Date(bet.value.placedAt);
const date = d.toLocaleDateString(locale.value, { year: 'numeric', month: 'short', day: 'numeric' });
const time = d.toLocaleTimeString(locale.value, { hour: '2-digit', minute: '2-digit' });
return `${date} ${time}`;
});
const returnAmount = computed(() => {
if (!bet.value) return '';
if (statusKey.value === 'won') return formatMoney(bet.value.actualReturn, locale.value);
if (statusKey.value === 'pending') return formatMoney(bet.value.potentialReturn, locale.value);
if (statusKey.value === 'lost') return formatMoney(-parseFloat(String(bet.value.stake ?? 0)), locale.value);
return formatMoney(bet.value.actualReturn ?? bet.value.potentialReturn, locale.value);
});
function formatOdds(v: unknown): string {
const n = parseFloat(String(v));
return isNaN(n) || n <= 0 ? '-' : n.toFixed(2);
}
const SEL_TRANS: Record<string, Record<string, string>> = {
'主胜': { 'en-US': 'Home Win', 'ms-MY': 'Rumah Menang' },
'客胜': { 'en-US': 'Away Win', 'ms-MY': 'Tandang Menang' },
'和局': { 'en-US': 'Draw', 'ms-MY': 'Seri' },
'主': { 'en-US': 'Home', 'ms-MY': 'Rumah' },
'客': { 'en-US': 'Away', 'ms-MY': 'Tandang' },
'大': { 'en-US': 'Over', 'ms-MY': 'Atas' },
'小': { 'en-US': 'Under', 'ms-MY': 'Bawah' },
'单': { 'en-US': 'Odd', 'ms-MY': 'Ganjil' },
'双': { 'en-US': 'Even', 'ms-MY': 'Genap' },
'冠军': { 'en-US': 'Winner', 'ms-MY': 'Juara' },
};
function translateSel(name: string): string {
if (locale.value === 'zh-CN') return name;
const exact = SEL_TRANS[name];
if (exact) return exact[locale.value] ?? exact['en-US'] ?? name;
const sp = name.indexOf(' ');
if (sp > 0) {
const head = name.slice(0, sp);
const m = SEL_TRANS[head];
if (m) return (m[locale.value] ?? m['en-US'] ?? head) + name.slice(sp);
}
return name;
}
function legStatusKey(rs: string | null | undefined) {
if (!rs) return 'pending';
const s = rs.toUpperCase();
if (s === 'WON' || s === 'WIN') return 'won';
if (s === 'LOST' || s === 'LOSE') return 'lost';
return 'push';
}
const matchTitle = computed(() => {
if (!bet.value) return '';
if (bet.value.isParlay) {
const n = bet.value.legCount ?? bet.value.legs?.length ?? 0;
return t('history.parlay_title', { n });
}
return bet.value.matchTitle;
});
const myPick = computed(() => {
if (!bet.value || bet.value.isParlay) return '';
const raw = bet.value.pickLabel ?? '';
if (locale.value === 'zh-CN' || !raw) return raw;
const ci = raw.indexOf(': ');
if (ci < 0) return raw;
return raw.slice(0, ci + 2) + translateSel(raw.slice(ci + 2));
});
</script>
<template>
<div class="detail-page">
<!-- back bar -->
<div class="top-bar">
<button class="back-btn" @click="router.back()">‹ {{ t('history.back') }}</button>
</div>
<div v-if="loading" class="state">
<GoldSpinner :size="36" />
</div>
<div v-else-if="notFound || !bet" class="state">{{ t('history.not_found') }}</div>
<template v-else>
<!-- status hero -->
<div class="hero" :class="statusKey">
<span class="hero-status">{{ statusLabel }}</span>
<span class="hero-return">{{ returnAmount }}</span>
<span class="hero-return-label">
{{ statusKey === 'pending' ? t('history.est_return') : t('history.return') }}
</span>
</div>
<!-- match / parlay title -->
<section class="section">
<div class="section-head">
<span class="league-tag">
{{ bet.isParlay ? t('history.parlay_league') : (bet.leagueName || t('history.league_default')) }}
</span>
<span class="placed-time">{{ placedDateTime }}</span>
</div>
<div class="match-name">{{ matchTitle }}</div>
<!-- single bet: score comparison -->
<div v-if="!bet.isParlay" class="score-block">
<!-- my pick row -->
<div class="row-label-val">
<span class="row-label">{{ t('history.my_pick') }}</span>
<span class="row-val pick">{{ myPick }}</span>
</div>
<!-- scores -->
<div v-if="bet.matchScore?.ft || bet.matchScore?.ht" class="score-chips">
<div v-if="bet.matchScore.ft" class="score-item">
<span class="score-period">{{ t('history.ft') }}</span>
<span class="score-value">{{ bet.matchScore.ft }}</span>
</div>
<div v-if="bet.matchScore.ht" class="score-item">
<span class="score-period">{{ t('history.ht') }}</span>
<span class="score-value muted">{{ bet.matchScore.ht }}</span>
</div>
</div>
<div v-else-if="statusKey === 'pending'" class="no-score">{{ t('history.awaiting_result') }}</div>
</div>
</section>
<!-- parlay legs -->
<section v-if="bet.isParlay && bet.legs?.length" class="section">
<div class="section-title">{{ t('history.legs') }}</div>
<div class="legs-list">
<div v-for="(leg, i) in bet.legs" :key="i" class="leg-row" :class="legStatusKey(leg.resultStatus)">
<div class="leg-left">
<span class="leg-num" :class="legStatusKey(leg.resultStatus)">{{ i + 1 }}</span>
<div class="leg-body">
<span class="leg-match">{{ leg.matchTitle }}</span>
<span class="leg-pick-line">
{{ leg.marketLabel }}: {{ translateSel(leg.selectionName) }}
</span>
<div v-if="leg.score?.ft || leg.score?.ht" class="leg-scores">
<span v-if="leg.score.ft">{{ t('history.ft') }} {{ leg.score.ft }}</span>
<span v-if="leg.score.ht" class="muted-score">{{ t('history.ht') }} {{ leg.score.ht }}</span>
</div>
</div>
</div>
<div class="leg-right">
<span class="leg-odds-val">{{ formatOdds(leg.odds) }}</span>
<span v-if="leg.resultStatus" class="leg-result-badge" :class="legStatusKey(leg.resultStatus)">
{{ t(`history.status_${legStatusKey(leg.resultStatus)}`) }}
</span>
</div>
</div>
</div>
</section>
<!-- bet summary -->
<section class="section">
<div class="section-title">{{ t('history.summary') }}</div>
<div class="summary-rows">
<div class="sum-row">
<span>{{ t('history.stake') }}</span>
<span>{{ formatMoney(bet.stake, locale) }}</span>
</div>
<div v-if="bet.totalOdds" class="sum-row">
<span>{{ t('history.odds') }}</span>
<span class="odds-val">{{ formatOdds(bet.totalOdds) }}</span>
</div>
<div class="sum-row">
<span>{{ statusKey === 'pending' ? t('history.est_return') : t('history.return') }}</span>
<span :class="{ 'amt-won': statusKey === 'won', 'amt-pending': statusKey === 'pending', 'amt-lost': statusKey === 'lost' }">
{{ returnAmount }}
</span>
</div>
<div class="sum-row muted">
<span>{{ t('history.bet_no') }}</span>
<span class="bet-no-val">{{ bet.betNo }}</span>
</div>
</div>
</section>
</template>
</div>
</template>
<style scoped>
.detail-page {
padding-bottom: 32px;
}
.top-bar {
margin-bottom: 4px;
}
.back-btn {
background: none;
border: none;
color: var(--primary-light, #d4af37);
font-size: 15px;
font-weight: 700;
padding: 4px 0 8px;
cursor: pointer;
display: flex;
align-items: center;
gap: 2px;
}
.state {
text-align: center;
padding: 60px 20px;
color: #666;
font-size: 14px;
font-weight: 600;
}
/* ── hero ── */
.hero {
border-radius: 14px;
padding: 20px 20px 18px;
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
margin-bottom: 12px;
text-align: center;
}
.hero.won { background: linear-gradient(135deg, rgba(61,184,101,0.15), rgba(61,184,101,0.06)); border: 1px solid rgba(61,184,101,0.25); }
.hero.lost { background: linear-gradient(135deg, rgba(224,80,80,0.12), rgba(224,80,80,0.05)); border: 1px solid rgba(224,80,80,0.2); }
.hero.pending { background: linear-gradient(135deg, rgba(232,200,74,0.1), rgba(232,200,74,0.04)); border: 1px solid rgba(232,200,74,0.2); }
.hero.push { background: #181818; border: 1px solid #2a2a2a; }
.hero-status {
font-size: 11px;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
opacity: 0.7;
}
.hero.won .hero-status { color: #3db865; }
.hero.lost .hero-status { color: #e05050; }
.hero.pending .hero-status { color: #e8c84a; }
.hero.push .hero-status { color: #888; }
.hero-return {
font-size: 36px;
font-weight: 900;
letter-spacing: -0.01em;
line-height: 1.1;
}
.hero.won .hero-return { color: #3db865; text-shadow: 0 0 24px rgba(61,184,101,0.3); }
.hero.lost .hero-return { color: #e05050; }
.hero.pending .hero-return { color: #e8c84a; }
.hero.push .hero-return { color: #777; }
.hero-return-label {
font-size: 10.5px;
color: #555;
font-weight: 600;
letter-spacing: 0.04em;
}
/* ── sections ── */
.section {
background: #141414;
border: 1px solid #222;
border-radius: 12px;
padding: 14px 16px;
margin-bottom: 10px;
}
.section-head {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 6px;
}
.league-tag {
font-size: 11px;
color: #888;
font-weight: 700;
}
.placed-time {
font-size: 11px;
color: #555;
font-weight: 600;
}
.match-name {
font-size: 17px;
font-weight: 900;
color: #f0f0f0;
line-height: 1.3;
margin-bottom: 10px;
}
/* score block */
.score-block {
display: flex;
flex-direction: column;
gap: 8px;
}
.row-label-val {
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
}
.row-label {
font-size: 11px;
color: #666;
font-weight: 600;
}
.row-val {
font-size: 13px;
font-weight: 700;
color: #c8c8c8;
}
.row-val.pick {
color: #d4af37;
}
.score-chips {
display: flex;
gap: 8px;
}
.score-item {
display: flex;
align-items: center;
gap: 5px;
background: #1e1e1e;
border: 1px solid #2a2a2a;
border-radius: 7px;
padding: 5px 10px;
}
.score-period {
font-size: 10px;
color: #666;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.score-value {
font-size: 16px;
font-weight: 900;
color: #e8e8e8;
}
.score-value.muted {
color: #666;
font-size: 13px;
}
.no-score {
font-size: 11.5px;
color: #555;
font-style: italic;
}
/* section title */
.section-title {
font-size: 10.5px;
color: #555;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
margin-bottom: 10px;
}
/* parlay legs */
.legs-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.leg-row {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 10px;
background: #1a1a1a;
border: 1px solid #252525;
border-radius: 9px;
padding: 10px 12px;
}
.leg-row.won { border-color: rgba(61,184,101,0.2); }
.leg-row.lost { border-color: rgba(224,80,80,0.18); }
.leg-left {
display: flex;
align-items: flex-start;
gap: 8px;
flex: 1;
min-width: 0;
}
.leg-num {
flex-shrink: 0;
width: 20px;
height: 20px;
border-radius: 50%;
background: #2a2a2a;
color: #666;
font-size: 10px;
font-weight: 800;
display: flex;
align-items: center;
justify-content: center;
margin-top: 1px;
}
.leg-num.won { background: rgba(61,184,101,0.18); color: #3db865; }
.leg-num.lost { background: rgba(224,80,80,0.18); color: #e05050; }
.leg-body {
display: flex;
flex-direction: column;
gap: 3px;
min-width: 0;
}
.leg-match {
font-size: 12.5px;
font-weight: 800;
color: #d0d0d0;
}
.leg-pick-line {
font-size: 11.5px;
color: #888;
font-weight: 600;
}
.leg-scores {
display: flex;
gap: 8px;
margin-top: 2px;
}
.leg-scores span {
font-size: 11px;
font-weight: 700;
color: #c8c8c8;
}
.leg-scores .muted-score {
color: #555;
}
.leg-right {
flex-shrink: 0;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 4px;
}
.leg-odds-val {
font-size: 15px;
font-weight: 900;
color: #b8a04a;
}
.leg-result-badge {
font-size: 9px;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 2px 6px;
border-radius: 10px;
}
.leg-result-badge.won { color: #3db865; background: rgba(61,184,101,0.12); }
.leg-result-badge.lost { color: #e05050; background: rgba(224,80,80,0.1); }
.leg-result-badge.push { color: #888; background: #222; }
.leg-result-badge.pending { color: #666; background: #1e1e1e; }
/* summary */
.summary-rows {
display: flex;
flex-direction: column;
gap: 0;
}
.sum-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 0;
border-bottom: 1px solid #1c1c1c;
font-size: 13px;
color: #b0b0b0;
font-weight: 600;
}
.sum-row:last-child {
border-bottom: none;
}
.sum-row.muted {
color: #444;
font-size: 11px;
}
.odds-val {
color: #b8a04a;
font-weight: 800;
}
.amt-won {
color: #3db865;
font-weight: 900;
font-size: 15px;
}
.amt-pending {
color: #e8c84a;
font-weight: 900;
}
.amt-lost {
color: #e05050;
font-weight: 900;
font-size: 15px;
}
.bet-no-val {
font-family: monospace;
letter-spacing: 0.04em;
}
</style>

39
apps/player/src/views/FootballView.vue
View File

@@ -9,6 +9,8 @@ import OutrightPanel from '../components/outright/OutrightPanel.vue';
import ParlayPanel from '../components/parlay/ParlayPanel.vue';
import emptyMatchesImg from '../assets/images/empty-matches.svg';
import { useOnLocaleChange } from '../composables/useOnLocaleChange';
import GoldSpinner from '../components/GoldSpinner.vue';
import { usePullToRefresh } from '../composables/usePullToRefresh';
type MainTab = 'matches' | 'outright' | 'parlay';
type TimeTab = 'today' | 'early';
@@ -58,6 +60,15 @@ async function loadMatches() {
useOnLocaleChange(loadMatches);
const { pullDistance, refreshing, spinning, progress } = usePullToRefresh({
onRefresh: async () => { await loadMatches(); },
});
const pullIndicatorStyle = () => ({
height: `${pullDistance.value}px`,
opacity: Math.min(pullDistance.value / 48, 1),
});
function dayStart(d: Date) {
const x = new Date(d);
x.setHours(0, 0, 0, 0);
@@ -140,6 +151,13 @@ function goMatch(id: string) {
<template>
<div class="bet-page">
<div
class="pull-indicator"
:style="pullIndicatorStyle()"
>
<GoldSpinner v-if="spinning" :size="28" :progress="progress" :active="spinning" />
</div>
<div class="main-tabs">
<button
type="button"
@@ -171,7 +189,7 @@ function goMatch(id: string) {
</button>
</div>
<template v-if="mainTab === 'matches'">
<div v-show="mainTab === 'matches'">
<div class="time-tabs">
<button
type="button"
@@ -191,8 +209,9 @@ function goMatch(id: string) {
</button>
</div>
<div v-if="loading" class="state">{{ t('bet.loading') }}</div>
<div v-if="loading" class="state">
<GoldSpinner :size="36" />
</div>
<div v-else-if="leagueGroups.length" class="league-list">
<LeagueAccordionItem
v-for="group in leagueGroups"
@@ -211,17 +230,25 @@ function goMatch(id: string) {
<img :src="emptyMatchesImg" alt="" class="empty-icon" />
<p>{{ t('bet.no_matches') }}</p>
</div>
</template>
</div>
<div v-else-if="mainTab === 'outright'" class="outright-tab">
<div v-show="mainTab === 'outright'" class="outright-tab">
<OutrightPanel />
</div>
<ParlayPanel v-else-if="mainTab === 'parlay'" />
<ParlayPanel v-show="mainTab === 'parlay'" />
</div>
</template>
<style scoped>
.pull-indicator {
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
transition: height 0.15s ease;
}
.bet-page {
margin: 0 -16px;
padding-bottom: 8px;

28
apps/player/src/views/HomeView.vue
View File

@@ -7,11 +7,22 @@ import cardBg from '../assets/images/卡片.png';
import BannerCarousel from '../components/BannerCarousel.vue';
import { usePlayerHome } from '../composables/usePlayerHome';
import TeamEmblem from '../components/TeamEmblem.vue';
import GoldSpinner from '../components/GoldSpinner.vue';
import { usePullToRefresh } from '../composables/usePullToRefresh';
const matchCardBg = `url(${cardBg})`;
const { t, locale } = useI18n();
const router = useRouter();
const { banners, hotMatches, loading } = usePlayerHome();
const { banners, hotMatches, loading, load } = usePlayerHome();
const { pullDistance, refreshing, spinning, progress } = usePullToRefresh({
onRefresh: async () => { await load(); },
});
const pullIndicatorStyle = () => ({
height: `${pullDistance.value}px`,
opacity: Math.min(pullDistance.value / 48, 1),
});
function goMatch(id: string) {
router.push(`/match/${id}`);
@@ -32,6 +43,13 @@ function formatKickoff(startTime: string) {
<template>
<div>
<div
class="pull-indicator"
:style="pullIndicatorStyle()"
>
<GoldSpinner v-if="spinning" :size="28" :progress="progress" :active="spinning" />
</div>
<BannerCarousel :banners="banners" />
<h2 class="section-title">{{ t('home.hot_matches') }}</h2>
@@ -94,6 +112,14 @@ function formatKickoff(startTime: string) {
</template>
<style scoped>
.pull-indicator {
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
transition: height 0.15s ease;
}
.match-card {
position: relative;
isolation: isolate;

54
apps/player/src/views/MatchDetailView.vue
View File

@@ -16,6 +16,8 @@ import CorrectScoreConfirmModal, {
import { isCorrectScoreMarket, parseScoreCode } from '../utils/correctScoreLayout';
import { useOnLocaleChange } from '../composables/useOnLocaleChange';
import vsImg from '../assets/images/vs.png';
import GoldSpinner from '../components/GoldSpinner.vue';
import BetSuccessOverlay from '../components/BetSuccessOverlay.vue';
import cardBg from '../assets/images/卡片.png';
const heroCardBg = `url(${cardBg})`;
@@ -65,6 +67,7 @@ const expandedKey = ref<string | null>(null);
const correctScoreStakes = ref<Record<string, number>>({});
const placingCs = ref(false);
const csMessage = ref('');
const showCsSuccess = ref(false);
const csConfirmOpen = ref(false);
const csConfirmMarketType = ref<string | null>(null);
const marketsByType = computed(() => {
@@ -188,6 +191,7 @@ async function placeCorrectScoreBets(marketType: string) {
const next = { ...correctScoreStakes.value };
for (const sel of entries) delete next[sel.id];
correctScoreStakes.value = next;
showCsSuccess.value = true;
} catch (e: unknown) {
csMessage.value =
(e as { response?: { data?: { error?: string } } })?.response?.data?.error ||
@@ -270,11 +274,11 @@ function hasSlipPickForMarket(marketType: string) {
</div>
</header>
<div v-if="loading" class="state">{{ t('bet.loading') }}</div>
<div v-if="loading" class="state">
<GoldSpinner :size="36" />
</div>
<template v-else-if="match">
<section class="match-hero">
<p class="kickoff">{{ kickoff }}</p>
<div class="hero-teams">
<!-- home -->
<div class="hero-team">
@@ -325,6 +329,8 @@ function hasSlipPickForMarket(marketType: string) {
<span class="hero-name">{{ match.awayTeamName }}</span>
</div>
</div>
<p class="kickoff">{{ t('bet.kickoff_time') }}{{ kickoff }}</p>
</section>
<section class="markets-section">
@@ -391,6 +397,8 @@ function hasSlipPickForMarket(marketType: string) {
</section>
</template>
</div>
<BetSuccessOverlay :show="showCsSuccess" @done="showCsSuccess = false" />
</template>
<style scoped>
@@ -405,6 +413,12 @@ function hasSlipPickForMarket(marketType: string) {
justify-content: space-between;
padding: 4px 12px 8px;
gap: 8px;
position: sticky;
top: -12px;
z-index: 50;
margin-top: -12px;
background: rgba(0, 0, 0, 0.55);
backdrop-filter: blur(4px);
}
.toolbar-title {
@@ -467,8 +481,9 @@ function hasSlipPickForMarket(marketType: string) {
z-index: 1;
font-size: 11px;
color: var(--text-muted);
text-align: center;
margin-bottom: 14px;
text-align: left;
margin-top: 10px;
padding-left: 2px;
}
.hero-teams {
@@ -615,13 +630,32 @@ function hasSlipPickForMarket(marketType: string) {
}
.market-list {
border-radius: 6px;
overflow: hidden;
background: #111;
display: flex;
flex-direction: column;
gap: 6px;
padding: 4px 0;
}
.market-group + .market-group {
border-top: 1px solid #252525;
.market-group {
border-radius: 8px;
border: 1px solid #252525;
background: linear-gradient(180deg, #1a1a1a 0%, #151515 100%);
overflow: hidden;
box-shadow: 0 2px 10px rgba(0,0,0,0.35);
transition: border-color 0.2s, box-shadow 0.2s;
}
.market-group.open {
border-color: rgba(212, 175, 55, 0.25);
box-shadow: 0 4px 16px rgba(212, 175, 55, 0.08);
}
.market-group :deep(.row) {
border-radius: 8px;
}
.market-group.open :deep(.row) {
border-radius: 0;
}
.market-foot-btn {

144
apps/player/src/views/MyBetsView.vue
View File

@@ -3,7 +3,10 @@ import { ref, onMounted, onUnmounted } from 'vue';
import { useI18n } from 'vue-i18n';
import api from '../api';
import BetHistoryCard, { type BetHistoryItem } from '../components/BetHistoryCard.vue';
import BetStatsPanel from '../components/BetStatsPanel.vue';
import GoldSpinner from '../components/GoldSpinner.vue';
import { useOnLocaleChange } from '../composables/useOnLocaleChange';
import { usePullToRefresh } from '../composables/usePullToRefresh';
const { t } = useI18n();
@@ -13,15 +16,26 @@ const page = ref(1);
const loading = ref(false);
const initialLoading = ref(true);
const hasMore = ref(true);
const statusFilter = ref('');
const sentinel = ref<HTMLElement | null>(null);
let observer: IntersectionObserver | null = null;
const FILTERS = [
{ key: '', label: 'history.filter_all' },
{ key: 'WON', label: 'history.filter_won' },
{ key: 'LOST', label: 'history.filter_lost' },
{ key: 'PENDING', label: 'history.filter_pending' },
{ key: 'PUSH', label: 'history.filter_push' },
];
async function loadPage(p: number) {
if (loading.value) return;
loading.value = true;
try {
const { data } = await api.get('/player/bets', { params: { page: p } });
const params: Record<string, unknown> = { page: p };
if (statusFilter.value) params.status = statusFilter.value;
const { data } = await api.get('/player/bets', { params });
const result = data.data ?? { items: [], total: 0, pageSize: 20 };
total.value = result.total ?? 0;
const pageSize = result.pageSize ?? 20;
@@ -38,7 +52,7 @@ async function loadPage(p: number) {
}
}
function reset() {
async function reset() {
items.value = [];
total.value = 0;
page.value = 1;
@@ -47,8 +61,18 @@ function reset() {
loadPage(1);
}
function changeFilter(key: string) {
if (statusFilter.value === key) return;
statusFilter.value = key;
reset();
}
useOnLocaleChange(reset);
const { pullDistance, refreshing, spinning, progress } = usePullToRefresh({
onRefresh: async () => { await loadPage(1); },
});
onMounted(() => {
observer = new IntersectionObserver(
(entries) => {
@@ -56,7 +80,7 @@ onMounted(() => {
loadPage(page.value + 1);
}
},
{ rootMargin: '120px' },
{ rootMargin: '200px' },
);
if (sentinel.value) observer.observe(sentinel.value);
});
@@ -64,28 +88,59 @@ onMounted(() => {
onUnmounted(() => {
observer?.disconnect();
});
const pullIndicatorStyle = () => ({
height: `${pullDistance.value}px`,
opacity: Math.min(pullDistance.value / 48, 1),
});
</script>
<template>
<div class="history-page">
<div
class="pull-indicator"
:style="pullIndicatorStyle()"
>
<GoldSpinner v-if="spinning" :size="28" :progress="progress" :active="spinning" />
</div>
<div v-if="initialLoading" class="state">{{ t('bet.loading') }}</div>
<div v-if="initialLoading" class="state">
<GoldSpinner :size="36" />
<span class="loading-text">{{ t('bet.loading') }}</span>
</div>
<template v-else-if="items.length">
<BetHistoryCard v-for="bet in items" :key="bet.betNo" :bet="bet" />
<template v-else>
<BetStatsPanel :items="items" />
<div ref="sentinel" class="sentinel" />
<div v-if="loading" class="load-more-spinner">
<span class="spinner" />
<div class="filter-tabs">
<button
v-for="f in FILTERS"
:key="f.key"
type="button"
class="filter-tab"
:class="{ active: statusFilter === f.key }"
@click="changeFilter(f.key)"
>
{{ t(f.label) }}
</button>
</div>
<div v-else-if="!hasMore && items.length > 0" class="end-hint">
{{ t('history.no_more') }}
</div>
<template v-if="items.length">
<BetHistoryCard v-for="bet in items" :key="bet.betNo" :bet="bet" />
<div ref="sentinel" class="sentinel" />
<div v-if="loading" 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 v-else class="state">{{ t('history.empty') }}</div>
</template>
<div v-else class="state">{{ t('history.empty') }}</div>
</div>
</template>
@@ -94,7 +149,48 @@ onUnmounted(() => {
padding-bottom: 24px;
}
.pull-indicator {
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
transition: height 0.15s ease;
}
.filter-tabs {
display: flex;
gap: 6px;
margin-bottom: 12px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.filter-tabs::-webkit-scrollbar { display: none; }
.filter-tab {
flex-shrink: 0;
padding: 7px 14px;
border-radius: 999px;
font-size: 12px;
font-weight: 700;
color: var(--text-muted);
background: #141414;
border: 1px solid #2a2a2a;
transition: all 0.2s;
}
.filter-tab.active {
color: var(--primary-light);
background: rgba(212, 175, 55, 0.1);
border-color: var(--border-gold-soft);
}
.state {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
text-align: center;
color: var(--text-muted);
padding: 56px 20px;
@@ -102,6 +198,10 @@ onUnmounted(() => {
font-size: 14px;
}
.loading-text {
font-size: 13px;
}
.sentinel {
height: 1px;
}
@@ -112,20 +212,6 @@ onUnmounted(() => {
padding: 20px 0 8px;
}
.spinner {
display: inline-block;
width: 22px;
height: 22px;
border: 3px solid #2a2a2a;
border-top-color: var(--primary-light);
border-radius: 50%;
animation: spin 0.7s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
.end-hint {
text-align: center;
font-size: 12px;

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

@@ -7,6 +7,8 @@ import { formatMoney } from '../utils/localeDisplay';
import LocaleFlag from '../components/LocaleFlag.vue';
import { useAuthStore } from '../stores/auth';
import { useAppLocale } from '../composables/useAppLocale';
import GoldSpinner from '../components/GoldSpinner.vue';
import { usePullToRefresh } from '../composables/usePullToRefresh';
import walletBg from '../assets/images/钱包.png';
const { t, locale } = useI18n();
@@ -54,11 +56,22 @@ const displayedBalance = computed(() =>
: formatMoney(profile.value?.wallet?.availableBalance, locale.value),
);
onMounted(async () => {
async function fetchProfile() {
const { data } = await api.get('/player/profile');
profile.value = data.data;
initFromUser(data.data?.locale);
runCountUp(amountValue(data.data?.wallet?.availableBalance));
}
onMounted(fetchProfile);
const { pullDistance, refreshing, spinning, progress } = usePullToRefresh({
onRefresh: async () => { await fetchProfile(); },
});
const pullIndicatorStyle = () => ({
height: `${pullDistance.value}px`,
opacity: Math.min(pullDistance.value / 48, 1),
});
async function changeLocale(code: string) {
@@ -73,6 +86,13 @@ function logout() {
<template>
<div class="profile-page">
<div
class="pull-indicator"
:style="pullIndicatorStyle()"
>
<GoldSpinner v-if="spinning" :size="28" :progress="progress" :active="spinning" />
</div>
<div class="wallet-banner">
<img class="wallet-banner-img" :src="walletBg" alt="" />
<img src="/logo.png" alt="TheBet365" class="wallet-card-logo" />
@@ -149,6 +169,14 @@ function logout() {
</template>
<style scoped>
.pull-indicator {
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
transition: height 0.15s ease;
}
.profile-page {
padding: 8px 0 12px;
}

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

@@ -1,13 +1,31 @@
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { ref, onMounted, onUnmounted } from 'vue';
import { useI18n } from 'vue-i18n';
import api from '../api';
import { formatMoney } from '../utils/localeDisplay';
import GoldSpinner from '../components/GoldSpinner.vue';
import WalletStatsPanel from '../components/WalletStatsPanel.vue';
import { usePullToRefresh } from '../composables/usePullToRefresh';
const { t, locale } = useI18n();
const transactions = ref<
Array<{ transactionType: string; amount: string; createdAt: string; transactionId?: string }>
>([]);
type Transaction = {
transactionType: string;
amount: string;
createdAt: string;
transactionId?: string;
};
const items = ref<Transaction[]>([]);
const total = ref(0);
const page = ref(1);
const loading = ref(false);
const initialLoading = ref(true);
const hasMore = ref(true);
const typeFilter = ref('');
const sentinel = ref<HTMLElement | null>(null);
let observer: IntersectionObserver | null = null;
const TX_KEY_MAP: Record<string, string> = {
MANUAL_DEPOSIT: 'wallet.tx_deposit',
@@ -29,6 +47,13 @@ const TX_KEY_MAP: Record<string, string> = {
WITHDRAW: 'wallet.tx_withdraw',
};
const FILTERS = [
{ key: '', label: 'wallet.filter_all' },
{ key: 'deposit', label: 'wallet.filter_deposit' },
{ key: 'withdraw', label: 'wallet.filter_withdraw' },
{ key: 'bet', label: 'wallet.filter_bet' },
];
function txLabel(type: string): string {
const key = TX_KEY_MAP[type.toUpperCase()];
if (key) {
@@ -38,46 +63,252 @@ function txLabel(type: string): string {
return type;
}
onMounted(async () => {
const { data } = await api.get('/player/wallet/transactions');
transactions.value = data.data.items ?? [];
function isDepositType(type: string): boolean {
const t = type.toUpperCase();
return t.includes('DEPOSIT') || t === 'CASHBACK_DEPOSIT';
}
function isWithdrawType(type: string): boolean {
const t = type.toUpperCase();
return t.includes('WITHDRAW');
}
function isBetType(type: string): boolean {
const t = type.toUpperCase();
return t.startsWith('BET_');
}
function matchesFilter(tx: Transaction): boolean {
if (!typeFilter.value) return true;
if (typeFilter.value === 'deposit') return isDepositType(tx.transactionType) || tx.transactionType === 'MANUAL_ADJUST';
if (typeFilter.value === 'withdraw') return isWithdrawType(tx.transactionType);
if (typeFilter.value === 'bet') return isBetType(tx.transactionType);
return true;
}
async function loadPage(p: number) {
if (loading.value) return;
loading.value = true;
try {
const { data } = await api.get('/player/wallet/transactions', { params: { page: p } });
const result = data.data ?? { items: [], total: 0, pageSize: 20 };
total.value = result.total ?? 0;
const pageSize = result.pageSize ?? 20;
const newItems = (result.items ?? []).filter(matchesFilter);
if (p === 1) {
items.value = newItems;
} else {
items.value = [...items.value, ...newItems];
}
hasMore.value = (result.items?.length ?? 0) >= pageSize;
page.value = p;
} finally {
loading.value = false;
initialLoading.value = false;
}
}
async function reset() {
items.value = [];
total.value = 0;
page.value = 1;
hasMore.value = true;
initialLoading.value = true;
loadPage(1);
}
function changeFilter(key: string) {
if (typeFilter.value === key) return;
typeFilter.value = key;
reset();
}
const { pullDistance, refreshing, spinning, progress } = usePullToRefresh({
onRefresh: async () => { await loadPage(1); },
});
onMounted(() => {
loadPage(1);
observer = new IntersectionObserver(
(entries) => {
if (entries[0].isIntersecting && hasMore.value && !loading.value) {
loadPage(page.value + 1);
}
},
{ rootMargin: '200px' },
);
if (sentinel.value) observer.observe(sentinel.value);
});
onUnmounted(() => {
observer?.disconnect();
});
const pullIndicatorStyle = () => ({
height: `${pullDistance.value}px`,
opacity: Math.min(pullDistance.value / 48, 1),
});
</script>
<template>
<div>
<div v-if="transactions.length" class="card">
<div
v-for="tx in transactions"
:key="tx.transactionId ?? tx.createdAt"
class="tx-row"
>
<span class="tx-type">{{ txLabel(tx.transactionType) }}</span>
<span :class="parseFloat(tx.amount) >= 0 ? 'pos' : 'neg'">
{{ formatMoney(tx.amount, locale) }}
</span>
<span class="tx-time">{{ new Date(tx.createdAt).toLocaleString() }}</span>
</div>
<div class="wallet-page">
<div
class="pull-indicator"
:style="pullIndicatorStyle()"
>
<GoldSpinner v-if="spinning" :size="28" :progress="progress" :active="spinning" />
</div>
<div v-else class="empty">{{ t('wallet.no_records') }}</div>
<div v-if="initialLoading" class="state">
<GoldSpinner :size="36" />
<span class="loading-text">{{ t('bet.loading') }}</span>
</div>
<template v-else>
<WalletStatsPanel :items="items" />
<div class="filter-tabs">
<button
v-for="f in FILTERS"
:key="f.key"
type="button"
class="filter-tab"
:class="{ active: typeFilter === f.key }"
@click="changeFilter(f.key)"
>
{{ t(f.label) }}
</button>
</div>
<div v-if="items.length" class="tx-list">
<div
v-for="tx in items"
:key="tx.transactionId ?? tx.createdAt + Math.random()"
class="tx-row"
>
<span class="tx-type">{{ txLabel(tx.transactionType) }}</span>
<span :class="parseFloat(tx.amount) >= 0 ? 'pos' : 'neg'">
{{ formatMoney(tx.amount, locale) }}
</span>
<span class="tx-time">{{ new Date(tx.createdAt).toLocaleString() }}</span>
</div>
</div>
<div ref="sentinel" class="sentinel" />
<div v-if="loading" 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-if="!items.length && !initialLoading" class="empty">
{{ t('wallet.no_records') }}
</div>
</template>
</div>
</template>
<style scoped>
.wallet-page {
padding-bottom: 24px;
}
.pull-indicator {
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
transition: height 0.15s ease;
}
.filter-tabs {
display: flex;
gap: 6px;
margin-bottom: 12px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.filter-tabs::-webkit-scrollbar { display: none; }
.filter-tab {
flex-shrink: 0;
padding: 7px 14px;
border-radius: 999px;
font-size: 12px;
font-weight: 700;
color: var(--text-muted);
background: #141414;
border: 1px solid #2a2a2a;
transition: all 0.2s;
}
.filter-tab.active {
color: var(--primary-light);
background: rgba(212, 175, 55, 0.1);
border-color: var(--border-gold-soft);
}
.state {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
text-align: center;
color: var(--text-muted);
padding: 56px 20px;
font-weight: 600;
font-size: 14px;
}
.loading-text {
font-size: 13px;
}
.tx-list {
margin-bottom: 0;
}
.tx-row {
display: flex;
justify-content: space-between;
font-size: 14px;
padding: 12px 0;
padding: 12px 16px;
border-bottom: 1px solid var(--border);
flex-wrap: wrap;
}
.tx-row:last-child {
border-bottom: none;
}
.tx-type { font-weight: 700; color: var(--text); }
.pos { color: var(--primary-light); font-weight: 800; font-size: 15px; }
.neg { color: var(--danger); font-weight: 700; }
.tx-time { width: 100%; font-size: 11px; color: var(--text-muted); margin-top: 4px; }
.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;
}
.empty { text-align: center; color: var(--text-muted); padding: 40px 16px; font-weight: 600; }
</style>