2026-08-09-wealth-page-redesign.md 14 KB
富维度页面 Redesign 设计文档
- 日期：2026-08-09
- 主题：富维度首页
pages/wealth/index重新设计 - 方案：方案一「💧 财富之泉」（水元素主题）
- 核心理念：富属水 → 水=流动+积累 → 用水的意象表达财富增长与成长
目标
解决当前富页面的问题：
- 工具化：一排排数字卡片+导航链接，视觉平淡
- 配色不一致：富维度五行属水，色值
#F59E0B（琥珀金），但 PageBanner 用了蓝色#42A5F5 - 无成长感：只有静态快照数字，没有阶段/趋势表达
- 无视觉化财富表达：缺乏视觉层次，子维度只是颜色变化的数字
- 与身/智/心详情页的视觉丰富度差距明显
设计原则
- 沿用项目统一设计 Token（
uni.scss：扁平圆角卡片、柔和蓝色系） - 富维度专属色系：主色
#F59E0B、渐变#F59E0B → #FBBF24、水面#FEF3C7、深琥珀文字#92400E - 小程序限制：禁止可选链
?.、禁止 CSS Grid（用 flexbox）、禁止:key表达式 - 两端（家长/孩子）共用水元素视觉语言，数据源不同
整体信息架构
┌──────────────────────────────────────────────┐
│ 🌊 财富之泉 顶部主视觉（能量环） │
│ 环形进度 + 水波纹填充 + 财富总分/等级 │
├──────────────────────────────────────────────┤
│ 📈 成长溪流（3 阶段水位：起步/汇流/奔涌） │
│ 未来可替换为折线趋势图 │
├──────────────────────────────────────────────┤
│ 💧 财富子维度水滴（3 个，水满程度=分数） │
├──────────────────────────────────────────────┤
│ 💰 财富数据卡 │
│ 家长：收益/提现/邀请 │
│ 孩子：积分/任务/徽章 │
├──────────────────────────────────────────────┤
│ 🛍️ 功能入口（财富服务 8 宫格 + 底部菜单） │
└──────────────────────────────────────────────┘
角色差异：财富能量环、成长溪流两端共用（数据来源不同）；子维度水滴、财富数据卡按角色切换。
第一节：🌊 财富能量环（顶部主视觉）
全页视觉锚点，是"富"的第一印象。
结构
┌──────────────────────────────┐
│ ╭───────╮ │
│ ╱ ════ ╲ ← 环形进度 │
│ │ 85/100 │ ← 财富总分 │
│ ╲ ✦LV3 ╱ ← 等级 │
│ ╰───────╯ │
│ │
│ 富足 · 财富之泉 │
│ 较上月 ↑ 5.2% │
└──────────────────────────────┘
视觉细节
- 环形：SVG/CSS 圆环，进度弧线用琥珀金→浅金渐变描边，末端水滴形端点
- 填充：环内极浅水波纹底纹（
#FEF3C7淡金），若隐若现波纹动画 - 中心：大号财富总分（如 85），下方小字等级（LV3 富足）
- 底部：金句"富足源于利他与坚持" + 环比变化（占位）
- 配色：
#F59E0B主色，渐变#F59E0B → #FBBF24，水面#FEF3C7
数据
- 财富总分：已有
wealthScore - 等级：由分数映射（如 0-30 播种 / 30-70 成长 / 70-100 富足）
- 环比：占位
↑ +5.2%（待后端补充）
交互
- 环自带轻微呼吸动画
- 点击可查看等级说明
第二节：📈 成长溪流（3 阶段水位）
用"水位线"展示财富积累的阶段性，弥补无趋势数据的不足。未来可平滑替换为折线图。
结构
┌──────────────────────────────────────┐
│ 📈 成长溪流 │
│ ┌──────┐ ┌──────┐ ┌──────┐ │
│ │ 起步 │ → │ 汇流 │ → │ 奔涌 │ │
│ │ 💧 │ │ 🌊 │ │ 🌊🌊 │ │
│ │ 新人 │ │ 成长 │ │ 达人 │ │
│ │ 阶段 │ │ 阶段 │ │ 阶段 │ │
│ │ 0-30% │ │ 30-70%│ │ 70-100│ │
│ └──────┘ └──────┘ └──────┘ │
│ ─────▰▰▰▰▰▰▰▰▰─── 水位 65% ── │
│ 💡 坚持分享，下一阶段"奔涌"在望 │
└──────────────────────────────────────┘
视觉细节
- 3 阶段卡片：起步（水滴）→ 汇流（溪流）→ 奔涌（江河），箭头连接，递进感
- 当前水位线：水平进度条，水波纹渐变填充，显示当前百分比
- 激励文案：底部动态提示，根据当前阶段给出不同建议
- 孩子端文案："学习积累"→"小有收获"→"财富小达人"
- 未来替换：移除本区，直接放入折线趋势图，布局不变
数据
- 当前分数
wealthScore映射到 0-100% 水位
交互
- 滑动查看不同阶段说明，点击阶段卡片查看对应成就
第三节：💧 财富子维度水滴
用"水滴"造型 + "水满程度"表达子维度分数。
结构
┌──────────────────────────────────────────┐
│ 💧 财富维度构成 │
│ ┌──────┐ ┌──────┐ ┌──────┐ │
│ │ 💧 │ │ 💧 │ │ 💧 │ │
│ │ ▓▓▓▓ │ │ ▓▓░░ │ │ ░░░░ │ │
│ │ 85 │ │ 60 │ │ 35 │ │
│ ├──────┤ ├──────┤ ├──────┤ │
│ │金钱 │ │社会 │ │资源 │ │
│ │收入 │ │成就 │ │网络 │ │
│ │权重50%│ │权重30%│ │权重20%│ │
│ └──────┘ └──────┘ └──────┘ │
│ 💡 金钱收入表现优秀，建议提升资源网络 │
└──────────────────────────────────────────┘
视觉细节
- 水滴造型：圆角水滴形（上窄下圆），用
border-radius实现 - 水满程度：内部从底部向上填充渐变色（
#F59E0B琥珀金），填充比例=分数 - 分数：水滴中央白色数字
- 底部标签：子维度名称 + 权重百分比
- 智能提示：底部一行文案，自动指出最高分和最低分项，给出建议
- 孩子端标签："学业成绩"、"社交筹码"、"规则博弈"，权重和文案同步调整
配色
- 填充：
#F59E0B→#FBBF24渐变 - 空区域：
#FEF3C7淡金 - 文字：白色（水上）/
#92400E深琥珀（水下）
第四节：💰 财富数据卡（按角色区分）
家长端
┌──────────────────────────────────────────┐
│ 💰 财富数据（家长） │
│ ┌────────────────────────────────────┐ │
│ │ 💰 累计收益 │ │
│ │ ¥12,850.00 │ │
│ │ ─── 小趋势折线占位 ─── │ │
│ │ 较上月 +8.3% │ │
│ └────────────────────────────────────┘ │
│ ┌──────────┐ ┌──────────┐ │
│ │ 可提现 │ │ 邀请人数 │ │
│ │ ¥3,200 │ │ 18人 │ │
│ │ 提现 → │ │ 邀请 → │ │
│ └──────────┘ └──────────┘ │
│ ┌────────────────────────────────────┐ │
│ │ 我的邀请码：ABCD1234 📋 复制 │ │
│ └────────────────────────────────────┘ │
└──────────────────────────────────────────┘
- 主卡：累计收益独占一行，大号金色数字，下方预留微型趋势线（未来展示）
- 副卡：可提现和邀请人数并排，带"→"操作入口直接跳转
- 邀请码：底部条状卡片，与主卡形成水波纹状层次堆叠
- 配色：主卡
#F59E0B浅底，副卡纯白底
孩子端
┌──────────────────────────────────────────┐
│ 🎯 我的成长财富 │
│ ┌──────────┐ ┌──────────┐ ┌──────────┐│
│ │ ⭐ │ │ 📝 │ │ 🏆 ││
│ │ 积分 │ │ 任务完成 │ │ 徽章 ││
│ │ 1,280 │ │ 23/30 │ │ 5 ││
│ │ 累计积分 │ │ 本月完成 │ │ 已获得 ││
│ └──────────┘ └──────────┘ └──────────┘│
│ 📊 本周成长趋势 │
│ ▁▂▃▂▄▅▆ （迷你柱状图占位） │
│ 一 二 三 四 五 六 日 │
└──────────────────────────────────────────┘
- 三列并排：积分 / 任务完成 / 徽章
- 下方迷你柱状图占位（本周成长趋势）
第五节：🛍️ 功能入口（底部）
结构
┌──────────────────────────────────────────┐
│ 🚀 财富服务 │
│ ┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐ │
│ │ 📝 │ │ 🛡️ │ │ 🎨 │ │ 🏪 │ │
│ │记账 │ │保单 │ │创客 │ │商城 │ │
│ │打卡 │ │管理 │ │中心 │ │首页 │ │
│ └──────┘ └──────┘ └──────┘ └──────┘ │
│ ┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐ │
│ │ 🛒 │ │ 📋 │ │ 🔄 │ │ 📊 │ │
│ │购物车│ │我的 │ │售后 │ │积分 │ │
│ │ │ │订单 │ │服务 │ │记录 │ │
│ └──────┘ └──────┘ └──────┘ └──────┘ │
│ ┌────────────────────────────────────┐ │
│ │ 👤 个人中心 › │ │
│ ├────────────────────────────────────┤ │
│ │ 🚪 退出登录 │ │
│ └────────────────────────────────────┘ │
└──────────────────────────────────────────┘
视觉细节
- 合并：将"增值服务"+"消费中心"合并为一个"财富服务"区域
- 8 宫格：2 行×4 列，图标矢量风格（不再纯 emoji），背景圆角浅金块
- 图标：建议用纯 CSS 图标或简单文本符号替代 emoji，保证跨端一致性
- 底部菜单：保留"个人中心""退出登录"，去掉"积分记录"（并入 8 宫格）
- 间距：8 宫格与底部菜单之间留白分层
入口列表（按优先级）
第一行：记账打卡 | 保单管理 | 创客中心 | 商城首页
第二行：购物车 | 我的订单 | 售后服务 | 积分记录
移除项
- 退出切换按钮（用户确认移除；原
pages/wealth/index中的exit-switch区块）
数据源对接
| 区块 | 数据字段 | 状态 |
|---|---|---|
| 财富能量环 | wealthScore |
✅ 已有 |
| 成长溪流 | wealthScore |
✅ 已有 |
| 子维度水滴（家长） | wealthIncome / wealthAchievement / wealthNetwork |
✅ 已有 |
| 子维度水滴（孩子） | wealthEducation / wealthSocial / wealthPoints |
✅ 已有 |
| 财富数据卡（家长） | totalEarnings / availableAmount / referralCount / referralCode |
✅ 已有 |
| 财富数据卡（孩子） | 积分/任务/徽章 | ⚠️ 需确认现有接口 |
| 成长溪流环比 | ↑ +5.2% |
⚠️ 占位待后端 |
| 趋势图 | 折线/柱状 | ⚠️ 占位待后端 |
待实现组件
基于现有 pages/wealth/index.vue 重构，可能需要新增/改造组件：
WealthEnergyRing（或内联）— 财富能量环- 成长溪流区（内联）
- 改造
WealthSubScores→ 水滴样式 - 财富数据卡（家长/孩子分版）
- 财富服务 8 宫格
范围
- In scope：
pages/wealth/index.vue模板/样式/脚本重构，相关组件改造 - Out of scope：后端新增趋势接口、其他维度页面、TabBar 配置