Press Next

# MatchGameLogoPopup 赛事Logo弹窗

用于设置赛事Logo的弹窗组件，支持从预设Logo列表中选择或上传自定义Logo。

# 引入

import PressMatchGameLogoPopup from 'press-next/press-match-game-logo-popup/press-match-game-logo-popup';

# 代码演示

# 基础用法

<template>
  <PressButton @click="show = true">
    设置赛事Logo
  </PressButton>

  <PressMatchGameLogoPopup
    v-model:show="show"
    :logo-list="logoList"
    :upload-file="uploadFile"
    @close="handleClose"
    @confirm="handleConfirm"
    @choose-file="handleChooseFile"
  />
</template>

<script setup>
import { ref } from 'vue';

const show = ref(false);
const logoList = ref([
  { url: 'https://example.com/logo1.png' },
  { url: 'https://example.com/logo2.png' },
  { url: 'https://example.com/logo3.png' },
]);

const handleClose = () => {
  show.value = false;
};

const handleConfirm = (logoUrl) => {
  console.log('选择的Logo:', logoUrl);
  show.value = false;
};

const handleChooseFile = () => {
  console.log('选择文件');
};

const uploadFile = async (file) => {
  // 上传文件到服务器
  const formData = new FormData();
  formData.append('file', file);
  
  const response = await fetch('/api/upload', {
    method: 'POST',
    body: formData,
  });
  
  const result = await response.json();
  return { url: result.url };
};
</script>

# 高级用法

<template>
  <PressMatchGameLogoPopup
    :show="show"
    title="选择游戏Logo"
    :logo-list="logoList"
    :upload-file="uploadFile"
    custom-class="custom-logo-popup"
    @close="handleClose"
    @cancel="handleCancel"
    @confirm="handleConfirm"
    @choose-file="handleChooseFile"
  >
    <!-- 自定义确认按钮 -->
    <template #confirm-btn>
      <PressButton
        type="primary"
        size="small"
        @click="handleCustomConfirm"
      >
        应用Logo
      </PressButton>
    </template>
  </PressMatchGameLogoPopup>
</template>

<script setup>
import { ref } from 'vue';

const show = ref(false);
const logoList = ref([
  { url: 'https://example.com/game-logo-1.png' },
  { url: 'https://example.com/game-logo-2.png' },
  { url: 'https://example.com/game-logo-3.png' },
  { url: 'https://example.com/game-logo-4.png' },
]);

const handleClose = () => {
  console.log('弹窗关闭');
  show.value = false;
};

const handleCancel = (value) => {
  console.log('取消操作:', value);
  show.value = false;
};

const handleConfirm = (logoUrl) => {
  console.log('确认选择Logo:', logoUrl);
  // 保存Logo到后端
  saveLogoToServer(logoUrl);
  show.value = false;
};

const handleCustomConfirm = () => {
  // 自定义确认逻辑
  console.log('自定义确认操作');
};

const handleChooseFile = () => {
  console.log('选择文件事件触发');
};

const uploadFile = async (file) => {
  try {
    // 文件大小检查
    if (file.size > 2 * 1024 * 1024) {
      throw new Error('文件大小不能超过2MB');
    }
    
    // 文件类型检查
    if (!file.type.startsWith('image/')) {
      throw new Error('只能上传图片文件');
    }
    
    const formData = new FormData();
    formData.append('file', file);
    
    const response = await fetch('/api/upload/logo', {
      method: 'POST',
      body: formData,
    });
    
    if (!response.ok) {
      throw new Error('上传失败');
    }
    
    const result = await response.json();
    return { url: result.url };
  } catch (error) {
    console.error('上传Logo失败:', error);
    // 显示错误提示
    showErrorMessage(error.message);
    throw error;
  }
};

// API调用函数
const saveLogoToServer = async (logoUrl) => {
  // 保存Logo到服务器
};
</script>

# API

# Props

参数 说明 类型 默认值
show 是否显示弹窗，支持 v-model boolean false
title 弹窗标题 string '设置赛事LOGO'
logoList Logo列表 LogoItem[] []
customClass 自定义CSS类名 string ''
uploadFile 上传文件函数 (file: File) => Promise<{ url: string }> -

# LogoItem 数据结构

interface LogoItem {
  url: string; // Logo图片URL
}

# Events

事件名 说明 回调参数
close 弹窗关闭时触发 -
cancel 取消操作时触发 value: boolean
confirm 确认选择Logo时触发 logoUrl: string
chooseFile 选择文件时触发 -

# Slots

插槽名 说明 参数
confirm-btn 自定义确认按钮区域 -

# 方法

通过 ref 可以获取到组件实例并调用下述方法：

方法名 说明 参数
onClose 关闭弹窗 -

# CSS 变量

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

# 间距系统

CSS 变量 说明 默认值
--pmglp-body-content-sapcing 内容间距 $spacing-lg
--pmglp-logo-item-spacing Logo项目间距 $spacing-md

# 尺寸系统

CSS 变量 说明 默认值
--pmglp-logo-size Logo图标大小 1.36rem
--pmglp-upload-icon-size 上传图标大小 .6rem
--pmglp-check-size 选中标记大小 .32rem

# 颜色系统

CSS 变量 说明 默认值
--pmglp-bg-color 背景色 #fff
--pmglp-logo-item-bg-color Logo项目背景色 $color-surface-secondary
--pmglp-logo-check-bg-color Logo选中背景色 $color-surface-brand
--pmglp-logo-check-text-color Logo选中文字颜色 #fff
--pmglp-upload-icon-color 上传图标颜色 $color-border-secondary
--pmglp-logo-item-border-color Logo项目边框颜色 $color-divider-default

# 圆角系统

CSS 变量 说明 默认值
--pmglp-border-radius-circle 圆角半径 $border-radius-circle

# 使用示例

/* 自定义Logo弹窗样式 */
:root {
  --pmglp-logo-size: 60px;
  --pmglp-bg-color: #f5f5f5;
  --pmglp-logo-check-bg-color: #1890ff;
  --pmglp-logo-item-spacing: 16px;
}

/* 或通过customClass覆盖 */
.custom-logo-popup {
  --pmglp-upload-icon-size: 24px;
  --pmglp-check-size: 16px;
}

# 使用场景

# 1. 赛事Logo设置

  • 从预设Logo库中选择合适的Logo
  • 支持上传自定义Logo
  • 实时预览选择效果

# 2. 品牌标识管理

  • 统一的Logo选择界面
  • 支持多种Logo格式
  • 便于品牌形象统一

# 3. 游戏Logo配置

  • 游戏创建时的Logo选择
  • 支持个性化Logo上传
  • 提供丰富的预设选项

# 注意事项

  1. 图片格式：建议使用 PNG、JPG 格式的Logo图片
  2. 图片尺寸：建议Logo图片尺寸为正方形，最小 200x200 像素
  3. 文件大小：建议单个Logo文件大小不超过 2MB
  4. 上传函数：uploadFile 函数需要返回包含 url 字段的 Promise 对象
  5. 小程序兼容：支持微信小程序的 virtualHost 和 styleIsolation 配置
  6. 网格布局：Logo采用4列网格布局，自动适应容器宽度

# 依赖组件

  • PressMatchPopUp：基础弹窗组件
  • PressButton：按钮组件
  • PressUploader：文件上传组件

← MatchGroupQRcodePopup →