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

feat(theme-3): sync inbox/announcements/presence/deposit/search from main

Browse Source
This commit is contained in:
Mars
2026-06-18 10:02:32 +08:00
parent 0d430857c7
commit 6881d325d5
87 changed files with 6944 additions and 964 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,5 +1,5 @@
<script setup lang="ts">
import { computed, ref, watch } from 'vue';
import { computed, onUnmounted, ref, watch } from 'vue';
import { useI18n } from 'vue-i18n';
import { PARLAY_MIN_LEGS, PARLAY_MAX_LEGS } from '@thebet365/shared';
import {
@@ -37,6 +37,27 @@ const MIN_STAKE = 5;
const MAX_STAKE_INTEGER_LENGTH = 9;
const stakeInput = ref('');
const keypadKeys = ['1', '2', '3', '4', '5', 'backspace', '6', '7', '8', '9', '0', '00'];
const ODDS_POLL_MS = 5000;
type OddsDelta = {
oldOdds: number;
newOdds: number;
newVersion: string;
suspended: boolean;
};
interface SelectionOddsRow {
id: string;
odds: string;
oddsVersion: string;
status: string;
marketStatus: string;
marketShowOnPlayer: boolean;
matchStatus: string;
}
const oddsDeltas = ref<Record<string, OddsDelta>>({});
let oddsPollTimer: ReturnType<typeof setInterval> | null = null;
const activeItems = computed<SlipItem[]>(() => {
if (activeTab.value === 'parlay') return slip.parlayItems;
@@ -44,20 +65,47 @@ const activeItems = computed<SlipItem[]>(() => {
});
const activeCount = computed(() => activeItems.value.length);
function effectiveOdds(item: SlipItem) {
return oddsDeltas.value[item.selectionId]?.newOdds ?? item.odds;
}
const activeTotalOdds = computed(() =>
activeItems.value.reduce((acc, item) => acc * item.odds, 1),
activeItems.value.reduce((acc, item) => acc * effectiveOdds(item), 1),
);
const activeEstimatedReturn = computed(() => {
if (!activeItems.value.length || !Number.isFinite(slip.stake) || slip.stake <= 0) return 0;
if (activeTab.value === 'parlay') return slip.stake * activeTotalOdds.value;
return slip.stake * activeItems.value[0].odds;
return slip.stake * effectiveOdds(activeItems.value[0]);
});
const hasSuspendedSelections = computed(() =>
Object.values(oddsDeltas.value).some((delta) => delta.suspended),
);
const hasPendingOddsChanges = computed(() =>
Object.values(oddsDeltas.value).some((delta) => !delta.suspended),
);
const oddsWarningText = computed(() => {
if (hasSuspendedSelections.value) return t('bet.odds_suspended');
if (hasPendingOddsChanges.value) return t('bet.odds_changed');
return '';
});
const submitButtonLabel = computed(() => {
if (loading.value) return t('bet.placing');
if (hasPendingOddsChanges.value) return t('bet.accept_changes_place');
return t('bet.place_bet_short');
});
const canSubmitWithOdds = computed(() => canSubmitActive.value && !hasSuspendedSelections.value);
const canSubmitActive = computed(() => {
if (activeTab.value === 'parlay') {
return slip.parlayItems.length >= PARLAY_MIN_LEGS && slip.parlayItems.length <= PARLAY_MAX_LEGS;
}
return Boolean(slip.singleItem) && slip.singleItem.allowSingle !== false;
return Boolean(slip.singleItem) && slip.singleItem!.allowSingle !== false;
});
const singleParlayOnlyHint = computed(
@@ -222,6 +270,81 @@ function setMaxStake() {
if (balance.value != null && balance.value > 0) setStake(balance.value, false);
}
function stopOddsPolling() {
if (oddsPollTimer) {
clearInterval(oddsPollTimer);
oddsPollTimer = null;
}
oddsDeltas.value = {};
}
function acceptPendingOdds() {
for (const [selectionId, delta] of Object.entries(oddsDeltas.value)) {
if (!delta.suspended) {
slip.updateSelectionOdds(selectionId, delta.newOdds, delta.newVersion);
}
}
oddsDeltas.value = {};
}
async function pollSelectionsOdds() {
const items = activeItems.value;
if (!items.length || !show.value) return;
try {
const ids = items.map((item) => item.selectionId).join(',');
const { data } = await api.get('/player/selections/odds', { params: { ids } });
const rows: SelectionOddsRow[] = data.data?.items ?? [];
const rowMap = new Map(rows.map((row) => [row.id, row]));
const next: Record<string, OddsDelta> = {};
for (const item of items) {
const row = rowMap.get(item.selectionId);
if (!row) continue;
const suspended =
row.status !== 'OPEN' ||
row.marketStatus !== 'OPEN' ||
row.marketShowOnPlayer === false ||
row.matchStatus !== 'PUBLISHED';
const newOdds = parseFloat(row.odds);
const versionChanged = row.oddsVersion !== item.oddsVersion;
const oddsChanged = Number.isFinite(newOdds) && Math.abs(newOdds - item.odds) > 0.0001;
if (suspended || versionChanged || oddsChanged) {
const existing = oddsDeltas.value[item.selectionId];
next[item.selectionId] = {
oldOdds: existing?.oldOdds ?? item.odds,
newOdds: Number.isFinite(newOdds) ? newOdds : item.odds,
newVersion: row.oddsVersion,
suspended,
};
}
}
oddsDeltas.value = next;
} catch {
/* silent retry on next tick */
}
}
function startOddsPolling() {
stopOddsPolling();
void pollSelectionsOdds();
oddsPollTimer = setInterval(() => {
void pollSelectionsOdds();
}, ODDS_POLL_MS);
}
function oddsDeltaFor(selectionId: string) {
return oddsDeltas.value[selectionId];
}
function oddsTrendClass(delta: OddsDelta) {
if (delta.suspended) return 'odds-suspended';
return delta.newOdds >= delta.oldOdds ? 'odds-up' : 'odds-down';
}
async function placeBet() {
if (!activeItems.value.length) return;
if (!auth.token) {
@@ -242,6 +365,13 @@ async function placeBet() {
: t('bet.parlay_need_more');
return;
}
if (hasSuspendedSelections.value) {
error.value = t('bet.odds_suspended');
return;
}
if (hasPendingOddsChanges.value) {
acceptPendingOdds();
}
loading.value = true;
error.value = '';
@@ -287,7 +417,10 @@ async function placeBet() {
watch(
() => props.modelValue,
(open) => {
if (!open) return;
if (!open) {
stopOddsPolling();
return;
}
activeTab.value = slip.mode;
if (activeTab.value === 'single' && !slip.singleItem && slip.parlayItems.length) {
activeTab.value = 'parlay';
@@ -297,9 +430,21 @@ watch(
success.value = '';
syncStakeInputFromSlip();
loadBalance();
startOddsPolling();
},
);
watch(
() => activeItems.value.map((item) => item.selectionId).join(','),
() => {
if (show.value) void pollSelectionsOdds();
},
);
onUnmounted(() => {
stopOddsPolling();
});
watch(
() => slip.mode,
(mode) => {
@@ -329,6 +474,8 @@ watch(
</button>
</div>
<p v-if="oddsWarningText" class="odds-warning">{{ oddsWarningText }}</p>
<div class="slip-tabs">
<button
type="button"
@@ -362,7 +509,19 @@ watch(
<div v-if="slip.singleItem.marketName" class="item-market">{{ slip.singleItem.marketName }}</div>
<div class="item-pick">{{ slip.singleItem.selectionName }}</div>
</div>
<div class="item-odds">{{ slip.singleItem.odds.toFixed(2) }}</div>
<div class="item-odds">
<template v-if="oddsDeltaFor(slip.singleItem.selectionId)">
<span
class="odds-change"
:class="oddsTrendClass(oddsDeltaFor(slip.singleItem.selectionId)!)"
>
{{ oddsDeltaFor(slip.singleItem.selectionId)!.oldOdds.toFixed(2) }}
→
{{ oddsDeltaFor(slip.singleItem.selectionId)!.newOdds.toFixed(2) }}
</span>
</template>
<template v-else>{{ slip.singleItem.odds.toFixed(2) }}</template>
</div>
</div>
<p v-if="singleParlayOnlyHint" class="warning">{{ t('bet.slip_parlay_only_hint') }}</p>
@@ -379,7 +538,19 @@ watch(
<div class="item-pick">{{ item.selectionName }}</div>
</div>
<div class="item-side">
<strong>{{ item.odds.toFixed(2) }}</strong>
<strong>
<template v-if="oddsDeltaFor(item.selectionId)">
<span
class="odds-change"
:class="oddsTrendClass(oddsDeltaFor(item.selectionId)!)"
>
{{ oddsDeltaFor(item.selectionId)!.oldOdds.toFixed(2) }}
→
{{ oddsDeltaFor(item.selectionId)!.newOdds.toFixed(2) }}
</span>
</template>
<template v-else>{{ item.odds.toFixed(2) }}</template>
</strong>
<button type="button" class="remove" @click="removeItem(item.selectionId)">
{{ t('bet.slip_remove') }}
</button>
@@ -450,10 +621,10 @@ watch(
<button
type="button"
class="btn-primary"
:disabled="loading || !canSubmitActive"
:disabled="loading || !canSubmitWithOdds"
@click="placeBet"
>
{{ loading ? t('bet.placing') : t('bet.place_bet_short') }}
{{ submitButtonLabel }}
</button>
</div>
</div>
@@ -702,13 +873,40 @@ watch(
line-height: 1;
}
.odds-warning {
margin: 0 16px 10px;
padding: 10px 12px;
border-radius: 8px;
background: rgba(244, 162, 97, 0.12);
border: 1px solid rgba(244, 162, 97, 0.28);
color: var(--primary);
font-size: 12px;
line-height: 1.45;
}
.odds-change {
font-weight: 700;
}
.odds-change.odds-up {
color: #6ee7a0;
}
.odds-change.odds-down {
color: #ff8b8b;
}
.odds-change.odds-suspended {
color: #ffb84d;
}
.warning,
.error {
margin: 0 0 10px;
padding: 10px 11px;
border-radius: 6px;
background: rgba(239, 68, 68, 0.06);
border: 1px solid rgba(239, 68, 68, 0.18);
background: rgba(255, 77, 79, 0.12);
border: 1px solid rgba(255, 77, 79, 0.24);
color: var(--danger);
font-size: 12px;
line-height: 1.45;
@@ -811,7 +1009,7 @@ watch(
.number-key,
.quick-stakes button {
min-height: 52px;
border-radius: 6px;
border-radius: var(--radius-sm);
background: var(--bg-elevated);
color: var(--text);
border: 1px solid var(--border);
@@ -861,7 +1059,7 @@ watch(
.btn-primary {
width: 100%;
min-height: 48px;
border-radius: 8px;
border-radius: var(--radius-sm);
background: var(--gradient-primary);
color: #FFFFFF;
font-size: 16px;