# `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`）。