实现全局点击拦截,未登录时任何点击都弹出提示框

功能实现:
1. 全局点击监听
   - 在App.vue的template最外层view添加@click事件
   - 监听所有点击操作
   - 未登录时立即弹出提示框

2. 智能拦截机制
   - 检查登录状态:使用authCheck.isLoggedIn()
   - 防止重复弹窗:使用isCheckingClick标志
   - 授权窗口打开时不拦截:检查showAuthModal状态

3. 用户交互流程
   - 用户点击屏幕任何位置
   - 未登录状态立即弹出"未登录"提示框
   - 提示框内容:"请先登录后再使用"
   - 点击"去登录":显示授权窗口
   - 点击"取消":关闭提示框

4. 优化体验
   - 已登录用户不受影响
   - 授权窗口打开时不重复拦截
   - 防止连续点击导致多次弹窗

特点:
- 全局统一拦截
- 即时响应
- 用户友好
- 无需在每个页面单独处理
This commit is contained in:
H1d3rOne committed 2026-03-09 22:01:35 +08:00
1 parent ea7752f554
commit 832f282ff9
1 file changed
+29 -9
+29 -9
View File
@@ -1,5 +1,6 @@
<script>
import AuthModal from '@/components/auth-modal/auth-modal.vue'
import authCheck from '@/utils/authCheck.js'
export default {
components: {
@@ -7,7 +8,8 @@ export default {
},
data() {
return {
showAuthModal: false
showAuthModal: false,
isCheckingClick: false
}
},
onLaunch: function() {
@@ -40,6 +42,31 @@ export default {
uni.$off('hideAuthModal')
},
handleGlobalClick(e) {
if (this.showAuthModal) return
if (this.isCheckingClick) return
if (!authCheck.isLoggedIn()) {
this.isCheckingClick = true
uni.showModal({
title: '未登录',
content: '请先登录后再使用',
confirmText: '去登录',
cancelText: '取消',
success: (res) => {
this.isCheckingClick = false
if (res.confirm) {
this.showAuthModal = true
}
},
fail: () => {
this.isCheckingClick = false
}
})
}
},
checkUserAuth() {
const userInfo = uni.getStorageSync('userInfo')
const hasShownAuth = uni.getStorageSync('hasShownAuth')
@@ -98,7 +125,7 @@ export default {
</script>
<template>
<view>
<view @click="handleGlobalClick">
<router-view />
<auth-modal
:visible="showAuthModal"
@@ -111,7 +138,6 @@ export default {
</template>
<style>
/* 全局样式 */
page {
background-color: #f5f5f5;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
@@ -121,7 +147,6 @@ page {
padding: 20rpx;
}
/* 主题色 */
.text-primary {
color: #4A90D9;
}
@@ -130,7 +155,6 @@ page {
background-color: #4A90D9;
}
/* 卡片样式 */
.card {
background-color: #ffffff;
border-radius: 16rpx;
@@ -139,7 +163,6 @@ page {
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}
/* 按钮样式 */
.btn-primary {
background-color: #4A90D9;
color: #ffffff;
@@ -153,7 +176,6 @@ page {
background-color: #3a7bc8;
}
/* 表单样式 */
.form-item {
display: flex;
align-items: center;
@@ -178,14 +200,12 @@ page {
color: #333;
}
/* 分隔线 */
.divider {
height: 1rpx;
background-color: #eee;
margin: 20rpx 0;
}
/* 标题样式 */
.section-title {
font-size: 32rpx;
font-weight: bold;