mobile_h5/card/pages/tpl/style3/rankOverview_analysis.md

pages/tpl/style3/rankOverview.vue 交互流程与 API 分析

pages/tpl/style3/rankOverview.vue 页面是赛事的总览界面，主要用于展示用户在特定赛事（或其分区、地图）中的个人成绩概况，并作为进入实际比赛路线的入口。

1. 交互流程

1. 页面加载 (onLoad):

   • 参数解析: 页面启动时，从 URL 中解析出 token、id (赛事ID ecId) 等参数。
   • 模块初始化: 调用 cardfunc.init() 进行卡片功能模块的初始化。
   • 本地存储键生成: 创建一系列用于本地存储的键，如 firstEnterKey (首次进入引导)、rankKey (榜单数据指纹)、mapKey (地图选择)。
   • 恢复状态: 尝试从本地存储 mapKey 中加载用户上次选择的地图或分组 ID (ocaId)，以恢复上次的查看状态。
   • 检查新用户: 调用 cardfunc.isNewUserQuery() 判断当前用户是否为新用户，这会影响后续的引导流程。
   • 配置加载与数据请求:
     • 调用 cardfunc.getCardConfig() 加载页面相关的配置，包括布局、文案、路线列表 (pathList) 等。
     • 配置加载完成后，会触发 matchRsDetailQuery() 来获取赛事详情和用户成绩数据。
     • 同时会调用 cardfunc.warnMessageQuery() 检查是否有警告消息需要显示。

2. 页面展示与数据更新:

   • 顶部信息: 显示赛事名称 (mcName) 和活动时间 (acttime)。
   • 个人成绩概览: 页面中部区域 (midType0 或 midType1 模板) 展示用户的核心成绩数据，例如总场次 (regionTotalNum)、打点数 (regionTotalCp)、里程 (regionTotalDictance)、积分/百味豆 (regionTotalSysPoint) 和最快配速 (regionFastPace)。这些数据通过 matchRsDetailQuery 获取并实时更新。
   • 地图/分组选择: 提供一个 <e-select> 下拉选择器，允许用户在不同的地图或赛事分组之间切换。这部分数据通过 apiMapListQuery 获取。用户选择不同的地图会触发 eSelectChange 方法，更新 ocaId 并重新加载该地图下的成绩和路线。
   • 比赛路线列表: 页面下部通过 my-pathList 组件展示当前选定地图下的具体比赛路线列表。路线数据来自页面的配置。

3. 用户交互:

   • 开始比赛:
     • 用户可以通过点击 my-pathList 中的某个路线项来选定该路线。
     • 点击底部“开始比赛”按钮 (btnStartGame)：
       • 如果赛事处于进行中 (mcState == 1)，会通过 tools.appAction() 调用原生 APP 接口 (action://to_detail/) 跳转到对应路线的比赛详情页面，开始游戏。
       • 如果赛事尚未开始 (mcState == 0) 或已经结束 (mcState == 2)，则会弹出相应的提示信息。
   • 修改分组/重新报名: 在赛事进行中且允许修改分组的情况下 (allowMcSignUp 为 true)，用户可以点击“修改”按钮 (btnReGroup) 跳转到报名页面 (/pages/tpl/style3/signup)，可能用于重新选择分组。
   • 辅助信息弹窗:
     • 点击顶部的信息按钮 (btnInfo) 会弹出赛事规则弹窗 (mypopup)。
     • 点击中部的“帮助”文本 (btnHelp) 会弹出帮助信息弹窗 (mypopupHelp)。
     • 如果有警告消息，点击黄色卡片图标 (btnWarn) 会弹出警告弹窗 (mypopupWarn)。
   • 新手引导: 如果用户是首次进入页面且符合新用户条件，可能会在点击路线后触发 my-guide 组件显示新手引导。
   • 返回: 点击顶部返回按钮 (btnBack) 会跳转回 rankList 页面。

2. 调用的 API

该页面主要通过 uni.request 调用以下后端 API：

1. apiMapListQuery:

   • 用途: 查询当前赛事关联的地图或分组列表。
   • 参数: mcId (赛事ID)。
   • 作用: 返回的数据 mapList 用于填充 <e-select> 组件的下拉选项，允许用户选择不同的比赛地图或分组。在页面加载时，如果 ocaId 尚未设置，会默认选择第一个地图。

2. apiMatchRsDetailQuery:

   • 用途: 获取当前赛事（和选定地图 ocaId）的详细信息及用户的个人成绩数据。
   • 参数: ecId (卡片ID), ocaId (选定地图/分组ID)。
   • 返回数据:
     • 赛事详情: mcType (赛事类型), mcId (赛事ID), mcName (赛事名称), beginSecond (开始时间戳), endSecond (结束时间戳)。
     • 用户信息: coiName (报名单位名称), nickName (用户昵称)。
     • 个人成绩: regionTotalNum (场次), regionTotalCp (打点数), regionTotalCpRankNum (打点排名), regionTotalSysPoint (百味豆/积分), regionTotalDictance (里程), regionFastPace (最快配速) 等。
   • 联动: 成功获取数据后，会更新页面上的各类成绩展示，计算赛事状态 (mcState)，触发倒计时更新，并调用 isAllowMcSignUp 检查是否允许重新报名。

3. apiIsAllowMcSignUp:

   • 用途: 查询当前赛事是否允许用户进行重新报名或修改分组。
   • 参数: ecId (卡片ID)。
   • 作用: 返回的布尔值 allowSignUp 控制“修改”按钮的可见性。

3. 关键组件与配置驱动

• my-topbar: 顶部导航栏，提供返回、信息和标题显示。
• <e-select>: 用于地图/分组选择的下拉组件。
• my-pathList: 展示比赛路线列表的自定义组件，支持点击选择路线。
• my-popup: 通用弹窗组件，用于显示赛事规则、帮助信息和警告。
• my-guide: 新手引导弹窗组件，针对首次使用的用户。
• cardConfig 配置: 页面大量依赖 cardfunc.getCardConfig 返回的配置对象。例如：
  • config.pathList: 定义了可用的比赛路线及其详情。
  • config.midType: 控制页面中部成绩展示区域的布局和样式。
  • config.subTitle: 页面副标题。
  • config.popupHelpList, config.popupWarnList, config.popupRuleList: 用于各类弹窗显示的内容。

4. 本地存储 (uni.getStorageSync, uni.setStorageSync)

• mapKey: 用于持久化存储用户当前选择的地图/分组 ID (ocaId)，以便下次进入页面时自动加载。
• firstEnterKey: 记录用户是否首次进入该页面，用于触发新手引导弹窗。
• rankKey: 存储赛事数据的指纹，用于检查数据更新（尽管在本页面中主要是用于传递给其他页面，如 rankList）。