HoldMatchList 办赛列表

引入

import PressHoldMatchList from '@tencent/press-plus/press-hold-match-list/press-hold-match-list';

export default {
  components: {
    PressHoldMatchList,
  }
}

代码演示

基础用法

<PressHoldMatchList
  :game-list="list"
  :loading="loading"
  :finished="finished"
  @loadMore="loadMore"
  @update:loading="uploadLoading"
  @clickModifyGame="clickModifyGame"
  @clickScheduleManage="clickScheduleManage"
  @clickQuickStart="clickQuickStart"
  @clickLargeStart="clickLargeStart"
  @clickShare="clickShare"
  @clickMatch="clickMatch"
/>

export function getMockHoldMatchList() {
  return Array.from({ length: 10 }).map((_, index) => {
    let tag = '';
    let isTagOrange = false;
    let isTagGreen = false;
    let isTagGray = false;
    let isTagBlue = false;

    const temp = index % 4;


    if (temp === 1) {
      isTagOrange = true;
      tag = '进行中';
    } else if (temp === 2) {
      isTagGreen = true;
      tag = '报名总';
    } else if (temp === 3) {
      isTagGray = true;
      tag = '已结束';
    } else if (temp === 0) {
      isTagBlue = true;
      tag = '待开赛';
    }

    return {
      name: `比赛名称_${index}`,
      timeDesc: '1月26日',
      locationDesc: '广东省广州市',
      labelList: ['自动赛'],

      tag,
      isTagBlue,
      isTagOrange,
      isTagGray,
      isTagGreen,

      prizeImage: '	https://image-1251917893.file.myqcloud.com/igame/match/gp/horz-match/prize.png',
      prizeName: '丰厚奖励',

      modifyButtonText: '修改比赛',
      scheduleManageTip: '请点击按钮给队伍分组',
    };
  });
}


export default {
  data() {
    return {
      loading: false,
      finished: false,
      list: [],
    }
  },
   mounted() {
    this.loading = true;
    this.loadMore();
  },
  methods: {
    uploadLoading(value) {
      this.loading = value;
    },
    loadMore() {
      setTimeout(() => {
        this.list = this.list.concat(getMockHoldMatchList());
        if (this.list.length > 50) {
          this.finished = true;
        }
        this.loading = false;
      }, 300);
    },
  },
}

API

Props

参数	说明	类型	默认值
finished	是否加载完成	boolean	false
loading	是否在加载中	boolean	false
game-list	赛事列表	array	-

Events

事件名	说明	参数
clickQuickStart	点击快速赛	-
clickLargeStart	点击大型赛	-
loadMore	加载更多	-
clickShare	点击分享	game
clickModifyGame	点击修改比赛	game
clickScheduleManage	点击赛程管理	game
clickMatch	点击赛事	game
update:loading	更新 loading	loading

类型说明

type GameItem = {
  name: string;
  timeDesc?: string;
  locationDesc?: string;
  labelList?: Array<string>;

  tag: string;
  isTagBlue?: boolean;
  isTagOrange?: boolean;
  isTagGray?: boolean;
  isTagGreen?: boolean;

  prizeImage?: string;
  prizeName?: string;

  modifyButtonText: string;
  scheduleManageTip?: string;
}
type IGameList = Array<GameItem>