Files
sundynix-pets/pets-fe/pages/mine/mine.js
T
Blizzard 6d49d28e1a fix(fe): 修 Phase D 三个渲染问题
## 1. tabBar 高亮不跟着切(进「我的」还亮在「首页」)
Phase A 我把高亮改成 custom-tab-bar 自己在 pageLifetimes.show 里按路由算,
想省掉五个页面的硬编码。实测不行:自定义 tabBar 不在页面节点树里,
pageLifetimes 拿不到可靠时机,selected 一直停在默认的 0。

回到官方那套「页面 onShow 推一把」,但索引仍然由 tabBar 按当前路由自己算
(utils/tabbar.js → syncSelected),页面这边不写死 0/1/2/3/4。
调 tab 顺序还是只改一个 LIST,五个页面一行都不用动——原来想要的收益保住了,
只是多了五行 syncTabBar(this)。

## 2. 头像被头图盖住,只露出下半个
.pf-bg 带了 position:relative,定位元素会盖过静态的兄弟节点,DOM 顺序在后
也没用。给 .pf-av 加 position:relative + z-index,同时把 .pf-bg 上那个没人
用的 position 去掉。头图高度 220 → 180rpx,纯渐变时不至于占掉半屏。

## 3.「我的」页四个入口整个散架,图标文字箭头各占一行
.profile-list / .profile-row / .pr-ic / .pr-label / .pr-val 全在
settings.wxss 里——Phase A 从 profile 拆页时留在了设置页,mine 用同一批
class 但样式跨不了页,于是完全裸奔。提到 app.wxss。

这是这个项目第二次踩「页面级 wxss 跨页用」了(上次是 .post-card 在用户
主页裸奔)。两个页面共用的 class 就不该留在任一页的 wxss 里。

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
2026-07-30 08:22:17 +08:00

79 lines
2.4 KiB
JavaScript

const store = require('../../utils/store.js');
const api = require('../../utils/api.js');
const { toastErr } = require('../../utils/ui.js');
const { syncTabBar } = require('../../utils/tabbar.js');
Page({
data: { user: {}, pets: [], card: null, sheetShow: false, sheetType: '' },
onLoad() {
this._unsub = store.subscribe(() => this.applyUser());
},
onUnload() {
if (this._unsub) this._unsub();
},
onShow() {
syncTabBar(this);
store
.ready()
.then(() => {
this.applyUser();
this.loadCard();
})
.catch((e) => toastErr(e));
},
applyUser() {
this.setData({ pets: store.getPets(), user: store.getUser() || {} });
},
// 头部数据走 /users/:id/profile,和别人看我时是同一个接口——
// 换成 /user/summary 的话两边字段会对不上,装扮效果也预览不到
loadCard() {
const uid = (this.data.user && this.data.user.id) || '';
if (!uid) return;
api
.userCard(uid)
.then((card) => this.setData({ card }))
.catch(() => {});
},
// 看自己的公开主页,和别人看到的是同一个页面、同一套渲染
previewPublic() {
const uid = this.data.user && this.data.user.id;
if (uid) wx.navigateTo({ url: `/pages/user/user?id=${uid}` });
},
goSettings() {
wx.navigateTo({ url: '/pages/settings/settings' });
},
goRelations(e) {
const uid = (this.data.user && this.data.user.id) || '';
if (!uid) return wx.showToast({ title: '登录信息还没就绪', icon: 'none' });
wx.navigateTo({ url: `/pages/relations/relations?id=${uid}&kind=${e.detail.kind}` });
},
goDecorate() {
wx.navigateTo({ url: '/pages/decorate/decorate' });
},
goPlan() {
wx.navigateTo({ url: '/pages/plan/plan' });
},
// 列表行传 dataset,宠物名片墙传 detail,两边都进这里
onPickPet(e) {
const id = (e.detail && e.detail.id) || e.currentTarget.dataset.id;
if (!id) return;
store.switchPet(id);
wx.switchTab({ url: '/pages/home/home' });
},
openSheet(e) {
this.setData({ sheetType: e.currentTarget.dataset.type, sheetShow: true });
},
closeSheet() {
this.setData({ sheetShow: false });
},
onAddPet() {
this.setData({ sheetType: 'addPet', sheetShow: true });
},
onFab() {
wx.navigateTo({ url: '/pages/ai/ai' });
},
onShareAppMessage() {
return { title: '肉垫计划 · 每天照顾好毛孩子', path: '/pages/home/home' };
},
});