P10 NFC 打卡页

页面概述

页面名称：NFC 打卡页
页面目标：完成景点线下打卡
适用角色：已登录并绑定手机号用户
页面入口：路线详情页、景点详情页
页面跳转：P10 -> P08 / P09

页面组成

1. 线索图片区

字段：clueImageList
说明：展示打卡点线索

2. 识别状态区

字段：loadingAnimation、deviceStatus、nfcStatus
说明：用于展示等待触碰芯片与识别状态

3. 结果弹窗

字段：checkinStatus, spotName, spotImage, rewardType, rewardValue, prizeName, contactHint, resultDesc
说明：
- 展示打卡成功/失败反馈
- 奖励类型支持：积分 / 核销码 / 实物
- 核销码、实物奖励的领取逻辑参考抽奖中奖后的客服领取引导

按钮设计

按钮	显示条件	动作
开始识别	首次进入	初始化 NFC 监听
重新尝试	识别失败	重试识别
返回景点/路线	成功或失败后	返回来源页

交互逻辑

进入页面后，优先校验设备能力与权限状态
校验通过后，进入识别状态
用户触碰 NFC 标签后：
- 调用预校验接口
- 调用确认接口
根据接口结果展示成功或失败弹窗

校验规则

登录状态有效
当前景点未完成打卡
标签属于当前景点的有效标签
幂等键唯一
防止短时间内重复识别

状态设计

加载中

识别中展示 loading 动图

空状态 / 降级

设备不支持 NFC 时，展示降级提示

失败态

识别失败时，展示失败弹窗

异常提示文案

设备不支持：当前设备暂不支持 NFC 打卡
识别失败：打卡识别失败，请重试
重复打卡：该景点已完成打卡

奖励处理

支持以下奖励类型：

积分
核销码
实物

其中：

核销码、实物奖励领取逻辑需复用或参考抽奖中奖后的客服领取引导方案

埋点建议

checkin_page_show
checkin_prepare_success
checkin_confirm_success
checkin_confirm_fail

实现要点

页面仅对已登录且已绑定手机号用户开放
NFC 能力检测应前置，避免用户直接进入不可用流程
识别流程需保证接口调用的幂等性与重复识别防护
成功与失败结果需统一通过结果弹窗反馈
返回动作需根据来源页正确回跳至景点详情页或路线详情页