feat: add guest mode and optimize login experience

针对微信审核要求新增游客浏览模式,用户可无需登录直接浏览应用内容,仅在使用发布、点赞、记录等需要身份的功能时才弹窗引导登录。具体修改包括:
1. 新增游客态判断工具函数与登录守卫逻辑
2. 为登录页添加游客直接进入入口
3. 为首页、酒友圈、个人页、动态页、记录页添加游客适配逻辑
4. 优化登录态失效处理逻辑,不再强制跳转登录页
5. 调整部分页面的返回逻辑适配分享直接进入场景
6. 为各页面添加游客引导UI与交互
This commit is contained in:
cg
2026-09-10 21:43:46 +08:00
parent 26b7111af0
commit dd3c670021
9 changed files with 307 additions and 46 deletions
+65 -9
View File
@@ -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;