feat(游戏王页面): 新增每日弹窗

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,
+})

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')"
           />
         </div>
 
@@ -677,20 +677,46 @@
         </itemCenter>
 
         <!-- 弹窗遮罩层 -->
-        <maskLayer :maskLayerShow="maskLayerShow" @click="maskLayerShow = false">
-          <!-- help弹窗 -->
-          <div style="margin: 10vh 0 5vh" @click.stop>
-            <itemCenter
-              :imgUrl="imageUrl(getImgName('helpBg'))"
-              :contentStyle="`inset: 15% 8% 3%;overflow-y: auto;display:block;`"
-            >
-              <img
-                v-smart-img
-                :src="imageUrl(getImgName('helpInfo'))"
-                alt=""
-                style="display: block; width: 100%; object-fit: cover; margin-bottom: 6vw"
-              />
-            </itemCenter>
+        <maskLayer :maskLayerShow="maskLayerShow" @click="closedPopup">
+          <!-- 居中弹窗 -->
+          <div
+            style="
+              width: 100vw;
+              height: 100vh;
+              display: flex;
+              justify-content: center;
+              align-items: center;
+            "
+            @click="closedPopup"
+          >
+            <!-- help弹窗 -->
+            <div v-show="helpShow" @click.stop>
+              <itemCenter
+                :imgUrl="imageUrl(getImgName('helpBg'))"
+                :contentStyle="`inset: 15% 8% 3%;overflow-y: auto;display:block;`"
+              >
+                <img
+                  v-smart-img
+                  :src="imageUrl(getImgName('helpInfo'))"
+                  alt=""
+                  style="display: block; width: 100%; object-fit: cover; margin-bottom: 6vw"
+                />
+              </itemCenter>
+            </div>
+
+            <!-- 每日弹窗 -->
+            <div v-show="dailyPopUpShow" @click.stop>
+              <itemCenter :imgUrl="imageUrl(getImgName('dailyPopUp'))">
+                <!-- 关闭按钮 -->
+                <img
+                  v-smart-img
+                  :src="imageUrl('closeBt')"
+                  alt=""
+                  style="display: block; position: absolute; width: 8vw; top: -1vw; right: 2vw"
+                  @click="closedPopup"
+                />
+              </itemCenter>
+            </div>
           </div>
         </maskLayer>
       </div>
@@ -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) //倒计时每秒更新
 })