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

`pages/tpl/style3/index.vue` 是一个用于展示赛事卡片概览的页面。以下是其详细的交互流程和 API 调用分析。

### 1. 程序流程分析

1.  **页面初始化 (`onLoad`)**:
    *   **参数解析**: 页面加载时，会从 URL 参数中解析出 `token` (用户令牌)、`id` (卡片ID，即 `ecId`)、`type` (卡片类型，例如“锦标赛”) 和 `btnText` (按钮文本，例如“开始比赛”) 等信息。
    *   **初始化 `cardfunc`**: 调用 `cardfunc.init()` 方法，对卡片功能相关的模块进行初始化。
    *   **配置获取**: 通过 `cardfunc.getCardConfig()` 获取卡片页面所需的配置数据。这些配置可能包括页面的样式规则和通用设置。配置成功加载后，`pageReady` 状态会被设为 `true`，页面内容将显示给用户。
    *   **数据获取**:
        *   调用 `getCardBaseQuery()` 方法来获取卡片的基本信息。
        *   调用 `matchRsDetailQuery()` 方法获取赛事的详细数据，这部分数据主要用于检测更新和显示“小红点”通知。

2.  **页面逻辑处理**:
    *   **倒计时显示**: `getCardBaseQuery` 成功返回数据后，页面会启动一个定时器 (`setInterval`)。这个定时器每分钟会调用 `getCountdown()` 方法来更新页面上显示的倒计时。当赛事结束时，`isFinished` 状态会被设为 `true`。
    *   **通知检查 (`dealNotice`)**: `matchRsDetailQuery` 返回的数据会被转换为 JSON 字符串，然后与存储在本地缓存 (`uni.getStorage`) 中的旧数据进行对比。如果数据有差异，意味着有新的更新，页面会设置 `notice = true` 来显示一个“小红点”通知图标。
    *   **点击交互 (`btnClick`)**: 用户点击卡片主体时，会根据当前赛事的报名状态和结束状态执行不同的跳转逻辑：
        *   **已报名**: 直接跳转到排行榜页面 (`/pages/tpl/style3/rankList`)。
        *   **未报名**:
            *   **赛事未结束**: 根据 `secondCardName` 的配置，跳转到报名页 (`/pages/tpl/style3/signup`) 或排行榜页。
            *   **赛事已结束**: 跳转到排行榜页面。
        *   所有的页面跳转都通过 `tools.appAction(url)` 方法完成。

3.  **页面卸载 (`onUnload`)**:
    *   为了防止内存泄漏，当页面被卸载时，会调用 `clear()` 方法来清除之前设置的倒计时定时器。

### 2. 调用的 API

该页面通过 `uni.request` 发起以下后端 API 请求，这些 API 的定义通常在 `common/api.js` 中：

1.  **`apiCardBaseQuery`**:
    *   **用途**: 查询卡片的基本信息，例如名称、描述、开始和结束时间等。
    *   **参数**: `ecId` (卡片ID), `pageName` (当前页面名称，此处为 "index")。
    *   **返回数据示例**: 包含 `ecName` (卡片名称), `ecDesc` (卡片简介), `beginSecond` (开始时间戳), `endSecond` (结束时间戳), `secondCardName` (次级卡片名称，用于跳转逻辑)。
    *   **后续动作**: 获取数据后，页面会设置卡片名称、时间，并启动倒计时逻辑。

2.  **`apiUserJoinCardQuery`**:
    *   **用途**: 查询当前用户是否已经报名了该赛事。
    *   **参数**: `ecId` (卡片ID)。
    *   **返回数据示例**: 包含 `isJoin` (布尔值，表示用户是否已报名)。
    *   **后续动作**: 根据 `isJoin` 的值，页面会更新按钮文本或决定 `btnClick` 后的跳转行为。

3.  **`apiMatchRsDetailQuery`**:
    *   **用途**: 查询卡片关联的线上赛的详细活动数据（如榜单数据）。
    *   **参数**: `ecId` (卡片ID)。
    *   **在此页面中的作用**: 页面会将此 API 返回的数据转换为 JSON 字符串，然后与本地存储中的旧数据进行对比 (`dealNotice` 方法)。如果数据有更新，则会在页面上显示一个通知图标（“小红点”）。

### 3. 本地存储 (`uni.getStorage`, `uni.setStorage`)

*   **`rank-tpl-style3-{ecId}`**: 用于存储 `apiMatchRsDetailQuery` 返回的数据的 JSON 字符串。这个值用于在用户返回页面时，与最新的数据进行比较，以判断是否有新的榜单信息需要提醒用户。