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.
108 lines
3.3 KiB
108 lines
3.3 KiB
<template>
|
|
<div class="box" @click="addTotalClick"></div>
|
|
<!-- 地图容器 -->
|
|
<Map v-show="$route.meta.showMap" @handle-GO="handleGO" @handle-Detail="handleDetail"></Map>
|
|
|
|
<!-- 倒计时返回首页提示 -->
|
|
<AutoBackNotification v-if="countDownGif" :title="title" :delay="isWall ? countDownToWall : countDownNum" />
|
|
|
|
<Transition enter-active-class="animate__animated animate__fadeIn" leave-active-class="animate__animated animate__fadeOut">
|
|
<Search v-if="showSearch" />
|
|
</Transition>
|
|
<Temperature />
|
|
|
|
<SearchBar v-if="path !== '/billboard'" />
|
|
<img v-if="config.projectLogo && config.projectLogo.length" :src="'./static/offline' + config.projectLogo[0]" class="mall-logo" alt="" srcset="" />
|
|
<Tabs />
|
|
</template>
|
|
|
|
<script setup>
|
|
import { defineAsyncComponent, watch, onMounted, ref, onBeforeUnmount } from 'vue'
|
|
import { storeToRefs } from 'pinia'
|
|
import { useStore } from '@/store/root'
|
|
import { useRouter } 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 AutoBackNotification = defineAsyncComponent(() => import('@/base/AutoBackNotification/AutoBackNotification.vue'))
|
|
const Search = defineAsyncComponent(() => import('@/components/Search/Search.vue'))
|
|
const Temperature = defineAsyncComponent(() => import('@/base/Temperature/Temperature.vue'))
|
|
const SearchBar = defineAsyncComponent(() => import('./SearchBar.vue'))
|
|
const Tabs = defineAsyncComponent(() => import('./Tabs.vue'))
|
|
|
|
const router = useRouter()
|
|
const store = useStore()
|
|
const { shop, showSearch, language, path, config } = storeToRefs(store)
|
|
|
|
const { resetClickNumber, setLogoutRef, addTotalClick } = useLogout()
|
|
|
|
const screenSaveCallback = () => {
|
|
window.Map_QM.changeMapIPState(shop.value?.houseNum, shop.value?.formatColor)
|
|
setLogoutRef(false)
|
|
resetClickNumber()
|
|
showSearch.value && store.SET_SHOW_SEARCH(false)
|
|
language.value !== 'zh' && store.SET_LANGUAGE('zh')
|
|
router.push('/billboard')
|
|
}
|
|
|
|
const { title, countDownGif, isWall, countDownToWall, countDownNum, checkHandleScreen } = useHandleScreen(handleScreen, screenSaveCallback)
|
|
|
|
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()
|
|
showSearch.value && store.SET_SHOW_SEARCH(false)
|
|
language.value !== 'zh' && store.SET_LANGUAGE('zh')
|
|
await router.push('/index')
|
|
}
|
|
|
|
const timer = ref(null)
|
|
onMounted(() => {
|
|
!window.Map_QM && useInitMap()
|
|
|
|
window.addEventListener('touchend', checkHandleScreen)
|
|
})
|
|
onBeforeUnmount(() => {
|
|
clearInterval(timer.value)
|
|
window.removeEventListener('touchend', checkHandleScreen)
|
|
})
|
|
|
|
watch(path, nxtPath => {
|
|
if (nxtPath === '/guide' || nxtPath === '/nav' || nxtPath === '/billboard') {
|
|
window?.Map_QM?.startRender()
|
|
} else {
|
|
window?.Map_QM?.cancelRender()
|
|
}
|
|
})
|
|
</script>
|
|
<style>
|
|
.mall-logo {
|
|
position: absolute;
|
|
height: 110px;
|
|
left: 68px;
|
|
bottom: 66px;
|
|
}
|
|
@media (min-aspect-ratio: 1/1) {
|
|
.mall-logo {
|
|
top: 32px;
|
|
left: 68px;
|
|
}
|
|
}
|
|
.box {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 200px;
|
|
height: 200px;
|
|
z-index: 100;
|
|
}
|
|
</style>
|
|
|