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

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 字符串。这个值用于在用户返回页面时，与最新的数据进行比较，以判断是否有新的榜单信息需要提醒用户。