tropsCode/src/layout/index.vue

<template>
  <div class="app-main" @click="handClick">
    <router-view v-slot="{ Component, route }">
      <Transition :enter-active-class="proxy?.animate.page.enter">
        <component :is="Component" :key="route.path" />
      </Transition>
    </router-view>
    <RankingWindow ref="rankingWindowRef" @getClose="openRanking"></RankingWindow>
  </div>
</template>

<script setup name="AppMain" lang="ts">
import VConsole from 'vconsole';
const { proxy } = getCurrentInstance() as any;
const router = useRouter();
const rankingWindowRef = ref();

const data = reactive<any>({
  timer: null
});
const { timer } = toRefs(data);

const handClick = () => {
  //getClearTimer();
  if (!rankingWindowRef.value.rankingState) {
    openRanking();
  }
};


/**
 * 定时打开排行榜
 */
const openRanking = () => {
  clearTimeout(timer.value);
  if (rankingWindowRef.value.rankingState) {
    rankingWindowRef.value.close();
  }
  //console.log("timer.value", timer.value)
  let state = localStorage.getItem('rankingSwitch1');
  if (state != "1") {
    return false;
  }
  // 设置新的定时器
  timer.value = setTimeout(() => {
    if (!rankingWindowRef.value.rankingState) {
      if (
        !['/ranking', '/login', '/login/qrcode', '/login/mobile', '/login/sunshineRun', '/sunshineRun', '/game/humanBody', '/game/football', '/game/fruit', '/game/basketball'].includes(router.currentRoute.value.fullPath)
      ) {
        rankingWindowRef.value.open();
      }
    }
  }, 1000 * 60 * 10);

};

const getClearTimer = () => {
  clearTimeout(timer.value);
};

onBeforeMount(() => {
  let state1 = localStorage.getItem('rankingSwitch1');
  if (state1 == undefined) {
    localStorage.setItem('rankingSwitch1', "1");
  }
});

onMounted(() => {
  openRanking();
  const vConsole = new VConsole({ theme: 'dark' });
  const vConsoleIcon: any = document.querySelector('.vc-switch');
  if (vConsoleIcon) {
    vConsoleIcon.style.display = 'none';
    localStorage.setItem('vConsole', "0");
  }
});

onBeforeUnmount(() => {
  getClearTimer();
});
</script>
<style lang="scss" scoped>
.app-main {
  height: 100vh;
  width: 100%;
  background: radial-gradient(87% 87% at 9% -34%, #315f7e 0%, #0f1926 100%);
}
</style>