Press Plus

# ScheduleCard

# Introduction

import PressScheduleCard from '@tencent/press-plus/press-schedule-card/press-schedule-card';

export default {
   components: {
     PressScheduleCard,
   }
}

# Code Demo

# Basic usage

<PressScheduleCard
   :user-nick="scheInfo.userNick"
   :device-str="scheInfo.deviceStr"
   :role-id="scheInfo.roleId"
   :is-not-sign-up="scheInfo.isNotSignUp"
   :card-state="scheInfo.cardState"
   :countdown-time="scheInfo.countdown"
   :button-count-down="scheInfo.buttonCountDown"
   :step-list="scheInfo.stepList"
   :game-stage-list="scheInfo.gameStageList"
   :team-list="scheInfo.teamList"
   :score-list="scheInfo.scoreList"
   :result-list="scheInfo.resultList"
   :result-type="scheInfo.resultType"
   @clickStep="clickStep"
/>

export default {
   data() {
     scheInfo: {
       userNick: '杨',
       deviceStr: 'iOS WeChat',
       roleId: '123123123999',
       countdown: 1000000,
       buttonCountDown: 100000,
       isNotSignUp: false,
       cardState: SCHEDULE_CARD_STATE_MAP.BATTLE_STARTED,
       stepList: getStepList({
         length: 6,
         playingIndex: MOCK_PLAYING_INDEX,
       }),
       gameStageList: getStepList({
         length: 3,
         isStage: true,
         playingIndex: -1,
         curIndex: -1,
       }),
       teamList: getTeamList({
         length: 6,
         readyList: [1, 2, 3],
       }),
       scoreList: getScoreList({
         length: 6,
       }),
       resultList: getResultList(),
       resultType: RESULT_TYPE_MAP.PENDING,
     },
   }
}

# API

# Props

Parameters Description Type Default value
is-not-sign-up Whether it is signing up boolean false
card-state card state string -
countdown-time Countdown, unit ms number 0
button-count-down Button countdown, unit ms number 0
step-list game list array -
game-stage-list stage list boolean -
team-list team list array -
score-list score list array -
result-list result list array -
result-type result type string -
fail-title Failure title string Promotion failed
fail-desc Failure description string This game failed to advance, please participate in other games
pending-text Description of unavailable results string Waiting for the referee to confirm the promotion ranking
user-nick User nickname string -
device-str device description string -
role-id User role ID string -
button-text button copy string -
button-type button type string -
button-tip Button tip copy string -
show-button-count-down Whether to display button countdown string -
button-tip-type Button tip type string -
button-avatar-list List of avatars in button prompts array -

# Events

Event name Description Parameters
clickButton Click button buttonType, cardState, cardStateMap
clickStep Switch games stepItem, stepIndex
checkDataDetail View detailed data cardState, cardStateMap
countDownChange Countdown changes cardState, cardStateMap
countDownFinish Countdown ends cardState, cardStateMap
buttonCountDownFinish Button countdown ends cardState, cardStateMap
exchange switch roles cardState, cardStateMap

# Field Type

cardState types are as follows:

export const SCHEDULE_CARD_STATE_MAP = {
   GAME_WILL_START: 'GAME_WILL_START', // The game is about to start, showing "Registration is about to start"
   BATTLE_STARTED: 'BATTLE_STARTED', // The nth game has started, and "Go to the game" is displayed
   BATTLE_PLAYING: 'BATTLE_PLAYING', // Game 1 is in progress, and "Game in progress" is displayed
   BATTLE_NEXT_WILL_START: 'BATTLE_NEXT_WILL_START', // The previous round is over, the 2nd, 2+ rounds are waiting to start, the points of the previous rounds are displayed, and the "To Be Started + Countdown" button
   GAME_END: 'GAME_END', // The game ends and the promotion results are displayed
};

resultType types are as follows:

export const RESULT_TYPE_MAP = {
   SUCCESS: 'SUCCESS',
   FAIL:'FAIL',
   PENDING: 'PENDING',
};

buttonType types include the following:

export const BUTTON_TYPE_MAP = {
   PRIMARY: 'green',
   DISABLE: 'gray',
};

buttonTipType types are as follows:

export const BUTTON_TIP_TYPE_AMP = {
   TEXT: 'TEXT',
   AVATAR: 'AVATAR',
};

buttonAvatarList type is:

Array<{
   head: string;
   isGreen?: boolean;
   isYellow?: boolean;
}>

# common problem

# Button copy

The component will generate the corresponding button copy and type based on cardState. If props is passed in, props will take precedence.

# Data driven

There are many status cards in the schedule, and the following considerations are made during the sorting process:

  1. The style must be written near the component. If it is not nearby, it must be on the name or path to distinguish it from the styles of other components. Coupling the styles of all components together is difficult to maintain, and it is difficult to find people who will participate later.
  2. It must be data driven, here it is status code driven
  3. The card status code needs to be a Map, and its key is a string, that is, Record<string, string | number>. It cannot be Record<number, any> or number, because number The type is difficult to name and has poor scalability.
  4. When processing data, that is, when the card status code is generated, other data required by the card should be generated together. Otherwise, when other data is needed, it needs to be judged based on the status code again, which is too redundant and easy. omissions or other errors.
  5. Within the component, the external status code should be converted again to the state required by the component.

Here is an overview of several states:

  • To be played
    • Match list, title, countdown, button
  • Go to the game
    • Game list, title, player list, buttons
  • Match in progress (gray button)
    • Game list, title, player list, buttons
  • Game 2+ to be started
    • Game list, title (points ranking), points status, buttons
  • competition is over
    • Title + picture (congratulations on promotion), ranking + points status, button
横屏

← ScheduleContent →