Mars
24fa1b275c
管理端拆分赛事/优胜赛 Tab，新增联赛优胜赔率面板（批量、排序、外侧删除）；统一 list-chrome 工具栏对齐与列表页布局；Dashboard 失败重试、Users 操作下拉、小屏侧栏等体验修复。 API 扩展优胜赛与赛事目录接口，完善投注与钱包查询；玩家端重构赛事卡片、串关面板、注单/钱包页，新增注单详情、下注成功动画与下拉刷新。 Co-authored-by: Cursor <cursoragent@cursor.com>
581 lines
14 KiB
Vue
581 lines
14 KiB
Vue
<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>
|