MatchTeamInfoItem 队伍信息项

用于展示队伍信息的卡片组件，支持显示队伍 logo、名称、标签、成员头像等信息，并提供申请加入功能。

引入

import PressMatchTeamInfoItem from 'press-next/press-match-team-info-item/press-match-team-info-item.vue';

代码演示

基础用法

<template>
  <PressMatchTeamInfoItem
    :team-info="teamInfo"
    :tag-items="tagItems"
    type="with-avatars"
    @apply="handleApply"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import PressMatchTeamInfoItem from 'press-next/press-match-team-info-item/press-match-team-info-item.vue';

const teamInfo = ref({
  id: '1',
  name: '王者荣耀战队',
  logo: 'https://example.com/logo.png',
  avatars: [
    'https://example.com/avatar1.png',
    'https://example.com/avatar2.png',
    'https://example.com/avatar3.png',
  ],
  currentMembers: 3,
  maxMembers: 5,
});

const tagItems = ref([
  { text: '热门', type: 'primary' },
  { text: '新手友好', type: 'warning' },
]);

const handleApply = (teamInfo) => {
  console.log('申请加入队伍:', teamInfo);
};
</script>

带头像列表模式

显示队伍成员头像列表，最多显示 5 个头像。

<template>
  <PressMatchTeamInfoItem
    :team-info="teamInfo"
    :tag-items="tagItems"
    type="with-avatars"
    @apply="handleApply"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import PressMatchTeamInfoItem from 'press-next/press-match-team-info-item/press-match-team-info-item.vue';

const teamInfo = ref({
  id: '1',
  name: '王者荣耀战队',
  logo: 'https://example.com/logo.png',
  avatars: [
    'https://example.com/avatar1.png',
    'https://example.com/avatar2.png',
    'https://example.com/avatar3.png',
    'https://example.com/avatar4.png',
    'https://example.com/avatar5.png',
  ],
  currentMembers: 5,
  maxMembers: 10,
});

const tagItems = ref([
  { text: '热门' },
  { text: '5', type: 'quantity' },
]);

const handleApply = (teamInfo) => {
  console.log('申请加入队伍:', teamInfo);
};
</script>

简单模式

只显示成员数量信息，不显示头像列表和操作按钮。

<template>
  <PressMatchTeamInfoItem
    :team-info="teamInfo"
    :tag-items="tagItems"
    type="simple"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import PressMatchTeamInfoItem from 'press-next/press-match-team-info-item/press-match-team-info-item.vue';

const teamInfo = ref({
  id: '1',
  name: '王者荣耀战队',
  logo: 'https://example.com/logo.png',
  currentMembers: 3,
  maxMembers: 5,
});

const tagItems = ref([
  { text: '热门', type: 'primary' },
]);
</script>

自定义操作按钮

通过插槽自定义操作按钮。

<template>
  <PressMatchTeamInfoItem
    :team-info="teamInfo"
    :tag-items="tagItems"
    type="with-avatars"
    @apply="handleApply"
  >
    <template #action-btn>
      <PressButton
        type="success"
        size="small"
        @click="handleCustomApply"
      >
        立即加入
      </PressButton>
    </template>
  </PressMatchTeamInfoItem>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import PressMatchTeamInfoItem from 'press-next/press-match-team-info-item/press-match-team-info-item.vue';
import PressButton from 'press-ui/press-button/press-button.vue';

const teamInfo = ref({
  id: '1',
  name: '王者荣耀战队',
  logo: 'https://example.com/logo.png',
  avatars: [
    'https://example.com/avatar1.png',
    'https://example.com/avatar2.png',
  ],
  currentMembers: 2,
  maxMembers: 5,
});

const tagItems = ref([
  { text: '热门', type: 'primary' },
]);

const handleApply = (teamInfo) => {
  console.log('申请加入队伍:', teamInfo);
};

const handleCustomApply = () => {
  console.log('自定义申请逻辑');
};
</script>

带数量标签

使用 quantity 类型的标签显示成员数量，会自动添加用户图标。

<template>
  <PressMatchTeamInfoItem
    :team-info="teamInfo"
    :tag-items="tagItems"
    type="with-avatars"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import PressMatchTeamInfoItem from 'press-next/press-match-team-info-item/press-match-team-info-item.vue';

const teamInfo = ref({
  id: '1',
  name: '王者荣耀战队',
  logo: 'https://example.com/logo.png',
  avatars: ['https://example.com/avatar1.png'],
  currentMembers: 3,
  maxMembers: 5,
});

const tagItems = ref([
  { text: '热门', type: 'primary' },
  { text: '3', type: 'quantity' },
]);
</script>

API

Props

参数	说明	类型	默认值
team-info	队伍信息对象	TeamInfo	-
tag-items	标签列表	TagItem[]	[]
type	显示类型	'with-avatars' | 'simple'	'with-avatars'
custom-class	自定义样式类名	string	''

TeamInfo 数据结构

interface TeamInfo {
  id: string;
  name: string;
  logo: string;
  avatars?: string[];
  currentMembers: number;
  maxMembers: number;
}

属性	说明	类型	必填
id	队伍 ID	string	是
name	队伍名称	string	是
logo	队伍 logo	string	是
avatars	成员头像列表	string[]	否
currentMembers	当前成员数	number	是
maxMembers	最大成员数	number	是

TagItem 数据结构

interface TagItem {
  text: string;
  type?: 'default' | 'quantity';
}

属性	说明	类型	默认值
text	标签文本	string	-
type	标签类型，quantity 类型会显示用户图标	'default' | 'quantity'	'default'

Events

事件名	说明	回调参数
apply	点击申请加入按钮时触发	teamInfo: TeamInfo

Slots

名称	说明	参数
action-btn	自定义操作按钮	-

主题定制

CSS 变量

组件提供了下列 CSS 变量，可用于自定义样式。

间距系统

名称	默认值	描述
--pmtii-container-padding-tb	$spacing-lg	容器上下内边距
--pmtii-container-padding-lr	$spacing-lg	容器左右内边距
--pmtii-container-gap	$spacing-lg	容器间距
--pmtii-tag-gap	$spacing-xs	标签间距
--pmtii-tag-padding-lr	$spacing-sm	标签左右内边距
--pmtii-tag-margin-tb	$spacing-sm	标签上下边距
--pmtii-avatar-gap	$spacing-sm	头像间距
--pmtii-members-mr	$spacing-sm	成员列表右边距
--pmtii-tag-icon-mr	.04rem	标签图标右边距
--pmtii-action-offset-x	.24rem	操作按钮水平偏移量
--pmtii-action-offset-y	.66rem	操作按钮垂直偏移量

尺寸系统

名称	默认值	描述
--pmtii-logo-size	1rem	logo 尺寸
--pmtii-tag-height	.36rem	标签高度
--pmtii-tag-max-width	2rem	标签最大宽度
--pmtii-avatar-size	.5rem	头像尺寸
--pmtii-tag-icon-size	.24rem	标签图标尺寸
--pmtii-name-width	3.88rem	名称最大宽度

颜色系统

名称	默认值	描述
--pmtii-container-bg	$color-surface-default	容器背景色
--pmtii-logo-bg-color	$color-surface-default	logo 背景色
--pmtii-logo-border-color	$color-divider-light	logo 边框颜色
--pmtii-name-text-color	$color-text-primary	名称颜色
--pmtii-tag-bg-color	$color-divider-light	标签背景色
--pmtii-tag-text-color	$color-text-secondary	默认标签文字颜色
--pmtii-tag-primary-bg	$color-surface-brand-light	主要标签背景色
--pmtii-tag-primary-color	$color-text-brand	主要标签文字颜色
--pmtii-tag-warning-bg	#f0e1c3	警告标签背景色
--pmtii-tag-warning-color	#edb680	警告标签文字颜色
--pmtii-avatar-border-color	$color-divider-default	头像边框颜色
--pmtii-members-text-color	$color-text-invert-default	成员信息颜色
--pmtii-members-label-color	$color-text-brand	成员数量高亮颜色

字体系统

名称	默认值	描述
--pmtii-name-font-size	$font-size-md	名称字体大小
--pmtii-name-font-weight	$font-weight-bold	名称字体粗细
--pmtii-tag-font-size	$font-size-xs	标签字体大小
--pmtii-members-font-size	$font-size-xs	成员信息字体大小

圆角系统

名称	默认值	描述
--pmtii-logo-border-radius	$border-radius-circle	logo 圆角
--pmtii-tag-border-radius	$border-radius-none	标签圆角
--pmtii-avatar-border-radius	$border-radius-circle	头像圆角

自定义样式示例

<template>
  <PressMatchTeamInfoItem
    :team-info="teamInfo"
    :tag-items="tagItems"
    class="custom-team-item"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import PressMatchTeamInfoItem from 'press-next/press-match-team-info-item/press-match-team-info-item.vue';

const teamInfo = ref({
  id: '1',
  name: '王者荣耀战队',
  logo: 'https://example.com/logo.png',
  avatars: ['https://example.com/avatar1.png'],
  currentMembers: 3,
  maxMembers: 5,
});

const tagItems = ref([
  { text: '热门', type: 'primary' },
]);
</script>

<style scoped lang="scss">
.custom-team-item {
  --pmtii-container-bg: #f5f5f5;
  --pmtii-name-text-color: #1890ff;
  --pmtii-tag-primary-bg: #e6f7ff;
  --pmtii-tag-primary-color: #1890ff;
}
</style>

注意事项

1. 组件依赖：

   • 内部使用了 press-ui 的 PressButton 组件
   • 需要确保已正确安装 press-ui 依赖

2. 显示模式：

   • with-avatars 模式：显示成员头像列表和操作按钮
   • simple 模式：不显示头像列表和操作按钮

3. 头像显示：

   • 最多显示 5 个成员头像
   • 超出部分不显示，通过成员数量文字提示

4. 标签类型：

   • default：普通标签
   • quantity：数量标签，会自动添加用户图标

5. 样式隔离：

   • 微信小程序环境下启用了 styleIsolation: 'shared'
   • 自定义样式时注意样式作用域

常见问题

如何自定义标签样式？

可以通过 CSS 变量自定义标签的背景色和文字颜色：

<template>
  <PressMatchTeamInfoItem
    :team-info="teamInfo"
    :tag-items="tagItems"
    class="custom-tags"
  />
</template>

<style scoped lang="scss">
.custom-tags {
  --pmtii-tag-bg-color: #e6f7ff;
  --pmtii-tag-text-color: #1890ff;
  --pmtii-tag-border-radius: 4px;
}
</style>

如何隐藏操作按钮？

使用 simple 模式即可隐藏操作按钮：

<PressMatchTeamInfoItem
  :team-info="teamInfo"
  type="simple"
/>

如何处理申请加入逻辑？

监听 apply 事件，在回调中处理申请逻辑：

<template>
  <PressMatchTeamInfoItem
    :team-info="teamInfo"
    @apply="handleApply"
  />
</template>

<script setup lang="ts">
const handleApply = async (teamInfo) => {
  try {
    // 调用申请接口
    await applyToJoinTeam(teamInfo.id);
    console.log('申请成功');
  } catch (error) {
    console.error('申请失败:', error);
  }
};
</script>

如何自定义操作按钮文字和样式？

使用 action-btn 插槽自定义按钮：

<PressMatchTeamInfoItem
  :team-info="teamInfo"
  @apply="handleApply"
>
  <template #action-btn>
    <PressButton
      type="primary"
      size="small"
      :disabled="isFull"
    >
      {{ isFull ? '已满员' : '申请加入' }}
    </PressButton>
  </template>
</PressMatchTeamInfoItem>