hy/aslan-h5
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
hzj 2026-05-29 17:19:28 +08:00
parent 0198e72d1d
commit e4d5d93cfd
6 changed files with 91 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/views/Activities/GulbenFestival/index.vue
View File

@ -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;

31
src/views/Activities/LuckyDollars/Season5/index.vue
View File

@ -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;

28
src/views/Ranking/Couple/index.vue
View File

@ -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);
}

2
src/views/Ranking/GamesKing/index.vue
View File

@ -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;

19
src/views/Ranking/KingAndQueen/TopList.vue
View File

@ -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;

17
src/views/Ranking/WeeklyStar/WeeklyStar.vue
View File

@ -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;