feat: 支持游客免登录浏览核心页面

未登录用户可先浏览衣橱、穿搭、运势、分享等内容,登录改为用户主动选择,并在登录页增加协议勾选确认与暂不登录入口。
This commit is contained in:
2026-09-16 21:44:04 +08:00
parent c07a969642
commit 45222317af
47 changed files with 996 additions and 12150 deletions
+59 -3
View File
@@ -1,8 +1,9 @@
import { request, redirectToLogin } from '../../utils/request'
import { request } from '../../utils/request'
import * as auth from '../../utils/auth'
import { HoroscopeData } from '../../types/models'
import { setTabBarSelected } from '../../utils/tabbar'
import { navScroll } from '../../utils/nav'
import { guestHoroscope, goLogin } from '../../utils/guest'
import { logger } from '../../utils/logger'
import { STORAGE_KEYS } from '../../utils/config'
@@ -41,16 +42,52 @@ Page({
errorText: '',
// 滚动收缩:由 utils/nav.ts 的共享 handler 驱动
navScrolled: false,
// 游客态(未登录):展示本地示例运势,不发需要授权的请求
guest: false,
},
// scroll-view 滚动 → 导航收缩为玻璃小标题
onNavScroll: navScroll,
onLoad() {
// 首帧渲染前判定游客态:未登录直接用本地示例运势渲染,避免首帧 setData 冲突
if (!auth.isLoggedIn()) {
const demo = guestHoroscope()
this.setData({
guest: true,
horoscope: demo,
statDate: this.formatStatDate(demo.stat_date),
luckyColorHex: COLOR_MAP[demo.lucky_color] || '#AEAEB2',
loading: false,
})
logger.info(LOG, '未登录进入运势页,渲染游客态示例运势')
}
},
onShow() {
this.syncTabBar()
// 未登录直接回登录页(幂等跳转),不再发出必然 401 的请求
// 未登录:游客态浏览,零请求,不再强制跳登录(微信审核合规要求)
if (!auth.isLoggedIn()) {
redirectToLogin()
if (!this.data.guest) {
const demo = guestHoroscope()
this.setData({
guest: true,
horoscope: demo,
statDate: this.formatStatDate(demo.stat_date),
luckyColorHex: COLOR_MAP[demo.lucky_color] || '#AEAEB2',
loading: false,
noBirth: false,
error: false,
})
}
return
}
// 登录成功回到本页:清掉示例运势,拉取真实数据
if (this.data.guest) {
logger.info(LOG, '检测到登录态,从游客态切回真实运势')
;(this as any).firstShown = true
this.setData({ guest: false, horoscope: null, loading: true })
this.fetchHoroscope(0)
return
}
// 首帧渲染未结束就 setData 会触发「Expected updated data but get first rendering data」,
@@ -116,15 +153,30 @@ Page({
},
onRetry() {
if (this.data.guest) {
this.onGuestLogin()
return
}
this.fetchHoroscope(0)
},
// 游客态点击受限入口(设置生日 / 生成穿搭):统一进入登录页
onGuestLogin() {
logger.debug(LOG, '游客态点击受限入口,引导登录')
goLogin()
},
formatStatDate(d: number): string {
const s = String(d)
return `${s.slice(0, 4)}.${s.slice(4, 6)}.${s.slice(6, 8)}`
},
onGoProfile() {
// 设置生日需登录:游客态先引导登录,不做强制跳转
if (!auth.isLoggedIn()) {
this.onGuestLogin()
return
}
// switchTab 不支持 query 传参,用 storage 标记让「我的」页 onShow 自动弹出编辑弹窗
wx.setStorageSync(STORAGE_KEYS.OPEN_PROFILE_EDIT, 1)
wx.switchTab({
@@ -138,6 +190,10 @@ Page({
},
onGenerate() {
if (this.data.guest) {
this.onGuestLogin()
return
}
wx.navigateTo({
url: '/pages/ai-recommend/ai-recommend',
fail: (e) => logger.warn(LOG, 'navigateTo AI 推荐失败, err=', e && e.errMsg),
+16 -1
View File
@@ -1,6 +1,7 @@
<view class="page page-flex">
<navigation-bar title="每日运势" back="{{false}}" scrolled="{{navScrolled}}">
<view slot="right" class="nav-action" bindtap="onGoProfile">去设置生日</view>
<view wx:if="{{guest}}" slot="right" class="nav-action" bindtap="onGuestLogin">登录</view>
<view wx:else slot="right" class="nav-action" bindtap="onGoProfile">去设置生日</view>
</navigation-bar>
<scroll-view scroll-y class="scroll-body pb-tab" bindscroll="onNavScroll">
@@ -10,6 +11,14 @@
<view class="display">每日运势</view>
</view>
<!-- 游客态提示条:未登录也可先浏览,登录由用户自行选择 -->
<view wx:if="{{guest}}" class="guest-bar" bindtap="onGuestLogin">
<view class="icon icon-lock"></view>
<text class="gb-t">浏览模式 · 以下为示例运势</text>
<text class="gb-a">登录</text>
<view class="icon icon-chevron-right"></view>
</view>
<!-- 骨架屏 -->
<view wx:if="{{loading}}" class="hs-skel">
<view class="sk sk-ln" style="width: 38%; height: 28rpx;"></view>
@@ -46,6 +55,7 @@
<view class="hs-zodiac">
<view class="icon icon-sparkles"></view>
<text class="t-xl">{{horoscope.zodiac}}</text>
<text wx:if="{{guest}}" class="pill">示例</text>
</view>
<text class="hs-date num">{{statDate}}</text>
</view>
@@ -136,6 +146,11 @@
<view class="hs-foot">
<view class="btn btn--ghost btn--block" bindtap="onGenerate">生成今日推荐穿搭</view>
</view>
<view wx:if="{{guest}}" class="guest-foot" bindtap="onGuestLogin">
<text>登录并设置生日,查看你的专属运势</text>
<text class="gf-a">去登录</text>
</view>
</block>
<view class="gap-64"></view>