P28 周边图鉴页

P28 周边图鉴页

页面概述

• 页面名称：周边图鉴页
• 页面目标：承载图鉴解锁入口与图鉴列表
• 适用角色：已登录用户
• 页面入口：P21

页面组成

1. 统计区

• 字段：unlockedCount、totalCount
• 说明：展示已解锁图鉴数

2. 解锁入口区

• 字段：unlockDesc、loadingAnimation
• 说明：进入 NFC 解锁模式

3. 解锁成功弹窗

• 字段：unlockStatus、goodsName、goodsImage、atlasName、atlasImage、unlockTime、rewardType、rewardValue、prizeName、contactHint
• 说明：
  • 用于展示图鉴解锁成功反馈
  • 奖励类型支持：积分 / 核销码 / 实物
  • 核销码/实物奖励领取逻辑，参考抽奖中奖后的客服领取引导

4. 已解锁列表

• 字段：atlasId、atlasName、atlasIcon、unlockTime
• 说明：展示已解锁图鉴

5. 未解锁列表

• 字段：atlasId、atlasName、atlasIcon
• 说明：展示未解锁图鉴

按钮与动作

按钮	显示条件	动作
开始解锁	固定显示	进入图鉴 NFC 解锁流程
图鉴卡片	有数据	打开 P29

交互逻辑

• 点击“开始解锁”后，进入当前页内的 NFC 监听模式
• 该逻辑为 AI假设项 A11

校验规则

• 图鉴解锁仅对带芯片周边有效
• 同一图鉴不可重复奖励

状态与异常处理

• 空状态：暂未配置图鉴内容
• 异常提示 / 解锁失败：未识别到有效周边芯片，请重试

跳转关系

• P28 -> P29

埋点建议

• atlas_list_show
• atlas_unlock_start
• atlas_unlock_success

开发要点

• 页面需同时支持已解锁与未解锁图鉴的差异化展示
• NFC 解锁成功后需返回结构化结果，用于驱动：
  • 图鉴状态更新
  • 奖励信息展示
  • 成功弹窗渲染
• 奖励发放逻辑应与抽奖模块中核销码/实物领取引导保持一致