# 我的页面电商风格改造设计

日期：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`
- 不改动个人成就统计区数据加载逻辑