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

src/views/Activities/GulbenFestival/index.vue

@@ -1446,7 +1446,7 @@
       </itemCenter>
 
       <!-- 弹窗：点击遮罩关闭，规则、中奖历史和抽卡结果共用 MaskLayer -->
-      <MaskLayer :maskLayerShow="maskLayerShow" @click="closePopup">
+      <MaskLayer :maskLayerShow="maskLayerShow">
         <div
           style="
             min-height: 100%;
@@ -1456,7 +1456,7 @@
             padding: 8vw 0;
             box-sizing: border-box;
           "
-          @click="closePopup"
+          @click.self="closePopup"
           @touchend.self.prevent="closePopup"
         >
           <!-- 规则弹窗：内容使用 ruleInfoBg 背景承载 -->
@@ -1761,7 +1761,7 @@
                   :imgUrl="imageUrl('ticketHandleBtBg')"
                   style="width: 25vw; margin: 0; padding: 0"
                   contentStyle="padding: 0; align-items: center; justify-content: center;"
-                  @click="closePopup"
+                  @click.stop.prevent="closePopup"
                   @touchend.stop.prevent="closePopup"
                 >
                   <div
@@ -1805,7 +1805,7 @@
                 :imgUrl="imageUrl('ticketHandleBtBg')"
                 style="width: 30vw; margin: 0; padding: 0"
                 contentStyle="padding: 0; align-items: center; justify-content: center;"
-                @click="closePopup"
+                @click.stop.prevent="closePopup"
                 @touchend.stop.prevent="closePopup"
               >
                 <div
@@ -2324,8 +2324,11 @@ const maskLayerShow = computed(
   () => ruleShow.value || historyShow.value || cardDrawResultShow.value,
 )
 const pageBackHidden = computed(() => maskLayerShow.value || cardDrawAnimationShow.value)
+const POPUP_CLOSE_CLICK_GUARD_MS = 400
+const lastPopupClosedAt = ref(0)
 
 const handlePageBack = () => {
+  if (Date.now() - lastPopupClosedAt.value < POPUP_CLOSE_CLICK_GUARD_MS) return
   if (pageBackHidden.value) return
   closePage()
 }
@@ -3478,6 +3481,9 @@ const openHistoryPopupRequest = async () => {
 const openHistoryPopup = useDebounce(openHistoryPopupRequest, 600, true)
 
 const closePopup = () => {
+  if (!maskLayerShow.value && !cardDrawAnimationShow.value) return
+
+  lastPopupClosedAt.value = Date.now()
   ruleShow.value = false
   historyShow.value = false
   cardDrawResultShow.value = false
@@ -3654,7 +3660,7 @@ onUnmounted(() => {
 .activity-back-btn {
   position: fixed;
   z-index: 9999;
-  top: calc(env(safe-area-inset-top, 0px) + 30px);
+  top: calc(env(safe-area-inset-top, 0px) + 12px);
   left: 4vw;
   width: 12vw;
   height: 12vw;

src/views/Activities/LuckyDollars/Season5/index.vue

@@ -1455,7 +1455,7 @@
       </itemCenter>
 
       <!-- 弹窗遮罩层 -->
-      <maskLayer class="activity-popup-mask" :maskLayerShow="maskLayerShow" @click="closedPopup">
+      <maskLayer class="activity-popup-mask" :maskLayerShow="maskLayerShow">
         <div
           style="
             width: 100%;
@@ -1464,7 +1464,7 @@
             justify-content: center;
             align-items: center;
           "
-          @click="closedPopup"
+          @click.self="closedPopup"
         >
           <!-- 抽奖结果 -->
           <div v-if="resultShow" style="position: relative; width: 90%" @click.stop>
@@ -1572,7 +1572,11 @@
               </div>
 
               <!-- 关闭弹窗按钮 -->
-              <div style="width: 30vw; height: 10vw" @click="closedPopup"></div>
+              <div
+                style="width: 30vw; height: 10vw"
+                @click.stop.prevent="closedPopup"
+                @touchend.stop.prevent="closedPopup"
+              ></div>
             </itemCenter>
           </div>
 
@@ -1631,14 +1635,22 @@
           <!-- 帮助弹窗 -->
           <div v-if="helpShow" style="position: relative; width: 90%" @click.stop>
             <itemCenter :imgUrl="webpUrl(getImgName('helpInfo'))" :contentStyle="``">
-              <div class="close-btn" @click="closedPopup"></div>
+              <div
+                class="close-btn"
+                @click.stop.prevent="closedPopup"
+                @touchend.stop.prevent="closedPopup"
+              ></div>
             </itemCenter>
           </div>
 
           <!-- 规则弹窗 -->
           <div v-if="ruleShow" style="position: relative; width: 90%" @click.stop>
             <itemCenter :imgUrl="webpUrl(getImgName('ruleInfo'))" :contentStyle="``">
-              <div class="close-btn" @click="closedPopup"></div>
+              <div
+                class="close-btn"
+                @click.stop.prevent="closedPopup"
+                @touchend.stop.prevent="closedPopup"
+              ></div>
             </itemCenter>
           </div>
         </div>
@@ -1707,7 +1719,11 @@ const isLoading = ref(true) // 预加载状态
 
 // 获取OSS图片URL的函数
 // const imageUrl = (filename) => getPngUrl('Activities/LuckyDollars/Season5/', filename)
+const POPUP_CLOSE_CLICK_GUARD_MS = 400
+const lastPopupClosedAt = ref(0)
+
 const handlePageBack = () => {
+  if (Date.now() - lastPopupClosedAt.value < POPUP_CLOSE_CLICK_GUARD_MS) return
   if (maskLayerShow.value) return
   console.log('home back')
   closePage()
@@ -2162,6 +2178,9 @@ const openPopup = (type) => {
 
 // 关闭弹窗
 const closedPopup = (clear = true) => {
+  if (!maskLayerShow.value) return
+
+  lastPopupClosedAt.value = Date.now()
   resultShow.value = false
   helpShow.value = false
   historyShow.value = false
@@ -2774,7 +2793,7 @@ onUnmounted(() => {
 .activity-back-btn {
   position: fixed;
   z-index: 9999;
-  top: calc(env(safe-area-inset-top, 0px) + 30px);
+  top: calc(env(safe-area-inset-top, 0px) + 12px);
   left: 4vw;
   width: 10vw;
   height: 10vw;

src/views/Ranking/Couple/index.vue

@@ -393,7 +393,8 @@
       </div>
 
       <!-- 弹窗遮罩层 -->
-      <maskLayer class="couple-popup-mask" :maskLayerShow="maskLayerShow" @click="closedPopup">
+      <maskLayer class="couple-popup-mask" :maskLayerShow="maskLayerShow">
+        <div class="couple-popup-content" @click.self="closedPopup">
         <!-- 我的伴侣弹窗 -->
         <div v-show="myCoupleShow" style="position: fixed; bottom: 0; width: 100%">
           <div
@@ -524,7 +525,7 @@
             justify-content: center;
             align-items: center;
           "
-          @click="closedPopup"
+          @click.self="closedPopup"
         >
           <!-- 发送情书二次确认弹窗 -->
           <div
@@ -855,7 +856,11 @@
               </div>
 
               <!-- 关闭弹窗按钮 -->
-              <div style="width: 30vw; height: 10vw" @click="closedPopup"></div>
+              <div
+                style="width: 30vw; height: 10vw"
+                @click.stop.prevent="closedPopup"
+                @touchend.stop.prevent="closedPopup"
+              ></div>
             </itemCenter>
           </div>
 
@@ -1103,7 +1108,8 @@
             <!-- 关闭按钮 -->
             <div
               style="position: absolute; top: 2vw; right: 5vw; color: #ff4668; font-size: 3em"
-              @click="closedPopup"
+              @click.stop.prevent="closedPopup"
+              @touchend.stop.prevent="closedPopup"
             >
               x
             </div>
@@ -1318,6 +1324,7 @@
             </div>
           </div>
         </div>
+        </div>
       </maskLayer>
     </div>
   </div>
@@ -1586,8 +1593,11 @@ const seasonTop1DisplayList = computed(() => {
 const currentSeasonTop1 = computed(() => {
   return seasonTop1DisplayList.value[centerIndex.value] || {}
 })
+const POPUP_CLOSE_CLICK_GUARD_MS = 400
+const lastPopupClosedAt = ref(0)
 
 const handlePageBack = () => {
+  if (Date.now() - lastPopupClosedAt.value < POPUP_CLOSE_CLICK_GUARD_MS) return
   if (maskLayerShow.value) return
   console.log('home back')
   closePage()
@@ -1830,6 +1840,9 @@ const showPopup = (type) => {
 
 // 关闭弹窗
 const closedPopup = () => {
+  if (!maskLayerShow.value) return
+
+  lastPopupClosedAt.value = Date.now()
   fragmentNotEnoughShow.value = false
   helpShow.value = false
   topRewardShow.value = false
@@ -2157,7 +2170,7 @@ onUnmounted(() => {
 .couple-back-btn {
   position: fixed;
   z-index: 30;
-  top: calc(env(safe-area-inset-top, 0px) + 30px);
+  top: calc(env(safe-area-inset-top, 0px) + 12px);
   left: 4vw;
   width: 12vw;
   height: 12vw;
@@ -2184,6 +2197,11 @@ onUnmounted(() => {
   z-index: 10000 !important;
 }
 
+.couple-popup-content {
+  width: 100%;
+  min-height: 100%;
+}
+
 [dir='rtl'] .flipImg {
   transform: scaleX(-1);
 }

src/views/Ranking/GamesKing/index.vue

@@ -1526,7 +1526,7 @@ onUnmounted(() => {
 .ranking-back-btn {
   position: fixed;
   z-index: 9999;
-  top: calc(env(safe-area-inset-top, 0px) + 30px);
+  top: calc(env(safe-area-inset-top, 0px) + 12px);
   left: 4vw;
   width: 12vw;
   height: 12vw;

src/views/Ranking/KingAndQueen/TopList.vue

@@ -353,7 +353,8 @@
       </div>
 
       <!-- 弹窗遮罩层 -->
-      <maskLayer class="ranking-popup-mask" :maskLayerShow="maskLayerShow" @click="closedPopup">
+      <maskLayer class="ranking-popup-mask" :maskLayerShow="maskLayerShow">
+        <div class="ranking-popup-content" @click.self="closedPopup">
         <!-- help弹窗 -->
         <div
           v-show="helpInfoShow"
@@ -527,7 +528,7 @@
               :src="webpUrl('cancel')"
               alt=""
               style="width: 7%; position: absolute; top: 0; right: 6%; z-index: 99"
-              @click="closedPopup"
+              @click.stop.prevent="closedPopup"
             />
             <div style="width: 100%">
               <borderImg title="Rewards">
@@ -625,6 +626,7 @@
             </div>
           </div>
         </div>
+        </div>
       </maskLayer>
 
       <!-- 我的排名占位 -->
@@ -824,9 +826,12 @@ const webpUrl = (filename) => getWebpUrl('Ranking/KingQueenWebp/', filename)
 const getImgName = (filename) => {
   return currentLangType.value === 'ar' ? `${filename}_ar` : filename
 }
+const POPUP_CLOSE_CLICK_GUARD_MS = 400
+const lastPopupClosedAt = ref(0)
 
 // 使用工具函数连接APP
 const handlePageBack = () => {
+  if (Date.now() - lastPopupClosedAt.value < POPUP_CLOSE_CLICK_GUARD_MS) return
   if (maskLayerShow.value) return
   console.log('home back')
   closePage()
@@ -1086,6 +1091,9 @@ const getUserInfo = async () => {
 
 // 关闭弹窗
 const closedPopup = () => {
+  if (!maskLayerShow.value) return
+
+  lastPopupClosedAt.value = Date.now()
   helpInfoShow.value = false
   historyShow.value = false
   rewardsShow.value = false
@@ -1215,7 +1223,7 @@ onUnmounted(() => {
 .ranking-back-btn {
   position: fixed;
   z-index: 9999;
-  top: calc(env(safe-area-inset-top, 0px) + 30px);
+  top: calc(env(safe-area-inset-top, 0px) + 12px);
   left: 4vw;
   width: 12vw;
   height: 12vw;
@@ -1242,6 +1250,11 @@ onUnmounted(() => {
   z-index: 10000 !important;
 }
 
+.ranking-popup-content {
+  width: 100%;
+  min-height: 100%;
+}
+
 [dir='rtl'] .ranking-back-btn {
   left: auto;
   right: 4vw;

src/views/Ranking/WeeklyStar/WeeklyStar.vue

@@ -578,7 +578,8 @@
         </itemCenter>
 
         <!-- 弹窗遮罩层 -->
-        <maskLayer class="ranking-popup-mask" :maskLayerShow="maskLayerShow" @click="closedPopup">
+        <maskLayer class="ranking-popup-mask" :maskLayerShow="maskLayerShow">
+          <div class="ranking-popup-content" @click.self="closedPopup">
           <!-- help弹窗 -->
           <div v-show="helpInfoShow" style="margin: 20% 0" @click.stop>
             <img v-smart-img :src="webpUrl(getImgName('helpInfo'))" alt="" style="width: 100%" />
@@ -842,6 +843,7 @@
               />
             </div>
           </div>
+          </div>
         </maskLayer>
       </div>
     </div>
@@ -892,9 +894,12 @@ const webpUrl = (filename) => getWebpUrl('Ranking/WeeklyStarWebp/', filename)
 const getImgName = (filename) => {
   return currentLangType.value === 'ar' ? `${filename}_ar` : filename
 }
+const POPUP_CLOSE_CLICK_GUARD_MS = 400
+const lastPopupClosedAt = ref(0)
 
 // 使用工具函数连接APP
 const handlePageBack = () => {
+  if (Date.now() - lastPopupClosedAt.value < POPUP_CLOSE_CLICK_GUARD_MS) return
   if (maskLayerShow.value) return
   console.log('home back')
   closePage()
@@ -1015,6 +1020,9 @@ const exchangeSelectedGood = async (propsGroupId) => {
 
 // 关闭弹窗
 const closedPopup = () => {
+  if (!maskLayerShow.value) return
+
+  lastPopupClosedAt.value = Date.now()
   helpInfoShow.value = false
   historyShow.value = false
   giftsShow.value = false
@@ -1318,7 +1326,7 @@ onUnmounted(() => {
 .ranking-back-btn {
   position: fixed;
   z-index: 9999;
-  top: calc(env(safe-area-inset-top, 0px) + 30px);
+  top: calc(env(safe-area-inset-top, 0px) + 12px);
   left: 4vw;
   width: 12vw;
   height: 12vw;
@@ -1345,6 +1353,11 @@ onUnmounted(() => {
   z-index: 10000 !important;
 }
 
+.ranking-popup-content {
+  width: 100%;
+  min-height: 100%;
+}
+
 [dir='rtl'] .ranking-back-btn {
   left: auto;
   right: 4vw;