From 469a361a2bc7095ca85261f2e57bcb195b5a7eb8 Mon Sep 17 00:00:00 2001 From: zhengchiliu <857493511@qq.com> Date: Tue, 15 Sep 2026 17:18:15 +0800 Subject: [PATCH] bugfix --- miniprogram/custom-tab-bar/index.ts | 10 +++++++ miniprogram/custom-tab-bar/index.wxml | 4 +-- miniprogram/custom-tab-bar/index.wxss | 8 ++++++ miniprogram/pages/profile/profile.json | 3 +-- miniprogram/pages/profile/profile.ts | 37 +++++++++++++------------- miniprogram/pages/profile/profile.wxml | 16 +++-------- miniprogram/pages/profile/profile.wxss | 24 +++++++++++++++++ miniprogram/utils/tabbar.ts | 10 +++++++ 8 files changed, 78 insertions(+), 34 deletions(-) diff --git a/miniprogram/custom-tab-bar/index.ts b/miniprogram/custom-tab-bar/index.ts index 1cf0796..5b4cf64 100644 --- a/miniprogram/custom-tab-bar/index.ts +++ b/miniprogram/custom-tab-bar/index.ts @@ -13,6 +13,8 @@ Component({ data: { selected: 0, unread: 0, + // 弹层打开时页面调用 setHidden(true) 淡出，避免悬浮标签栏压在弹层之上 + hidden: false, list: [ { pagePath: '/pages/wardrobe/wardrobe', text: '衣橱', icon: 'icon-hanger' }, { pagePath: '/pages/outfit/outfit', text: '穿搭', icon: 'icon-shirt' }, @@ -75,6 +77,14 @@ Component({ this.applyData({ selected: index }) }, + // 弹层打开/关闭时淡出或恢复悬浮标签栏（供页面调用，内部保证首帧安全） + setHidden(hidden: boolean) { + const next = !!hidden + // 值未变化时不触发渲染：页面每次 onShow 都会校准一次，避免无谓的 setData + if (next === !!this.data.hidden) return + this.applyData({ hidden: next }) + }, + // 直接更新红点（供页面在已知数量时调用，不再触发二次请求） setUnread(n: number) { const unread = Number(n) || 0 diff --git a/miniprogram/custom-tab-bar/index.wxml b/miniprogram/custom-tab-bar/index.wxml index dc19bd4..cfcc538 100644 --- a/miniprogram/custom-tab-bar/index.wxml +++ b/miniprogram/custom-tab-bar/index.wxml @@ -1,5 +1,5 @@ - - + + , // 滚动收缩：由 utils/nav.ts 的共享 handler 驱动 navScrolled: false, - // 性别选择：v2 玻璃动作表 - sexVisible: false, - sexItems: [ - { text: '男', value: 1 }, - { text: '女', value: 2 }, - ], }, // scroll-view 滚动 → 导航收缩为玻璃小标题 @@ -74,6 +68,8 @@ Page({ onShow() { this.syncTabBar() this.setToday() + // 回到本页时按抽屉状态校准标签栏，防止切前后台/切 tab 后残留隐藏 + setTabBarHidden(!!this.data.editVisible) // 未登录直接回登录页（幂等跳转），不再发出必然 401 的请求 if (!auth.isLoggedIn()) { redirectToLogin() @@ -85,6 +81,11 @@ Page({ this.fetchUnread() }, + // 离开本页时恢复标签栏：此时抽屉不再可见，标签栏不能残留隐藏 + onHide() { + setTabBarHidden(false) + }, + // 拉取未读数：与 tabBar 红点同源（/notification/unread），保证两处数量一致 fetchUnread() { request<{ unread_count: number }>({ url: '/notification/unread', showError: false, silentAuth: true }) @@ -148,6 +149,8 @@ Page({ onEdit() { const u = this.data.userInfo + // 抽屉打开期间隐藏悬浮标签栏：tabBar 由框架渲染在页面之上，否则会压住抽屉底部按钮 + setTabBarHidden(true) this.setData({ editVisible: true, avatarChanged: false, @@ -163,6 +166,7 @@ Page({ onCloseEdit() { this.setData({ editVisible: false }) + setTabBarHidden(false) }, noop() {}, @@ -175,18 +179,11 @@ Page({ this.setData({ 'editForm.username': e.detail.value }) }, - onSexSelect() { - this.setData({ sexVisible: true }) - }, - - onSexPick(e: WechatMiniprogram.CustomEvent) { - const sex = Number(e.detail.value) || 0 + // 性别为两选一字段：抽屉内联胶囊直接选中，不再弹动作表（避免两层玻璃叠加） + onSexTap(e: WechatMiniprogram.TouchEvent) { + const sex = Number((e.currentTarget.dataset as any).value) || 0 logger.debug(LOG, '选择性别, sex=', sex) - this.setData({ 'editForm.sex': sex, sexVisible: false }) - }, - - onSexCancel() { - this.setData({ sexVisible: false }) + this.setData({ 'editForm.sex': sex }) }, onBirthChange(e: WechatMiniprogram.CustomEvent) { @@ -212,6 +209,8 @@ Page({ saving: false, avatarChanged: false, }) + // 抽屉关闭，恢复悬浮标签栏 + setTabBarHidden(false) this.fetchUser() } @@ -224,7 +223,9 @@ Page({ if (f.birth_day && f.birth_day !== u.birth_day) body.birth_day = f.birth_day if (!Object.keys(body).length && !this.data.avatarChanged) { + // 无变更直接关闭：同样要恢复标签栏，否则会残留隐藏 this.setData({ editVisible: false }) + setTabBarHidden(false) return } diff --git a/miniprogram/pages/profile/profile.wxml b/miniprogram/pages/profile/profile.wxml index e400a2d..27a0c05 100644 --- a/miniprogram/pages/profile/profile.wxml +++ b/miniprogram/pages/profile/profile.wxml @@ -137,11 +137,11 @@ placeholder-class="input-ph" /> - + 性别 - - {{editForm.sex === 1 ? '男' : editForm.sex === 2 ? '女' : '请选择'}} - + + 男 + 女 @@ -164,12 +164,4 @@ - - diff --git a/miniprogram/pages/profile/profile.wxss b/miniprogram/pages/profile/profile.wxss index e8fd7a3..ec4c0af 100644 --- a/miniprogram/pages/profile/profile.wxss +++ b/miniprogram/pages/profile/profile.wxss @@ -220,3 +220,27 @@ height: 26rpx; color: var(--ink-4); } + +/* 性别：行内两选一胶囊（选中实心黑，零彩色） */ +.sex-pick { + flex: 1; + display: flex; + gap: 16rpx; +} + +.sex-pill { + height: 60rpx; + padding: 0 40rpx; + border-radius: var(--r-pill); + background: var(--fill); + color: var(--ink-2); + font-size: 26rpx; + display: flex; + align-items: center; + transition: background .18s var(--ease), color .18s var(--ease); +} + +.sex-pill.is-on { + background: var(--ink); + color: #fff; +} diff --git a/miniprogram/utils/tabbar.ts b/miniprogram/utils/tabbar.ts index b5c5e48..61a3515 100644 --- a/miniprogram/utils/tabbar.ts +++ b/miniprogram/utils/tabbar.ts @@ -31,3 +31,13 @@ export function setTabBarSelected(index: number): void { if (typeof tabBar.setSelected === 'function') tabBar.setSelected(index) else tabBar.setData({ selected: index }) } + +// 弹层遮罩期间隐藏悬浮标签栏：tabBar 由框架渲染在页面容器之上， +// 页面内任何 z-index 都盖不住它，只能让组件自身淡出（内部同样走首帧安全更新）。 +// 弹层关闭后必须恢复，页面 onShow 时可再校准一次，避免残留隐藏。 +export function setTabBarHidden(hidden: boolean): void { + const tabBar = getTabBarInstance() + if (!tabBar) return + if (typeof tabBar.setHidden === 'function') tabBar.setHidden(hidden) + else tabBar.setData({ hidden }) +}