diff --git a/src/stores/gamesKing.js b/src/stores/gamesKing.js new file mode 100644 index 0000000..6e8f6d0 --- /dev/null +++ b/src/stores/gamesKing.js @@ -0,0 +1,17 @@ +import { defineStore } from 'pinia' + +export const useGamesKingStore = defineStore('gamesKing', { + state: () => ({ + checkDate: '', // 对应几号 + checkStatus: false, // 是否已看过 + }), + + actions: { + setGamesKing(checkDate, checkStatus) { + this.checkDate = checkDate + this.checkStatus = checkStatus + }, + }, + + persist: true, +}) diff --git a/src/views/Ranking/GamesKing/index.vue b/src/views/Ranking/GamesKing/index.vue index b9fdb28..5c33cd9 100644 --- a/src/views/Ranking/GamesKing/index.vue +++ b/src/views/Ranking/GamesKing/index.vue @@ -51,7 +51,7 @@ :src="imageUrl('helpBt')" alt="" style="display: block; position: relative; width: 8vw; margin-right: 4vw" - @click="maskLayerShow = true" + @click="openPopup('help')" /> @@ -677,20 +677,46 @@ - - -
- - - + + +
+ +
+ + + +
+ + +
+ + + + +
@@ -706,6 +732,8 @@ import { useLangStore } from '@/stores/lang' import { getPngUrl, getWebpUrl } from '@/config/imagePaths.js' import { preloadImages } from '@/utils/imagePreloader.js' import { handleAvatarImageError, handleRewardImageError } from '@/utils/imageHandler.js' +import { useGamesKingStore } from '@/stores/gamesKing' +import { storeToRefs } from 'pinia' import { getThisWeekRewardsAndGifts, // 获取本周奖励和礼物 @@ -719,7 +747,7 @@ import TopUser from './components/topUser.vue' import maskLayer from '@/components/MaskLayer.vue' const isInAppEnvironment = ref(false) // 检测是否在APP环境中 -const maskLayerShow = ref(false) //帮助模块 +const gamesKingStore = useGamesKingStore() // 预加载状态 const isLoading = ref(true) @@ -739,6 +767,58 @@ const getImgName = (filename) => { return currentLangType.value === 'ar' ? `${filename}_ar` : filename } +const { + checkDate, // 对应周几 + checkStatus, // 是否已看过 +} = storeToRefs(gamesKingStore) + +const helpShow = ref(false) //帮助模块 +const dailyPopUpShow = ref(false) +const maskLayerShow = computed(() => { + return helpShow.value || dailyPopUpShow.value +}) + +// 打开弹窗 +const openPopup = (type) => { + closedPopup() //先关闭其他弹窗 + switch (type) { + case 'help': + helpShow.value = true + break + case 'dailyPopUp': + dailyPopUpShow.value = true + break + default: + break + } +} + +// 关闭弹窗 +const closedPopup = () => { + // 此时打开的是每日弹窗,设置为已看过 + if (dailyPopUpShow.value) { + checkStatus.value = true + } + + // 关闭所有弹窗 + helpShow.value = false + dailyPopUpShow.value = false +} + +// 检查今日是否已看过 +const checkShow = () => { + const now = new Date() + const dailyDate = now.getMonth() + '-' + now.getDate() + + if (dailyDate != checkDate.value) { + checkDate.value = dailyDate // 更新周几 + checkStatus.value = false // 更新今日状态 + openPopup('dailyPopUp') + } else if (!checkStatus.value) { + openPopup('dailyPopUp') + } +} + // 倒计时 const Days = ref(0) const Hours = ref(0) @@ -1033,6 +1113,8 @@ onMounted(() => { preloadOtherImages() // 预加载其他图片 isInAppEnvironment.value = isInApp() + checkShow() // 检查是否展示每日弹窗 + getCountdown() timer = setInterval(getCountdown, 1000) //倒计时每秒更新 })