feat(player): 完善 H5 投注端与 API 演示数据
- 球赛/串关/优胜冠军、赛事详情、历史投注与个人资料编辑 - 固定顶栏、公告与底栏，仅内容区滚动 - 底部导航与站点 favicon 使用 logo，登录页精简 - API 种子、冠军盘与历史注单增强 Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
270
apps/player/src/components/BetHistoryCard.vue
Normal file
270
apps/player/src/components/BetHistoryCard.vue
Normal file
@@ -0,0 +1,270 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { formatMoney } from '../utils/localeDisplay';
|
||||
|
||||
export interface BetHistoryItem {
|
||||
betNo: string;
|
||||
betType: string;
|
||||
stake: unknown;
|
||||
potentialReturn: unknown;
|
||||
actualReturn: unknown;
|
||||
status: string;
|
||||
placedAt: string;
|
||||
leagueName?: string;
|
||||
matchTitle: string;
|
||||
pickLabel: string;
|
||||
isParlay?: boolean;
|
||||
legCount?: number;
|
||||
legs?: Array<{
|
||||
marketLabel: string;
|
||||
selectionName: string;
|
||||
matchTitle: string;
|
||||
odds: unknown;
|
||||
}>;
|
||||
}
|
||||
|
||||
const props = defineProps<{ bet: BetHistoryItem }>();
|
||||
|
||||
const { t, locale } = useI18n();
|
||||
|
||||
const statusKey = computed(() => {
|
||||
const s = props.bet.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 placedDate = computed(() =>
|
||||
new Date(props.bet.placedAt).toLocaleDateString(locale.value, {
|
||||
year: 'numeric',
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
}),
|
||||
);
|
||||
|
||||
const matchTitle = computed(() => {
|
||||
if (props.bet.isParlay) {
|
||||
const n = props.bet.legCount ?? props.bet.legs?.length ?? 0;
|
||||
return t('history.parlay_title', { n });
|
||||
}
|
||||
return props.bet.matchTitle;
|
||||
});
|
||||
|
||||
const pickLabel = computed(() => {
|
||||
if (props.bet.isParlay) return '';
|
||||
return props.bet.pickLabel;
|
||||
});
|
||||
|
||||
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);
|
||||
return formatMoney(props.bet.actualReturn ?? props.bet.potentialReturn, locale.value);
|
||||
});
|
||||
|
||||
const returnHighlight = computed(() => statusKey.value === 'won');
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<article class="bet-card">
|
||||
<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>
|
||||
|
||||
<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">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="divider" />
|
||||
|
||||
<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>
|
||||
</div>
|
||||
<div class="money-col align-right">
|
||||
<span class="money-label">{{ returnLabel }}</span>
|
||||
<span class="money-value" :class="{ highlight: returnHighlight }">{{ returnAmount }}</span>
|
||||
</div>
|
||||
</footer>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.bet-card {
|
||||
background: #141414;
|
||||
border: 1px solid #2a2a2a;
|
||||
border-radius: 10px;
|
||||
padding: 14px 14px 12px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.card-head {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
font-size: 12px;
|
||||
color: var(--text-muted);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.sport-icon {
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.league {
|
||||
color: #9a9a9a;
|
||||
}
|
||||
|
||||
.dot {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.date {
|
||||
color: #7a7a7a;
|
||||
}
|
||||
|
||||
.status-badge {
|
||||
flex-shrink: 0;
|
||||
padding: 4px 10px;
|
||||
border-radius: 4px;
|
||||
font-size: 11px;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.03em;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.status-badge.won {
|
||||
color: var(--primary-light);
|
||||
background: rgba(46, 125, 50, 0.35);
|
||||
border: 1px solid rgba(212, 175, 55, 0.25);
|
||||
}
|
||||
|
||||
.status-badge.pending {
|
||||
color: #9a9a9a;
|
||||
background: #1f1f1f;
|
||||
border: 1px solid #333;
|
||||
}
|
||||
|
||||
.status-badge.lost {
|
||||
color: #ff6b6b;
|
||||
background: rgba(198, 40, 40, 0.2);
|
||||
border: 1px solid rgba(198, 40, 40, 0.35);
|
||||
}
|
||||
|
||||
.status-badge.push {
|
||||
color: #aaa;
|
||||
background: #1f1f1f;
|
||||
border: 1px solid #333;
|
||||
}
|
||||
|
||||
.match-title {
|
||||
font-size: 17px;
|
||||
font-weight: 800;
|
||||
color: var(--text);
|
||||
line-height: 1.3;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.pick-line {
|
||||
font-size: 13px;
|
||||
color: #9a9a9a;
|
||||
font-weight: 600;
|
||||
line-height: 1.4;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.parlay-legs {
|
||||
margin-top: 8px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.leg {
|
||||
font-size: 12px;
|
||||
color: var(--text-muted);
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.leg-match {
|
||||
font-weight: 700;
|
||||
color: #b0b0b0;
|
||||
}
|
||||
|
||||
.leg-pick {
|
||||
display: block;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.divider {
|
||||
height: 1px;
|
||||
background: #2a2a2a;
|
||||
margin: 12px 0 10px;
|
||||
}
|
||||
|
||||
.card-foot {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.money-col {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.money-col.align-right {
|
||||
align-items: flex-end;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.money-label {
|
||||
font-size: 11px;
|
||||
color: #7a7a7a;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.money-value {
|
||||
font-size: 16px;
|
||||
font-weight: 800;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.money-value.highlight {
|
||||
color: var(--primary-light);
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user