Files
sbnews/docs/赛事中心赛程直播赔率组件设计.md
2026-07-31 16:13:31 +08:00

4.3 KiB

赛事中心赛程、直播、赔率组件设计

目标

赛事中心在当前页面内提供“赛程 / 直播 / 赔率”三个内容 Tab。点击 Tab 只切换赛事列表区域,不再切换到世界杯主题组件。

蓝色世界杯专题卡继续保留,点击专题卡仍可进入原世界杯专题页;本次不删除或改变世界杯专题页原有功能。

页面结构

MatchCenterPanel.vue 保留赛事中心标题、AI 助手入口和世界杯专题卡。

新增通用赛事中心内容组件 MatchCenterTabsPanel.vue,统一负责:

  • 赛程、直播、赔率 Tab 状态。
  • 赛程 Tab 的运动分类和联赛筛选。
  • 三类数据的加载、空状态和错误提示。
  • 赛事详情、直播播放等交互。

世界杯专题卡与三个内容 Tab 分离:只有专题卡触发 open-worldcup,三个内容 Tab 不再向 MatchShellPage.vue 发送世界杯视图切换事件。

赛程 Tab

  • 默认选中赛程。
  • 沿用当前赛事中心的赛事列表样式和分组方式。
  • 保留运动分类、联赛筛选、进行中/未开始/已结束分组、折叠状态和已结束赛事分页加载。
  • 点击赛事卡继续进入现有比赛详情页。

直播 Tab

  • 新增通用赛事直播接口,不复用只过滤世界杯的 worldCupLiveCards
  • la_match_live 的有效抓取状态和播放地址为准;赛事关联仅用于补充赛事信息,不作为显示前提。
  • 不显示运动分类或联赛分类筛选,直接展示当前可用的全部直播。
  • 直播卡保留赛事名称、主播、观看数、关注数、公告、封面和播放地址。
  • H5、App 的视频播放和海报模式继续复用现有世界杯直播卡的兼容处理。

赔率 Tab

  • 新增通用赛事赔率接口,不再依赖世界杯赛事映射。
  • 继续读取 la_match_odds,保留滚球盘、今日盘、早盘筛选。
  • 保留联赛/球队关键词搜索。
  • 不显示赛程的运动分类或联赛分类筛选。
  • 仅保留盘口类型筛选,以及按联赛名、主队、客队进行关键词搜索。
  • 赔率记录与站内普通赛事匹配成功时补充赛事 ID、队徽、比分和状态,允许进入比赛详情;未匹配时只展示赔率。
  • 继续过滤没有任何有效盘口值的空赔率记录。

后端接口

在现有 MatchController 和赛事服务中增加通用接口:

  • GET /api/match/liveCards
    • 参数:sport_typeleague_name
    • 返回通用直播卡列表。
  • GET /api/match/odds
    • 参数:sport_typeleague_nameshow_typesource_sitekeywordinclude_speciallimit
    • 返回按比赛聚合的赔率列表。

世界杯原接口继续保留,避免影响世界杯专题页:

  • /api/match/worldCupLiveCards
  • /api/match/worldCupOdds

通用与世界杯接口复用服务层的查询、格式化和赛事匹配方法,避免复制赔率盘口组装与直播地址解析逻辑。

世界杯直播接口不再强制按世界杯赛事过滤,和通用直播接口一样展示当前有效直播流。

状态与交互

  • 切换 Tab 时按需加载对应数据,已加载数据可缓存,筛选条件改变后重新请求。
  • 赛程、直播、赔率分别展示独立加载状态和空状态。
  • 接口失败时保留当前筛选条件并展示无数据/提示,不影响切回其他 Tab。
  • 赔率搜索确认、清除关键词和盘口切换均只刷新赔率数据。

改动范围

预计涉及:

  • uniapp/src/packages_match/components/MatchCenterPanel.vue
  • uniapp/src/packages_match/components/MatchCenterTabsPanel.vue
  • uniapp/src/api/match.ts
  • server/app/api/controller/MatchController.php
  • server/app/common/service/match/MatchLiveService.php
  • 赔率通用查询相关服务或控制器辅助方法
  • 业务进度管理.md
  • 设计稿映射.md

不修改数据库表结构,不新增页面路由。

验收标准

  1. 赛事中心默认显示赛程内容。
  2. 点击赛程、直播、赔率只切换当前页面列表区域。
  3. 三个 Tab 切换时不出现世界杯主题头部。
  4. 赛程保持现有赛事列表、运动分类、联赛筛选和分页行为。
  5. 直播展示通用赛事直播,不局限于世界杯。
  6. 赔率保留盘口分类和联赛/球队搜索筛选。
  7. 世界杯专题卡仍能进入原世界杯专题页。
  8. 原世界杯专题页的赛程、直播、赔率等功能不受影响。