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
+52 -6
View File
@@ -78,12 +78,17 @@
</view>
</view>
<!-- 底部协议(非登录状态时显示) -->
<!-- 游客模式入口:不强制登录,可先进首页浏览体验,需要时再自行登录 -->
<view class="guest-entry" @click="enterGuest">
<text class="guest-entry-text">暂不登录,先逛逛</text>
<text class="guest-entry-arrow">›</text>
</view>
<!-- 底部协议查阅入口(仅提供查看,不构成默认同意;是否同意由用户在下一屏主动勾选) -->
<view v-if="showNotice" class="agreement">
<text class="text-tiny">登录即代表同意</text>
<text class="text-tiny text-amber" @click="openAgreement('user')">《用户协议》</text>
<text class="text-tiny">和</text>
<text class="text-tiny text-amber" @click="openAgreement('privacy')">《隐私政策》</text>
<text class="text-tiny agreement-link" @click="openAgreement('user')">《用户协议》</text>
<text class="text-tiny agreement-dot">·</text>
<text class="text-tiny agreement-link" @click="openAgreement('privacy')">《隐私政策》</text>
</view>
</view>
</template>
@@ -123,6 +128,13 @@ export default {
this.showNotice = false
},
// 游客模式:不登录直接进入首页浏览(微信审核要求:先体验功能,登录由用户自行选择)
enterGuest() {
uni.setStorageSync('is_first_launch', 'false')
uni.setStorageSync('is_guest', 'true')
uni.switchTab({ url: '/pages/index/index' })
},
// ===== 微信新规范:头像选择 =====
// chooseAvatar 返回的是 wxfile://tmp_ 本地临时路径(微信随时会清理、仅本机有效),
// 上传接口需要登录 token,而选头像时还未登录,因此这里只暂存临时路径,
@@ -529,12 +541,46 @@ export default {
color: $text-tertiary;
}
/* 底部协议 */
/* 游客入口 */
.guest-entry {
display: flex;
align-items: center;
justify-content: center;
gap: 4rpx;
padding: $sp-md 0;
margin-top: auto;
&:active {
opacity: 0.6;
}
}
.guest-entry-text {
font-size: $fs-sm;
color: $text-secondary;
}
.guest-entry-arrow {
font-size: $fs-md;
color: $text-secondary;
}
/* 底部协议查阅入口 */
.agreement {
display: flex;
justify-content: center;
align-items: center;
gap: $sp-xs;
padding: $sp-sm 0;
}
.agreement-link {
color: $text-tertiary;
text-decoration: underline;
}
.agreement-dot {
color: $text-tertiary;
}
</style>