Press Next

# MatchMessagesTemplate AI Match Template Component

AI match template component for displaying match information cards, supporting multiple status displays, countdown, prize information and other features.

# Usage

import PressMatchMessagesTemplate from 'press-next/press-match-messages-template/press-match-messages-template';

# Basic Usage

# Simple Template

<template>
  <PressMatchMessagesTemplate
    :content="basicContent"
    @template-btn-click="handleTemplateClick"
    @countdown-finish="handleCountdownFinish"
  />
</template>

<script setup>
const basicContent = {
  title: 'Honor of Kings Summer Tournament',
  pic: 'https://example.com/game.png',
  matchType: 'online',
  tags: [
    { text: '5v5', iconName: 'team' },
    { text: 'Ranked', iconName: 'rank' },
    'Limited Event',
  ],
  buttonText: 'Register Now',
  buttonColor: '#5300c3',
  status: 'upcoming',
  countdownTime: 2 * 60 * 60 * 1000, // 2 hours
  showCountdown: true,
};

const handleTemplateClick = () => {
  console.log('Template button clicked');
};

const handleCountdownFinish = () => {
  console.log('Countdown finished');
};
</script>

# Offline Match

<template>
  <PressMatchMessagesTemplate
    :content="offlineContent"
    @template-btn-click="handleTemplateClick"
  />
</template>

<script setup>
const offlineContent = {
  title: 'Offline Esports Championship Final',
  pic: 'https://example.com/stadium.png',
  matchType: 'offline',
  tags: [
    { text: 'Offline', iconName: 'location' },
    { text: 'Final', iconName: 'trophy' },
  ],
  location: 'Tencent Binhai Building, Nanshan District, Shenzhen',
  buttonText: 'View Details',
  buttonColor: '#138c55',
  status: 'upcoming',
  showCountdown: false,
};
</script>

# With Prize Information

<template>
  <PressMatchMessagesTemplate
    :content="prizeContent"
    @template-btn-click="handleTemplateClick"
    @prize-btn-click="handlePrizeClick"
  />
</template>

<script setup>
const prizeContent = {
  title: 'Mobile Game Championship',
  pic: 'https://example.com/mobile-game.png',
  matchType: 'online',
  prize: {
    pic: 'https://example.com/trophy.png',
    title: 'Champion Reward',
    description: 'Game Skin Pack + $1000 Cash',
  },
  buttonText: 'Join Now',
  status: 'upcoming',
};

const handlePrizeClick = () => {
  console.log('Prize information clicked');
};
</script>

# Different Status

<template>
  <!-- Ongoing status -->
  <PressMatchMessagesTemplate
    :content="{ ...content, status: 'doing' }"
  />
  
  <!-- Finished status -->
  <PressMatchMessagesTemplate
    :content="{ ...content, status: 'finished' }"
  />
  
  <!-- Cancelled status -->
  <PressMatchMessagesTemplate
    :content="{ ...content, status: 'cancelled' }"
  />
</template>

# API

# Props

Attribute Description Type Default
content Template content TemplateContent {}

# Events

Event Description Parameters
template-btn-click Triggered when template button clicked -
prize-btn-click Triggered when prize info clicked -
countdown-finish Triggered when countdown finished -

# TemplateContent Data Structure

interface TemplateContent {
  title: string;                    // Title
  pic: string;                      // Image URL
  matchType?: 'online' | 'offline'; // Match type
  tags?: Array<string | TagConfig>; // Tag list
  location?: string;                // Location (for offline matches)
  buttonText?: string;              // Button text
  buttonColor?: string;             // Button color
  prize?: PrizeInfo;                // Prize information
  status?: MatchStatus;             // Status
  countdownTime?: number;           // Countdown time (milliseconds)
  countdownText?: string;           // Countdown text
  showCountdown?: boolean;          // Whether to show countdown
}

# TagConfig Data Structure

interface TagConfig {
  text: string;      // Tag text
  iconName?: string; // IconPlus name
}

# PrizeInfo Data Structure

interface PrizeInfo {
  pic: string;          // Prize image URL
  title?: string;       // Prize title
  description?: string; // Prize description
}

# MatchStatus Type

type MatchStatus = 'upcoming' | 'doing' | 'finished' | 'cancelled';
  • upcoming: Coming soon
  • doing: Ongoing
  • finished: Finished
  • cancelled: Cancelled

# Notes

  • Component automatically displays online/offline labels based on matchType
  • Button is automatically disabled when status is finished or cancelled
  • Countdown feature requires setting countdownTime and showCountdown: true
  • Tags support strings or config objects, config objects can add icons
  • Clicking prize information triggers prize-btn-click event

← MatchMessagesText →