实现全局点击拦截,未登录时任何点击都弹出提示框
功能实现: 1. 全局点击监听 - 在App.vue的template最外层view添加@click事件 - 监听所有点击操作 - 未登录时立即弹出提示框 2. 智能拦截机制 - 检查登录状态:使用authCheck.isLoggedIn() - 防止重复弹窗:使用isCheckingClick标志 - 授权窗口打开时不拦截:检查showAuthModal状态 3. 用户交互流程 - 用户点击屏幕任何位置 - 未登录状态立即弹出"未登录"提示框 - 提示框内容:"请先登录后再使用" - 点击"去登录":显示授权窗口 - 点击"取消":关闭提示框 4. 优化体验 - 已登录用户不受影响 - 授权窗口打开时不重复拦截 - 防止连续点击导致多次弹窗 特点: - 全局统一拦截 - 即时响应 - 用户友好 - 无需在每个页面单独处理
This commit is contained in:
1 parent
ea7752f554
commit
832f282ff9
1 file changed
+29
-9
@@ -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;
|
||||
|
||||
Reference in new issue
Block a user