MatchGroupQRcodePopup

A popup component for displaying match group QR codes, supporting QR code display, deletion, and re-upload functionality.

Import

import PressMatchGroupQRcodePopup from 'press-next/press-match-group-q-rcode-popup/press-match-group-q-rcode-popup';

Usage

Basic Usage

<template>
  <PressButton @click="show = true">
    View Match Group QR Code
  </PressButton>

  <PressMatchGroupQRcodePopup
    v-model:show="show"
    :qrcode-url="qrcodeUrl"
    :update-time="updateTime"
    @delete="handleDelete"
    @reupload="handleReupload"
    @image-error="handleImageError"
  />
</template>

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

const show = ref(false);
const qrcodeUrl = ref('https://example.com/qrcode.png');
const updateTime = ref('Mar 11, 10:00');

const handleDelete = () => {
  console.log('Delete QR code');
  // Call API to delete QR code
};

const handleReupload = () => {
  console.log('Re-upload QR code');
  // Open file selector or navigate to upload page
};

const handleImageError = () => {
  console.log('QR code image failed to load');
  // Show error message or use default image
};
</script>

Advanced Usage

<template>
  <PressMatchGroupQRcodePopup
    v-model:show="show"
    title="Match Communication Group"
    description="Scan to join the match communication group and get the latest match information\nGroup QR code is valid for 7 days, please save it in time"
    :qrcode-url="qrcodeUrl"
    :update-time="updateTime"
    :z-index="200"
    :is-round="true"
    custom-class="custom-qrcode-popup"
    @close="handleClose"
    @delete="handleDelete"
    @reupload="handleReupload"
    @image-error="handleImageError"
  >
    <!-- Custom footer buttons -->
    <template #foot-btn>
      <PressButton
        type="default"
        @click="handleSave"
      >
        Save Image
      </PressButton>
      <PressButton
        type="primary"
        @click="handleShare"
      >
        Share QR Code
      </PressButton>
    </template>
  </PressMatchGroupQRcodePopup>
</template>

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

const show = ref(false);
const qrcodeUrl = ref('https://example.com/match-group-qrcode.png');
const updateTime = ref('March 11, 2024 10:30');

const handleClose = () => {
  console.log('Popup closed');
};

const handleDelete = () => {
  // Confirm deletion
  if (confirm('Are you sure you want to delete this QR code?')) {
    deleteQRCode();
  }
};

const handleReupload = () => {
  // Re-upload logic
  uploadNewQRCode();
};

const handleImageError = () => {
  // Handle image loading failure
  showErrorMessage('Failed to load QR code, please try again');
};

const handleSave = () => {
  // Save image to local
  saveImageToLocal(qrcodeUrl.value);
};

const handleShare = () => {
  // Share QR code
  shareQRCode(qrcodeUrl.value);
};

// API call functions
const deleteQRCode = async () => {
  // API call to delete QR code
};

const uploadNewQRCode = async () => {
  // API call to upload new QR code
};
</script>

API

Props

Prop	Description	Type	Default
show	Whether to show popup, supports v-model	boolean	false
title	PopupPlus title	string	'Match Group QR Code'
description	Description text, supports line breaks with \n	string	'QR code will be displayed on the match homepage for easy scanning\nUsually valid for 7 days, remember to update in time'
qrcodeUrl	QR code image URL	string	''
updateTime	Update time	string	''
zIndex	PopupPlus z-index	number	100
isRound	Whether to show rounded corners	boolean	true
customClass	Custom CSS class name	string	''

Events

Event	Description	Parameters
close	Triggered when popup is closed	-
delete	Triggered when delete button is clicked	-
reupload	Triggered when re-upload button is clicked	-
imageError	Triggered when QR code image fails to load	-

Slots

Slot	Description	Parameters
foot-btn	Custom footer button area	-

Methods

The following methods can be called via ref:

Method	Description	Parameters
onClose	Close popup	-
onDelete	Trigger delete event	-
onReupload	Trigger re-upload event	-
onImageError	Trigger image error event	-

CSS Variables

The component provides the following CSS variables for custom styling:

Spacing System

CSS Variable	Description	Default Value
--pmgq-desc-mb	Description text bottom margin	$spacing-lg
--pmgq-qrcode-mb	QR code bottom margin	$spacing-lg
--pmgq-foot-btn-gap	Footer button gap	.24rem

Size System

CSS Variable	Description	Default Value
--pmgq-qrcode-size	QR code size	2.46rem

Color System

CSS Variable	Description	Default Value
--pmgq-qrcode-border-color	QR code border color	$color-surface-brand-light2
--pmgq-desc-text-color	Description text color	$color-text-invert-default
--pmgq-time-text-color	Time text color	$color-text-brand

Font System

CSS Variable	Description	Default Value
--pmgq-desc-font-size	Description font size	$font-size-sm
--pmgq-time-font-size	Time font size	$font-size-sm

Border Radius System

CSS Variable	Description	Default Value
--pmgq-qrcode-border-radius	QR code border radius	$border-radius-none

Usage Example

/* Custom QR code popup styles */
:root {
  --pmgq-qrcode-size: 280px;
  --pmgq-qrcode-border-color: #e0e0e0;
  --pmgq-desc-text-color: #666;
  --pmgq-time-text-color: #1890ff;
  --pmgq-qrcode-border-radius: 8px;
}

/* Or override via customClass */
.custom-qrcode-popup {
  --pmgq-desc-font-size: 16px;
  --pmgq-foot-btn-gap: 16px;
}

Use Cases

1. Match Group Management

• Display match communication group QR code
• Support deletion of expired QR codes
• Support re-uploading new QR codes

2. QR Code Sharing

• Easy for participants to scan and join groups
• Display QR code update time
• Provide save and share functionality

3. Group Management

• Administrators can update group QR codes in time
• Avoid using expired QR codes
• Provide user-friendly operation interface

Notes

1. Image Format: Recommend using PNG or JPG format for QR code images
2. Image Size: Recommend QR code image size of 200x200 pixels or above
3. Update Time: Update updateTime in time to remind users of QR code validity
4. Error Handling: Listen to imageError event to handle image loading failures
5. Mini Program Compatibility: Supports WeChat mini program virtualHost and styleIsolation configuration
6. Image Security: Use referrerpolicy="no-referrer" to avoid cross-origin issues

Dependencies

• PressMatchPopUp: Base popup component
• PressButton: Button component