refactor(fe): Phase A —— tab 换成「我的」,计划降级,设置拆出来
## 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 <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,82 @@
|
||||
const store = require('../../utils/store.js');
|
||||
const api = require('../../utils/api.js');
|
||||
const upload = require('../../utils/upload.js');
|
||||
|
||||
function completion(pet) {
|
||||
if (!pet) return 0;
|
||||
const fields = ['name', 'emoji', 'type', 'gender', 'birthday', 'weight', 'stage', 'age', 'color', 'breed'];
|
||||
const filled = fields.filter((f) => pet[f]).length;
|
||||
return Math.round((filled / fields.length) * 100);
|
||||
}
|
||||
|
||||
Page({
|
||||
data: {
|
||||
pet: {},
|
||||
user: {},
|
||||
summary: { pets: 0, records: 0, reminders: 0, pro_status: 'none' },
|
||||
profilePct: 0,
|
||||
sheetShow: false,
|
||||
sheetType: '',
|
||||
},
|
||||
onLoad() {
|
||||
this._unsub = store.subscribe((pet) => this.setData({ pet, profilePct: completion(pet) }));
|
||||
},
|
||||
onUnload() {
|
||||
if (this._unsub) this._unsub();
|
||||
},
|
||||
onShow() {
|
||||
store
|
||||
.ready()
|
||||
.then(() => {
|
||||
const pet = store.getPet();
|
||||
this.setData({ pet, user: store.getUser() || {}, profilePct: completion(pet) });
|
||||
this.loadSummary();
|
||||
})
|
||||
.catch((e) => wx.showToast({ title: e.message || '加载失败', icon: 'none' }));
|
||||
},
|
||||
loadSummary() {
|
||||
api.userSummary().then((summary) => this.setData({ summary })).catch(() => {});
|
||||
},
|
||||
openSheet(e) {
|
||||
this.setData({ sheetType: e.currentTarget.dataset.type, sheetShow: true });
|
||||
},
|
||||
// 自己的关注/粉丝。之前只有帖子上的「+关注」按钮,关注完没有任何地方能看
|
||||
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}` });
|
||||
},
|
||||
goRecord() {
|
||||
wx.switchTab({ url: '/pages/record/record' });
|
||||
},
|
||||
onPickAvatar() {
|
||||
upload
|
||||
.chooseAndUploadImage()
|
||||
.then((f) => api.updateProfile({ avatar_file_id: f.id }))
|
||||
.then((user) => {
|
||||
this.setData({ user });
|
||||
store.setUser(user);
|
||||
wx.showToast({ title: '头像已更新', icon: 'success' });
|
||||
})
|
||||
.catch((e) => {
|
||||
if (e && e.canceled) return;
|
||||
wx.showToast({ title: (e && e.message) || '上传失败', icon: 'none' });
|
||||
});
|
||||
},
|
||||
onAddPet() {
|
||||
this.setData({ sheetType: 'addPet', sheetShow: true });
|
||||
},
|
||||
onEditPet() {
|
||||
this.setData({ sheetType: 'editPet', sheetShow: true });
|
||||
},
|
||||
closeSheet() {
|
||||
this.setData({ sheetShow: false });
|
||||
this.loadSummary();
|
||||
},
|
||||
onFab() {
|
||||
wx.navigateTo({ url: '/pages/ai/ai' });
|
||||
},
|
||||
onShareAppMessage() {
|
||||
return { title: '肉垫计划 · 新手养宠助手', path: '/pages/home/home' };
|
||||
},
|
||||
});
|
||||
@@ -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"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
<nav-bar title="设置" show-back="{{true}}"></nav-bar>
|
||||
|
||||
<scroll-view class="page-scroll" scroll-y="{{true}}" enhanced="{{true}}" show-scrollbar="{{false}}">
|
||||
<view class="page-body no-fab">
|
||||
<view class="profile-list">
|
||||
<view class="profile-row" data-type="reminders" bindtap="openSheet"><view class="pr-ic"><pt-icon name="bell" size="{{34}}"></pt-icon></view><text class="pr-label">提醒设置</text><text class="pr-val">{{summary.reminders}} 条</text><view class="pr-arrow"><pt-icon name="next" size="{{28}}"></pt-icon></view></view>
|
||||
</view>
|
||||
|
||||
<view class="profile-list">
|
||||
<view class="profile-row" data-type="pro" bindtap="openSheet"><view class="pr-ic"><pt-icon name="like" size="{{34}}"></pt-icon></view><text class="pr-label">会员权益</text><text class="pr-val">{{summary.pro_status === 'active' ? '已开通' : '未开通'}}</text><view class="pr-arrow"><pt-icon name="next" size="{{28}}"></pt-icon></view></view>
|
||||
<view class="profile-row" data-type="exportData" bindtap="openSheet"><view class="pr-ic"><pt-icon name="doc" size="{{34}}"></pt-icon></view><text class="pr-label">数据导出</text><text class="pr-val">文本</text><view class="pr-arrow"><pt-icon name="next" size="{{28}}"></pt-icon></view></view>
|
||||
<view class="profile-row" data-type="feedback" bindtap="openSheet"><view class="pr-ic"><pt-icon name="comment" size="{{34}}"></pt-icon></view><text class="pr-label">意见反馈</text><text class="pr-val">去填写</text><view class="pr-arrow"><pt-icon name="next" size="{{28}}"></pt-icon></view></view>
|
||||
<view class="profile-row" data-type="about" bindtap="openSheet"><view class="pr-ic"><pt-icon name="book" size="{{34}}"></pt-icon></view><text class="pr-label">关于我们</text><text class="pr-val">v0.2</text><view class="pr-arrow"><pt-icon name="next" size="{{28}}"></pt-icon></view></view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<bottom-sheet show="{{sheetShow}}" type="{{sheetType}}" bind:close="closeSheet"></bottom-sheet>
|
||||
@@ -0,0 +1,25 @@
|
||||
.profile-header{text-align:center;padding:var(--sp-4) 0 var(--sp-5)}
|
||||
.ph-avatar{margin:0 auto var(--sp-3);width:152rpx;height:152rpx;font-size:76rpx;border-radius:var(--r-lg);position:relative;overflow:visible}
|
||||
.ph-avatar-img{width:100%;height:100%;border-radius:var(--r-lg)}
|
||||
.ph-avatar-cam{
|
||||
position:absolute;right:-6rpx;bottom:-6rpx;width:52rpx;height:52rpx;
|
||||
display:flex;align-items:center;justify-content:center;color:var(--text-2);
|
||||
background:#fff;border-radius:50%;box-shadow:var(--sd-1);
|
||||
}
|
||||
.ph-name{font-size:var(--fs-2xl);font-weight:var(--fw-b)}
|
||||
.ph-meta{font-size:var(--fs-sm);margin-top:var(--sp-1)}
|
||||
|
||||
.profile-list{background:#fff;border-radius:var(--r-lg);box-shadow:var(--sd-1);overflow:hidden;margin-bottom:var(--sp-4)}
|
||||
.profile-row{
|
||||
display:flex;align-items:center;gap:var(--sp-3);min-height:104rpx;padding:0 var(--sp-4);
|
||||
border-bottom:1rpx solid var(--line);font-size:var(--fs-md);font-weight:var(--fw-b);
|
||||
}
|
||||
.profile-row:last-child{border-bottom:0}
|
||||
.pr-ic{
|
||||
width:56rpx;height:56rpx;border-radius:var(--r-xs);flex:none;
|
||||
display:flex;align-items:center;justify-content:center;
|
||||
background:var(--primary-soft);color:var(--primary-ink);
|
||||
}
|
||||
.pr-label{flex:1;min-width:0}
|
||||
.pr-val{color:var(--muted);font-weight:var(--fw);font-size:var(--fs-sm)}
|
||||
.pr-arrow{color:var(--muted2);display:flex;align-items:center;flex:none}
|
||||
Reference in New Issue
Block a user