徽章成就页（P26）

页面概述

• 页面名称：徽章成就页
• 页面目标：展示路线徽章收集进度
• 适用角色：已登录用户
• 页面入口：P21

页面组成

1. 统计区

用于展示徽章收集总体进度。

字段	说明
unlockedCount	已获徽章数
totalCount	徽章总数

2. 已解锁列表

用于展示用户已获得的徽章。

字段	说明
badgeId	徽章 ID
badgeName	徽章名称
badgeIcon	徽章图标
unlockTime	解锁时间

3. 未解锁列表

用于展示用户尚未获得的徽章。

字段	说明
badgeId	徽章 ID
badgeName	徽章名称
badgeIcon	徽章图标

交互设计

分组展示逻辑

页面进入后，按以下分组展示：

• 已解锁
• 未解锁

卡片点击

按钮/元素	显示条件	动作
徽章卡片	有数据	打开 P27

校验规则

• 同一路线仅允许展示一枚徽章。

状态与异常处理

空状态

当用户暂无已解锁徽章时，展示：

text 还没有解锁徽章，去路线里完成打卡吧

失败态

当列表加载失败时，展示：

text 徽章信息加载失败，请稍后重试

页面跳转关系

• P26 -> P27

埋点建议

事件名	说明
badge_list_show	徽章列表曝光
badge_item_click	点击徽章卡片