# `pages/tpl/style3/rankList.vue` 交互流程与 API 分析

`pages/tpl/style3/rankList.vue` 是一个功能丰富的赛事排名列表页面，用于展示个人和团体的多维度成绩。以下是其详细的交互流程、API 调用和功能分析。

### 1. 交互流程

1.  **页面加载 (`onLoad`)**:
    *   **参数解析**: 页面初始化时，从 URL 中提取关键参数：`token`、`id` (即 `ecId`，赛事ID) 和 `ovtype` (可选，用于特定视图逻辑)。
    *   **状态初始化**:
        *   初始化 `cardfunc` 模块。
        *   生成用于本地缓存的 Key，包括 `firstEnterKey` (首次进入标志)、`rankKey` (榜单数据指纹)、`mapKey` (地图选择状态)、`messageKey` (消息阅读状态)。
        *   尝试从本地缓存读取上次选择的地图/校区 ID (`mapKey`)，以便恢复用户的浏览上下文。
        *   设置页面显示的当前日期 (`today`)。
    *   **配置与数据预加载**:
        *   调用 `cardfunc.getCardConfig()` 获取页面的动态配置（包括 Tab 标题、榜单字段映射、页面文案等）。
        *   检查是否有未读消息 (`unReadMessageQuery`) 和警告消息 (`warnMessageQuery`)。
        *   发起 `matchRsDetailQuery()` 请求以获取赛事的基本详情。

2.  **页面显示 (`onShow`)**:
    *   每次页面显示时，调用 `getUserJoinCardQuery()` 检查用户的报名状态。这将决定页面底部主操作按钮的显示文本（是“我要报名”还是“选择场地/进入比赛”）。

3.  **数据获取与展示**:
    *   **赛事详情与倒计时**: `matchRsDetailQuery` 成功返回后，页面会设置赛事名称、时间，并启动一个每分钟执行一次的定时器来更新倒计时显示。同时，它会触发后续的数据请求：`mapListQuery` (获取分组/地图列表) 和 `compStatisticQuery` (获取统计数据)。
    *   **顶部统计**: `compStatisticQuery` 返回的数据（如总里程、总答题数）会展示在页面的顶部区域。
    *   **榜单数据**:
        *   页面使用双层 Tab 结构：
            *   **Tab 1 (分组类型)**: 例如“团体”和“个人”。其中“个人”选项可能包含一个下拉列表，由 `mapListQuery` 返回的数据填充（通常对应不同的校区或组别）。
            *   **Tab 2 (排名维度)**: 例如“总积分”、“总里程”、“今日配速”等。
        *   核心榜单数据通过 `getCardRankDetailQuery` 获取。根据当前选中的地图 ID (`ocaId`)，请求对应的榜单数据并存储在 `rankList` 对象中。
        *   组件 `my-ranklist` 根据当前的 Tab 选择，从 `rankList` 中提取相应的数据进行渲染。

4.  **用户交互**:
    *   **切换榜单**: 用户点击 Tab 1 或 Tab 2 时，触发相应的点击事件，更新 `tab1Current` 或 `tab2Current` 索引，从而切换显示的榜单内容。
    *   **切换分组**: 当用户在 Tab 1 的下拉菜单中选择不同的项（如切换校区）时，触发 `onSelectChange`。这会更新 `ocaId`，保存到本地缓存，并重新调用 `getCardRankDetailQuery` 刷新榜单数据。
    *   **底部按钮 (`btnStartGame`)**:
        *   **已报名**: 跳转到 `/pages/tpl/style3/rankOverview`（概览页）或其他指定页面。
        *   **未报名**: 跳转到 `/pages/tpl/style3/signup`（报名页）。
    *   **顶部功能**:
        *   **我的奖券**: 点击跳转到成就/奖券页面。
        *   **兑奖**: 点击弹出兑奖地址或跳转到商品列表。
        *   **消息/规则**: 点击图标弹出相应的说明窗口。

5.  **消息与通知**:
    *   页面会自动检查未读消息和警告。如果有未读且未忽略的消息，或有警告信息，会自动弹出 `my-popup` 提示用户。
    *   榜单更新检查逻辑（`dealNotice`）也存在，用于提示用户榜单数据是否有变化。

### 2. 调用的 API

该页面集成了多个后端 API，主要包括：

1.  **`apiMatchRsDetailQuery`**:
    *   **用途**: 获取赛事的详细信息（名称、开始/结束时间等）。
    *   **联动**: 成功后触发倒计时、地图列表查询和统计数据查询。

2.  **`apiMapListQuery`**:
    *   **用途**: 获取赛事关联的地图（分组）列表。
    *   **作用**: 数据用于填充 Tab 1 的下拉菜单，允许用户在不同组别（如不同校区）的个人榜单间切换。

3.  **`apiCompStatisticQuery`**:
    *   **用途**: 获取赛事的全局统计数据。
    *   **返回**: 总里程 (`totalDistance`)、总答题数 (`totalAnswerNum`) 等，展示在页面顶部。

4.  **`apiCardRankDetailQuery`**:
    *   **用途**: 获取具体的榜单数据。
    *   **参数**: `mcIdListStr` (赛事ID), `ocaId` (当前选中的地图/分组ID), `dispArrStr` (请求的字段集合)。
    *   **返回**: 一个包含多种排名列表（如团队总分、个人总里程等）的复杂对象。

5.  **`apiUserJoinCardQuery`**:
    *   **用途**: 查询当前用户的报名状态。
    *   **作用**: 控制底部按钮的功能和文案。

6.  **`apiIsAllowMcSignUp`**:
    *   **用途**: 查询是否允许重新报名或分组（虽然在当前主流程中未见核心调用，但作为功能储备存在）。

### 3. 关键组件与本地存储

*   **组件**:
    *   `my-topbar`: 顶部导航与功能入口。
    *   `my-tab`: 支持多级和下拉选择的 Tab 切换组件。
    *   `my-ranklist`: 负责渲染排名列表的核心组件。
    *   `my-popup`: 通用的弹窗组件，用于显示各类信息。

*   **本地存储 (`Storage`)**:
    *   `mapKey`: 持久化用户选择的分组/地图 ID，提升用户体验。
    *   `messageKey`: 记录已读消息，防止重复弹窗干扰用户。
    *   `firstEnterKey`: 用于判断是否首次进入，以展示引导信息。