zhengchiliu/zt-closet-wxmini-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(guest): 支持游客态浏览示例衣物与搭配

Browse Source 
游客可点开示例衣物详情与搭配抽屉，不再在浏览路径上要求登录。
This commit is contained in:
zhengchiliu
2026-09-17 11:41:42 +08:00
parent 45222317af
commit f0503c7ad7
30 changed files with 648 additions and 127 deletions
Download Patch File Download Diff File Expand all files Collapse all files
miniprogram/pages/outfit/outfit.ts
+27 -5
View File
@@ -8,7 +8,7 @@ import { OutfitStatusPill, isPendingSave, outfitStatusPill } from '../../utils/o
import { setTabBarSelected } from '../../utils/tabbar'
import { formatRelativeTime } from '../../utils/format'
import { navScroll } from '../../utils/nav'
import { GUEST_OUTFITS, goLogin } from '../../utils/guest'
import { GUEST_OUTFIT, goLogin } from '../../utils/guest'
import { logger } from '../../utils/logger'
// 日志模块名
@@ -45,9 +45,11 @@ Page({
pendingCount: 0,
// 滚动收缩：由 utils/nav.ts 的共享 handler 驱动
navScrolled: false,
// 游客态（未登录）：展示本地示例穿搭，不发需要授权的请求
// 游客态（未登录）：只展示本地示例穿搭，不发需要授权的请求
guest: false,
guestList: GUEST_OUTFITS,
guestOutfit: GUEST_OUTFIT,
// 游客态示例搭配抽屉：可完整浏览示例单品，浏览路径上不要求登录
guestSheetVisible: false,
},
// scroll-view 滚动 → 导航收缩为玻璃小标题
@@ -72,7 +74,7 @@ Page({
if (this.data.guest) {
logger.info(LOG, '检测到登录态，从游客态切换为真实穿搭列表')
;(this as any).firstShown = true
this.setData({ guest: false, guestList: [], list: [], loading: true })
this.setData({ guest: false, guestSheetVisible: false, list: [], loading: true })
this.refresh()
this.fetchPendingCount()
return
@@ -116,12 +118,32 @@ Page({
this.refresh()
},
// 游客态点击示例穿搭 / 受限入口：统一进入登录页，由用户自行选择是否登录
// 游客态点击受限入口：进入登录页，由用户自行选择是否登录
onGuestLogin() {
logger.debug(LOG, '游客态点击受限入口，引导登录')
goLogin()
},
// 抽屉内容点击不穿透到遮罩
noop() {},
// 游客态点击示例搭配：打开只读示例抽屉（浏览路径上不要求登录）
onGuestOutfitTap() {
logger.debug(LOG, '游客态打开示例搭配抽屉')
this.setData({ guestSheetVisible: true })
},
onGuestSheetClose() {
this.setData({ guestSheetVisible: false })
},
// 抽屉底部入口：用户主动选择登录时才进入登录页
onGuestSheetLogin() {
logger.info(LOG, '示例搭配抽屉内主动登录')
this.setData({ guestSheetVisible: false })
goLogin()
},
refresh() {
this.setData({ page: 1, hasMore: true, loading: this.data.list.length === 0 })
this.fetchList(1)
miniprogram/pages/outfit/outfit.wxml
+45 -12
View File
@@ -63,26 +63,25 @@
bind:action="onCreate"
/>
<!-- 游客态：本地示例穿搭（点击任一示例进入登录页） -->
<!-- 游客态：只展示一套本地示例搭配，点击可完整浏览（不要求登录） -->
<view wx:elif="{{guest}}" class="of-list">
<view class="of-card" wx:for="{{guestList}}" wx:key="key" bindtap="onGuestLogin">
<view class="collage collage--{{item.icons.length}}">
<view class="cg" wx:for="{{item.icons}}" wx:for-item="ic" wx:key="*this">
<view class="ph icon {{ic}}"></view>
<view class="of-card" bindtap="onGuestOutfitTap">
<view class="collage collage--2">
<view class="cg" wx:for="{{guestOutfit.items}}" wx:key="clothes_uuid">
<image class="pic" src="{{item.processed_image}}" mode="aspectFit" />
</view>
<view class="guest-flag">示例</view>
</view>
<view class="of-trow">
<text class="of-title">{{item.name}}</text>
<text class="pill pill--line">{{item.scene}}</text>
<text class="of-title">{{guestOutfit.name}}</text>
<text class="pill pill--line">{{guestOutfit.scene}}</text>
</view>
<view class="of-desc">{{item.desc}}</view>
<view class="of-desc">{{guestOutfit.desc}}</view>
<view class="of-meta">
<text class="of-m">{{item.icons.length}} 件衣物</text>
<text class="pill">示例</text>
<text class="of-m">{{guestOutfit.items.length}} 件衣物</text>
<view class="spacer"></view>
<view class="of-m">
<view class="icon icon-heart"></view>
<text class="num">-</text>
<view class="icon icon-chevron-right"></view>
</view>
</view>
</view>
@@ -151,4 +150,38 @@
<view class="btn btn--glass" bindtap="onCreate">创建穿搭</view>
<view class="btn btn--ink" bindtap="onAiRecommend">AI 推荐</view>
</view>
<!-- 游客态示例搭配抽屉：可完整浏览示例单品，登录仅由用户主动选择 -->
<view wx:if="{{guestSheetVisible}}" class="scrim" bindtap="onGuestSheetClose"></view>
<view wx:if="{{guestSheetVisible}}" class="sheet-wrap">
<view class="sheet" catchtap="noop">
<view class="sheet-grab"></view>
<view class="sheet-hd">
<text class="sheet-t">示例搭配</text>
<text class="sheet-x" bindtap="onGuestSheetClose">关闭</text>
</view>
<view class="sheet-body">
<view class="gd-hd">
<view class="t-lg">{{guestOutfit.name}}</view>
<view class="gd-tags">
<text class="pill pill--line">{{guestOutfit.scene}}</text>
<text class="pill">示例</text>
</view>
</view>
<view class="gd-desc">{{guestOutfit.desc}}</view>
<view class="gd-items">
<view class="gd-item" wx:for="{{guestOutfit.items}}" wx:key="clothes_uuid">
<view class="gd-item-img">
<image class="pic" src="{{item.processed_image}}" mode="aspectFit" />
</view>
<view class="tile-name">{{item.name}}</view>
<view class="tile-sub">{{item.category_main}}{{item.category_sub ? ' · ' + item.category_sub : ''}}</view>
</view>
</view>
</view>
<view class="sheet-foot">
<view class="btn btn--ghost btn--block" bindtap="onGuestSheetLogin">登录后可创建你的穿搭</view>
</view>
</view>
</view>
</view>
miniprogram/pages/outfit/outfit.wxss
+42
View File
@@ -192,3 +192,45 @@
width: 26rpx;
height: 26rpx;
}
/* ===== 游客态：示例搭配抽屉（只读浏览，不要求登录） ===== */
.gd-hd {
padding: 8rpx var(--pad) 0;
}
.gd-tags {
display: flex;
gap: 12rpx;
margin-top: 18rpx;
}
.gd-desc {
margin-top: 18rpx;
padding: 0 var(--pad);
font-size: 26rpx;
line-height: 1.6;
color: var(--ink-2);
}
.gd-items {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 32rpx 26rpx;
padding: 40rpx var(--pad) 0;
}
.gd-item-img {
width: 100%;
aspect-ratio: 1 / 1;
background: var(--paper-2);
border-radius: var(--r-img);
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.gd-item-img .pic {
width: 100%;
height: 100%;
}