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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user