# 富沛（我的）页面改造设计
**日期:** 2026-06-19
**状态:** 设计稿 v1
**涉及端:** 小程序前端 + 后端API
---
## 1. 设计目标
将"我的"Tab页（`pages/profile/profile.vue`）改造为品牌统一的**富沛**页面，补全底签设计 §5 的规范要求：
1. 品牌头规范 + 富沛能量值展示
2. 用户卡片新增能量行
3. 功能菜单分组结构化
4. 勋章墙扩展 + API对接
5. 成长报告API对接
6. 邀请入口合并为选类型弹窗
7. 后端新增勋章/成长报告API
---
## 2. 页面布局
```
┌──────────────────────────────────────┐
│ PageBanner (theme="wealth") │ 品牌头（更新slogan）
│ 💧 富沛能量: 1,500 │ 新增能量值条
├──────────────────────────────────────┤
│ 👤 张三 家长模式 [切换] │ user-card（保留）
│ 🏅 系统积分: 500 │
│ 💧 富沛能量: 1,500 ↑较上周+120 │ 新增能量行（含趋势）
├──────────────────────────────────────┤
│ 🎯 行动数据（保留） │ 完成任务/购买商品/参加活动/学习课程
├──────────────────────────────────────┤
│ 📊 财富数据（保留） │ 累计收益/可提现/邀请人数 + 邀请码
├──────────────────────────────────────┤
│ 🏅 勋章墙 │ 3×3网格，API驱动
├──────────────────────────────────────┤
│ 📈 成长报告 │ API驱动，本月活跃/累计任务/完成率
├──────────────────────────────────────┤
│ 📋 功能菜单（分组） │
│ ── 个人 ── │
│ 📝 修改个人资料 │
│ 👶 我的孩子 (家长) │
│ 👨👩👧👦 家庭成员 (家长) │
│ ── 财富 ── │
│ 📢 推广中心 │
│ 📊 积分记录 │
│ ── 服务 ── │
│ 👑 会员中心 │
│ 🏪 服务商中心 (服务商) │
│ 🛒 订单管理 │
│ ── 设置 ── │
│ 🔐 设置密码 (家长) │
│ 👁 对家庭成员可见 (家长) │
│ 📨 邀请加入 │
│ 🚪 退出登录 │
└──────────────────────────────────────┘
```
### 2.1 品牌头
**当前：**
```
PageBanner theme="wealth"
tagline="财富管理 · 价值创造"
quote="富足源于利他与坚持"
```
**改为：**
```
PageBanner theme="wealth"
tagline="丰盈内心，富足生活，厚德载物"
quote=""（去掉quote，改为在品牌头下方新增能量值条）
```
**品牌头下方新增能量值条：**
```html
💧
{{ wealthEnergy }}
富沛能量
↑较上周+{{ energyTrend }}
```
样式：与品牌头同底色（蓝色渐变），在其下方紧贴，左右padding一致，显示单行能量值。
### 2.2 用户卡片改造
保留现有结构，在 `system-points` 行之后新增 `wealth-energy` 行：
```html
💧 富沛能量: {{ wealthEnergy }}
↑较上周+{{ energyTrend }}
```
### 2.3 财富数据区块
保持现有推广收益区块不变（累计收益/可提现/邀请人数/邀请码）。
### 2.4 勋章墙改造
**当前：** 4个硬编码勋章，localStorage判断解锁
**改为：** 3×3网格，最多显示9个。数据源优先级：
1. 调 `POST /api/user/badges` 获取真实数据（含 badge.id, name, icon, unlocked）
2. API失败或为空时 → 回退到本地默认9个mock数据
```js
// 默认9个勋章（无API时的fallback）
defaultBadges: [
{ id: 1, icon: '🏆', name: '连续7天', unlocked: false },
{ id: 2, icon: '⭐', name: '积分达人', unlocked: false },
{ id: 3, icon: '🔥', name: '执行之星', unlocked: false },
{ id: 4, icon: '🌟', name: '学习先锋', unlocked: false },
{ id: 5, icon: '💪', name: '体能达人', unlocked: false },
{ id: 6, icon: '🧠', name: '心智成长', unlocked: false },
{ id: 7, icon: '👨👩👧👦', name: '家庭之星', unlocked: false },
{ id: 8, icon: '📚', name: '阅读达人', unlocked: false },
{ id: 9, icon: '🎯', name: '全能冠军', unlocked: false }
]
```
解锁逻辑保留现有 localStorage 判断（streakDays/totalPoints/completedTasks）作为fallback。
### 2.5 成长报告改造
**当前：** localStorage mock数据，`goGrowthReport()` toast "即将上线"
**改为：** 调用 `POST /api/growth/report/latest` 获取真实数据，包含：
```json
{
"monthActiveDays": 15,
"totalTasks": 48,
"completionRate": 85,
"totalPoints": 2580,
"reportUrl": "/pages/growth/report"
}
```
API失败时fallback到现有localStorage mock。
`goGrowthReport()` 改为跳转到 `pages/growth/report`（一个简单的汇总页面，后期可扩展）。
### 2.6 功能菜单改造
#### 2.6.1 分组标题
每组增加分隔线标题样式：
```html
```
#### 2.6.2 邀请合并
移除现有的 `inviteFamily` 和 `inviteTeacher` 两个独立按钮，改为单个 `📨 邀请加入` 菜单项，点击弹出 ActionSheet：
```
┌──────────────────────┐
│ 邀请加入 │
├──────────────────────┤
│ 👨👩👧👦 邀请家人 │ → generateInviteCard('family')
│ 👨🏫 邀请成长规划师 │ → generateInviteCard('guide')
│ 🥗 邀请营养师 │ → generateInviteCard('nutritionist')
│ ... │ → 未来可扩展
└──────────────────────┘
```
ActionSheet选中项后走对应类型的 `generateInviteCard(type)` 逻辑。
#### 2.6.3 新增菜单项
| 菜单项 | 跳转 | 可见性 | 数据状态 |
|--------|------|:------:|:--------:|
| 📢 推广中心 | `/pages/promotion/index` | 全部 | 页面已存在 ✅ |
| 🛒 订单管理 | toast "即将上线" | 全部 | 占位 ⏳ |
#### 2.6.4 移除菜单项
| 菜单项 | 原因 | 新位置 |
|--------|------|--------|
| 💝 心愿单 | 移至心智页·心理Tab | `pages/mind/index.vue`（心理Tab内新增区块） |
---
## 3. 数据流
### 3.1 onShow 数据加载（profile.vue）
```
onShow()
├── isLoggedIn=false → 显示login-prompt，结束
├── isLoggedIn=true
│ ├── loadChildren() ← 现有，不变
│ ├── loadShowToFamily() ← 现有，不变
│ ├── checkVendorStatus() ← 现有，不变
│ ├── loadEnergyData() ← 改造：提取wealth维度能量值
│ ├── loadBadges() ← 改造：先调API，失败fallback本地
│ ├── loadActionData() ← 现有，不变
│ ├── loadWealthData() ← 现有，不变
│ └── loadGrowthReport() ← 新增：调API获取成长报告
└── 页面渲染
```
### 3.2 energy 数据提取
当前 `loadEnergyData()` 调用 `getEnergyOverview(childId)` 只提取了 `totalEnergy`。改造为同时提取 wealth 维度值：
```js
// API返回结构（已有）
{
totalEnergy: 1520,
dimensions: [
{ code: 'body', score: 320 },
{ code: 'mind', score: 380 },
{ code: 'wisdom', score: 290 },
{ code: 'action', score: 310 },
{ code: 'wealth', score: 220 }
]
}
// data中新增
wealthEnergy: 0,
energyTrend: 0 // 与上周对比差值，尚无API则默认为0
```
### 3.3 新增后端API
#### POST /api/user/badges
获取当前用户勋章列表。
**请求：**（无需特殊参数，从token识别用户）
**响应：**
```json
{
"code": 200,
"message": "success",
"data": [
{ "id": 1, "name": "连续7天", "icon": "🏆", "unlocked": true, "unlockedAt": "2026-06-10" },
{ "id": 2, "name": "积分达人", "icon": "⭐", "unlocked": false },
{ "id": 3, "name": "执行之星", "icon": "🔥", "unlocked": true, "unlockedAt": "2026-06-15" },
...最多20个
]
}
```
后端实现：查询 `user_badges` 关联表（若不存在则新建），或基于用户统计数据计算解锁状态。
#### POST /api/growth/report/latest
获取用户最新成长报告摘要。
**请求：**
```json
{
"childId": 123
}
```
**响应：**
```json
{
"code": 200,
"message": "success",
"data": {
"monthActiveDays": 15,
"totalTasks": 48,
"completionRate": 85,
"totalPoints": 2580,
"reportGeneratedAt": "2026-06-19"
}
}
```
后端实现：从任务完成记录、打卡记录等聚合计算。
---
## 4. 心智页心理Tab新增心愿单
在 `pages/mind/index.vue` 的心理Tab内容底部（DimensionTasks之前）新增心愿单快捷入口：
```
┌─ 💝 心愿单 ──────────────────────────┐
│ 孩子可在此创建、兑换心愿 │
│ [去心愿单 →] │
└──────────────────────────────────────┘
```
- 仅家长和孩子登录后可见
- 点击跳转 `pages/rewards/rewards`
- 简单卡片样式，含一段说明文字和一个跳转链接
---
## 5. 样式规范
### 能量值条（品牌头下方）
- 同PageBanner背景色 `#42A5F5` → `#64B5F6`（渐变，通过设置同底色view实现）
- padding: `16rpx 30rpx`
- 字体：36rpx 粗体白色，emoji 36rpx
- 趋势文字：24rpx 浅蓝 `#D6EAF8`
### 用户卡片能量行
- 字体 24rpx，颜色 `#D6EAF8`
- 趋势文字加粗，绿色 `#4ADE80`（上涨）或红色 `#F87171`（下跌）
### 功能菜单分组标题
- 字体 24rpx，颜色 `#ccc`
- padding: `20rpx 30rpx 10rpx`
- 文字居中带横线（如 `── 个人 ──`）
### 勋章网格
- flex-wrap 3列，gap 16rpx
- 勋章图标 48rpx，圆形背景
- 未解锁：灰度 0.4 opacity
---
## 6. 文件变更清单
### 前端修改
| 文件 | 变更内容 |
|------|----------|
| `pages/profile/profile.vue` | 品牌头改造、能量值展示、用户卡片扩展、勋章墙改造、成长报告API、菜单分组+邀请合并 |
| `pages/mind/index.vue` | 心理Tab新增心愿单入口 |
| `utils/api.js` | 新增 `getUserBadges()`, `getGrowthReport()` 方法 |
### 后端新增
| 文件 | 说明 |
|------|------|
| `controller/UserBadgeController.java` | 勋章API |
| `service/UserBadgeService.java` | 勋章业务逻辑（基于统计计算解锁） |
| `controller/GrowthReportController.java` | 成长报告API |
| `service/GrowthReportService.java` | 成长报告聚合统计 |
### 后端数据库（如需要）
| 表 | 说明 |
|----|------|
| `user_badge` | 用户-勋章关联表（记录解锁状态和时间） |
| `badge_definition` | 勋章定义表（id, name, icon, condition） |