cd_SKP_H_base_daoshi_vue_ts/src/App.vue

<template>
  <div id="app" @click="checkHandleScreen">
    <router-view />

    <!-- 地图容器 -->
    <Map />

    <!-- 退出弹框 -->
    <Logout @close="logout = false" v-if="logout" @bingo="bingo" />

    <!-- 倒计时返回首页提示 -->
    <AutoBackNotification v-if="countDownGif" :title="title" :delay="isWall ? countDownToWall : countDownNum" />
  </div>
</template>

<script setup lang="ts">
import { ref, defineAsyncComponent, nextTick, watch, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useHandleScreen } from '@/composables/useHandleScreen'
import { useModuleStatistics } from '@/composables/useStatistics'

import Map from '@/components/Map/Map.vue'
const Logout = defineAsyncComponent(() => import('@/base/Logout/Logout.vue'))
const AutoBackNotification = defineAsyncComponent(() => import('@/base/AutoBackNotification/AutoBackNotification.vue'))

const MAX_NUMBER = 10

const logout = ref(false)
const totalClickNum = ref(0)
const router = useRouter()
const route = useRoute()

//点击商场logo 达到最大次数显示退出框
function handleTotalClickLogo() {
  totalClickNum.value++
  nextTick(() => {
    if (totalClickNum.value >= MAX_NUMBER) {
      logout.value = true
      totalClickNum.value = 0
    }
  })
}

function bingo() {
  send('startexplorer')
}

//指定时间返回首页时做的操作
async function handleScreen() {
  logout.value = false
  totalClickNum.value = 0
  useModuleStatistics('屏保')
  await router.push('/transfer')
}

const { send, title, countDownGif, checkHandleScreen, isWall, countDownToWall, countDownNum } = useHandleScreen(handleScreen)

onMounted(() => {
  setInterval(() => {
    send(`type:online`)
  }, 30000)
})

watch(route, to => {
  if (to.fullPath === '/guide' || to.fullPath === '/nav') {
    window?.Map_QM?.startRender()
  } else {
    window?.Map_QM?.cancelRender()
  }
})
</script>

<style lang="scss">
body,
html,
#app {
  height: 100%;
  width: 100%;
}
</style>