Press Next

# MatchMessagesTemplate AI 办赛模版组件

AI 办赛模版组件，用于展示比赛信息卡片，支持多种状态显示、倒计时、奖品信息等功能。

# 引入

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

# 代码演示

# 基础用法

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

<script setup>
const basicContent = {
  title: "王者荣耀夏季赛",
  pic: "https://example.com/game.png",
  matchType: "online",
  tags: [
    { text: "5v5", iconName: "team" },
    { text: "排位赛", iconName: "rank" },
    "限时活动",
  ],
  buttonText: "立即报名",
  buttonColor: "#5300c3",
  status: "upcoming",
  countdownTime: 2 * 60 * 60 * 1000, // 2小时
  showCountdown: true,
};

const handleTemplateClick = () => {
  console.log("点击模板按钮");
};

const handleCountdownFinish = () => {
  console.log("倒计时结束");
};
</script>

# 线下赛事

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

<script setup>
const offlineContent = {
  title: "线下电竞大赛总决赛",
  pic: "https://example.com/stadium.png",
  matchType: "offline",
  tags: [
    { text: "线下赛", iconName: "location" },
    { text: "总决赛", iconName: "trophy" },
  ],
  location: "深圳市南山区腾讯滨海大厦",
  buttonText: "查看详情",
  buttonColor: "#138c55",
  status: "upcoming",
  showCountdown: false,
};
</script>

# 带奖品信息

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

<script setup>
const prizeContent = {
  title: "移动游戏锦标赛",
  pic: "https://example.com/mobile-game.png",
  matchType: "online",
  prize: {
    pic: "https://example.com/trophy.png",
    title: "冠军奖励",
    description: "游戏皮肤礼包 + 1000元现金",
  },
  buttonText: "立即参赛",
  status: "upcoming",
};

const handlePrizeClick = () => {
  console.log("点击奖品信息");
};
</script>

# 不同状态

<template>
  <!-- 进行中状态 -->
  <PressMatchMessagesTemplate :content="{ ...content, status: 'doing' }" />

  <!-- 已结束状态 -->
  <PressMatchMessagesTemplate :content="{ ...content, status: 'finished' }" />

  <!-- 已取消状态 -->
  <PressMatchMessagesTemplate :content="{ ...content, status: 'cancelled' }" />
</template>

# API

# Props

参数 说明 类型 默认值
content 模版内容 TemplateContent {}

# Events

事件名 说明 参数
template-btn-click 点击模版按钮时 -
prize-btn-click 点击奖品信息时 -
countdown-finish 倒计时结束时 -

# TemplateContent 数据结构

interface TemplateContent {
  title: string; // 标题
  pic: string; // 图片URL
  matchType?: "online" | "offline"; // 比赛类型
  tags?: Array<string | TagConfig>; // 标签列表
  location?: string; // 位置信息（线下赛）
  buttonText?: string; // 按钮文本
  buttonColor?: string; // 按钮颜色
  prize?: PrizeInfo; // 奖品信息
  status?: MatchStatus; // 状态
  countdownTime?: number; // 倒计时时间（毫秒）
  countdownText?: string; // 倒计时文本
  showCountdown?: boolean; // 是否显示倒计时
}

# TagConfig 数据结构

interface TagConfig {
  text: string; // 标签文本
  iconName?: string; // 图标名称
}

# PrizeInfo 数据结构

interface PrizeInfo {
  pic: string; // 奖品图片URL
  title?: string; // 奖品标题
  description?: string; // 奖品描述
}

# MatchStatus 类型

type MatchStatus = "upcoming" | "doing" | "finished" | "cancelled";
  • upcoming: 即将开始
  • doing: 进行中
  • finished: 已结束
  • cancelled: 已取消

# 注意事项

  • 组件会根据 matchType 自动显示线上赛/线下赛标签
  • 当 status 为 finished 或 cancelled 时，按钮会自动禁用
  • 倒计时功能需要设置 countdownTime 和 showCountdown: true
  • 标签支持字符串或配置对象，配置对象可以添加图标
  • 奖品信息点击会触发 prize-btn-click 事件

← MatchMessagesText →