From 60baff8a2b3e11bc450d9aa96075a04f2712298c Mon Sep 17 00:00:00 2001 From: Blizzard Date: Wed, 29 Jul 2026 17:33:32 +0800 Subject: [PATCH] =?UTF-8?q?refactor(fe):=20Phase=20A=20=E2=80=94=E2=80=94?= =?UTF-8?q?=20tab=20=E6=8D=A2=E6=88=90=E3=80=8C=E6=88=91=E7=9A=84=E3=80=8D?= =?UTF-8?q?=EF=BC=8C=E8=AE=A1=E5=88=92=E9=99=8D=E7=BA=A7=EF=BC=8C=E8=AE=BE?= =?UTF-8?q?=E7=BD=AE=E6=8B=86=E5=87=BA=E6=9D=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## tab 结构 首页 / 记录 / 报告 / 社区 / 我的。计划从 tab 移出变二级页(导航栏补了 返回键),从「我的 → 养护计划」进。 ## 消灭 5 处硬编码 tabBar 高亮原来靠每个 tab 页在 onShow 里写死 selected: 0/1/2/3/4, 调一次顺序就得同时改五个文件,漏一个就高亮错位——这次把计划换成我的 正好会踩到。改成 tabBar 组件在 pageLifetimes.show 里按当前 route 自己 匹配,五处硬编码全删。 ## profile 拆成两页 原来的 profile 混了两类东西:「我是谁」和「怎么设置」。拆开: pages/mine(tab) 个人名片(头像/昵称/签名/关注粉丝记录三个数) + 我的毛孩子列表 + 常用入口 + 齿轮进设置 pages/settings 提醒设置、会员权益、数据导出、意见反馈、关于我们 「我的」上放了个「看看别人眼里的我」,点进去就是 pages/user 那个公开 主页——自己看和别人看必须是同一个页面同一套渲染,否则两边会慢慢长歪。 这也是 Phase D 装扮功能的落点。 首页齿轮从「进 profile」改成「进设置」(个人页已经在 tab 上了)。 旧的 pages/profile 整个删掉,没留兼容层。 Co-Authored-By: Claude Opus 5 --- pets-fe/app.json | 11 +-- pets-fe/custom-tab-bar/index.js | 47 +++++++---- pets-fe/pages/community/community.js | 3 - pets-fe/pages/home/home.js | 7 +- pets-fe/pages/home/home.wxml | 2 +- pets-fe/pages/mine/mine.js | 71 +++++++++++++++++ .../{profile/profile.json => mine/mine.json} | 0 pets-fe/pages/mine/mine.wxml | 77 +++++++++++++++++++ pets-fe/pages/mine/mine.wxss | 25 ++++++ pets-fe/pages/plan/plan.js | 3 - pets-fe/pages/plan/plan.wxml | 2 +- pets-fe/pages/profile/profile.wxml | 39 ---------- pets-fe/pages/record/record.js | 3 - pets-fe/pages/report/report.js | 3 - .../profile.js => settings/settings.js} | 0 pets-fe/pages/settings/settings.json | 8 ++ pets-fe/pages/settings/settings.wxml | 19 +++++ .../profile.wxss => settings/settings.wxss} | 0 18 files changed, 242 insertions(+), 78 deletions(-) create mode 100644 pets-fe/pages/mine/mine.js rename pets-fe/pages/{profile/profile.json => mine/mine.json} (100%) create mode 100644 pets-fe/pages/mine/mine.wxml create mode 100644 pets-fe/pages/mine/mine.wxss delete mode 100644 pets-fe/pages/profile/profile.wxml rename pets-fe/pages/{profile/profile.js => settings/settings.js} (100%) create mode 100644 pets-fe/pages/settings/settings.json create mode 100644 pets-fe/pages/settings/settings.wxml rename pets-fe/pages/{profile/profile.wxss => settings/settings.wxss} (100%) diff --git a/pets-fe/app.json b/pets-fe/app.json index c117869..9a51c22 100644 --- a/pets-fe/app.json +++ b/pets-fe/app.json @@ -8,7 +8,8 @@ "pages/community/community", "pages/learn/learn", "pages/article/article", - "pages/profile/profile", + "pages/mine/mine", + "pages/settings/settings", "pages/ai/ai", "pages/user/user", "pages/relations/relations" @@ -28,10 +29,6 @@ "pagePath": "pages/home/home", "text": "首页" }, - { - "pagePath": "pages/plan/plan", - "text": "计划" - }, { "pagePath": "pages/record/record", "text": "记录" @@ -43,6 +40,10 @@ { "pagePath": "pages/community/community", "text": "社区" + }, + { + "pagePath": "pages/mine/mine", + "text": "我的" } ] }, diff --git a/pets-fe/custom-tab-bar/index.js b/pets-fe/custom-tab-bar/index.js index 3170467..9fa8591 100644 --- a/pets-fe/custom-tab-bar/index.js +++ b/pets-fe/custom-tab-bar/index.js @@ -1,20 +1,37 @@ +const LIST = [ + { pagePath: '/pages/home/home', text: '首页', icon: 'home' }, + { pagePath: '/pages/record/record', text: '记录', icon: 'record' }, + { pagePath: '/pages/report/report', text: '报告', icon: 'report' }, + { pagePath: '/pages/community/community', text: '社区', icon: 'community' }, + { pagePath: '/pages/mine/mine', text: '我的', icon: 'user' }, +]; + Component({ - data: { - selected: 0, - hidden: false, - list: [ - { pagePath: '/pages/home/home', text: '首页', icon: 'home' }, - { pagePath: '/pages/plan/plan', text: '计划', icon: 'plan' }, - { pagePath: '/pages/record/record', text: '记录', icon: 'record' }, - { pagePath: '/pages/report/report', text: '报告', icon: 'report' }, - { pagePath: '/pages/community/community', text: '社区', icon: 'community' } - ] + data: { selected: 0, hidden: false, list: LIST }, + // 高亮由当前页面路径自己算出来。 + // 原来每个 tab 页在 onShow 里硬写 selected: 0/1/2/3/4,调一次顺序就要同时改 + // 五个文件,漏一个就高亮错位——这次把计划换成我的正好会踩到。 + pageLifetimes: { + show() { + this.syncSelected(); + }, + }, + lifetimes: { + attached() { + this.syncSelected(); + }, }, methods: { + syncSelected() { + const pages = getCurrentPages(); + const cur = pages[pages.length - 1]; + if (!cur) return; + const path = '/' + cur.route; + const i = LIST.findIndex((t) => t.pagePath === path); + if (i >= 0 && i !== this.data.selected) this.setData({ selected: i }); + }, switchTab(e) { - const idx = e.currentTarget.dataset.index; - const path = this.data.list[idx].pagePath; - wx.switchTab({ url: path }); - } - } + wx.switchTab({ url: LIST[e.currentTarget.dataset.index].pagePath }); + }, + }, }); diff --git a/pets-fe/pages/community/community.js b/pets-fe/pages/community/community.js index 1a23d51..c4ffc0f 100644 --- a/pets-fe/pages/community/community.js +++ b/pets-fe/pages/community/community.js @@ -61,9 +61,6 @@ Page({ if (this._unsub) this._unsub(); }, onShow() { - if (typeof this.getTabBar === 'function' && this.getTabBar()) { - this.getTabBar().setData({ selected: 4 }); - } store .ready() .then(() => { diff --git a/pets-fe/pages/home/home.js b/pets-fe/pages/home/home.js index f4e559a..e5c05ac 100644 --- a/pets-fe/pages/home/home.js +++ b/pets-fe/pages/home/home.js @@ -72,9 +72,6 @@ Page({ if (this._unsub) this._unsub(); }, onShow() { - if (typeof this.getTabBar === 'function' && this.getTabBar()) { - this.getTabBar().setData({ selected: 0 }); - } store .ready() .then(() => { @@ -196,8 +193,8 @@ Page({ onFab() { wx.navigateTo({ url: '/pages/ai/ai' }); }, - goProfile() { - wx.navigateTo({ url: '/pages/profile/profile' }); + goSettings() { + wx.navigateTo({ url: '/pages/settings/settings' }); }, goLearn() { wx.navigateTo({ url: '/pages/learn/learn' }); diff --git a/pets-fe/pages/home/home.wxml b/pets-fe/pages/home/home.wxml index 2803b74..9a5e11d 100644 --- a/pets-fe/pages/home/home.wxml +++ b/pets-fe/pages/home/home.wxml @@ -11,7 +11,7 @@ - + diff --git a/pets-fe/pages/mine/mine.js b/pets-fe/pages/mine/mine.js new file mode 100644 index 0000000..7add4db --- /dev/null +++ b/pets-fe/pages/mine/mine.js @@ -0,0 +1,71 @@ +const store = require('../../utils/store.js'); +const api = require('../../utils/api.js'); +const { toastErr } = require('../../utils/ui.js'); + +Page({ + data: { user: {}, pets: [], summary: {}, initial: '', sheetShow: false, sheetType: '' }, + onLoad() { + this._unsub = store.subscribe(() => this.applyUser()); + }, + onUnload() { + if (this._unsub) this._unsub(); + }, + onShow() { + store + .ready() + .then(() => { + this.applyUser(); + this.loadSummary(); + }) + .catch((e) => toastErr(e)); + }, + applyUser() { + const user = store.getUser() || {}; + // WXML 取不了字符串下标,首字在这里算 + this.setData({ pets: store.getPets(), user, initial: (user.nickname || '?').slice(0, 1) }); + }, + loadSummary() { + api + .userSummary() + .then((summary) => this.setData({ summary })) + .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.currentTarget.dataset.kind}` }); + }, + goPlan() { + wx.navigateTo({ url: '/pages/plan/plan' }); + }, + goRecord() { + wx.switchTab({ url: '/pages/record/record' }); + }, + onPickPet(e) { + store.switchPet(e.currentTarget.dataset.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' }; + }, +}); diff --git a/pets-fe/pages/profile/profile.json b/pets-fe/pages/mine/mine.json similarity index 100% rename from pets-fe/pages/profile/profile.json rename to pets-fe/pages/mine/mine.json diff --git a/pets-fe/pages/mine/mine.wxml b/pets-fe/pages/mine/mine.wxml new file mode 100644 index 0000000..503356e --- /dev/null +++ b/pets-fe/pages/mine/mine.wxml @@ -0,0 +1,77 @@ + + + + + + + + + + {{initial}} + + + {{user.nickname || '毛孩子家长'}} + {{user.bio || '还没有个性签名'}} + + + + + + + {{summary.following || 0}}关注 + + + {{summary.followers || 0}}粉丝 + + + {{summary.records || 0}}记录 + + + + + 看看别人眼里的我 + + + + + + + 我的毛孩子 + + 添加 + + + {{item.emoji}} + + {{item.name}} + {{item.age}}|{{item.weight}}|{{item.stage}} + + + + 还没有毛孩子,先建一份档案 + + + + + + + 宠物档案 + + + + 养护计划 + + + + 多宠物管理{{summary.pets || 0}} 只 + + + + + 设置 + + + + + + + diff --git a/pets-fe/pages/mine/mine.wxss b/pets-fe/pages/mine/mine.wxss new file mode 100644 index 0000000..f299eed --- /dev/null +++ b/pets-fe/pages/mine/mine.wxss @@ -0,0 +1,25 @@ +.me-card{padding:var(--sp-5)} +.me-top{display:flex;align-items:center;gap:var(--sp-3)} +.me-av{ + width:110rpx;height:110rpx;border-radius:50%;flex:none;overflow:hidden; + display:flex;align-items:center;justify-content:center; + background:var(--primary-soft);color:var(--primary-ink);font-size:44rpx;font-weight:var(--fw-b); +} +.me-av-img{width:100%;height:100%} +.me-main{flex:1;min-width:0} +.me-name{font-size:var(--fs-lg);font-weight:var(--fw-b)} +.me-bio{color:var(--muted);font-size:var(--fs-sm);margin-top:6rpx} +.me-gear{flex:none;color:var(--muted)} +.me-stats{display:flex;margin:var(--sp-4) 0} +.me-stat{flex:1;display:flex;flex-direction:column;align-items:center;gap:4rpx} +.me-n{font-size:var(--fs-lg);font-weight:var(--fw-b)} +.me-l{font-size:var(--fs-cap);color:var(--muted)} + +.pet-row{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3) 0;border-bottom:1rpx solid var(--line)} +.pet-row:last-child{border-bottom:0} +.pet-emoji{ + width:76rpx;height:76rpx;border-radius:var(--r-sm);flex:none; + display:flex;align-items:center;justify-content:center; + background:var(--primary-soft);font-size:40rpx; +} +.pet-info{flex:1;min-width:0} diff --git a/pets-fe/pages/plan/plan.js b/pets-fe/pages/plan/plan.js index 304e7d8..17f33d7 100644 --- a/pets-fe/pages/plan/plan.js +++ b/pets-fe/pages/plan/plan.js @@ -61,9 +61,6 @@ Page({ if (this._unsub) this._unsub(); }, onShow() { - if (typeof this.getTabBar === 'function' && this.getTabBar()) { - this.getTabBar().setData({ selected: 1 }); - } store .ready() .then(() => { diff --git a/pets-fe/pages/plan/plan.wxml b/pets-fe/pages/plan/plan.wxml index 14bda85..9bcaaef 100644 --- a/pets-fe/pages/plan/plan.wxml +++ b/pets-fe/pages/plan/plan.wxml @@ -1,4 +1,4 @@ - + diff --git a/pets-fe/pages/profile/profile.wxml b/pets-fe/pages/profile/profile.wxml deleted file mode 100644 index ae5ed9b..0000000 --- a/pets-fe/pages/profile/profile.wxml +++ /dev/null @@ -1,39 +0,0 @@ - - - - - - - - {{pet.emoji}} - - - {{pet.name}} - {{pet.age}}|{{pet.weight}}|{{pet.stage}} - {{pet.breed}}{{pet.breed && pet.color ? ' · ' : ''}}{{pet.color}} - - - - - - 宠物档案(编辑)已完善 {{profilePct}}% - 提醒设置{{summary.reminders}} 条 - 健康记录{{summary.records}} 条 - 多宠物管理{{summary.pets}} 只 - 我的关注{{summary.following || 0}} 人 - 我的粉丝{{summary.followers || 0}} 人 - - - - 会员权益{{summary.pro_status === 'active' ? '已开通' : '未开通'}} - 数据导出文本 - 意见反馈去填写 - 关于我们v0.2 - - - - - - - - diff --git a/pets-fe/pages/record/record.js b/pets-fe/pages/record/record.js index f1472fa..3a1410e 100644 --- a/pets-fe/pages/record/record.js +++ b/pets-fe/pages/record/record.js @@ -131,9 +131,6 @@ Page({ if (this._unsub) this._unsub(); }, onShow() { - if (typeof this.getTabBar === 'function' && this.getTabBar()) { - this.getTabBar().setData({ selected: 2 }); - } store .ready() .then(() => { diff --git a/pets-fe/pages/report/report.js b/pets-fe/pages/report/report.js index c37d532..097f5b7 100644 --- a/pets-fe/pages/report/report.js +++ b/pets-fe/pages/report/report.js @@ -22,9 +22,6 @@ Page({ if (this._unsub) this._unsub(); }, onShow() { - if (typeof this.getTabBar === 'function' && this.getTabBar()) { - this.getTabBar().setData({ selected: 3 }); - } store .ready() .then(() => { diff --git a/pets-fe/pages/profile/profile.js b/pets-fe/pages/settings/settings.js similarity index 100% rename from pets-fe/pages/profile/profile.js rename to pets-fe/pages/settings/settings.js diff --git a/pets-fe/pages/settings/settings.json b/pets-fe/pages/settings/settings.json new file mode 100644 index 0000000..fa34741 --- /dev/null +++ b/pets-fe/pages/settings/settings.json @@ -0,0 +1,8 @@ +{ + "usingComponents": { + "nav-bar": "/components/nav-bar/nav-bar", + "bottom-sheet": "/components/bottom-sheet/bottom-sheet", + "fab": "/components/fab/fab", + "pt-icon": "/components/pt-icon/index" + } +} diff --git a/pets-fe/pages/settings/settings.wxml b/pets-fe/pages/settings/settings.wxml new file mode 100644 index 0000000..3c02ed8 --- /dev/null +++ b/pets-fe/pages/settings/settings.wxml @@ -0,0 +1,19 @@ + + + + + + 提醒设置{{summary.reminders}} 条 + + + + 会员权益{{summary.pro_status === 'active' ? '已开通' : '未开通'}} + 数据导出文本 + 意见反馈去填写 + 关于我们v0.2 + + + + + + diff --git a/pets-fe/pages/profile/profile.wxss b/pets-fe/pages/settings/settings.wxss similarity index 100% rename from pets-fe/pages/profile/profile.wxss rename to pets-fe/pages/settings/settings.wxss