You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
109 lines
3.8 KiB
109 lines
3.8 KiB
<template>
|
|
<div class="box" @click="addTotalClick"></div>
|
|
<!-- 地图容器 -->
|
|
<Map v-show="$route.meta.showMap" @handle-GO="handleGO" @handle-Detail="handleDetail" />
|
|
|
|
<!-- 退出弹框 -->
|
|
<Logout v-model="logoutRef" @bingo="send('startexplorer')" />
|
|
|
|
<!-- 倒计时返回首页提示 -->
|
|
<AutoBackNotification v-if="countDownGif" :title="title" :delay="isWall ? countDownToWall : countDownNum" />
|
|
<Teleport to="body">
|
|
<Transition enter-active-class="animate__animated animate__fadeIn" leave-active-class="animate__animated animate__fadeOut">
|
|
<BrandDetail v-if="showDetail" />
|
|
</Transition>
|
|
</Teleport>
|
|
|
|
<Transition enter-active-class="animate__animated animate__fadeIn" leave-active-class="animate__animated animate__fadeOut">
|
|
<Search v-if="showSearch" />
|
|
</Transition>
|
|
<Temperature />
|
|
<Time />
|
|
<SearchBar v-if="$route.path !== '/billboard'" />
|
|
<Tabs />
|
|
</template>
|
|
|
|
<script setup>
|
|
import { defineAsyncComponent, watch, onMounted, ref, onBeforeUnmount } from 'vue'
|
|
import { storeToRefs } from 'pinia'
|
|
import { useStore } from '@/store/root'
|
|
import { useRouter, useRoute } from 'vue-router'
|
|
import { useHandleScreen } from '@/composables/useHandleScreen'
|
|
import { useLogout } from '@/composables/useLogout'
|
|
import { useInitMap } from '@/composables/useInitMap'
|
|
import Map from '@/components/Map/Map.vue'
|
|
const Logout = defineAsyncComponent(() => import('@/base/Logout/Logout.vue'))
|
|
const AutoBackNotification = defineAsyncComponent(() => import('@/base/AutoBackNotification/AutoBackNotification.vue'))
|
|
const BrandDetail = defineAsyncComponent(() => import('@/components/BrandDetail/BrandDetail.vue'))
|
|
const Search = defineAsyncComponent(() => import('@/components/Search/Search.vue'))
|
|
const Temperature = defineAsyncComponent(() => import('@/base/Temperature/Temperature.vue'))
|
|
const Time = defineAsyncComponent(() => import('@/base/Time/Time.vue'))
|
|
const SearchBar = defineAsyncComponent(() => import('./SearchBar.vue'))
|
|
const Tabs = defineAsyncComponent(() => import('./Tabs.vue'))
|
|
|
|
const router = useRouter()
|
|
const route = useRoute()
|
|
const store = useStore()
|
|
const { shop, showDetail, showSearch, sidebarList, language, showVoice } = storeToRefs(store)
|
|
|
|
const { logoutRef, resetClickNumber, setLogoutRef, addTotalClick } = useLogout()
|
|
const { title, countDownGif, isWall, countDownToWall, countDownNum, send, checkHandleScreen } = useHandleScreen(handleScreen)
|
|
|
|
function handleGO() {
|
|
router.push('/nav')
|
|
}
|
|
function handleDetail() {
|
|
store.SET_SHOW_DETAIL(true)
|
|
}
|
|
|
|
//指定时间返回首页时做的操作
|
|
async function handleScreen() {
|
|
window.Map_QM.changeMapIPState(shop.value?.houseNum, shop.value?.formatColor)
|
|
setLogoutRef(false)
|
|
resetClickNumber()
|
|
store.SET_SELECTED_MODULE(sidebarList.value[0].title)
|
|
showDetail.value && store.SET_SHOW_DETAIL(false)
|
|
showSearch.value && store.SET_SHOW_SEARCH(false)
|
|
showVoice.value && store.SET_SHOW_VOICE(false)
|
|
language.value !== 'zh' && store.SET_LANGUAGE('zh')
|
|
await router.push('/billboard')
|
|
}
|
|
|
|
const timer = ref(null)
|
|
onMounted(() => {
|
|
!window.Map_QM && useInitMap()
|
|
timer.value = setInterval(() => {
|
|
send(`type:online`)
|
|
}, 30000)
|
|
|
|
store.SET_CURRENT_THEME('business')
|
|
// let i = 0
|
|
// setInterval(() => {
|
|
// i++
|
|
// store.SET_CURRENT_THEME(['main', 'fashion', 'highend'][i % 3])
|
|
// }, 5000)
|
|
window.addEventListener('touchend', checkHandleScreen)
|
|
})
|
|
onBeforeUnmount(() => {
|
|
clearInterval(timer.value)
|
|
window.removeEventListener('touchend', checkHandleScreen)
|
|
})
|
|
|
|
watch(route, to => {
|
|
if (to.fullPath === '/guide' || to.fullPath === '/nav' || to.fullPath === '/billboard') {
|
|
window?.Map_QM?.startRender()
|
|
} else {
|
|
window?.Map_QM?.cancelRender()
|
|
}
|
|
})
|
|
</script>
|
|
<style>
|
|
.box {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 200px;
|
|
height: 200px;
|
|
z-index: 100;
|
|
}
|
|
</style>
|
|
|