fix(player-desktop): 切换单注/串关/历史选项卡时关闭卡片列表切换动画,使其加载瞬时生效
This commit is contained in:
@@ -1,5 +1,5 @@
|
|||||||
<script setup lang="ts">
|
<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 { useI18n } from 'vue-i18n';
|
||||||
import { useRoute, useRouter, RouterLink } from 'vue-router';
|
import { useRoute, useRouter, RouterLink } from 'vue-router';
|
||||||
import { PARLAY_MIN_LEGS, PARLAY_MAX_LEGS } from '@thebet365/shared';
|
import { PARLAY_MIN_LEGS, PARLAY_MAX_LEGS } from '@thebet365/shared';
|
||||||
@@ -26,6 +26,7 @@ const { refreshProfile } = usePlayerProfile();
|
|||||||
const { requestLocate } = useDesktopBetLocate();
|
const { requestLocate } = useDesktopBetLocate();
|
||||||
|
|
||||||
const activeTab = ref<PanelTab>('single');
|
const activeTab = ref<PanelTab>('single');
|
||||||
|
const transitionName = ref('list-slide');
|
||||||
const historyScope = ref<'all' | 'match'>('all');
|
const historyScope = ref<'all' | 'match'>('all');
|
||||||
const historyItems = ref<BetHistoryItem[]>([]);
|
const historyItems = ref<BetHistoryItem[]>([]);
|
||||||
const historyTotal = ref(0);
|
const historyTotal = ref(0);
|
||||||
@@ -190,22 +191,32 @@ function genId() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function selectTab(tab: PanelTab) {
|
function selectTab(tab: PanelTab) {
|
||||||
|
transitionName.value = '';
|
||||||
activeTab.value = tab;
|
activeTab.value = tab;
|
||||||
error.value = '';
|
error.value = '';
|
||||||
if (tab === 'history') {
|
if (tab === 'history') {
|
||||||
if (!auth.token) {
|
if (!auth.token) {
|
||||||
auth.showLoginPrompt(route.fullPath);
|
auth.showLoginPrompt(route.fullPath);
|
||||||
activeTab.value = slip.mode;
|
activeTab.value = slip.mode;
|
||||||
|
nextTick(() => {
|
||||||
|
transitionName.value = 'list-slide';
|
||||||
|
});
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
if (showMatchHistoryFilter.value) {
|
if (showMatchHistoryFilter.value) {
|
||||||
historyScope.value = 'match';
|
historyScope.value = 'match';
|
||||||
}
|
}
|
||||||
void loadHistory(true);
|
void loadHistory(true);
|
||||||
|
nextTick(() => {
|
||||||
|
transitionName.value = 'list-slide';
|
||||||
|
});
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
slip.setMode(tab);
|
slip.setMode(tab);
|
||||||
syncStakeInputFromSlip();
|
syncStakeInputFromSlip();
|
||||||
|
nextTick(() => {
|
||||||
|
transitionName.value = 'list-slide';
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function selectHistoryScope(scope: 'all' | 'match') {
|
function selectHistoryScope(scope: 'all' | 'match') {
|
||||||
@@ -805,7 +816,13 @@ watch(
|
|||||||
watch(
|
watch(
|
||||||
() => slip.mode,
|
() => slip.mode,
|
||||||
(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>
|
<p>{{ activeTab === 'parlay' ? t('bet.slip_parlay_empty_hint') : t('bet.slip_empty_hint') }}</p>
|
||||||
</div>
|
</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>
|
<p v-if="activeTab === 'parlay' && parlayWarning" class="panel-warning" key="warning">{{ parlayWarning }}</p>
|
||||||
<div
|
<div
|
||||||
v-for="item in activeItems"
|
v-for="item in activeItems"
|
||||||
|
|||||||
Reference in New Issue
Block a user