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

`pages/tpl/style3/signup.vue` 是一个用于用户报名赛事活动的页面。以下是其详细的交互流程和 API 调用分析。

### 1. 交互流程

1.  **页面加载 (`onLoad`)**:
    *   **参数解析**: 页面初始化时，会从 URL 参数中获取关键信息，包括 `token` (用户令牌), `id` (赛事ID，即 `ecId`), `from` (指示用户从哪个页面跳转而来，用于返回逻辑)。
    *   **模块初始化**: 调用 `cardfunc.init()` 初始化卡片功能相关模块。
    *   **配置获取**: 通过 `cardfunc.getCardConfig()` 加载页面的配置信息。这些配置包括页面样式、规则文本、输入字段的标签等。配置加载完成后，`pageReady` 状态会变为 `true`，页面内容将显示给用户。
    *   **数据获取**:
        *   调用 `getCardDetailQuery()` 以获取当前赛事的详细信息。
        *   调用 `matchRsDetailQuery()` 获取赛事的榜单数据，这通常用于检查是否有新数据更新并可能触发通知提示。

2.  **用户填写信息**:
    *   **昵称 (`nickName`)**: 页面提供一个输入框供用户填写昵称。如果用户之前已报名，该字段可能会预填充。用户点击输入框时，会触发 `checkToken` 函数，用于验证用户登录状态。
    *   **组织/单位 (`coiId`/`coiName`)**: 用户可以通过 `e-select` 组件选择或搜索所属的组织或单位。此组件支持关键字过滤，方便用户快速定位。
    *   **活动信息展示**: 页面还会显示赛事的活动时间、倒计时，以及从配置中加载的介绍 (`introduce`) 和活动规则 (`activityRules`)。

3.  **报名操作 (`btnSignup`)**:
    *   **前置验证**: 用户点击“报名”按钮时，系统会进行一系列验证：
        *   检查用户是否已登录 (`token` 是否有效)。
        *   验证昵称 (`nickName`) 字段是否已填写。
        *   验证组织/单位 (`coiId`) 是否已选择。
    *   **报名信息确认**: 如果所有验证通过，会弹出一个 `alertDialog` 确认框，向用户展示即将提交的报名信息，包括赛事名称、填写的昵称和选择的组织。
    *   **提交报名**: 用户在确认框中点击“确认”后，调用 `onlineMcSignUp()` 方法将报名数据提交至后端。
    *   **结果反馈与跳转**:
        *   如果报名成功，会显示“比赛报名成功！”的提示信息，随后页面会自动跳转到该赛事的排行榜页面 (`/pages/tpl/style3/rankList`)。
        *   如果报名失败，将显示“出错了，报名失败”的提示信息。

4.  **辅助功能与导航**:
    *   **返回功能 (`btnBack`)**: 页面顶部的返回按钮，根据 `from` 参数的设置，可以返回到用户来时的页面，或者在没有指定 `from` 的情况下，返回到 APP 的主页 (`action://to_home/`)。
    *   **信息/规则弹窗 (`btnInfo`)**: 页面顶部的信息按钮，点击后会通过 `my-popup` 组件弹出包含详细规则或介绍的窗口。
    *   **首次进入提示 (`dealFirstEnter`)**: 页面会检查本地存储 (`localStorage`) 是否有当前赛事ID对应的首次进入标志。如果是首次进入，会自动弹出信息/规则弹窗，以引导用户了解规则。

### 2. 调用的 API

该页面通过 `uni.request` 封装，调用了以下后端接口，这些接口的定义通常在 `common/api.js` 中：

1.  **`apiCardDetailQuery`**:
    *   **用途**: 获取指定赛事 (`ecId`) 的详细信息。
    *   **参数**: `ecId` (赛事ID)。
    *   **返回数据示例**: 包含 `mcId` (赛事ID), `mcName` (赛事名称), `mcType` (赛事类型), `beginSecond` (开始时间戳), `endSecond` (结束时间戳)，以及用户的 `coiId` (已报名的组织ID), `coiName` (已报名的组织名称), `teamNum` (队伍编号), `nickName` (昵称) 等信息。
    *   **后续动作**: 获取这些信息后，页面会根据时间戳计算并显示活动状态 (`mcState`)，并启动倒计时更新定时器，随后会调用 `getOnlineMcSignUpDetail`。

2.  **`apiOnlineMcSignUpDetail`**:
    *   **用途**: 获取线上赛报名页面所需的详细数据，主要包括可供选择的组织列表。
    *   **参数**: `mcId` (赛事ID)。
    *   **返回数据示例**: `coiRs` (一个组织列表数组，每个元素包含 `coiId` 和 `coiName`)，以及一个可选的 `name` (可能作为默认昵称)。
    *   **后续动作**: `coiRs` 会被用来填充页面的 `<e-select>` 组织选择器。

3.  **`apiOnlineMcSignUp`**:
    *   **用途**: 提交用户的线上赛报名数据。
    *   **参数**: `mcId` (赛事ID), `coiId` (选择的组织ID), `selectTeam` (队伍编号，默认为 0), `nickName` (用户填写的昵称)。
    *   **返回数据示例**: 包含 `code` 字段，表示操作结果状态码。
    *   **后续动作**: 根据 `code` 判断报名是否成功，并进行相应的提示和页面跳转。

4.  **`apiMatchRsDetailQuery`**:
    *   **用途**: 查询赛事的榜单或结果详情。
    *   **参数**: `ecId` (赛事ID)。
    *   **在此页面中的作用**: 页面会获取此 API 返回的数据，将其 `JSON.stringify` 后与本地存储中的旧数据进行对比。如果数据有变化，可能会触发一个“小红点”通知 (`dealNotice` 方法)，提示用户有新的榜单信息。

### 3. 使用的组件

*   **`<my-topbar>`**: 页面顶部的导航栏，负责显示赛事名称和提供返回、信息按钮。
*   **`<e-select>`**: 一个自定义的选择器组件，用于用户选择组织或单位，并支持输入关键字进行过滤。
*   **`<my-popup>`**: 自定义的弹窗组件，用于显示活动的介绍和规则。
*   **`<uni-popup>` 和 `<uni-popup-dialog>`**: 用于在用户点击报名时，弹出确认报名信息的对话框。

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

*   **`firstEnter-tpl-style3-{ecId}`**: 用于存储一个标志，指示用户是否是第一次进入当前赛事的报名页面。如果是首次进入，系统会主动弹出活动规则弹窗。
*   **`rank-tpl-style3-{ecId}`**: 用于存储 `apiMatchRsDetailQuery` 返回数据的 JSON 字符串。这用于比较当前榜单数据和用户上次查看时的数据是否有更新，并显示通知。