feat(admin,api,player): settlement stats, team crests, MS fields and list bet summary
This commit is contained in:
@@ -56,7 +56,13 @@ const matchTitle = computed(() => {
|
||||
|
||||
const pickLabel = computed(() => {
|
||||
if (props.bet.isParlay) return '';
|
||||
return props.bet.pickLabel;
|
||||
// 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 returnLabel = computed(() =>
|
||||
@@ -71,10 +77,44 @@ const returnAmount = computed(() => {
|
||||
});
|
||||
|
||||
const returnHighlight = computed(() => statusKey.value === 'won');
|
||||
|
||||
// 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;
|
||||
}
|
||||
|
||||
// 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>
|
||||
@@ -87,26 +127,33 @@ const returnHighlight = computed(() => statusKey.value === 'won');
|
||||
<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>
|
||||
|
||||
<div v-if="bet.isParlay && bet.legs?.length" class="parlay-legs">
|
||||
<!-- 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-match">{{ leg.matchTitle }}</span>
|
||||
<span class="leg-pick">{{ leg.marketLabel }}: {{ leg.selectionName }}</span>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<div class="divider" />
|
||||
|
||||
<!-- footer -->
|
||||
<footer class="card-foot">
|
||||
<div class="money-col">
|
||||
<span class="money-label">{{ t('history.stake') }}</span>
|
||||
<span class="money-value">{{ formatMoney(bet.stake, locale) }}</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" :class="{ highlight: returnHighlight }">{{ returnAmount }}</span>
|
||||
<span
|
||||
class="money-value return"
|
||||
:class="{ highlight: returnHighlight, pending: statusKey === 'pending' }"
|
||||
>{{ returnAmount }}</span>
|
||||
</div>
|
||||
</footer>
|
||||
</article>
|
||||
@@ -115,136 +162,175 @@ const returnHighlight = computed(() => statusKey.value === 'won');
|
||||
<style scoped>
|
||||
.bet-card {
|
||||
background: #141414;
|
||||
border: 1px solid #2a2a2a;
|
||||
border-radius: 10px;
|
||||
padding: 14px 14px 12px;
|
||||
margin-bottom: 12px;
|
||||
border: 1px solid #252525;
|
||||
border-radius: 12px;
|
||||
padding: 0;
|
||||
margin-bottom: 10px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.card-head {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
margin-bottom: 12px;
|
||||
gap: 8px;
|
||||
padding: 10px 14px 8px 16px;
|
||||
background: #181818;
|
||||
border-bottom: 1px solid #222;
|
||||
}
|
||||
|
||||
.meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
font-size: 12px;
|
||||
color: var(--text-muted);
|
||||
gap: 5px;
|
||||
font-size: 11.5px;
|
||||
color: #888;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.sport-icon {
|
||||
font-size: 14px;
|
||||
font-size: 13px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.league {
|
||||
color: #9a9a9a;
|
||||
}
|
||||
.dot { opacity: 0.4; }
|
||||
|
||||
.dot {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.date {
|
||||
color: #7a7a7a;
|
||||
}
|
||||
.date { color: #666; }
|
||||
|
||||
.status-badge {
|
||||
flex-shrink: 0;
|
||||
padding: 4px 10px;
|
||||
border-radius: 4px;
|
||||
font-size: 11px;
|
||||
padding: 3px 10px;
|
||||
border-radius: 20px;
|
||||
font-size: 10.5px;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.03em;
|
||||
letter-spacing: 0.07em;
|
||||
white-space: nowrap;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.status-badge.won {
|
||||
color: var(--primary-light);
|
||||
background: rgba(46, 125, 50, 0.35);
|
||||
border: 1px solid rgba(212, 175, 55, 0.25);
|
||||
color: #3db865;
|
||||
background: rgba(61, 184, 101, 0.12);
|
||||
border: 1px solid rgba(61, 184, 101, 0.3);
|
||||
}
|
||||
|
||||
.status-badge.pending {
|
||||
color: #9a9a9a;
|
||||
background: #1f1f1f;
|
||||
border: 1px solid #333;
|
||||
color: #e8c84a;
|
||||
background: rgba(232, 200, 74, 0.1);
|
||||
border: 1px solid rgba(232, 200, 74, 0.3);
|
||||
}
|
||||
|
||||
.status-badge.lost {
|
||||
color: #ff6b6b;
|
||||
background: rgba(198, 40, 40, 0.2);
|
||||
border: 1px solid rgba(198, 40, 40, 0.35);
|
||||
color: #e05050;
|
||||
background: rgba(224, 80, 80, 0.1);
|
||||
border: 1px solid rgba(224, 80, 80, 0.28);
|
||||
}
|
||||
|
||||
.status-badge.push {
|
||||
color: #aaa;
|
||||
background: #1f1f1f;
|
||||
color: #888;
|
||||
background: #1e1e1e;
|
||||
border: 1px solid #333;
|
||||
}
|
||||
|
||||
/* body */
|
||||
.match-title {
|
||||
font-size: 17px;
|
||||
font-weight: 800;
|
||||
color: var(--text);
|
||||
font-size: 16px;
|
||||
font-weight: 900;
|
||||
color: #f0f0f0;
|
||||
line-height: 1.3;
|
||||
margin-bottom: 6px;
|
||||
padding: 10px 14px 4px 16px;
|
||||
letter-spacing: 0.01em;
|
||||
}
|
||||
|
||||
.pick-line {
|
||||
font-size: 13px;
|
||||
color: #9a9a9a;
|
||||
font-size: 12.5px;
|
||||
color: #888;
|
||||
font-weight: 600;
|
||||
line-height: 1.4;
|
||||
margin-bottom: 4px;
|
||||
padding: 0 14px 8px 16px;
|
||||
}
|
||||
|
||||
/* ── parlay legs ── */
|
||||
.parlay-legs {
|
||||
margin-top: 8px;
|
||||
padding: 4px 14px 8px 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
/* grid mode: 2-column when 3+ legs */
|
||||
.parlay-legs.grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 5px 8px;
|
||||
}
|
||||
|
||||
.leg {
|
||||
font-size: 12px;
|
||||
color: var(--text-muted);
|
||||
line-height: 1.35;
|
||||
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;
|
||||
font-weight: 800;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 1px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.leg-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.leg-match {
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
color: #b0b0b0;
|
||||
color: #c0c0c0;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.leg-pick {
|
||||
display: block;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.divider {
|
||||
height: 1px;
|
||||
background: #2a2a2a;
|
||||
margin: 12px 0 10px;
|
||||
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: 4px;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.money-col.align-right {
|
||||
@@ -253,18 +339,34 @@ const returnHighlight = computed(() => statusKey.value === 'won');
|
||||
}
|
||||
|
||||
.money-label {
|
||||
font-size: 11px;
|
||||
color: #7a7a7a;
|
||||
font-size: 10px;
|
||||
color: #666;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
.money-value {
|
||||
font-size: 16px;
|
||||
font-weight: 800;
|
||||
color: var(--text);
|
||||
font-size: 19px;
|
||||
font-weight: 900;
|
||||
letter-spacing: 0.01em;
|
||||
}
|
||||
|
||||
.money-value.stake {
|
||||
color: #c8c8c8;
|
||||
}
|
||||
|
||||
.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: var(--primary-light);
|
||||
color: #3db865;
|
||||
text-shadow: 0 0 14px rgba(61, 184, 101, 0.35);
|
||||
font-size: 21px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -8,8 +8,6 @@ const { locale, t } = useI18n();
|
||||
const open = ref(false);
|
||||
const wallet = ref<{ availableBalance?: unknown; frozenBalance?: unknown; currency?: string } | null>(null);
|
||||
|
||||
const available = computed(() => formatMoney(wallet.value?.availableBalance, locale.value));
|
||||
const frozen = computed(() => formatMoney(wallet.value?.frozenBalance, locale.value));
|
||||
function amountValue(value: unknown): number {
|
||||
if (value == null) return 0;
|
||||
if (typeof value === 'number') return Number.isFinite(value) ? value : 0;
|
||||
@@ -24,6 +22,9 @@ function amountValue(value: unknown): number {
|
||||
return 0;
|
||||
}
|
||||
|
||||
const available = computed(() => formatMoney(wallet.value?.availableBalance, locale.value));
|
||||
const frozen = computed(() => formatMoney(wallet.value?.frozenBalance, locale.value));
|
||||
|
||||
const total = computed(() =>
|
||||
formatMoney(
|
||||
amountValue(wallet.value?.availableBalance) + amountValue(wallet.value?.frozenBalance),
|
||||
@@ -119,7 +120,6 @@ function close() {
|
||||
font-size: 11px;
|
||||
font-weight: 800;
|
||||
color: var(--primary-light);
|
||||
text-shadow: none;
|
||||
white-space: nowrap;
|
||||
line-height: 1.15;
|
||||
}
|
||||
|
||||
@@ -31,6 +31,7 @@ const i18n = createI18n({
|
||||
parlay_title: '串关 · {n} 场',
|
||||
parlay_league: '串关 Parlay',
|
||||
empty: '暂无投注记录',
|
||||
no_more: '没有更多记录了',
|
||||
status_won: 'WON 赢',
|
||||
status_pending: 'PENDING 待定',
|
||||
status_lost: 'LOST 输',
|
||||
@@ -52,6 +53,18 @@ const i18n = createI18n({
|
||||
unsettled: '未结算',
|
||||
available: '可用',
|
||||
no_records: '暂无账单记录',
|
||||
tx_deposit: '人工存款',
|
||||
tx_withdraw: '人工提款',
|
||||
tx_adjust: '人工调整',
|
||||
tx_bet_freeze: '投注冻结',
|
||||
tx_bet_deduct: '投注扣款',
|
||||
tx_bet_win: '投注派彩',
|
||||
tx_bet_lose: '投注结算',
|
||||
tx_bet_push: '投注退水',
|
||||
tx_bet_refund: '投注退款',
|
||||
tx_bet_void: '投注撤销',
|
||||
tx_cashback: '返水',
|
||||
tx_resettle: '重新结算',
|
||||
},
|
||||
bet: {
|
||||
bet_slip: '投注单',
|
||||
@@ -243,6 +256,7 @@ const i18n = createI18n({
|
||||
parlay_title: 'Parlay · {n} legs',
|
||||
parlay_league: 'Parlay 串关',
|
||||
empty: 'No bets yet',
|
||||
no_more: 'No more bets',
|
||||
status_won: 'WON 赢',
|
||||
status_pending: 'PENDING 待定',
|
||||
status_lost: 'LOST 输',
|
||||
@@ -264,6 +278,18 @@ const i18n = createI18n({
|
||||
unsettled: 'Unsettled',
|
||||
available: 'Available',
|
||||
no_records: 'No records',
|
||||
tx_deposit: 'Deposit',
|
||||
tx_withdraw: 'Withdrawal',
|
||||
tx_adjust: 'Manual Adjust',
|
||||
tx_bet_freeze: 'Bet Frozen',
|
||||
tx_bet_deduct: 'Bet Deducted',
|
||||
tx_bet_win: 'Bet Payout',
|
||||
tx_bet_lose: 'Bet Settled',
|
||||
tx_bet_push: 'Bet Push',
|
||||
tx_bet_refund: 'Bet Refund',
|
||||
tx_bet_void: 'Bet Voided',
|
||||
tx_cashback: 'Cashback',
|
||||
tx_resettle: 'Resettlement',
|
||||
},
|
||||
bet: {
|
||||
bet_slip: 'Bet Slip',
|
||||
@@ -461,6 +487,7 @@ const i18n = createI18n({
|
||||
parlay_title: 'Berganda · {n} perlawanan',
|
||||
parlay_league: 'Berganda',
|
||||
empty: 'Tiada rekod pertaruhan',
|
||||
no_more: 'Tiada lagi rekod',
|
||||
status_won: 'MENANG',
|
||||
status_pending: 'MENUNGGU',
|
||||
status_lost: 'KALAH',
|
||||
@@ -482,6 +509,18 @@ const i18n = createI18n({
|
||||
unsettled: 'Belum Selesai',
|
||||
available: 'Tersedia',
|
||||
no_records: 'Tiada rekod',
|
||||
tx_deposit: 'Deposit',
|
||||
tx_withdraw: 'Pengeluaran',
|
||||
tx_adjust: 'Pelarasan Manual',
|
||||
tx_bet_freeze: 'Pertaruhan Ditahan',
|
||||
tx_bet_deduct: 'Pertaruhan Ditolak',
|
||||
tx_bet_win: 'Bayaran Pertaruhan',
|
||||
tx_bet_lose: 'Pertaruhan Selesai',
|
||||
tx_bet_push: 'Pertaruhan Seri',
|
||||
tx_bet_refund: 'Bayaran Balik',
|
||||
tx_bet_void: 'Pertaruhan Dibatalkan',
|
||||
tx_cashback: 'Cashback',
|
||||
tx_resettle: 'Penyelesaian Semula',
|
||||
},
|
||||
bet: {
|
||||
bet_slip: 'Slip Pertaruhan',
|
||||
|
||||
@@ -180,7 +180,7 @@ function awayFlag(match: (typeof hotMatches.value)[number]) {
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
width: 72px;
|
||||
height: 32px;
|
||||
height: 58px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@@ -191,7 +191,7 @@ function awayFlag(match: (typeof hotMatches.value)[number]) {
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 0;
|
||||
z-index: 1;
|
||||
pointer-events: none;
|
||||
overflow: visible;
|
||||
}
|
||||
@@ -223,7 +223,7 @@ function awayFlag(match: (typeof hotMatches.value)[number]) {
|
||||
height: 2px;
|
||||
transform: translateY(-50%);
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
z-index: 1;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
rgba(94, 184, 255, 0) 0%,
|
||||
@@ -239,8 +239,8 @@ function awayFlag(match: (typeof hotMatches.value)[number]) {
|
||||
|
||||
.vs-img {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: 26px;
|
||||
z-index: 0;
|
||||
width: 58px;
|
||||
height: auto;
|
||||
object-fit: contain;
|
||||
animation: vs-glow 2.4s ease-in-out infinite;
|
||||
|
||||
@@ -15,6 +15,10 @@ import CorrectScoreConfirmModal, {
|
||||
} from '../components/match-detail/CorrectScoreConfirmModal.vue';
|
||||
import { isCorrectScoreMarket, parseScoreCode } from '../utils/correctScoreLayout';
|
||||
import { useOnLocaleChange } from '../composables/useOnLocaleChange';
|
||||
import vsImg from '../assets/images/vs.png';
|
||||
import cardBg from '../assets/images/卡片.png';
|
||||
|
||||
const heroCardBg = `url(${cardBg})`;
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
@@ -257,6 +261,7 @@ function hasSlipPickForMarket(marketType: string) {
|
||||
<div class="detail-page">
|
||||
<header class="toolbar">
|
||||
<button type="button" class="icon-btn" :aria-label="t('bet.back')" @click="router.back()">←</button>
|
||||
<span class="toolbar-title">{{ match?.leagueName ?? '' }}</span>
|
||||
<div class="toolbar-actions">
|
||||
<MatchBetGuide />
|
||||
<button
|
||||
@@ -274,26 +279,49 @@ function hasSlipPickForMarket(marketType: string) {
|
||||
<div v-if="loading" class="state">{{ t('bet.loading') }}</div>
|
||||
|
||||
<template v-else-if="match">
|
||||
<section v-if="match.leagueName" class="league-banner">
|
||||
<span class="league-title">*{{ match.leagueName }}</span>
|
||||
<img
|
||||
v-if="match.leagueLogoUrl"
|
||||
:src="match.leagueLogoUrl"
|
||||
alt=""
|
||||
class="league-logo"
|
||||
/>
|
||||
</section>
|
||||
|
||||
<section class="match-hero">
|
||||
<p class="kickoff">{{ kickoff }}</p>
|
||||
<div class="match-line">
|
||||
<img v-if="homeFlag" :src="homeFlag" alt="" class="flag" />
|
||||
<div class="names">
|
||||
<span class="team">{{ match.homeTeamName }}</span>
|
||||
<span class="vs">vs</span>
|
||||
<span class="team">{{ match.awayTeamName }}</span>
|
||||
<div class="hero-teams">
|
||||
<!-- home -->
|
||||
<div class="hero-team">
|
||||
<img v-if="homeFlag" :src="homeFlag" alt="" class="hero-flag" />
|
||||
<span v-else class="hero-flag-ph">⚽</span>
|
||||
<span class="hero-name">{{ match.homeTeamName }}</span>
|
||||
</div>
|
||||
|
||||
<!-- VS arena with lightning -->
|
||||
<div class="vs-arena">
|
||||
<svg class="hz-lightning" viewBox="0 0 72 28" aria-hidden="true">
|
||||
<defs>
|
||||
<linearGradient id="hzDetailGrad" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<stop offset="0%" stop-color="#5eb8ff" stop-opacity="0.2" />
|
||||
<stop offset="35%" stop-color="#b8ecff" stop-opacity="1" />
|
||||
<stop offset="50%" stop-color="#ffffff" stop-opacity="1" />
|
||||
<stop offset="65%" stop-color="#ffd080" stop-opacity="1" />
|
||||
<stop offset="100%" stop-color="#ff9040" stop-opacity="0.2" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<path
|
||||
class="hz-path hz-path-main"
|
||||
stroke="url(#hzDetailGrad)"
|
||||
d="M1 14 H16 L20 5 L24 23 L28 9 L32 14 H40 L44 6 L48 22 L52 12 L56 14 H71"
|
||||
/>
|
||||
<path
|
||||
class="hz-path hz-path-sub"
|
||||
stroke="url(#hzDetailGrad)"
|
||||
d="M3 19 H14 L18 15 L22 19 H50 L54 16 L58 19 H69"
|
||||
/>
|
||||
</svg>
|
||||
<span class="hz-beam" aria-hidden="true" />
|
||||
<img :src="vsImg" alt="" class="vs-img" />
|
||||
</div>
|
||||
|
||||
<!-- away -->
|
||||
<div class="hero-team">
|
||||
<img v-if="awayFlag" :src="awayFlag" alt="" class="hero-flag" />
|
||||
<span v-else class="hero-flag-ph">⚽</span>
|
||||
<span class="hero-name">{{ match.awayTeamName }}</span>
|
||||
</div>
|
||||
<img v-if="awayFlag" :src="awayFlag" alt="" class="flag" />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -377,6 +405,18 @@ function hasSlipPickForMarket(marketType: string) {
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.toolbar-title {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
color: var(--primary-light);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
.toolbar-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -401,72 +441,190 @@ function hasSlipPickForMarket(marketType: string) {
|
||||
opacity: 0.45;
|
||||
}
|
||||
|
||||
/* ── match hero ── */
|
||||
.match-hero {
|
||||
padding: 2px 12px 10px;
|
||||
position: relative;
|
||||
isolation: isolate;
|
||||
margin: 0 0 10px;
|
||||
padding: 14px 12px 16px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.league-banner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
padding: 6px 12px 2px;
|
||||
}
|
||||
|
||||
.league-banner .league-title {
|
||||
flex: 1;
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
color: var(--primary-light);
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.league-logo {
|
||||
flex-shrink: 0;
|
||||
height: 40px;
|
||||
width: auto;
|
||||
max-width: 44px;
|
||||
object-fit: contain;
|
||||
.match-hero::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: v-bind(heroCardBg) center / 100% 100% no-repeat;
|
||||
opacity: 0.22;
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.kickoff {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
font-size: 11px;
|
||||
color: var(--text-muted);
|
||||
text-align: center;
|
||||
margin-bottom: 6px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.match-line {
|
||||
.hero-teams {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.flag {
|
||||
width: 36px;
|
||||
height: 24px;
|
||||
object-fit: cover;
|
||||
border-radius: 2px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.names {
|
||||
.hero-team {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
text-align: center;
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.team {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
.hero-flag {
|
||||
width: 54px;
|
||||
height: 36px;
|
||||
object-fit: cover;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.hero-flag-ph {
|
||||
width: 54px;
|
||||
height: 36px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 22px;
|
||||
opacity: 0.45;
|
||||
}
|
||||
|
||||
.hero-name {
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
color: var(--primary-light);
|
||||
text-align: center;
|
||||
line-height: 1.25;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.vs {
|
||||
font-size: 10px;
|
||||
color: var(--text-muted);
|
||||
/* VS arena — same as HomeView */
|
||||
.vs-arena {
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
width: 140px;
|
||||
height: 126px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.hz-lightning {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1;
|
||||
pointer-events: none;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.hz-path {
|
||||
fill: none;
|
||||
stroke-width: 2.2;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
filter: drop-shadow(0 0 4px rgba(120, 210, 255, 0.95)) drop-shadow(0 0 8px rgba(255, 180, 80, 0.55));
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.hz-path-main {
|
||||
animation: hz-strike-main 2.6s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.hz-path-sub {
|
||||
stroke-width: 1.6;
|
||||
animation: hz-strike-sub 2.6s ease-in-out infinite;
|
||||
animation-delay: 0.12s;
|
||||
}
|
||||
|
||||
.hz-beam {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 50%;
|
||||
height: 2px;
|
||||
transform: translateY(-50%);
|
||||
pointer-events: none;
|
||||
z-index: 1;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
rgba(94, 184, 255, 0) 0%,
|
||||
rgba(184, 236, 255, 0.95) 28%,
|
||||
#fff 50%,
|
||||
rgba(255, 208, 128, 0.95) 72%,
|
||||
rgba(255, 144, 64, 0) 100%
|
||||
);
|
||||
opacity: 0;
|
||||
filter: blur(0.4px);
|
||||
animation: hz-beam-flash 2.6s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.vs-img {
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
width: 126px;
|
||||
height: auto;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
@keyframes hz-strike-main {
|
||||
0%, 72%, 100% { opacity: 0; }
|
||||
74% { opacity: 1; }
|
||||
75% { opacity: 0.25; }
|
||||
76% { opacity: 0.95; }
|
||||
78% { opacity: 0; }
|
||||
}
|
||||
|
||||
@keyframes hz-strike-sub {
|
||||
0%, 74%, 100% { opacity: 0; }
|
||||
76% { opacity: 0.85; }
|
||||
77% { opacity: 0.2; }
|
||||
78% { opacity: 0.7; }
|
||||
80% { opacity: 0; }
|
||||
}
|
||||
|
||||
@keyframes hz-beam-flash {
|
||||
0%, 71%, 100% { opacity: 0; transform: translateY(-50%) scaleX(0.6); }
|
||||
73% { opacity: 0.85; transform: translateY(-50%) scaleX(1); }
|
||||
75% { opacity: 0.15; transform: translateY(-50%) scaleX(0.95); }
|
||||
76% { opacity: 0.75; transform: translateY(-50%) scaleX(1); }
|
||||
78% { opacity: 0; transform: translateY(-50%) scaleX(1.05); }
|
||||
}
|
||||
|
||||
@keyframes vs-glow {
|
||||
0%, 100% {
|
||||
opacity: 0.82;
|
||||
filter: drop-shadow(0 0 2px rgba(212, 175, 55, 0.3));
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
filter: drop-shadow(0 0 3px rgba(255, 230, 140, 0.7)) drop-shadow(0 0 6px rgba(212, 175, 55, 0.35));
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.vs-img { animation: none; filter: drop-shadow(0 0 3px rgba(212, 175, 55, 0.35)); }
|
||||
.hz-path, .hz-beam { animation: none; opacity: 0; }
|
||||
}
|
||||
|
||||
.markets-section {
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import { ref, onMounted, onUnmounted } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import api from '../api';
|
||||
import BetHistoryCard, { type BetHistoryItem } from '../components/BetHistoryCard.vue';
|
||||
@@ -7,30 +7,82 @@ import { useOnLocaleChange } from '../composables/useOnLocaleChange';
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
const bets = ref<{ items: BetHistoryItem[]; total: number }>({ items: [], total: 0 });
|
||||
const loading = ref(true);
|
||||
const items = ref<BetHistoryItem[]>([]);
|
||||
const total = ref(0);
|
||||
const page = ref(1);
|
||||
const loading = ref(false);
|
||||
const initialLoading = ref(true);
|
||||
const hasMore = ref(true);
|
||||
|
||||
async function load() {
|
||||
const sentinel = ref<HTMLElement | null>(null);
|
||||
let observer: IntersectionObserver | null = null;
|
||||
|
||||
async function loadPage(p: number) {
|
||||
if (loading.value) return;
|
||||
loading.value = true;
|
||||
try {
|
||||
const { data } = await api.get('/player/bets');
|
||||
bets.value = data.data ?? { items: [], total: 0 };
|
||||
const { data } = await api.get('/player/bets', { params: { page: p } });
|
||||
const result = data.data ?? { items: [], total: 0, pageSize: 20 };
|
||||
total.value = result.total ?? 0;
|
||||
const pageSize = result.pageSize ?? 20;
|
||||
if (p === 1) {
|
||||
items.value = result.items ?? [];
|
||||
} else {
|
||||
items.value = [...items.value, ...(result.items ?? [])];
|
||||
}
|
||||
hasMore.value = items.value.length < total.value && (result.items?.length ?? 0) >= pageSize;
|
||||
page.value = p;
|
||||
} finally {
|
||||
loading.value = false;
|
||||
initialLoading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
useOnLocaleChange(load);
|
||||
function reset() {
|
||||
items.value = [];
|
||||
total.value = 0;
|
||||
page.value = 1;
|
||||
hasMore.value = true;
|
||||
initialLoading.value = true;
|
||||
loadPage(1);
|
||||
}
|
||||
|
||||
useOnLocaleChange(reset);
|
||||
|
||||
onMounted(() => {
|
||||
observer = new IntersectionObserver(
|
||||
(entries) => {
|
||||
if (entries[0].isIntersecting && hasMore.value && !loading.value) {
|
||||
loadPage(page.value + 1);
|
||||
}
|
||||
},
|
||||
{ rootMargin: '120px' },
|
||||
);
|
||||
if (sentinel.value) observer.observe(sentinel.value);
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
observer?.disconnect();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="history-page">
|
||||
<h2 class="page-title">{{ t('nav.bet_history') }}</h2>
|
||||
|
||||
<div v-if="loading" class="state">{{ t('bet.loading') }}</div>
|
||||
<div v-if="initialLoading" class="state">{{ t('bet.loading') }}</div>
|
||||
|
||||
<template v-else-if="bets.items.length">
|
||||
<BetHistoryCard v-for="bet in bets.items" :key="bet.betNo" :bet="bet" />
|
||||
<template v-else-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">
|
||||
<span class="spinner" />
|
||||
</div>
|
||||
|
||||
<div v-else-if="!hasMore && items.length > 0" class="end-hint">
|
||||
{{ t('history.no_more') }}
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div v-else class="state">{{ t('history.empty') }}</div>
|
||||
@@ -39,15 +91,7 @@ useOnLocaleChange(load);
|
||||
|
||||
<style scoped>
|
||||
.history-page {
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 20px;
|
||||
font-weight: 800;
|
||||
color: var(--text);
|
||||
margin-bottom: 16px;
|
||||
letter-spacing: 0.02em;
|
||||
padding-bottom: 24px;
|
||||
}
|
||||
|
||||
.state {
|
||||
@@ -57,4 +101,37 @@ useOnLocaleChange(load);
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.sentinel {
|
||||
height: 1px;
|
||||
}
|
||||
|
||||
.load-more-spinner {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
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;
|
||||
color: #555;
|
||||
font-weight: 600;
|
||||
padding: 16px 0 4px;
|
||||
letter-spacing: 0.03em;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { ref, onMounted, computed } from 'vue';
|
||||
import { useRouter, RouterLink } from 'vue-router';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import api from '../api';
|
||||
@@ -21,10 +21,44 @@ const profile = ref<{
|
||||
|
||||
const rulesExpanded = ref(false);
|
||||
|
||||
const displayAmount = ref(0);
|
||||
const animating = ref(false);
|
||||
|
||||
function amountValue(value: unknown): number {
|
||||
if (value == null) return 0;
|
||||
const n = Number(value);
|
||||
return Number.isFinite(n) ? n : 0;
|
||||
}
|
||||
|
||||
function runCountUp(target: number) {
|
||||
const duration = 3000;
|
||||
const start = performance.now();
|
||||
animating.value = true;
|
||||
function step(now: number) {
|
||||
const progress = Math.min((now - start) / duration, 1);
|
||||
const eased = 1 - Math.pow(1 - progress, 5);
|
||||
displayAmount.value = target * eased;
|
||||
if (progress < 1) {
|
||||
requestAnimationFrame(step);
|
||||
} else {
|
||||
displayAmount.value = target;
|
||||
animating.value = false;
|
||||
}
|
||||
}
|
||||
requestAnimationFrame(step);
|
||||
}
|
||||
|
||||
const displayedBalance = computed(() =>
|
||||
animating.value
|
||||
? formatMoney(displayAmount.value, locale.value)
|
||||
: formatMoney(profile.value?.wallet?.availableBalance, locale.value),
|
||||
);
|
||||
|
||||
onMounted(async () => {
|
||||
const { data } = await api.get('/player/profile');
|
||||
profile.value = data.data;
|
||||
initFromUser(data.data?.locale);
|
||||
runCountUp(amountValue(data.data?.wallet?.availableBalance));
|
||||
});
|
||||
|
||||
async function changeLocale(code: string) {
|
||||
@@ -48,7 +82,7 @@ function logout() {
|
||||
<LocaleFlag :locale="locale" :size="14" />
|
||||
{{ t('wallet.balance') }}
|
||||
</span>
|
||||
<p class="card-balance">{{ formatMoney(profile?.wallet?.availableBalance, locale) }}</p>
|
||||
<p class="card-balance">{{ displayedBalance }}</p>
|
||||
</div>
|
||||
<div class="card-foot">
|
||||
<div class="card-holder">
|
||||
|
||||
@@ -9,6 +9,34 @@ const transactions = ref<
|
||||
Array<{ transactionType: string; amount: string; createdAt: string; transactionId?: string }>
|
||||
>([]);
|
||||
|
||||
const TX_KEY_MAP: Record<string, string> = {
|
||||
MANUAL_DEPOSIT: 'wallet.tx_deposit',
|
||||
MANUAL_WITHDRAW: 'wallet.tx_withdraw',
|
||||
MANUAL_ADJUST: 'wallet.tx_adjust',
|
||||
BET_FREEZE: 'wallet.tx_bet_freeze',
|
||||
BET_DEDUCT: 'wallet.tx_bet_deduct',
|
||||
BET_SETTLE_WIN: 'wallet.tx_bet_win',
|
||||
BET_SETTLE_LOSE: 'wallet.tx_bet_lose',
|
||||
BET_SETTLE_PUSH: 'wallet.tx_bet_push',
|
||||
BET_WIN: 'wallet.tx_bet_win',
|
||||
BET_REFUND: 'wallet.tx_bet_refund',
|
||||
BET_VOID: 'wallet.tx_bet_void',
|
||||
BET_VOID_REFUND: 'wallet.tx_bet_void',
|
||||
CASHBACK: 'wallet.tx_cashback',
|
||||
RESETTLE_REVERSE: 'wallet.tx_resettle',
|
||||
DEPOSIT: 'wallet.tx_deposit',
|
||||
WITHDRAW: 'wallet.tx_withdraw',
|
||||
};
|
||||
|
||||
function txLabel(type: string): string {
|
||||
const key = TX_KEY_MAP[type.toUpperCase()];
|
||||
if (key) {
|
||||
const translated = t(key);
|
||||
if (translated !== key) return translated;
|
||||
}
|
||||
return type;
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
const { data } = await api.get('/player/wallet/transactions');
|
||||
transactions.value = data.data.items ?? [];
|
||||
@@ -24,7 +52,7 @@ onMounted(async () => {
|
||||
:key="tx.transactionId ?? tx.createdAt"
|
||||
class="tx-row"
|
||||
>
|
||||
<span>{{ tx.transactionType }}</span>
|
||||
<span class="tx-type">{{ txLabel(tx.transactionType) }}</span>
|
||||
<span :class="parseFloat(tx.amount) >= 0 ? 'pos' : 'neg'">
|
||||
{{ formatMoney(tx.amount, locale) }}
|
||||
</span>
|
||||
@@ -47,6 +75,7 @@ onMounted(async () => {
|
||||
.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; }
|
||||
|
||||
Reference in New Issue
Block a user