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

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 字符串。这用于比较当前榜单数据和用户上次查看时的数据是否有更新，并显示通知。