Press Plus

# ScheduleDoubleFail 双败赛程

# 引入

import PressScheduleDoubleFail from 'press-plus/press-schedule-double-fail/press-schedule-double-fail';

export default {
  components: {
    PressScheduleDoubleFail,
  }
}

# 代码演示

# 基础用法

<PressScheduleDoubleFail
  :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"
/>

function getScheList(type: string, array: Array<number>) {
  const result = array
    .map((item, index) => Array.from({ length: item })
      .map(() =>  ({
        ...BASE_SCHE,
        battleList: [
          BASE_SCHE.battleList[0],
          BASE_SCHE.battleList[0],
        ],
        roundInfo: {
          ...BASE_SCHE.roundInfo,
          round_type: type,
          round_name: `${type === 'winner' ? '胜者组' : '败者组'}第${index + 1}轮`,
        },
      })));

  return result;
}


function getSingleSche(type: string, roundName: string) {
  const singleSche = {
    ...BASE_SCHE,
    roundInfo: {
      ...BASE_SCHE.roundInfo,
      round_type: type,
      round_name: roundName,
    },
  };

  return singleSche;
}


export function getMockData() {
  const winnerSche = getScheList('winner', [8, 4, 2, 1]);
  const loserSche = getScheList('loser', [8, 4, 4, 2, 2, 1, 1]);


  return [
    ...winnerSche,
    [getSingleSche('winner', '胜者组决赛')],
    ...loserSche,
    [getSingleSche('loser', '败者组第8轮')],
    [getSingleSche('loser', '败者组决赛')],
    [getSingleSche('final', '总决赛')],
  ];
}


const mockData = getMockData();
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);
      this.listViewMode = !this.listViewMode;
    },
    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

# Events

事件名 说明 参数
clickFilter 点击切换筛选轮次 { tags }
clickRoundTab 点击轮次tab round.round_type, round
clickSche 点击赛程组 schId, scheGroup, schePair
clickVideoIcon 点击视频小图标 schId, scheGroup, schePair
clickScheItemButton 点击赛程中间按钮 { schId，scheGroup，schePair, middleButtonStatus, middleButtonStatusMap }
switchTab 切换 Tab curTab， 1 或 2

# 类型说明

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

[[ { battleList: [] } ]]

scheList 包含胜者组、败者组、总决赛，组件内部根据 round_type 为 winner/loser/final 进行区分。

← ScheduleEmpty →