Press Next

# MatchGameLogoPopup

A popup component for setting match game logos, supporting selection from preset logo list or uploading custom logos.

# Import

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

# Usage

# Basic Usage

<template>
  <PressButton @click="show = true">
    Set Game 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('Selected Logo:', logoUrl);
  show.value = false;
};

const handleChooseFile = () => {
  console.log('Choose file');
};

const uploadFile = async (file) => {
  // Upload file to server
  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>

# Advanced Usage

<template>
  <PressMatchGameLogoPopup
    :show="show"
    title="Select Game Logo"
    :logo-list="logoList"
    :upload-file="uploadFile"
    custom-class="custom-logo-popup"
    @close="handleClose"
    @cancel="handleCancel"
    @confirm="handleConfirm"
    @choose-file="handleChooseFile"
  >
    <!-- Custom confirm button -->
    <template #confirm-btn>
      <PressButton
        type="primary"
        size="small"
        @click="handleCustomConfirm"
      >
        Apply 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('Popup closed');
  show.value = false;
};

const handleCancel = (value) => {
  console.log('Cancel operation:', value);
  show.value = false;
};

const handleConfirm = (logoUrl) => {
  console.log('Confirm selected logo:', logoUrl);
  // Save logo to server
  saveLogoToServer(logoUrl);
  show.value = false;
};

const handleCustomConfirm = () => {
  // Custom confirm logic
  console.log('Custom confirm operation');
};

const handleChooseFile = () => {
  console.log('Choose file event triggered');
};

const uploadFile = async (file) => {
  try {
    // File size check
    if (file.size > 2 * 1024 * 1024) {
      throw new Error('File size cannot exceed 2MB');
    }
    
    // File type check
    if (!file.type.startsWith('image/')) {
      throw new Error('Only image files are allowed');
    }
    
    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('Upload failed');
    }
    
    const result = await response.json();
    return { url: result.url };
  } catch (error) {
    console.error('Failed to upload logo:', error);
    // Show error message
    showErrorMessage(error.message);
    throw error;
  }
};

// API call functions
const saveLogoToServer = async (logoUrl) => {
  // Save logo to server
};
</script>

# API

# Props

Prop Description Type Default
show Whether to show popup, supports v-model boolean false
title PopupPlus title string '设置赛事LOGO'
logoList Logo list LogoItem[] []
customClass Custom CSS class name string ''
uploadFile Upload file function (file: File) => Promise<{ url: string }> -

# LogoItem Data Structure

interface LogoItem {
  url: string; // Logo image URL
}

# Events

Event Description Parameters
close Triggered when popup is closed -
cancel Triggered when cancel operation value: boolean
confirm Triggered when logo is confirmed logoUrl: string
chooseFile Triggered when file is chosen -

# Slots

Slot Description Parameters
confirm-btn Custom confirm button area -

# Methods

The following methods can be called via ref:

Method Description Parameters
onClose Close popup -

# CSS Variables

The component provides the following CSS variables for custom styling:

# Spacing System

CSS Variable Description Default Value
--pmglp-body-content-sapcing Content spacing $spacing-lg
--pmglp-logo-item-spacing Logo item spacing $spacing-md

# Size System

CSS Variable Description Default Value
--pmglp-logo-size Logo icon size 1.36rem
--pmglp-upload-icon-size Upload icon size .6rem
--pmglp-check-size Check mark size .32rem

# Color System

CSS Variable Description Default Value
--pmglp-bg-color Background color #fff
--pmglp-logo-item-bg-color Logo item background color $color-surface-secondary
--pmglp-logo-check-bg-color Logo selected background color $color-surface-brand
--pmglp-logo-check-text-color Logo selected text color #fff
--pmglp-upload-icon-color Upload icon color $color-border-secondary
--pmglp-logo-item-border-color Logo item border color $color-divider-default

# Border Radius System

CSS Variable Description Default Value
--pmglp-border-radius-circle Border radius $border-radius-circle

# Usage Example

/* Custom logo popup styles */
:root {
  --pmglp-logo-size: 60px;
  --pmglp-bg-color: #f5f5f5;
  --pmglp-logo-check-bg-color: #1890ff;
  --pmglp-logo-item-spacing: 16px;
}

/* Or override via customClass */
.custom-logo-popup {
  --pmglp-upload-icon-size: 24px;
  --pmglp-check-size: 16px;
}

# Use Cases

# 1. Match Logo Setting

  • Select appropriate logo from preset logo library
  • Support uploading custom logos
  • Real-time preview of selection effects

# 2. Brand Identity Management

  • Unified logo selection interface
  • Support multiple logo formats
  • Facilitate brand image consistency

# 3. Game Logo Configuration

  • Logo selection when creating games
  • Support personalized logo upload
  • Provide rich preset options

# Notes

  1. Image Format: Recommend using PNG, JPG format logo images
  2. Image Size: Recommend square logo images, minimum 200x200 pixels
  3. File Size: Recommend single logo file size not exceeding 2MB
  4. Upload Function: uploadFile function needs to return a Promise object containing url field
  5. Mini Program Compatibility: Supports WeChat mini program virtualHost and styleIsolation configuration
  6. Grid Layout: Logos use 4-column grid layout, automatically adapting to container width

# Dependencies

  • PressMatchPopUp: Base popup component
  • PressButton: Button component
  • PressUploader: File upload component

← MatchGroupQRcodePopup →