优化授权窗口样式和实现全局未登录拦截

问题:
1. 授权窗口只占屏幕一半,显示不够突出
2. 取消登录后点击功能模块没有弹出未登录提示

解决方案:
1. 优化授权窗口样式
   - 高度从auto改为70vh,占据屏幕70%
   - 使用flex布局,内容垂直居中
   - 增加header和content的padding
   - 整体更加美观和突出

2. 实现全局未登录拦截
   - 在首页index.vue中导入authCheck工具
   - 所有功能模块的点击方法添加登录检查
   - 未登录时弹出"未登录,无法使用"提示
   - 提示框包含"去登录"按钮
   - 点击"去登录"触发授权流程

改进:
- 授权窗口更加醒目
- 未登录用户无法使用功能
- 引导用户完成登录
- 提升用户体验
This commit is contained in:
H1d3rOne committed 2026-03-09 21:43:33 +08:00
1 parent a537fc0b23
commit 6790df0f72
2 files changed
+19 -2

No files matched your search

@@ -220,12 +220,15 @@ export default {
.auth-modal {
width: 100%;
height: 70vh;
background: #ffffff;
border-radius: 32rpx 32rpx 0 0;
overflow: hidden;
box-shadow: 0 -10rpx 40rpx rgba(0, 0, 0, 0.2);
transform: translateY(100%);
transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
display: flex;
flex-direction: column;
}
.auth-modal-show {
@@ -234,8 +237,9 @@ export default {
.modal-header {
background: linear-gradient(135deg, #10B981 0%, #059669 100%);
padding: 48rpx 32rpx;
padding: 80rpx 32rpx 60rpx;
text-align: center;
flex-shrink: 0;
}
.modal-icon {
@@ -267,7 +271,11 @@ export default {
}
.modal-content {
padding: 40rpx 32rpx;
padding: 60rpx 32rpx;
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
}
.wechat-auth-btn {
@@ -160,6 +160,7 @@
<script>
import CustomTabbar from '@/components/custom-tabbar/custom-tabbar.vue'
import authCheck from '@/utils/authCheck.js'
export default {
components: {
@@ -170,27 +171,35 @@ export default {
},
methods: {
goToBazi() {
if (!authCheck.requireLogin()) return
uni.navigateTo({ url: '/pages/bazi/bazi' })
},
goToLiuyao() {
if (!authCheck.requireLogin()) return
uni.navigateTo({ url: '/pages/liuyao/liuyao' })
},
goToDaliuren() {
if (!authCheck.requireLogin()) return
uni.navigateTo({ url: '/pages/daliuren/daliuren' })
},
goToQimen() {
if (!authCheck.requireLogin()) return
uni.navigateTo({ url: '/pages/qimen/qimen' })
},
goToMeihua() {
if (!authCheck.requireLogin()) return
uni.navigateTo({ url: '/pages/meihua/meihua' })
},
goToZiwei() {
if (!authCheck.requireLogin()) return
uni.navigateTo({ url: '/pages/ziwei/ziwei' })
},
goToZhanxing() {
if (!authCheck.requireLogin()) return
uni.navigateTo({ url: '/pages/zhanxing/zhanxing' })
},
goToTaluo() {
if (!authCheck.requireLogin()) return
uni.navigateTo({ url: '/pages/taluo/taluo' })
}
}