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

src/components/MaskLayer.vue

@@ -1,5 +1,17 @@
 <template>
-  <div v-show="maskLayerShow" class="mask-layer" @touchmove.prevent @wheel.prevent>
+  <div
+    v-show="maskLayerShow"
+    class="mask-layer"
+    @click.stop
+    @mousedown.stop
+    @mouseup.stop
+    @pointerdown.stop
+    @pointerup.stop
+    @touchstart.stop
+    @touchend.stop
+    @touchmove.prevent
+    @wheel.prevent
+  >
     <div class="mask-layer__content" @touchmove.stop>
       <slot></slot>
     </div>
@@ -110,7 +122,7 @@ onUnmounted(() => {
   background-color: #00000080;
   position: fixed;
   inset: 0;
-  z-index: 10000;
+  z-index: 10000 !important;
   overflow: hidden;
   touch-action: none;
   overscroll-behavior: none;

src/views/Activities/GulbenFestival/index.vue

@@ -17,6 +17,10 @@
       <!-- 页面主背景：背景图内包含活动标题和顶部视觉信息 -->
       <BackgroundLayer :backgroundImages="[imageUrl('bg')]" />
 
+      <button v-show="!pageBackHidden" class="activity-back-btn" @click="handlePageBack">
+        <img v-smart-img class="flipImg" :src="backIcon" alt="" />
+      </button>
+
       <main
         style="
           position: relative;
@@ -1442,7 +1446,7 @@
       </itemCenter>
 
       <!-- 弹窗：点击遮罩关闭，规则、中奖历史和抽卡结果共用 MaskLayer -->
-      <MaskLayer :maskLayerShow="maskLayerShow">
+      <MaskLayer :maskLayerShow="maskLayerShow" @click="closePopup">
         <div
           style="
             min-height: 100%;
@@ -1857,7 +1861,7 @@ import { useLangStore } from '@/stores/lang'
 import { getWebpUrl } from '@/config/imagePaths.js'
 import { preloadImages, preloadImagesIdle } from '@/utils/image/imagePreloader.js'
 import { showError } from '@/utils/toast.js'
-import { viewUserInfo } from '@/utils/appBridge.js'
+import { closePage, viewUserInfo } from '@/utils/appBridge.js'
 import { connectToApp } from '@/utils/appConnector.js'
 import { handleAvatarImageError, handleRewardImageError } from '@/utils/image/imageHandler.js'
 import { formatRewardDisplay } from '@/utils/rewardFormatter.js'
@@ -1887,6 +1891,7 @@ import { pageConfig } from './page.config.js'
 const { t, locale } = useI18n()
 const langStore = useLangStore()
 const coinIcon = new URL('../../../assets/icon/Azizi/coin.png', import.meta.url).href
+const backIcon = new URL('../../../assets/icon/Azizi/arrowBack.png', import.meta.url).href
 
 const gulbenActivityId = '1001'
 const templateId = ref(pageConfig.activity.templateId || '2057676469390872578')
@@ -2318,6 +2323,12 @@ const cardDrawTicketCount = computed(() => getTicketRemainingCount('CARD'))
 const maskLayerShow = computed(
   () => ruleShow.value || historyShow.value || cardDrawResultShow.value,
 )
+const pageBackHidden = computed(() => maskLayerShow.value || cardDrawAnimationShow.value)
+
+const handlePageBack = () => {
+  if (pageBackHidden.value) return
+  closePage()
+}
 
 const activeRankingLoadKey = computed(() => {
   if (isRoomRankingSection.value) {
@@ -3640,6 +3651,41 @@ onUnmounted(() => {
   -ms-overflow-style: none;
 }
 
+.activity-back-btn {
+  position: fixed;
+  z-index: 9999;
+  top: calc(env(safe-area-inset-top, 0px) + 30px);
+  left: 4vw;
+  width: 12vw;
+  height: 12vw;
+  padding: 1.8vw;
+  border: none;
+  background: transparent;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: transform 0.2s ease;
+}
+
+.activity-back-btn:active {
+  transform: scale(0.9);
+}
+
+.activity-back-btn img {
+  width: 100%;
+  aspect-ratio: 1 / 1;
+  display: block;
+}
+
+[dir='rtl'] .activity-back-btn {
+  left: auto;
+  right: 4vw;
+}
+
+[dir='rtl'] .flipImg {
+  transform: scaleX(-1);
+}
+
 @media screen and (max-width: 360px) {
   * {
     font-size: 10px;

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

@@ -1451,7 +1451,7 @@
       </itemCenter>
 
       <!-- 弹窗遮罩层 -->
-      <maskLayer :maskLayerShow="maskLayerShow">
+      <maskLayer :maskLayerShow="maskLayerShow" @click="closedPopup">
         <div
           style="
             width: 100%;

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

@@ -17,7 +17,7 @@
       />
 
       <!-- 页面内容 -->
-      <button class="activity-back-btn" @click="handlePageBack">
+      <button v-show="!maskLayerShow" class="activity-back-btn" @click="handlePageBack">
         <img v-smart-img class="flipImg" :src="backIcon" alt="" />
       </button>
 
@@ -1455,7 +1455,7 @@
       </itemCenter>
 
       <!-- 弹窗遮罩层 -->
-      <maskLayer class="activity-popup-mask" :maskLayerShow="maskLayerShow">
+      <maskLayer class="activity-popup-mask" :maskLayerShow="maskLayerShow" @click="closedPopup">
         <div
           style="
             width: 100%;
@@ -1708,6 +1708,7 @@ const isLoading = ref(true) // 预加载状态
 // 获取OSS图片URL的函数
 // const imageUrl = (filename) => getPngUrl('Activities/LuckyDollars/Season5/', filename)
 const handlePageBack = () => {
+  if (maskLayerShow.value) return
   console.log('home back')
   closePage()
 }
@@ -2797,7 +2798,7 @@ onUnmounted(() => {
 }
 
 .activity-popup-mask {
-  z-index: 10000;
+  z-index: 10000 !important;
 }
 
 [dir='rtl'] .activity-back-btn {

src/views/Ranking/Couple/index.vue

@@ -23,7 +23,7 @@
       />
 
       <!-- 页面内容 -->
-      <button class="couple-back-btn" @click="handlePageBack">
+      <button v-show="!maskLayerShow" class="couple-back-btn" @click="handlePageBack">
         <img v-smart-img class="flipImg" :src="backIcon" alt="" />
       </button>
 
@@ -1588,6 +1588,7 @@ const currentSeasonTop1 = computed(() => {
 })
 
 const handlePageBack = () => {
+  if (maskLayerShow.value) return
   console.log('home back')
   closePage()
 }
@@ -2180,7 +2181,7 @@ onUnmounted(() => {
 }
 
 .couple-popup-mask {
-  z-index: 10000;
+  z-index: 10000 !important;
 }
 
 [dir='rtl'] .flipImg {

src/views/Ranking/GamesKing/index.vue

@@ -32,7 +32,7 @@
         <!-- 状态栏占位区域（仅在APP中显示） -->
         <div style="height: 30px"></div>
 
-        <button class="ranking-back-btn" @click="handlePageBack">
+        <button v-show="!maskLayerShow" class="ranking-back-btn" @click="handlePageBack">
           <img v-smart-img class="flipImg" :src="backIcon" alt="" />
         </button>
 
@@ -1050,6 +1050,7 @@ const maskLayerShow = computed(() => {
 })
 
 const handlePageBack = () => {
+  if (maskLayerShow.value) return
   console.log('home back')
   closePage()
 }
@@ -1538,7 +1539,7 @@ onUnmounted(() => {
 }
 
 .ranking-popup-mask {
-  z-index: 10000;
+  z-index: 10000 !important;
 }
 
 [dir='rtl'] .ranking-back-btn {

src/views/Ranking/KingAndQueen/TopList.vue

@@ -15,7 +15,7 @@
         <!-- 状态栏占位区域（仅在APP中显示） -->
         <div style="height: 30px"></div>
 
-        <button class="ranking-back-btn" @click="handlePageBack">
+        <button v-show="!maskLayerShow" class="ranking-back-btn" @click="handlePageBack">
           <img v-smart-img class="flipImg" :src="backIcon" alt="" />
         </button>
 
@@ -827,6 +827,7 @@ const getImgName = (filename) => {
 
 // 使用工具函数连接APP
 const handlePageBack = () => {
+  if (maskLayerShow.value) return
   console.log('home back')
   closePage()
 }
@@ -1238,7 +1239,7 @@ onUnmounted(() => {
 }
 
 .ranking-popup-mask {
-  z-index: 10000;
+  z-index: 10000 !important;
 }
 
 [dir='rtl'] .ranking-back-btn {

src/views/Ranking/WeeklyStar/WeeklyStar.vue

@@ -15,7 +15,7 @@
         <!-- 状态栏占位区域 -->
         <div style="height: 30px"></div>
 
-        <button class="ranking-back-btn" @click="handlePageBack">
+        <button v-show="!maskLayerShow" class="ranking-back-btn" @click="handlePageBack">
           <img v-smart-img class="flipImg" :src="backIcon" alt="" />
         </button>
 
@@ -895,6 +895,7 @@ const getImgName = (filename) => {
 
 // 使用工具函数连接APP
 const handlePageBack = () => {
+  if (maskLayerShow.value) return
   console.log('home back')
   closePage()
 }
@@ -1341,7 +1342,7 @@ onUnmounted(() => {
 }
 
 .ranking-popup-mask {
-  z-index: 10000;
+  z-index: 10000 !important;
 }
 
 [dir='rtl'] .ranking-back-btn {