137 lines
4.5 KiB
Vue
137 lines
4.5 KiB
Vue
<template>
|
||
<div class="main_wrapper">
|
||
<div class="main_content">
|
||
<router-view v-slot="{ Component }">
|
||
<keep-alive :include="mainViewKeep">
|
||
<component :is="Component" />
|
||
</keep-alive>
|
||
</router-view>
|
||
</div>
|
||
<!-- 右侧导航抽屉 -->
|
||
<Drawer elType="home" />
|
||
<Drawer elType="darkNet" />
|
||
<AccountCredentialsPopup v-if="isMine" />
|
||
<TabBar />
|
||
<PaymentGuidePopup
|
||
:show="vipContentGuideVisible"
|
||
:guide="vipContentGuide"
|
||
:scene="vipContentGuideScene"
|
||
@close="closeVipContentGuide"
|
||
/>
|
||
<!-- 启动广告弹窗链：九宫格 → 弹窗广告 → APP公告。
|
||
挂在这里跟着启动落地页弹，不依赖首页被构建（落在哪个 tab 都会弹）；
|
||
每次启动只弹一次，逐个关闭后再弹下一个 -->
|
||
<NineGridPopup v-if="launchAdPopupKey === 'nineGrid'" :is-open="true" @close="showNextLaunchAd" />
|
||
<HomePopupAdv
|
||
v-else-if="launchAdPopupKey === 'homeAdv'"
|
||
:advList="launchAdData.advList"
|
||
@close="showNextLaunchAd"
|
||
/>
|
||
<AnnouncementPopup
|
||
v-else-if="launchAdPopupKey === 'announcement'"
|
||
:announList="launchAdData.announList"
|
||
@close="showNextLaunchAd"
|
||
/>
|
||
</div>
|
||
</template>
|
||
<script lang="ts">
|
||
export default {
|
||
name: 'mainView',
|
||
};
|
||
</script>
|
||
<script lang="ts" setup>
|
||
import { useGlobalStore } from '@/stores/global';
|
||
import { useConfigStore } from '@/stores/config';
|
||
import { computed } from 'vue';
|
||
import { useRoute } from 'vue-router';
|
||
import PaymentGuidePopup from '@/components/PaymentGuidePopup/index.vue';
|
||
import NineGridPopup from '@/components/NineGridPopup/index.vue';
|
||
import HomePopupAdv from '@/components/HomePopupAdv/index.vue';
|
||
import AnnouncementPopup from '@/components/AnnouncementPopup/index.vue';
|
||
import { useVipContentUpdateGuideOnMainTabs } from '@/hooks/useVipContentUpdateGuideOnMainTabs';
|
||
import { AdType } from '@/enums/app';
|
||
import { getAdItem } from '@/utils/getConfig';
|
||
import { launchAdPopupKey, type LaunchAdPopupKey } from '@/utils/launchAdPopup';
|
||
|
||
const route = useRoute();
|
||
const globalStore = useGlobalStore();
|
||
const configStore = useConfigStore();
|
||
|
||
/** 启动广告数据：链上每个弹窗各取各的配置，没配的环节直接跳过 */
|
||
const launchAdData = {
|
||
nineGridList: <Array<Types.App.AdsInfoListItem>>[],
|
||
advList: <Array<Types.App.AdsInfoListItem>>[],
|
||
announList: <Array<Types.App.AnnounListItem>>[],
|
||
};
|
||
|
||
/**
|
||
* 弹窗顺序与安卓一致：九宫格 → 弹窗广告 → APP公告。
|
||
* markShown 用 store 里的「第一次」标记（sessionStorage），保证 MainView 重新挂载也不会重弹
|
||
*/
|
||
const launchAdChain: { key: LaunchAdPopupKey; ready: () => boolean; markShown: () => void }[] = [
|
||
{
|
||
key: 'nineGrid',
|
||
ready: () => !globalStore.nineGridFirst && launchAdData.nineGridList.length > 0,
|
||
markShown: () => globalStore.setNineGridFirst(),
|
||
},
|
||
{
|
||
key: 'homeAdv',
|
||
ready: () => !globalStore.homeAdvFirst && launchAdData.advList.length > 0,
|
||
markShown: () => globalStore.setHomeAdvFirst(),
|
||
},
|
||
{
|
||
key: 'announcement',
|
||
ready: () => !globalStore.announcementFirst && launchAdData.announList.length > 0,
|
||
markShown: () => globalStore.setAnnouncementFirst(),
|
||
},
|
||
];
|
||
|
||
/** 弹下一个：标记已弹再展示，关闭回调复用本方法，链走完置空 */
|
||
const showNextLaunchAd = () => {
|
||
const step = launchAdChain.find((item) => item.ready());
|
||
if (!step) {
|
||
launchAdPopupKey.value = '';
|
||
return;
|
||
}
|
||
step.markShown();
|
||
launchAdPopupKey.value = step.key;
|
||
};
|
||
|
||
const initLaunchAdChain = () => {
|
||
launchAdData.nineGridList = getAdItem(AdType.QualityApplication) || [];
|
||
launchAdData.advList = getAdItem(AdType.HOMEPOPUPADV) || [];
|
||
const announList = configStore.appConfig.announList;
|
||
launchAdData.announList = announList?.length ? JSON.parse(JSON.stringify(announList)) : [];
|
||
showNextLaunchAd();
|
||
};
|
||
initLaunchAdChain();
|
||
const {
|
||
visible: vipContentGuideVisible,
|
||
guide: vipContentGuide,
|
||
scene: vipContentGuideScene,
|
||
closeGuide: closeVipContentGuide,
|
||
} = useVipContentUpdateGuideOnMainTabs();
|
||
const mainViewKeep = computed(() => {
|
||
return globalStore.$state.mainViewKeep;
|
||
});
|
||
const backgroundTheme = computed(() => {
|
||
return configStore.appConfig.backgroundTheme;
|
||
});
|
||
const isMine = computed(() => {
|
||
let path = route.path;
|
||
if (path.indexOf('mine') > 0) {
|
||
return true;
|
||
}
|
||
return false;
|
||
});
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.main_wrapper {
|
||
height: 100%;
|
||
.main_content {
|
||
height: $contentHeight;
|
||
position: relative;
|
||
}
|
||
}
|
||
</style>
|