feat: add guest mode and optimize login experience
针对微信审核要求新增游客浏览模式,用户可无需登录直接浏览应用内容,仅在使用发布、点赞、记录等需要身份的功能时才弹窗引导登录。具体修改包括: 1. 新增游客态判断工具函数与登录守卫逻辑 2. 为登录页添加游客直接进入入口 3. 为首页、酒友圈、个人页、动态页、记录页添加游客适配逻辑 4. 优化登录态失效处理逻辑,不再强制跳转登录页 5. 调整部分页面的返回逻辑适配分享直接进入场景 6. 为各页面添加游客引导UI与交互
This commit is contained in:
@@ -173,7 +173,7 @@
|
||||
|
||||
<script>
|
||||
import AchievementBadge from '../../components/AchievementBadge.vue'
|
||||
import client, { clearAuth, GetAchievements } from '../../common/api'
|
||||
import client, { clearAuth, GetAchievements, isLoggedIn, requireLogin } from '../../common/api'
|
||||
import { checkAchievements, getCatIcon, isIconPath, calcLocalStreak, isValidAvatar } from '../../common/utils'
|
||||
import { ACHIEVEMENTS, DRINK_CATEGORIES } from '../../common/constants'
|
||||
import themeMixin from '../../common/theme-mixin'
|
||||
@@ -391,16 +391,12 @@ export default {
|
||||
uni.switchTab({ url: '/pages/index/index' })
|
||||
},
|
||||
goRecord() {
|
||||
if (!requireLogin()) return
|
||||
uni.navigateTo({ url: '/pages/record/record' })
|
||||
},
|
||||
checkLoginState() {
|
||||
const isLoggedIn = uni.getStorageSync('is_logged_in')
|
||||
const isGuest = uni.getStorageSync('is_guest')
|
||||
if (!isLoggedIn || isLoggedIn !== 'true') {
|
||||
uni.reLaunch({ url: '/pages/login/login' })
|
||||
return
|
||||
}
|
||||
this.isGuest = isGuest === 'true'
|
||||
// 微信审核要求:游客可停留在"我的"页浏览,不强制跳转登录,仅展示登录入口
|
||||
this.isGuest = !isLoggedIn()
|
||||
},
|
||||
handleLogout() {
|
||||
uni.showModal({
|
||||
@@ -411,7 +407,10 @@ export default {
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
clearAuth()
|
||||
uni.reLaunch({ url: '/pages/login/login' })
|
||||
// 退出后以游客身份留在当前页继续浏览,不强制跳登录
|
||||
this.isGuest = true
|
||||
this.loadData()
|
||||
uni.showToast({ title: '已退出登录', icon: 'none' })
|
||||
}
|
||||
}
|
||||
})
|
||||
@@ -437,6 +436,63 @@ export default {
|
||||
padding-bottom: calc(env(safe-area-inset-bottom) + 40rpx);
|
||||
}
|
||||
|
||||
/* 游客登录引导卡片 */
|
||||
.guest-login-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $sp-md;
|
||||
margin: 0 $sp-lg $sp-md;
|
||||
padding: $sp-md $sp-lg;
|
||||
border-radius: $radius-lg;
|
||||
background: rgba(232, 168, 56, 0.08);
|
||||
border: 2rpx solid rgba(232, 168, 56, 0.25);
|
||||
|
||||
&:active {
|
||||
background: rgba(232, 168, 56, 0.14);
|
||||
}
|
||||
}
|
||||
|
||||
.guest-login-icon {
|
||||
width: 72rpx;
|
||||
height: 72rpx;
|
||||
border-radius: $radius-full;
|
||||
background: $bg-card;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 40rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.guest-login-text {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4rpx;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.guest-login-title {
|
||||
font-size: $fs-sm;
|
||||
font-weight: $fw-bold;
|
||||
color: $text-primary;
|
||||
}
|
||||
|
||||
.guest-login-desc {
|
||||
font-size: $fs-xs;
|
||||
color: $text-tertiary;
|
||||
}
|
||||
|
||||
.guest-login-btn {
|
||||
font-size: $fs-sm;
|
||||
font-weight: $fw-bold;
|
||||
color: $text-on-amber;
|
||||
background: linear-gradient(135deg, $amber-light, $amber-deep);
|
||||
padding: $sp-xs $sp-lg;
|
||||
border-radius: $radius-full;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* === 沉浸式头部 === */
|
||||
.hero-header {
|
||||
position: relative;
|
||||
|
||||
Reference in New Issue
Block a user