MatchCreateTeamPopup 创建战队弹窗

# MatchCreateTeamPopup 创建战队弹窗

创建战队的弹窗组件，用于收集战队基本信息。支持头像上传、名称输入、城市选择、入队审核开关、群聊二维码上传等功能。

# 特性

📝 表单管理 - 完整的战队创建表单，包含名称、头像、城市等信息
🖼️ 头像上传 - 支持战队头像上传和预览
🌆 城市选择 - 支持选择战队所在城市
🔐 审核开关 - 可设置入队是否需要审核
📱 二维码上传 - 支持上传群聊二维码
🎨 主题定制 - 丰富的CSS变量支持主题定制
🔧 灵活配置 - 支持自定义按钮文案、默认数据等

# 适用场景

电竞比赛战队创建
团队活动组队
在线游戏公会创建
体育赛事队伍报名

# 引入

import PressMatchCreateTeamPopup from 'press-next/press-match-create-team-popup/press-match-create-team-popup';

# 代码演示

# 基础用法

<template>
  <PressMatchCreateTeamPopup
    :show="showPopup"
    @close="onClose"
    @submit="onSubmit"
    @upload-avatar="handleUploadAvatar"
    @upload-qrcode="handleUploadQrcode"
    @select-city="handleSelectCity"
    @select-requirement="handleSelectRequirement"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import PressMatchCreateTeamPopup from 'press-next/press-match-create-team-popup/press-match-create-team-popup';

const showPopup = ref(false);

const onClose = () => {
  showPopup.value = false;
};

const onSubmit = (data: any) => {
  console.log('提交的表单数据:', data);
  // 处理提交逻辑
};

const handleUploadAvatar = () => {
  console.log('上传头像');
  // 处理头像上传逻辑
};

const handleUploadQrcode = () => {
  console.log('上传二维码');
  // 处理二维码上传逻辑
};

const handleSelectCity = () => {
  console.log('选择城市');
  // 打开城市选择器
};

const handleSelectRequirement = () => {
  console.log('选择招募要求');
  // 打开招募要求选择器
};
</script>

# 带默认数据

<template>
  <PressMatchCreateTeamPopup
    :show="showPopup"
    :default-data="defaultData"
    @close="onClose"
    @submit="onSubmit"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import PressMatchCreateTeamPopup from 'press-next/press-match-create-team-popup/press-match-create-team-popup';

const showPopup = ref(false);

const defaultData = {
  teamName: '王者战队',
  avatar: 'https://placehold.co/72x72',
  city: '广东省深圳市',
  noReview: true,
  qrcode: 'https://placehold.co/160x160',
  requirement: '段位要求：黄金以上',
};

const onClose = () => {
  showPopup.value = false;
};

const onSubmit = (data: any) => {
  console.log('提交的表单数据:', data);
};
</script>

# 自定义按钮文案

<template>
  <PressMatchCreateTeamPopup
    :show="showPopup"
    button-text="确认创建"
    @close="onClose"
    @submit="onSubmit"
  />
</template>

# 自定义主题

<template>
  <PressMatchCreateTeamPopup
    :show="showPopup"
    custom-class="my-custom-theme"
    @close="onClose"
    @submit="onSubmit"
  />
</template>

<style>
.my-custom-theme {
  /* 头像样式 */
  --ctp-avatar-bg-color: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --ctp-avatar-border-color: #667eea;
  
  /* 文字颜色 */
  --ctp-text-color-primary: #333333;
  --ctp-text-color-secondary: #999999;
  
  /* 上传区域 */
  --ctp-upload-bg: #f5f5f5;
  --ctp-upload-icon-color: #667eea;
}
</style>

# API

# Props

参数	说明	类型	默认值
custom-class	自定义样式类	string	`''`
show	是否显示弹窗	boolean	`false`
z-index	弹窗层级	number	`100`
button-text	底部按钮文案	string	`'创建队伍并报名'`
default-data	默认表单数据	Partial<FormData>	`{}`
size	Switch组件尺寸	string	`'18'`
active-color	Switch激活颜色	string	`'#366ff4'`
inactive-color	Switch未激活颜色	string	`'#fff'`

# FormData 数据结构

interface FormData {
  teamName: string; // 战队名称
  avatar: string; // 战队头像URL
  city: string; // 所在城市
  noReview: boolean; // 入队无需审核
  qrcode: string; // 群聊二维码URL
  requirement: string; // 招募队员要求
}

# Events

事件名	说明	回调参数
close	关闭弹窗时触发	-
submit	点击提交按钮时触发	data: FormData
upload-avatar	点击上传头像时触发	-
upload-qrcode	点击上传二维码时触发	-
select-city	点击选择城市时触发	-
select-requirement	点击选择招募要求时触发	-
team-name-change	战队名称变化时触发	name: string
no-review-change	审核开关变化时触发	value: boolean

# 注意事项

# 使用建议

图片上传：组件本身不处理图片上传逻辑，需要在 upload-avatar 和 upload-qrcode 事件中自行实现上传功能
城市选择：需要在 select-city 事件中打开城市选择器，并通过 default-data 更新选中的城市
招募要求：需要在 select-requirement 事件中打开选择器，并通过 default-data 更新选中的要求
表单验证：建议在 submit 事件中进行表单验证，如战队名称长度、头像是否上传等
输入限制：战队名称限制为1-20个字符
图片尺寸：建议头像图片为正方形，尺寸72x72或更大；二维码图片尺寸160x160或更大

# 性能优化

组件使用虚拟化节点减少DOM层级
图片建议使用CDN加速
上传图片前建议进行压缩处理
样式使用CSS变量，便于动态主题切换

# 兼容性

支持 Vue 3.0+
兼容现代浏览器（Chrome 60+, Firefox 60+, Safari 12+）
支持微信小程序、支付宝小程序等平台

# 主题定制

# 样式变量

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

# 间距系统 (Spacing)

名称	默认值	描述
--ctp-upload-size	.8rem	上传按钮尺寸
--ctp-option-height	1.12rem	选项高度

# 块状系统 (Box Model)

名称	默认值	描述
--ctp-name-input-height	.72rem	名称输入框高度

# 颜色系统 (Colors)

名称	默认值	描述
--ctp-text-color-secondary	$color-text-invert-default	次要文字颜色
--ctp-text-color-primary	$color-text-primary	主要文字颜色
--ctp-avatar-border-color	$color-divider-light	头像边框颜色
--ctp-border-color	$color-border-tertiary	边框颜色
--ctp-avatar-color	$color-surface-default	头像图标颜色
--ctp-avatar-bg-color	$color-surface-brand	头像背景色
--ctp-upload-bg	$color-surface-secondary	上传区域背景色
--ctp-upload-icon-color	$color-border-secondary	上传图标颜色
--ctp-upload-border-color	$color-divider-default	上传边框颜色

# 字体系统 (Typography)

名称	默认值	描述
--ctp-label-font-size	$font-size-lg	标签字体大小
--ctp-input-font-size	$font-size-md	输入框字体大小
--ctp-arrow-font-size	$font-size-xl	箭头字体大小
--ctp-avatar-icon-size	$font-size-sm	头像图标尺寸
--ctp-upload-icon-size	$font-size-xl	上传图标尺寸

# 圆角系统 (Border Radius)

名称	默认值	描述
--ctp-avatar-radius	50%	头像圆角

← MatchCreateGame MatchDetailEndGame →