|
|
@@ -0,0 +1,257 @@
|
|
|
+# 富维度页面 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 配置
|
