|
@@ -0,0 +1,102 @@
|
|
|
|
|
+# 我的页面电商风格改造设计
|
|
|
|
|
+
|
|
|
|
|
+日期：2026-08-12
|
|
|
|
|
+状态：已批准（用户确认五宫格 + 不保留待完成任务）
|
|
|
|
|
+
|
|
|
|
|
+## 背景
|
|
|
|
|
+
|
|
|
|
|
+"我的"页面（`pages/profile-main/profile.vue`）当前布局偏家庭教育工具风。用户希望将其改造成类似电商小程序"我的"页面的常见结构：订单状态宫格 + 购物车 + 收货地址 + 设置菜单。
|
|
|
|
|
+
|
|
|
|
|
+## 当前结构
|
|
|
|
|
+
|
|
|
|
|
+1. 身份卡（保留）
|
|
|
|
|
+2. 家庭成员速览（保留）
|
|
|
|
|
+3. 个人成就统计（保留）
|
|
|
|
|
+4. 待办提醒区（`reminder-section`，条件显示：待完成任务/待付款/待收货/售后）
|
|
|
|
|
+5. 功能入口网格（`menu-grid-section`：家庭成员/家庭挑战/成长记录/健康报告/测评预约/设置）
|
|
|
|
|
+6. 退出登录（保留）
|
|
|
|
|
+
|
|
|
|
|
+## 目标结构
|
|
|
|
|
+
|
|
|
|
|
+1. 身份卡（不变）
|
|
|
|
|
+2. 家庭成员速览（不变）
|
|
|
|
|
+3. 个人成就统计（不变）
|
|
|
|
|
+4. **"我的订单"五宫格区块**（常驻显示，替代原待办提醒区）
|
|
|
|
|
+5. **设置菜单项**（替代原功能入口网格中的设置，放在退出登录上方）
|
|
|
|
|
+6. 退出登录（不变）
|
|
|
|
|
+
|
|
|
|
|
+## 改动明细
|
|
|
|
|
+
|
|
|
|
|
+### ① 待办提醒区 → "我的订单"电商区块（常驻）
|
|
|
|
|
+
|
|
|
|
|
+```
|
|
|
|
|
+┌─────────────────────────────┐
|
|
|
|
|
+│ 我的订单 全部订单 › │
|
|
|
|
|
+│ ┌─────┐ ┌─────┐ ┌─────┐ ┌─────┐ ┌─────┐ │
|
|
|
|
|
+│ │ 💳 │ │ 📦 │ │ 🚚 │ │ 🔧 │ │ 📋 │ │
|
|
|
|
|
+│ │ 待付款 │ │ 待发货 │ │ 待收货 │ │ 售后 │ │ 全部 │ │
|
|
|
|
|
+│ │ (N) │ │ (N) │ │ (N) │ │ (N) │ │ (N) │ │
|
|
|
|
|
+│ └─────┘ └─────┘ └─────┘ └─────┘ └─────┘ │
|
|
|
|
|
+│ ┌───────────┐ ┌───────────┐ │
|
|
|
|
|
+│ │ 🛒 购物车(N) │ │ 📍 收货地址 │ │
|
|
|
|
|
+│ └───────────┘ └───────────┘ │
|
|
|
|
|
+└─────────────────────────────┘
|
|
|
|
|
+```
|
|
|
|
|
+
|
|
|
|
|
+- 五宫格：待付款 / 待发货 / 待收货 / 售后 / 全部订单
|
|
|
|
|
+ - 前四格带数量角标（对应订单状态数），点击跳 `/pages/shop/order-list/order-list?status=<value>` 定位对应 tab
|
|
|
|
|
+ - 第五格"全部订单"不带角标，点击跳 `/pages/shop/order-list/order-list`
|
|
|
|
|
+- 下方一行两个入口：
|
|
|
|
|
+ - 购物车（带数量角标）→ `/pages/shop/cart/cart`
|
|
|
|
|
+ - 收货地址 → `/pages/shop/address/address`
|
|
|
|
|
+- 原"待完成任务"提醒**不保留**（用户确认）
|
|
|
|
|
+- 原 `hasReminders` 条件显示逻辑移除，该区块常驻
|
|
|
|
|
+
|
|
|
|
|
+### ② 功能入口网格 → 整个删除
|
|
|
|
|
+
|
|
|
|
|
+`menu-grid-section`（家庭成员/家庭挑战/成长记录/健康报告/测评预约）全部移除。原网格中的"设置"移至下方菜单区。
|
|
|
|
|
+
|
|
|
|
|
+### ③ 设置 → 菜单项形式（退出登录上方）
|
|
|
|
|
+
|
|
|
|
|
+```
|
|
|
|
|
+┌─────────────────────────────┐
|
|
|
|
|
+│ ⚙️ 设置 › │ ← 复用现有 goToSettings()（ActionSheet）
|
|
|
|
|
+├─────────────────────────────┤
|
|
|
|
|
+│ 🚪 退出登录 │ ← 不变
|
|
|
|
|
+└─────────────────────────────┘
|
|
|
|
|
+```
|
|
|
|
|
+
|
|
|
|
|
+- 设置项复用现有 `goToSettings()` 逻辑（ActionSheet：完善信息/家庭成员/邀请加入/设置密码/隐私设置/关于浠艾福）
|
|
|
|
|
+
|
|
|
|
|
+### ④ 附带修正
|
|
|
|
|
+
|
|
|
|
|
+1. **订单字段映射修正**：`loadOrderCounts()` 现有映射把 `paid` 放到"待付款"，错误。后端返回 `pending/paid/shipped/refunding`，修正为：
|
|
|
|
|
+ - 待付款 = `pending`
|
|
|
|
|
+ - 待发货 = `paid`
|
|
|
|
|
+ - 待收货 = `shipped`
|
|
|
|
|
+ - 售后 = `refunding`
|
|
|
|
|
+ - 全部 = `total`
|
|
|
|
|
+2. **购物车角标加载**：`loadCartCount()` 方法已存在但 `loadAllData()` 未调用，补上调用。
|
|
|
|
|
+3. **order-list 支持 status 参数**：`pages/shop/order-list/order-list.vue` 的 `onLoad()` 目前不读取 query 参数，改为 `onLoad(options)` 读取 `options.status` 并设置 `currentStatus`，实现宫格定位。
|
|
|
|
|
+
|
|
|
|
|
+## 数据流
|
|
|
|
|
+
|
|
|
|
|
+- `onShow` → `loadAllData()` → `loadOrderCounts()`（订单角标）+ `loadCartCount()`（购物车角标）
|
|
|
|
|
+- 点击宫格/购物车/收货地址 → `uni.navigateTo` 对应页面
|
|
|
|
|
+
|
|
|
|
|
+## 错误处理
|
|
|
|
|
+
|
|
|
|
|
+- 订单/购物车接口失败：沿用现有 `.catch(function() {})` 静默处理，角标显示 0
|
|
|
|
|
+- 后端接口 404（如 `profile-stats` 未部署）：静默失败，不影响页面渲染
|
|
|
|
|
+
|
|
|
|
|
+## 验证
|
|
|
|
|
+
|
|
|
|
|
+- `node --check` 提取的 script 块语法检查
|
|
|
|
|
+- 微信开发者工具人工验证：五宫格显示、角标数字、各入口跳转、设置菜单、退出登录
|
|
|
|
|
+- 需 HBuilderX 重新打包生效
|
|
|
|
|
+
|
|
|
|
|
+## 范围外
|
|
|
|
|
+
|
|
|
|
|
+- 不改动 `pages/profile/index.vue`（分包旧入口，使用 ProfileMenu 组件）
|
|
|
|
|
+- 不改动 `components/ProfileMenu.vue`
|
|
|
|
|
+- 不改动个人成就统计区数据加载逻辑
|
