富沛（我的）页面改造设计

日期: 2026-06-19 状态: 设计稿 v1 涉及端: 小程序前端 + 后端API

1. 设计目标

将"我的"Tab页（pages/profile/profile.vue）改造为品牌统一的富沛页面，补全底签设计 §5 的规范要求：

品牌头规范 + 富沛能量值展示
用户卡片新增能量行
功能菜单分组结构化
勋章墙扩展 + API对接
成长报告API对接
邀请入口合并为选类型弹窗
后端新增勋章/成长报告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，改为在品牌头下方新增能量值条）

品牌头下方新增能量值条：

<view class="wealth-energy-bar" v-if="isLoggedIn && wealthEnergy">
  <text class="energy-icon">💧</text>
  <text class="energy-value">{{ wealthEnergy }}</text>
  <text class="energy-label">富沛能量</text>
  <text class="energy-trend" v-if="energyTrend > 0">↑较上周+{{ energyTrend }}</text>
</view>

样式：与品牌头同底色（蓝色渐变），在其下方紧贴，左右padding一致，显示单行能量值。

2.2 用户卡片改造

保留现有结构，在 system-points 行之后新增 wealth-energy 行：

<view class="wealth-energy" v-if="wealthEnergy">
  <text>💧 富沛能量: {{ wealthEnergy }}</text>
  <text class="energy-trend" v-if="energyTrend > 0"> ↑较上周+{{ energyTrend }}</text>
</view>

2.3 财富数据区块

保持现有推广收益区块不变（累计收益/可提现/邀请人数/邀请码）。

2.4 勋章墙改造

当前： 4个硬编码勋章，localStorage判断解锁

改为： 3×3网格，最多显示9个。数据源优先级：

调 POST /api/user/badges 获取真实数据（含 badge.id, name, icon, unlocked）

API失败或为空时 → 回退到本地默认9个mock数据

// 默认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 获取真实数据，包含：

{
  "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 分组标题

每组增加分隔线标题样式：

<view class="menu-group">
  <view class="menu-group-title">── 个人 ──</view>
  <view class="menu-item" ...>📝 修改个人资料</view>
  <view class="menu-item" v-if="role === 'parent'" ...>👶 我的孩子</view>
  <view class="menu-item" v-if="role === 'parent'" ...>👨‍👩‍👧‍👦 家庭成员</view>
</view>
<!-- 重复财富/服务/设置组 -->

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 维度值：

// 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识别用户）

响应：

{
  "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

获取用户最新成长报告摘要。

请求：

{
  "childId": 123
}

响应：

{
  "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）

2026-06-19-profile-page-redesign.md 12 KB Lien permanent Historique Raw