ScheduleCardGp 赛程卡片

# ScheduleCardGp 赛程卡片

# 引入

import PressScheduleCardGp from '@tencent/press-plus/press-schedule-card-gp/press-schedule-card-gp';

export default {
  components: {
    PressScheduleCardGp,
  }
}

# 代码演示

# 基础用法

<PressScheduleCardGp
  :game-rank="MOCK_DATA.gameRank"
  :child-name="MOCK_DATA.childName"
  :child-type="MOCK_DATA.childType"
  :show-role-info="MOCK_DATA.showRoleInfo"
  :role-name="MOCK_DATA.roleName"
  :device="MOCK_DATA.device"
  :role-id="MOCK_DATA.roleId"
  :battle-list="MOCK_DATA.battleList"
  :cur-showing-battle-index="MOCK_DATA.curShowingBattleIndex"
  :cur-going-battle-index="MOCK_DATA.curGoingBattleIndex"
  :card-state="MOCK_DATA.cardState"
  :is-manual-start="MOCK_DATA.isManualStart"
  :battle-score-list="MOCK_DATA.battleScoreList"
  :card-custom="MOCK_DATA.cardCustom"
  :sign-up-countdown="MOCK_DATA.signUpCountdown"
  :sign-up-title="MOCK_DATA.signUpTitle"
  @changeCurShowingBattleIndex="changeCurShowingBattleIndex"
  @clickLeftIcon="clickLeftIcon"
  @clickRightIcon="clickRightIcon"
  @checkDetailScore="checkDetailScore"
  @clickMainButton="clickMainButton"
/>

# 数据解析

parser-base-card，解析基础赛事卡片
parser-cycle-card。解析循环赛卡片
parser-knockout-card，解析淘汰赛卡片
parser-tree，解析赛程树

# API

# Props

参数	说明	类型	默认值
card-state	赛程状态	string	-
is-manual-start	是否手动开赛	boolean	`false`
join-room-countdown	进入房间倒计时	number	`0`
game-start-countdown	比赛开始倒计时，非对局	number	`0`
battle-scoreList	对局比分列表	array	-
card-custom	自定义信息，比如待开赛的按钮	object	-
sign-up-title	报名标题	string	`距报名截止`
sign-up-countdown	报名倒计时	number	`0`
show-role-info	顶部是否显示角色信息	boolean	`false`
role-name	角色名称	string	-
device	设备	string	-
role-id	角色 `id`	string	-
child-name	子活动名称	string	-
child-type	子活动类型，团队赛还是个人赛	string	-
battle-list	对局列表	array	-
cur-showing-battle-index	当前正在展示的对局索引	number	`0`
cur-going-battle-index	当前正在进行的对局索引	number	`0`
game-rank	比赛总排名	string	-

# Events

事件名	说明	参数
clickMainButton	点击主按钮	-
clickLeftIcon	点击左侧图标	-
clickRightIcon	点击右侧图标	-
changeCurShowingBattleIndex	点击切换对局	`index`
checkDetailScore	点击详细战绩	-
clickChildName	点击子活动名称	-
countdownFinish	倒计时结束	-

# CardState

赛程状态有以下几种：

export const CARD_STATUS_MAP = {
  NOT_SIGN_UP: 'NOT_SIGN_UP', // 未报名
  GAME_WILL_START: 'GAME_WILL_START', // 待开赛
  BATTLE_WILL_START: 'BATTLE_WILL_START', // 比赛即将开始，或者下一对局即将开始
  BATTLE_STARTED: 'BATTLE_STARTED', // 显示“去比赛”

  BATTLE_PLAYING_JOINED: 'BATTLE_PLAYING_JOINED', // 比赛进行中，出战，显示“请等待本场比赛结束”
  BATTLE_PLAYING_NOT_JOINED: 'BATTLE_PLAYING_NOT_JOINED', // 比赛进行中，未出战，显示“您本场未出战”

  RESULT_WAITING: 'RESULT_WAITING', // 比赛结束，等待结果
  RESULT_WIN: 'RESULT_WIN', // 晋级
  RESULT_FAIL: 'RESULT_FAIL', // 淘汰
  RESULT_SHOW_RANK: 'RESULT_SHOW_RANK', // 显示名次，比如 冠军、亚军、第12名
} as const;

# MainButton

按钮类名有以下几种：

export const CARD_BUTTON_CLASS = {
  PRIMARY: 'press-card__button--primary',
  INVALID: 'press-card__button--invalid',
};

按钮文案、提示文案有以下几种：

export const CARD_BUTTON_MAP = {
  LAUNCH_GAME: '进入游戏',
  LAUNCH_GAME_TIP: '倒计时结束前进入游戏，超时无法参赛',

  CAN_NOT_BATTLE: '未出战',

  JUMP_TO_ROOM: '进入比赛',
  JUMP_TO_ROOM_TIP: '进入备战房',

  GROUPING: '去比赛',
  GROUPING_TIP: '等待分组建房中',

  WAIT_START: '待开赛',
  WAIT_VIRTUAL_START_TIP: '开赛前15分钟进入备战房准备',

  BATTLED_ENDED: '对局已结束',
  BATTLE_PLAYING: '比赛进行中',
} as const;

# CardCustom

卡片自定义信息，其为一个对象，key 为 cardState，value 为各种属性，默认值如下：

const PLAYING_CUSTOM = {
  leftIconFont: '',
  leftIconText: '',
  rightIconFont: '',
  rightIconText: '',
};
const RESULT_CUSTOM = {
  leftIconFont: '',
  leftIconText: '',
  rightIconFont: '',
  rightIconText: '',
};

export const DEFAULT_CARD_CUSTOM = {
  GAME_WILL_START: {
    mainButton: '待开赛',
    mainButtonClass: CARD_BUTTON_CLASS.INVALID,
    buttonTips: '',

    leftIconFont: '',
    leftIconText: '',
    rightIconFont: '',
    rightIconText: '',
  },
  BATTLE_WILL_START: {
    mainButton: '待开赛',
    mainButtonClass: CARD_BUTTON_CLASS.INVALID,
    buttonTips: '',

    leftIconFont: '',
    leftIconText: '',
    rightIconFont: '',
    rightIconText: '',
  },
  BATTLE_STARTED: {
    mainButton: '进入游戏',
    buttonTips: '倒计时结束前进入游戏，超时无法参赛',

    leftIconFont: '',
    leftIconText: '',
    rightIconFont: '',
    rightIconText: '',
  },

  BATTLE_PLAYING_JOINED: {
    ...PLAYING_CUSTOM,
  },
  BATTLE_PLAYING_NOT_JOINED: {
    ...PLAYING_CUSTOM,
  },

  RESULT_WAITING: {
    ...RESULT_CUSTOM,
  },
  RESULT_WIN: {
    ...RESULT_CUSTOM,
  },
  RESULT_FAIL: {
    ...RESULT_CUSTOM,
  },
  RESULT_SHOW_RANK: {
    ...RESULT_CUSTOM,
  },
};

# 常见问题

# 切换轮次倒计时变动

由于采用单例，任意时刻只有一个轮次可以展示，切换轮次后倒计时会从传入的 props 开始，如果 props 不更新，也就是不请求最新数据，那么就会在切换轮次时，倒计时“停在原地”。

解决办法是改成传入“时刻”，组件内自己计算倒计时。

横屏

← PrizeList ScheduleListViewGp →