Press Plus

# ScheduleKnockout 淘汰赛程

# 引入

import PressScheduleKnockout from 'press-plus/press-schedule-knockout/press-schedule-knockout';

export default {
  components: {
    PressScheduleKnockout,
  }
}

# 代码演示

# 基础用法

<PressScheduleKnockout
  :sche-list="mockData"
  :round-list="roundList"
  :is-admin="isAdmin"
  :cur-round-filter="curRoundFilter"
  :list-view-mode="listViewMode"
  @clickRoundTab="clickRoundTab"
  @clickSche="clickSche"
  @clickFinalSche="clickFinalSche"
  @clickVideoIcon="clickVideoIcon"
  @clickFilter="clickFilter"
  @clickScheItemButton="clickScheItemButton"
/>

const knockoutSche = [8, 4, 2, 1]
  .map(item => Array.from({ length: item })
    .map(() =>  ({
      ...BASE_SCHE,
      battleList: [
        BASE_SCHE.battleList[0],
        BASE_SCHE.battleList[0],
      ],
      roundInfo: {
        ...BASE_SCHE.roundInfo,
        round_type: 'main',
        round_name: `${item * 4}进${item * 2}`,
      },
    })));

const branch3Sche = {
  ...BASE_SCHE,
  roundInfo: {
    ...BASE_SCHE.roundInfo,
    round_type: 'branch3',
    round_name: '2进1',
  },
};
const mockData = [
  ...knockoutSche,
  [{
    ...BASE_SCHE,
    roundInfo: {
      ...BASE_SCHE.roundInfo,
      round_type: 'main',
      round_name: '2进1',
    },
  }],
  [branch3Sche],
];


const roundList = mockData.map(item => item[0].roundInfo);


export default {
  data() {
    return {
      mockData,
      roundList,
      isAdmin: true,
      curRoundFilter: '全部',
      listViewMode: false,
    };
  },
  methods: {
    clickRoundTab(...args) {
      console.log('[clickRoundTab]', ...args);
      this.listViewMode = !this.listViewMode;
    },
    clickSche(...args) {
      console.log('[clickSche]', ...args);
    },
    clickFilter(...args) {
      console.log('[clickFilter]', ...args);
    },
    clickVideoIcon(...args) {
      console.log('[clickVideoIcon]', ...args);
    },
    clickFinalSche(...args) {
      console.log('[clickFinalSche]', ...args);
    },
    clickScheItemButton(...args) {
      console.log('[clickScheItemButton]', ...args);
    },
  },
}

# API

# Props

参数 说明 类型 默认值
sche-list 赛程列表 array -
list-view-mode 是否列表模式 boolean false
selected-sch-id 选中的赛程 id string -
round-list 轮次列表 array -
cur-round-filter 当前轮次过滤状态 string -
is-admin 是否为管理员 boolean false
is-preview 是否为预览阶段，0 不是， 1 普通预览，2 预览，且自定义了赛程 number 0
my-team-id 我的队伍id string -
sche-sub-status-map 已订阅的赛程uni-id对象，判断是否已订阅 object -
can-show-order-button 是否可以显示订阅按钮，可根据环境设置 boolean true
page 当前赛程树所在页，分组淘汰赛时可用 number 0
total-page 赛程树总页数，分组淘汰赛时可用 number 0
automatic-grouping 是否自动分组 boolean false
cur-going-stage-idx 当前进行中的阶段索引值 number 0
stage-idx 选中的阶段索引值 number 0
child-id 子活动 id number 0

# Events

事件名 说明 参数
clickFilter 点击切换筛选轮次 { tags }
clickRoundTab 点击轮次tab round.round_type, round
clickSche 点击赛程组 schId, scheGroup, schePair
clickFinalSche 点击冠军队伍 -
clickVideoIcon 点击视频小图标 schId, scheGroup, schePair
clickScheItemButton 点击赛程中间按钮 { schId，scheGroup，schePair, middleButtonStatus, middleButtonStatusMap }

# 类型说明

scheList 的数据结构和 press-schedule-tree 中的 scheList 一致。

[[ { battleList: [] } ]]

scheList 包含主赛程和季军赛，组件内部根据 round_type 为 main/branch3 进行区分。

← ScheduleList →