MatchGroupQRcodePopup 比赛群二维码弹窗

# MatchGroupQRcodePopup 比赛群二维码弹窗

一个用于展示比赛群二维码的弹窗组件，支持二维码展示、删除和重新上传功能。

# 引入

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

# 代码演示

# 基础用法

<template>
  <PressButton @click="show = true">
    查看比赛群二维码
  </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('3月11日 10:00');

const handleDelete = () => {
  console.log('删除二维码');
  // 调用API删除二维码
};

const handleReupload = () => {
  console.log('重新上传二维码');
  // 打开文件选择器或跳转到上传页面
};

const handleImageError = () => {
  console.log('二维码图片加载失败');
  // 显示错误提示或使用默认图片
};
</script>

# 完整用法

<template>
  <PressMatchGroupQRcodePopup
    v-model:show="show"
    title="比赛交流群"
    description="扫码加入比赛交流群，获取最新赛事信息\n群二维码7天内有效，请及时保存"
    :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"
  >
    <!-- 自定义底部按钮 -->
    <template #foot-btn>
      <PressButton
        type="default"
        @click="handleSave"
      >
        保存图片
      </PressButton>
      <PressButton
        type="primary"
        @click="handleShare"
      >
        分享二维码
      </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('2024年3月11日 10:30');

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

const handleDelete = () => {
  // 确认删除
  if (confirm('确定要删除这个二维码吗？')) {
    deleteQRCode();
  }
};

const handleReupload = () => {
  // 重新上传逻辑
  uploadNewQRCode();
};

const handleImageError = () => {
  // 图片加载失败处理
  showErrorMessage('二维码加载失败，请重试');
};

const handleSave = () => {
  // 保存图片到本地
  saveImageToLocal(qrcodeUrl.value);
};

const handleShare = () => {
  // 分享二维码
  shareQRCode(qrcodeUrl.value);
};

// API调用函数
const deleteQRCode = async () => {
  // 删除二维码的API调用
};

const uploadNewQRCode = async () => {
  // 上传新二维码的API调用
};
</script>

# API

# Props

参数	说明	类型	默认值
show	是否显示弹窗，支持 v-model	boolean	`false`
title	弹窗标题	string	`'比赛群二维码'`
description	描述信息，支持换行符 \n	string	`'二维码将显示在比赛主页，方便选手扫码进群\n通常有效期为7天，记得及时更新'`
qrcodeUrl	二维码图片地址	string	`''`
updateTime	更新时间	string	`''`
zIndex	弹窗层级	number	`100`
isRound	是否显示圆角	boolean	`true`
customClass	自定义样式类名	string	`''`

# Events

事件名	说明	回调参数
close	弹窗关闭时触发	-
delete	点击删除按钮时触发	-
reupload	点击重新上传按钮时触发	-
imageError	二维码图片加载失败时触发	-

# Slots

插槽名	说明	参数
foot-btn	自定义底部按钮区域	-

# Methods

通过 ref 可以调用以下方法：

方法名	说明	参数
onClose	关闭弹窗	-
onDelete	触发删除事件	-
onReupload	触发重新上传事件	-
onImageError	触发图片错误事件	-

# 样式变量

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

# 间距系统

CSS变量	说明	默认值
--pmgq-desc-mb	描述文字下边距	`$spacing-lg`
--pmgq-qrcode-mb	二维码下边距	`$spacing-lg`
--pmgq-foot-btn-gap	底部按钮间距	`.24rem`

# 尺寸系统

CSS变量	说明	默认值
--pmgq-qrcode-size	二维码尺寸	`2.46rem`

# 颜色系统

CSS变量	说明	默认值
--pmgq-qrcode-border-color	二维码边框颜色	`$color-surface-brand-light2`
--pmgq-desc-text-color	描述文字颜色	`$color-text-invert-default`
--pmgq-time-text-color	时间文字颜色	`$color-text-brand`

# 字体系统

CSS变量	说明	默认值
--pmgq-desc-font-size	描述文字大小	`$font-size-sm`
--pmgq-time-font-size	时间文字大小	`$font-size-sm`

# 圆角系统

CSS变量	说明	默认值
--pmgq-qrcode-border-radius	二维码圆角	`$border-radius-none`

# 使用示例

/* 自定义二维码弹窗样式 */
: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;
}

/* 或者通过 customClass 覆盖 */
.custom-qrcode-popup {
  --pmgq-desc-font-size: 16px;
  --pmgq-foot-btn-gap: 16px;
}

# 使用场景

# 1. 比赛群管理

展示比赛交流群二维码
支持删除过期二维码
支持重新上传新二维码

# 2. 二维码分享

方便选手扫码入群
显示二维码更新时间
提供保存和分享功能

# 3. 群组管理

管理员可以及时更新群二维码
避免使用过期二维码
提供友好的操作界面

# 注意事项

图片格式：建议使用 PNG 或 JPG 格式的二维码图片
图片大小：建议二维码图片尺寸为 200x200 像素以上
更新时间：及时更新 updateTime 以提醒用户二维码的有效性
错误处理：监听 imageError 事件处理图片加载失败的情况
小程序兼容：支持微信小程序的 virtualHost 和 styleIsolation 配置
图片安全：使用 referrerpolicy="no-referrer" 避免跨域问题

# 依赖组件

PressMatchPopUp: 基础弹窗组件
PressButton: 按钮组件

← MatchGameLogoPopup MatchGroupQRcodeScanPopup →