优化授权窗口样式和实现全局未登录拦截
问题: 1. 授权窗口只占屏幕一半,显示不够突出 2. 取消登录后点击功能模块没有弹出未登录提示 解决方案: 1. 优化授权窗口样式 - 高度从auto改为70vh,占据屏幕70% - 使用flex布局,内容垂直居中 - 增加header和content的padding - 整体更加美观和突出 2. 实现全局未登录拦截 - 在首页index.vue中导入authCheck工具 - 所有功能模块的点击方法添加登录检查 - 未登录时弹出"未登录,无法使用"提示 - 提示框包含"去登录"按钮 - 点击"去登录"触发授权流程 改进: - 授权窗口更加醒目 - 未登录用户无法使用功能 - 引导用户完成登录 - 提升用户体验
This commit is contained in:
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' })
|
||||
}
|
||||
}
|
||||
|
||||
Reference in new issue
Block a user