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

fix(player): 优化桌面快速下注 hover 并修复充值 API 重复方法

Browse Source 
删除 deposit.service 中重复的 getPlayerDepositOrder，避免 API 编译失败引发 500；快速下注弹层按卡片实例激活，同场赛事不再多处联动，移入快速下注区域时保持 VS 动画；记录列表改为整行可点，编号统一中性色样式。
This commit is contained in:
Mars
2026-07-02 11:12:09 +08:00
parent 66ac69c7a7
commit 8000c23418
12 changed files with 122 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
apps/player/src/views/desktop/DesktopHomeView.vue
View File

@@ -22,7 +22,7 @@ const { banners, hotMatches, upcomingMatches, loading, load, announcementItems }
const slip = useBetSlipStore();
const auth = useAuthStore();
const { openAt, visible: popoverVisible, pendingItem, cancelClose, scheduleClose } = useDesktopBetPopover();
const { openAt, visible: popoverVisible, pendingItem, cancelClose, scheduleClose, isActiveForCard } = useDesktopBetPopover();
const activeMarketTypes = ref<Record<string, string>>({});
@@ -141,8 +141,9 @@ function getSelLabel(sel: any, marketType: string, lineValue?: string | number |
return resolveSelectionLabel(t, sel.selectionCode || '', sel.selectionName || '', { lineValue });
}
function getHoveredSideForMatch(match: PlayerHomeMatch | null) {
function getHoveredSideForMatch(match: PlayerHomeMatch | null, cardRootId: string) {
if (!match || !popoverVisible.value || !pendingItem.value) return '';
if (!isActiveForCard(cardRootId)) return '';
if (String(pendingItem.value.matchId) !== String(match.id)) return '';
const selId = pendingItem.value.selectionId;
@@ -203,7 +204,15 @@ function getHoveredSideForMatch(match: PlayerHomeMatch | null) {
<template v-else-if="featuredMatch">
<!-- 焦点大卡 -->
<div class="featured-match anim-fade-up" style="--anim-delay:240ms" @click.self="goMatch(featuredMatch.id)">
<div
class="featured-match anim-fade-up"
:class="{ 'featured-match--engaged': isActiveForCard(`featured-${featuredMatch.id}`) }"
:data-bet-card-root="`featured-${featuredMatch.id}`"
style="--anim-delay:240ms"
@click.self="goMatch(featuredMatch.id)"
@mouseenter="cancelClose"
@mouseleave="scheduleClose()"
>
<div class="featured-top" @click="goMatch(featuredMatch.id)">
<div class="featured-meta">
<span class="league-tag lg">{{ featuredMatch.leagueName }}</span>
@@ -215,7 +224,7 @@ function getHoveredSideForMatch(match: PlayerHomeMatch | null) {
<span class="featured-time">{{ formatKickoff(featuredMatch.startTime) }}</span>
</div>
<div class="featured-teams" :class="getHoveredSideForMatch(featuredMatch)" @click="goMatch(featuredMatch.id)">
<div class="featured-teams" :class="getHoveredSideForMatch(featuredMatch, `featured-${featuredMatch.id}`)" @click="goMatch(featuredMatch.id)">
<div class="featured-team">
<TeamEmblem
size="lg"
@@ -266,7 +275,11 @@ function getHoveredSideForMatch(match: PlayerHomeMatch | null) {
v-for="(match, idx) in restHotMatches"
:key="match.id"
class="match-card anim-fade-up"
:class="{ 'match-card--engaged': isActiveForCard(`hot-${match.id}`) }"
:data-bet-card-root="`hot-${match.id}`"
:style="{ '--anim-delay': (320 + idx * 60) + 'ms' }"
@mouseenter="cancelClose"
@mouseleave="scheduleClose()"
>
<div class="match-info-side" @click="goMatch(match.id)">
<!-- Default info layout (visible at rest) -->
@@ -302,7 +315,7 @@ function getHoveredSideForMatch(match: PlayerHomeMatch | null) {
</div>
<!-- Hover versus layout (visible on hover) -->
<div class="hover-versus-layout" :class="getHoveredSideForMatch(match)">
<div class="hover-versus-layout" :class="getHoveredSideForMatch(match, `hot-${match.id}`)">
<div class="hover-team home-slide">
<TeamEmblem
size="md"
@@ -375,7 +388,11 @@ function getHoveredSideForMatch(match: PlayerHomeMatch | null) {
v-for="(match, idx) in upcomingList"
:key="match.id"
class="match-card anim-fade-up"
:class="{ 'match-card--engaged': isActiveForCard(`upcoming-${match.id}`) }"
:data-bet-card-root="`upcoming-${match.id}`"
:style="{ '--anim-delay': (260 + idx * 50) + 'ms' }"
@mouseenter="cancelClose"
@mouseleave="scheduleClose()"
>
<div class="match-info-side" @click="goMatch(match.id)">
<!-- Default info layout (visible at rest) -->
@@ -410,7 +427,7 @@ function getHoveredSideForMatch(match: PlayerHomeMatch | null) {
</div>
<!-- Hover versus layout (visible on hover) -->
<div class="hover-versus-layout" :class="getHoveredSideForMatch(match)">
<div class="hover-versus-layout" :class="getHoveredSideForMatch(match, `upcoming-${match.id}`)">
<div class="hover-team home-slide">
<TeamEmblem
size="md"
@@ -483,8 +500,12 @@ function getHoveredSideForMatch(match: PlayerHomeMatch | null) {
v-for="(m, idx) in sideRecommendMatches"
:key="m.id"
class="side-recommend-item anim-fade-up"
:class="{ 'side-recommend-item--engaged': isActiveForCard(`sidebar-${m.id}`) }"
:data-bet-card-root="`sidebar-${m.id}`"
:style="{ '--anim-delay': (200 + idx * 70) + 'ms' }"
@click="goMatch(m.id)"
@mouseenter="cancelClose"
@mouseleave="scheduleClose()"
>
<div class="sri-top-row">
<span class="sri-league">{{ m.leagueName }}</span>
@@ -502,7 +523,7 @@ function getHoveredSideForMatch(match: PlayerHomeMatch | null) {
<span class="sri-preview-league">{{ m.leagueName }}</span>
<span class="sri-preview-time">{{ formatKickoff(m.startTime) }}</span>
</div>
<div class="sri-preview-vs" :class="getHoveredSideForMatch(m)">
<div class="sri-preview-vs" :class="getHoveredSideForMatch(m, `sidebar-${m.id}`)">
<div class="sri-preview-team home-team">
<TeamEmblem size="md" :team-code="m.homeTeamCode" :team-name="m.homeTeamName" :logo-url="m.homeTeamLogoUrl" />
<span>{{ m.homeTeamName }}</span>
@@ -814,7 +835,7 @@ function getHoveredSideForMatch(match: PlayerHomeMatch | null) {
min-height: 76px;
}
.match-card:hover {
.match-card:is(:hover, .match-card--engaged) {
border-color: var(--border-gold);
box-shadow: var(--shadow-gold);
transform: translateY(-1px);
@@ -840,7 +861,7 @@ function getHoveredSideForMatch(match: PlayerHomeMatch | null) {
z-index: 1;
}
.match-card:hover .match-info-side {
.match-card:is(:hover, .match-card--engaged) .match-info-side {
background: rgba(255, 255, 255, 0.02);
}
@@ -1186,7 +1207,7 @@ function getHoveredSideForMatch(match: PlayerHomeMatch | null) {
transition: opacity 0.35s cubic-bezier(0.25, 0.8, 0.25, 1), transform 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.match-card:hover .default-info-layout {
.match-card:is(:hover, .match-card--engaged) .default-info-layout {
opacity: 0;
transform: translateY(-8px) scale(0.95);
pointer-events: none;
@@ -1211,7 +1232,7 @@ function getHoveredSideForMatch(match: PlayerHomeMatch | null) {
border-radius: 8px 0 0 8px;
}
.match-card:hover .hover-versus-layout {
.match-card:is(:hover, .match-card--engaged) .hover-versus-layout {
opacity: 1;
transform: translateY(0) scale(1);
pointer-events: auto;
@@ -1229,7 +1250,7 @@ function getHoveredSideForMatch(match: PlayerHomeMatch | null) {
flex: 1;
}
.match-card:hover .hover-team.home-slide {
.match-card:is(:hover, .match-card--engaged) .hover-team.home-slide {
transform: translateX(0);
opacity: 1;
}
@@ -1246,7 +1267,7 @@ function getHoveredSideForMatch(match: PlayerHomeMatch | null) {
flex: 1;
}
.match-card:hover .hover-team.away-slide {
.match-card:is(:hover, .match-card--engaged) .hover-team.away-slide {
transform: translateX(0);
opacity: 1;
}
@@ -1276,7 +1297,7 @@ function getHoveredSideForMatch(match: PlayerHomeMatch | null) {
flex-shrink: 0;
}
.match-card:hover .hover-vs-glow {
.match-card:is(:hover, .match-card--engaged) .hover-vs-glow {
transform: scale(1);
opacity: 1;
animation: vs-clash-impact 0.3s ease-out 0.35s;
@@ -1347,7 +1368,7 @@ function getHoveredSideForMatch(match: PlayerHomeMatch | null) {
gap: 10px;
}
.side-recommend-item:hover .sri-preview-card {
.side-recommend-item:is(:hover, .side-recommend-item--engaged) .sri-preview-card {
opacity: 1;
transform: translateY(-50%) translateX(0);
pointer-events: auto;