Press Next

# MatchPrizeList 比赛奖励列表

MatchPrizeList 组件用于展示比赛奖励信息，支持网格和列表两种布局模式。网格模式支持最大显示数量限制，列表模式显示所有奖品。

# 引入

import PressMatchPrizeList from 'press-next/press-match-prize-list/press-match-prize-list';

# 代码演示

# 网格布局

<PressMatchPrizeList
  :prizes="prizes"
  layout="grid"
  @prizeClick="handlePrizeClick"
  @moreClick="handleMoreClick"
/>

import { ref } from 'vue';

const prizes = ref([
  {
    id: 1,
    name: '冠军',
    imageUrl: 'https://example.com/image1.png'
  },
  {
    id: 2,
    name: '亚军',
    imageUrl: 'https://example.com/image2.png'
  },
  {
    id: 3,
    name: '季军',
    imageUrl: 'https://example.com/image3.png'
  },
  {
    id: 4,
    name: '参与奖',
    imageUrl: 'https://example.com/image4.png'
  }
]);

const handlePrizeClick = (prize) => {
  console.log('点击奖品:', prize);
};

const handleMoreClick = () => {
  console.log('点击更多');
};

# 列表布局

<PressMatchPrizeList
  :prizes="listPrizes"
  layout="list"
  @prizeClick="handlePrizeClick"
/>

const listPrizes = ref([
  {
    id: 1,
    name: '冠军',
    imageUrl: 'https://example.com/image1.png',
    description: '三角洲行动全球总决赛现场观赛资格*2，自选限定皮肤*1'
  },
  {
    id: 2,
    name: '亚军',
    imageUrl: 'https://example.com/image2.png',
    description: '自选限定皮肤*1，小小英雄蛋1组（10+1）'
  },
  {
    id: 3,
    name: '季军',
    imageUrl: 'https://example.com/image3.png',
    description: '小小英雄蛋1组（10+1），游戏内道具若干'
  }
]);

# API

# Props

参数 说明 类型 默认值
title 标题文本 string '比赛奖励'
description 描述文本 string '奖励默认发放至参赛账号'
prizes 奖品列表 Prize[] []
maxDisplay 最大显示数量（仅网格模式） number 3
moreText 更多按钮文本 string '所有奖励'
layout 布局模式 'grid' | 'list' 'grid'
customClass 自定义类名 string -

# Prize 数据结构

键名 说明 类型
id 奖品ID string | number
name 奖品名称 string
imageUrl 奖品图片 string
count 奖品数量 number
description 奖品描述（列表模式显示） string

# Events

事件名 说明 回调参数
prizeClick 点击奖品时触发 prize: Prize
moreClick 点击更多时触发 -

# 布局模式说明

  • 网格模式 (grid): 显示标题和描述，奖品以网格形式排列，支持maxDisplay限制和更多按钮
  • 列表模式 (list): 不显示标题和描述，奖品以列表形式排列，显示所有奖品和描述信息，不受maxDisplay限制

# 主题定制

组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。

# 样式变量

名称 默认值 描述
--pl-content-padding-lr $spacing-md 内容左右间距
--pl-prize-size 1.48rem 奖品尺寸
--pl-prize-border-width .02rem 奖品边框宽度
--pl-list-height 1.96rem 列表模式高度
--pl-prize-head-title-width 2.8rem 标题最大宽度
--pl-prize-img-size 1.44rem 奖品图片尺寸
--pl-prize-icon-size .7rem 图标尺寸
--pl-prize-color-text-primary $color-text-primary 主要文字颜色
--pl-prize-color-text-desc $color-text-invert-light-default 描述文字颜色
--pl-prize-bg-color $color-surface-default 组件背景色
--pl-prize-img-border-color $color-divider-light 图片边框颜色
--pl-prize-img-bg-color $color-divider-light-2 图片背景色
--pl-prize-font-size-md $font-size-md 中等字体
--pl-prize-font-size-xs $font-size-xs 超小字体
--pl-prize-font-size-sm $font-size-sm 小字体
--pl-prize-font-weight-bold $font-weight-bold 粗体字重
--pl-prize-radius-sm $border-radius-sm 小圆角

← MatchPrizeSet →