rankList_analysis.md 5.8 KB
pages/tpl/style3/rankList.vue 交互流程与 API 分析
pages/tpl/style3/rankList.vue 是一个功能丰富的赛事排名列表页面，用于展示个人和团体的多维度成绩。以下是其详细的交互流程、API 调用和功能分析。
1. 交互流程
页面加载 (
onLoad):- 参数解析: 页面初始化时，从 URL 中提取关键参数：
token、id(即ecId，赛事ID) 和ovtype(可选，用于特定视图逻辑)。 - 状态初始化:
- 初始化
cardfunc模块。 - 生成用于本地缓存的 Key，包括
firstEnterKey(首次进入标志)、rankKey(榜单数据指纹)、mapKey(地图选择状态)、messageKey(消息阅读状态)。 - 尝试从本地缓存读取上次选择的地图/校区 ID (
mapKey)，以便恢复用户的浏览上下文。 - 设置页面显示的当前日期 (
today)。
- 初始化
- 配置与数据预加载:
- 调用
cardfunc.getCardConfig()获取页面的动态配置（包括 Tab 标题、榜单字段映射、页面文案等）。 - 检查是否有未读消息 (
unReadMessageQuery) 和警告消息 (warnMessageQuery)。 - 发起
matchRsDetailQuery()请求以获取赛事的基本详情。
- 调用
- 参数解析: 页面初始化时，从 URL 中提取关键参数：
页面显示 (
onShow):- 每次页面显示时，调用
getUserJoinCardQuery()检查用户的报名状态。这将决定页面底部主操作按钮的显示文本（是“我要报名”还是“选择场地/进入比赛”）。
- 每次页面显示时，调用
数据获取与展示:
- 赛事详情与倒计时:
matchRsDetailQuery成功返回后，页面会设置赛事名称、时间，并启动一个每分钟执行一次的定时器来更新倒计时显示。同时，它会触发后续的数据请求：mapListQuery(获取分组/地图列表) 和compStatisticQuery(获取统计数据)。 - 顶部统计:
compStatisticQuery返回的数据（如总里程、总答题数）会展示在页面的顶部区域。 - 榜单数据:
- 页面使用双层 Tab 结构：
- Tab 1 (分组类型): 例如“团体”和“个人”。其中“个人”选项可能包含一个下拉列表，由
mapListQuery返回的数据填充（通常对应不同的校区或组别）。 - Tab 2 (排名维度): 例如“总积分”、“总里程”、“今日配速”等。
- Tab 1 (分组类型): 例如“团体”和“个人”。其中“个人”选项可能包含一个下拉列表，由
- 核心榜单数据通过
getCardRankDetailQuery获取。根据当前选中的地图 ID (ocaId)，请求对应的榜单数据并存储在rankList对象中。 - 组件
my-ranklist根据当前的 Tab 选择，从rankList中提取相应的数据进行渲染。
- 页面使用双层 Tab 结构：
- 赛事详情与倒计时:
用户交互:
- 切换榜单: 用户点击 Tab 1 或 Tab 2 时，触发相应的点击事件，更新
tab1Current或tab2Current索引，从而切换显示的榜单内容。 - 切换分组: 当用户在 Tab 1 的下拉菜单中选择不同的项（如切换校区）时，触发
onSelectChange。这会更新ocaId，保存到本地缓存，并重新调用getCardRankDetailQuery刷新榜单数据。 - 底部按钮 (
btnStartGame):- 已报名: 跳转到
/pages/tpl/style3/rankOverview（概览页）或其他指定页面。 - 未报名: 跳转到
/pages/tpl/style3/signup（报名页）。
- 已报名: 跳转到
- 顶部功能:
- 我的奖券: 点击跳转到成就/奖券页面。
- 兑奖: 点击弹出兑奖地址或跳转到商品列表。
- 消息/规则: 点击图标弹出相应的说明窗口。
- 切换榜单: 用户点击 Tab 1 或 Tab 2 时，触发相应的点击事件，更新
消息与通知:
- 页面会自动检查未读消息和警告。如果有未读且未忽略的消息，或有警告信息，会自动弹出
my-popup提示用户。 - 榜单更新检查逻辑（
dealNotice）也存在，用于提示用户榜单数据是否有变化。
- 页面会自动检查未读消息和警告。如果有未读且未忽略的消息，或有警告信息，会自动弹出
2. 调用的 API
该页面集成了多个后端 API，主要包括：
apiMatchRsDetailQuery:- 用途: 获取赛事的详细信息（名称、开始/结束时间等）。
- 联动: 成功后触发倒计时、地图列表查询和统计数据查询。
apiMapListQuery:- 用途: 获取赛事关联的地图（分组）列表。
- 作用: 数据用于填充 Tab 1 的下拉菜单，允许用户在不同组别（如不同校区）的个人榜单间切换。
apiCompStatisticQuery:- 用途: 获取赛事的全局统计数据。
- 返回: 总里程 (
totalDistance)、总答题数 (totalAnswerNum) 等，展示在页面顶部。
apiCardRankDetailQuery:- 用途: 获取具体的榜单数据。
- 参数:
mcIdListStr(赛事ID),ocaId(当前选中的地图/分组ID),dispArrStr(请求的字段集合)。 - 返回: 一个包含多种排名列表（如团队总分、个人总里程等）的复杂对象。
apiUserJoinCardQuery:- 用途: 查询当前用户的报名状态。
- 作用: 控制底部按钮的功能和文案。
apiIsAllowMcSignUp:- 用途: 查询是否允许重新报名或分组（虽然在当前主流程中未见核心调用，但作为功能储备存在）。
3. 关键组件与本地存储
组件:
my-topbar: 顶部导航与功能入口。my-tab: 支持多级和下拉选择的 Tab 切换组件。my-ranklist: 负责渲染排名列表的核心组件。my-popup: 通用的弹窗组件，用于显示各类信息。
本地存储 (
Storage):mapKey: 持久化用户选择的分组/地图 ID，提升用户体验。messageKey: 记录已读消息，防止重复弹窗干扰用户。firstEnterKey: 用于判断是否首次进入，以展示引导信息。