2026-08-09-wealth-page-redesign.md 14 KB

富维度页面 Redesign 设计文档

  • 日期:2026-08-09
  • 主题:富维度首页 pages/wealth/index 重新设计
  • 方案:方案一「💧 财富之泉」(水元素主题)
  • 核心理念:富属水 → 水=流动+积累 → 用水的意象表达财富增长与成长

目标

解决当前富页面的问题:

  1. 工具化:一排排数字卡片+导航链接,视觉平淡
  2. 配色不一致:富维度五行属水,色值 #F59E0B(琥珀金),但 PageBanner 用了蓝色 #42A5F5
  3. 无成长感:只有静态快照数字,没有阶段/趋势表达
  4. 无视觉化财富表达:缺乏视觉层次,子维度只是颜色变化的数字
  5. 与身/智/心详情页的视觉丰富度差距明显

设计原则

  • 沿用项目统一设计 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 配置