Press Plus

# ScheduleListView 赛程列表

# 引入

import PressScheduleListView from 'press-plus/press-schedule-list-view/press-schedule-list-view';

export default {
  components: {
    PressScheduleListView,
  }
}

# 代码演示

# 基础用法

<PressScheduleListView
  :sche-list="mockData"
  :loading.sync="loading"
  :finished="finished"
  @loadMore="loadMore"
  @clickFilter="clickFilter"
  @onClickScheItem="onClickScheItem"
  @onClickScheItemButton="onClickScheItemButton"
/>

export default {
  data() {
    return {
      mockData: [MOCK_ALL_SCHE_LIST[0][0].slice(0, 10)],
      loading: false,
      finished: false,
    };
  },
  methods: {
    updateLoading(value) {
      this.loading = value;
    },
    loadMore() {
      console.log('[loadMore]');
      if (this.finished) {
        return;
      }
      this.loading = true;

      setTimeout(() => {
        this.mockData = this.mockData.concat(this.mockData);
        this.loading = false;
        if (this.mockData.length >= 60) {
          this.finished = true;
        }
      }, 1200);
    },
    clickFilter(...args) {
      console.log('[clickFilter]', ...args);
      this.onGTip('[clickFilter]');
    },
    onClickScheItem(...args) {
      console.log('[onClickScheItem]', ...args);
      this.onGTip('[onClickScheItem]');
    },
    onClickScheItemButton(...args) {
      console.log('[onClickScheItemButton]', ...args);
      this.onGTip('[onClickScheItemButton]');
    },
  },
}

# API

# Props

参数 说明 类型 默认值
sche-list 赛程列表，结构与 schedule-tree 中的一致 array -
loading 是否在加载中 boolean false
finished 是否已加载完成 boolean false
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 点击过滤器 -
loadMore 加载更多 -
clickScheItem 点击赛程 schId，scheGroup，schePair
clickScheItemButton 点击赛程中间按钮 { schId，scheGroup，schePair, middleButtonStatus, middleButtonStatusMap }

# 类型说明

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

[[ { battleList: [] } ]]

← ScheduleMatchMode →