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

日期：2026-08-12 状态：已批准（用户确认五宫格 + 不保留待完成任务）

背景

"我的"页面（pages/profile-main/profile.vue）当前布局偏家庭教育工具风。用户希望将其改造成类似电商小程序"我的"页面的常见结构：订单状态宫格 + 购物车 + 收货地址 + 设置菜单。

当前结构

身份卡（保留）
家庭成员速览（保留）
个人成就统计（保留）
待办提醒区（reminder-section，条件显示：待完成任务/待付款/待收货/售后）
功能入口网格（menu-grid-section：家庭成员/家庭挑战/成长记录/健康报告/测评预约/设置）
退出登录（保留）

目标结构

身份卡（不变）
家庭成员速览（不变）
个人成就统计（不变）
"我的订单"五宫格区块（常驻显示，替代原待办提醒区）
设置菜单项（替代原功能入口网格中的设置，放在退出登录上方）
退出登录（不变）

改动明细

① 待办提醒区 → "我的订单"电商区块（常驻）

┌─────────────────────────────┐
│ 我的订单             全部订单 › │
│ ┌─────┐ ┌─────┐ ┌─────┐ ┌─────┐ ┌─────┐ │
│ │ 💳   │ │ 📦   │ │ 🚚   │ │ 🔧   │ │ 📋   │ │
│ │ 待付款 │ │ 待发货 │ │ 待收货 │ │ 售后  │ │ 全部  │ │
│ │ (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：完善信息/家庭成员/邀请加入/设置密码/隐私设置/关于浠艾福）

④ 附带修正

订单字段映射修正：loadOrderCounts() 现有映射把 paid 放到"待付款"，错误。后端返回 pending/paid/shipped/refunding，修正为：
- 待付款 = pending
- 待发货 = paid
- 待收货 = shipped
- 售后 = refunding
- 全部 = total
购物车角标加载：loadCartCount() 方法已存在但 loadAllData() 未调用，补上调用。
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
不改动个人成就统计区数据加载逻辑

2026-08-12-profile-ecommerce-style-design.md 4.9 KB История Исходник