fix(player-desktop): 切换单注/串关/历史选项卡时关闭卡片列表切换动画,使其加载瞬时生效

This commit is contained in:
2026-06-30 18:01:34 +08:00
parent 5ec5f858a5
commit 05fb1b46ab

View File

@@ -1,5 +1,5 @@
<script setup lang="ts">
import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
import { computed, onMounted, onUnmounted, ref, watch, nextTick } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRoute, useRouter, RouterLink } from 'vue-router';
import { PARLAY_MIN_LEGS, PARLAY_MAX_LEGS } from '@thebet365/shared';
@@ -26,6 +26,7 @@ const { refreshProfile } = usePlayerProfile();
const { requestLocate } = useDesktopBetLocate();
const activeTab = ref<PanelTab>('single');
const transitionName = ref('list-slide');
const historyScope = ref<'all' | 'match'>('all');
const historyItems = ref<BetHistoryItem[]>([]);
const historyTotal = ref(0);
@@ -190,22 +191,32 @@ function genId() {
}
function selectTab(tab: PanelTab) {
transitionName.value = '';
activeTab.value = tab;
error.value = '';
if (tab === 'history') {
if (!auth.token) {
auth.showLoginPrompt(route.fullPath);
activeTab.value = slip.mode;
nextTick(() => {
transitionName.value = 'list-slide';
});
return;
}
if (showMatchHistoryFilter.value) {
historyScope.value = 'match';
}
void loadHistory(true);
nextTick(() => {
transitionName.value = 'list-slide';
});
return;
}
slip.setMode(tab);
syncStakeInputFromSlip();
nextTick(() => {
transitionName.value = 'list-slide';
});
}
function selectHistoryScope(scope: 'all' | 'match') {
@@ -805,7 +816,13 @@ watch(
watch(
() => slip.mode,
(mode) => {
if (activeTab.value !== 'history') activeTab.value = mode;
if (activeTab.value !== 'history') {
transitionName.value = '';
activeTab.value = mode;
nextTick(() => {
transitionName.value = 'list-slide';
});
}
},
);
@@ -979,7 +996,7 @@ onUnmounted(() => {
<p>{{ activeTab === 'parlay' ? t('bet.slip_parlay_empty_hint') : t('bet.slip_empty_hint') }}</p>
</div>
<TransitionGroup v-else name="list-slide" tag="div" class="items-list">
<TransitionGroup v-else :name="transitionName" tag="div" class="items-list">
<p v-if="activeTab === 'parlay' && parlayWarning" class="panel-warning" key="warning">{{ parlayWarning }}</p>
<div
v-for="item in activeItems"