CreateGame 创建比赛

设计思想

1. 每改变一次表单，就更新一次内部数据A
2. 内部数据A时可以随时提交的，也就是点击提交时，A不用任何计算，好处是，表单产生关联的时候，可以用这个最终数据来校验
3. 内部数据A相当于总线

引入

import PressCreateGame from '@tencent/press-plus/press-create-game/press-create-game';

export default {
  components: {
    PressCreateGame,
  }
}

代码演示

基础用法

<PressCreateGame
  :match="match"
  @clickRule="clickRule"
  @update:match="updateMatch"
  @showDialog="showDialog"
  @confirm="confirm"
/>

export function getMockMatch() {
  return {
    awards: [
      {
        option: '冠军奖',
        img: 'https://dummyimage.com/104x104',
        name: '',
      },
      {
        option: '亚军奖',
        img: 'https://dummyimage.com/104x104',
        name: '',
      },
      {
        option: '季军奖',
        img: 'https://dummyimage.com/104x104',
        name: '',
      },
    ],
    joinEnd: 1706343600,
    actStartTime: 1706344200,
    mapType: 1075,
    mapName: '经典模式 - 海岛',
    boType: 1,
    modelList: [
      '共一局',
      '共二局',
      '共三局',
    ],
    chatGroupCode: '',
    logoPic: 'https://image-1251917893.file.myqcloud.com/tip-project/pubg/pubg-match/pubg-main--logo.png',
    startBattleType: 1,
    childPic: 'https://igame-10037599.cos.ap-shanghai.myqcloud.com/3e107aa6-3064-3fb6-298c-5f1a0051922c.jpeg',
    matchName: '493875317的比赛',
    general_reward_desc: encodeURIComponent(JSON.stringify([
      {
        title: '',
        pic: 'https://image-1251917893.file.myqcloud.com/igame/match/gp/horz-match/prize.png',
        text: '',
      },
      {
        title: '',
        pic: 'https://image-1251917893.file.myqcloud.com/igame/match/gp/horz-match/prize.png',
        text: '',
      },
      {
        title: '',
        pic: 'https://image-1251917893.file.myqcloud.com/igame/match/gp/horz-match/prize.png',
        text: '',
      },
    ])),
    roundTimeCfg: [
      {
        round_id: 1,
        stime: 1706344200,
      },
    ],
    moduleCfg: [
      {
        module_id: 1075,
        module_name: '经典模式 - 海岛',
        game_view: 1,
      },
    ],
  };
}


export default {
  data() {
    return {
      match: getMockMatch(),
    };
  },
  methods: {
    clickRule() {
      this.onGTip('[clickRule]');
    },
    updateMatch(data) {
      this.onGTip('[updateMatch]');
      console.log('[updateMatch]', data);
    },
    showDialog(...args) {
      console.log('[showDialog]', args);
      this.onGTip(`[showDialog] ${args[0]}`);
    },
    confirm() {
      this.onGTip('[confirm]');
    },
  },
}

API

Props

参数	说明	类型	默认值
match	赛事信息	object	-
is-modify	是否为编辑模式	boolean	false
show-preview	是否显示预览按钮	boolean	false
error-tip-map	错误提示	object	-
system-list	赛制列表	array	-
mode-list	比赛模式列表	array	-
cur-system-index	当前赛制索引	number	0
cur-mode-index	当前模式索引	number	0

Events

事件名	说明	参数
clickRule	点击规则	-
showDialog	展示弹窗	dialogName, payload
confirm	点击确认	-
clickPreview	点击预览	-
update:match	点击预览	match

常见问题

类型说明

表单有下面几类

• showMatchSystem, 比赛赛制
• showMatchMode, 比赛模式
• showUploader, 显示 uploader
• showSwitch, 显示 switch
• 其他，显示正常的 form-item

表单的字段有：

• title
• desc，显示的值
• key
• disabled， 是否禁用
• checked，表示是否开启，switch 类型表单用

moduleCfg, roundTimeCfg 分别对应地图配置、定时开赛时间设置，其长度应该相等。

地图配置

• common_use，表示常用
• disable_ai_live，表示不支持 AI 直播