P08 路线详情页

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
弹窗-导航	固定显示	调用微信地图导航
弹窗-查看详情	固定显示	打开 P09
路线徽章	固定显示	打开路线徽章弹窗
解锁徽章	全部景点已打卡时高亮	调用徽章解锁接口
分享	固定显示	打开 P11

交互逻辑

1. 进入页面后，拉取路线详情与用户进度。
2. 以手绘地图作为主承载区域，展示所有景点入口。
3. 用户点击地图点位，打开景点说明弹窗。
4. 用户可从弹窗继续执行以下操作：
   • 查看景点详情（跳转 P09）
   • 调用导航
   • 进行打卡（跳转 P10）
5. 景点状态变化后，需刷新当前页面数据。

校验规则

• 未完成全部景点打卡前，不可解锁徽章。
• 已解锁徽章后，不可重复领取额外积分。

状态处理

空状态

• 当地图或点位数据为空时，提示：路线整理中
• 同时禁用相关交互

加载中

• 展示骨架屏

失败态 / 异常提示

• 解锁失败：当前路线尚未完成全部打卡
• 导航失败：无法打开地图，请检查定位权限

跳转关系

• P08 -> P09
• P08 -> P10
• P08 -> P11

埋点建议

• route_detail_show
• route_nav_click
• route_checkin_click
• badge_unlock_click
• badge_unlock_success

实现要点

• 页面核心为地图点位 + 弹窗详情 + 徽章解锁闭环。
• 用户进度与景点状态应与页面展示保持实时一致。
• 徽章解锁按钮需根据打卡完成度动态更新高亮状态。
• 导航能力依赖微信地图能力，需处理定位权限与调用失败场景。