feat(遮罩层弹窗): 针对遮罩层弹窗和页面返回键层级冲突的问题进行处理

src/views/Ranking/GamesKing/index.vue

@@ -906,7 +906,7 @@
         </itemCenter>
 
         <!-- 弹窗遮罩层 -->
-        <maskLayer class="ranking-popup-mask" :maskLayerShow="maskLayerShow" @click="closedPopup">
+        <maskLayer class="ranking-popup-mask" :maskLayerShow="maskLayerShow">
           <!-- 居中弹窗 -->
           <div
             style="
@@ -916,7 +916,7 @@
               justify-content: center;
               align-items: center;
             "
-            @click="closedPopup"
+            @click.self="closedPopup"
           >
             <!-- help弹窗 -->
             <div v-show="helpShow" @click.stop>
@@ -957,8 +957,8 @@
                     user-select: none;
                     touch-action: manipulation;
                   "
-                  @click="closedPopup"
+                  @click.stop.prevent="closedPopup"
-                  @touchend="closedPopup"
+                  @touchend.stop.prevent="closedPopup"
                 >
                   <img
                     v-smart-img
@@ -1051,8 +1051,13 @@ const maskLayerShow = computed(() => {
 const pageBackHidden = computed(() => {
   return maskLayerShow.value || !checkStatus.value
 })
+const POPUP_CLOSE_CLICK_GUARD_MS = 400
+const lastPopupClosedAt = ref(0)
 
 const handlePageBack = () => {
+  console.log('点击退出页面')
+
+  if (Date.now() - lastPopupClosedAt.value < POPUP_CLOSE_CLICK_GUARD_MS) return
   if (pageBackHidden.value) return
   console.log('home back')
   closePage()
@@ -1075,6 +1080,9 @@ const openPopup = (type) => {
 
 // 关闭弹窗
 const closedPopup = () => {
+  if (!maskLayerShow.value) return
+
+  lastPopupClosedAt.value = Date.now()
   console.log('点击关闭弹窗')
 
   // 此时打开的是每日弹窗，设置为已看过