P08 路线详情页

页面定位

以手绘地图全屏展示路线景点分布，驱动用户查看景点、打卡并完成路线徽章解锁。

适用角色与入口

• 适用角色：全部用户
• 限制说明：打卡与徽章解锁需登录
• 页面入口：P07 路线卡片

页面组成

1. 手绘地图区（全屏）

字段：mapImage、spotPinList

通过地图点位展示路线中的景点，点击点位弹出景点说明弹窗。

2. 景点说明弹窗

字段：spotName、spotImage、spotDesc、duration、rewardType、rewardValue、checkinStatus、navAction、viewDetailAction

弹窗需集成：

• 景点图片/标题/说明
• 游览时长
• 奖励信息
• 打卡状态
• 导航入口
• 查看详情入口
• 打卡入口

3. 路线徽章入口（顶部）

字段：badgeEntry

提供顶部「路线徽章」按钮。

4. 路线徽章弹窗

字段：routeName、highlight、intro、badgeStatus、bonusRewardInfo

展示路线名称、亮点说明、路线介绍、徽章状态与额外奖励信息。

5. 底部操作区

字段：unlockButtonStatus、shareButton

固定操作栏包含：

• 解锁徽章
• 分享

关键交互

• 点击地图点位：打开景点说明弹窗
• 点击弹窗-打卡：进入 P10 NFC 打卡页
• 点击弹窗-导航：调用微信地图导航
• 点击弹窗-查看详情：进入 P09 景点详情页
• 点击路线徽章：打开路线徽章弹窗
• 点击解锁徽章：调用徽章解锁接口
• 点击分享：进入 P11 海报分享页

业务逻辑

• 进入页面后需同时拉取：
  • 路线详情
  • 用户打卡进度
• 景点状态变化后需刷新当前页数据
• 以手绘地图作为路线核心承载形式

校验规则

• 未完成全部景点打卡前，不可解锁徽章
• 已解锁徽章后，不可重复领取额外积分
• 只有当全部景点已打卡时，解锁按钮高亮

状态与异常处理

• 地图或点位数据为空：提示 路线整理中，并禁用相关交互
• 加载中：展示骨架屏
• 解锁失败：当前路线尚未完成全部打卡
• 导航失败：无法打开地图，请检查定位权限

跳转关系

P08 -> P09 / P10 / P11

埋点建议

• route_detail_show
• route_nav_click
• route_checkin_click
• badge_unlock_click
• badge_unlock_success