Press Next

# MatchSignQRCode 签到二维码

签到二维码组件，用于展示赛事签到二维码，采用简洁的卡片式设计，支持自定义标题、场地名称和提示文字。

# 引入

import PressMatchSignQRCode from 'press-next/press-match-sign-q-r-code/press-match-sign-q-r-code';

# 代码演示

# 基础用法

展示签到二维码、标题、场地名称和提示文字。

<template>
  <PressMatchSignQRCode
    qr-code-url="https://image-1251917893.file.myqcloud.com/general-match-components/img/common/qrcode/qrcode-test.png"
    title="签到二维码"
    venue-name="网鱼网咖科兴路店"
    tips-text="长按保存图片"
  />
</template>

# 使用 Mock 数据

组件提供了 getMockData 函数，可直接获取完整的组件属性配置。

<template>
  <PressMatchSignQRCode v-bind="componentProps" />
</template>

<script setup lang="ts">
import { getMockData } from 'press-next/press-match-sign-q-r-code/demo-data';
import PressMatchSignQRCode from 'press-next/press-match-sign-q-r-code/press-match-sign-q-r-code';

const componentProps = getMockData();
</script>

# 自定义标题和场地

可以自定义标题文字和场地名称。

<template>
  <PressMatchSignQRCode
    qr-code-url="https://example.com/qrcode.png"
    title="比赛签到"
    venue-name="腾讯滨海大厦"
    tips-text="请扫码签到"
  />
</template>

# 简化版本

只显示二维码，不显示场地名称和提示。

<template>
  <PressMatchSignQRCode
    qr-code-url="https://example.com/qrcode.png"
    title="签到二维码"
    venue-name=""
    tips-text=""
  />
</template>

# 自定义样式

通过 CSS 变量自定义组件样式。

<template>
  <PressMatchSignQRCode
    qr-code-url="https://example.com/qrcode.png"
    title="签到二维码"
    venue-name="网鱼网咖科兴路店"
    custom-class="my-qrcode"
  />
</template>

<style>
.my-qrcode {
  --pms-qrcode-title-text-color: #ff6b00;
  --pms-qrcode-main-bg: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --pms-qrcode-qr-code-size: 6rem;
}
</style>

# API

# Props

参数 说明 类型 默认值
qr-code-url 二维码图片地址 string ''
title 标题文字 string '签到二维码'
venue-name 场地名称 string ''
tips-text 提示文字 string '长按保存图片'
custom-class 自定义类名 string ''

# Mock 数据

组件提供了 demo-data 模块，方便业务快速接入和测试。

import { getMockData } from 'press-next/press-match-sign-q-r-code/demo-data';

// 获取默认配置数据
const componentProps = getMockData();
// 返回: { qrCodeUrl, title, venueName, customClass, tipsText }

# 功能特性

# 核心功能

  • ✅ 二维码展示：清晰展示签到二维码，支持自定义尺寸
  • ✅ 卡片设计：优雅的卡片式布局，带有装饰性圆角镂空
  • ✅ 信息完整：包含标题、场地名称和操作提示
  • ✅ 灵活定制：支持自定义所有文字内容和样式

# 设计特点

  • 🎨 视觉吸引：渐变背景和装饰性镂空设计
  • 🎨 层次分明：标题装饰、虚线分隔、内容区域清晰分层
  • 🎨 响应式：适配各种屏幕尺寸

# 使用场景

  • 赛事现场签到
  • 活动入场验证
  • 会员签到打卡
  • 线下活动报名

# 主题定制

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

# 样式变量

名称 默认值 描述
--pms-qrcode-main-padding-top $spacing-xxl 主体上边距
--pms-qrcode-title-after-plr .2rem 标题后缀左右边距
--pms-qrcode-qr-mt .96rem 二维码上边距
--pms-qrcode-name-mt .4rem 场地名称上边距
--pms-qrcode-divider-mt 1.24rem 分割线上边距
--pms-qrcode-tips-mt .56rem 提示上边距
--pms-qrcode-qr-code-size 5.32rem 二维码尺寸
--pms-qrcode-main-height 10.28rem 主体高度
--pms-qrcode-title-after-height .4rem 标题后缀高度
--pms-qrcode-title-text-color $color-text-brand 标题字体颜色
--pms-qrcode-name-text-color $color-text-primary 场地名称颜色
--pms-qrcode-title-after-bg linear-gradient(...) 标题后缀背景
--pms-qrcode-qr-code-bg none 二维码背景
--pms-qrcode-divider-color $color-border-tertiary 分割线颜色
--pms-qrcode-tips-text-color $color-text-invert-default 提示字体颜色
--pms-qrcode-title-font-size $font-size-xxl 标题字体大小
--pms-qrcode-title-font-weight $font-weight-bold 标题字体粗细
--pms-qrcode-name-font-size $font-size-lg 场地名称字体大小
--pms-qrcode-tips-font-size $font-size-lg 提示字体大小
--pms-qrcode-qr-border-radius 0 二维码圆角
--pms-qrcode-main-border-radius $border-radius-sm 主体圆角
--pms-qrcode-main-shadow drop-shadow(...) 主体阴影
--pms-qrcode-main-bg radial-gradient(...) 主体背景

# 自定义样式示例

<template>
  <PressMatchSignQRCode
    class="custom-qrcode"
    qr-code-url="https://example.com/qrcode.png"
    title="签到二维码"
    venue-name="网鱼网咖科兴路店"
  />
</template>

<style>
.custom-qrcode {
  /* 自定义主体背景 */
  --pms-qrcode-main-bg: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  
  /* 自定义文字颜色 */
  --pms-qrcode-title-text-color: #ffffff;
  --pms-qrcode-name-text-color: #ffffff;
  
  /* 自定义二维码尺寸 */
  --pms-qrcode-qr-code-size: 6rem;
  
  /* 自定义阴影 */
  --pms-qrcode-main-shadow: drop-shadow(0 .08rem .32rem rgba(0, 0, 0, .3));
}
</style>

# 常见问题

# 如何调整二维码大小？

通过 --pms-qrcode-qr-code-size CSS 变量调整：

.my-qrcode {
  --pms-qrcode-qr-code-size: 6rem; /* 默认 5.32rem */
}

# 如何隐藏场地名称或提示文字？

将对应的 prop 设置为空字符串：

<PressMatchSignQRCode
  qr-code-url="..."
  title="签到二维码"
  venue-name=""
  tips-text=""
/>

# 如何自定义背景样式？

通过 --pms-qrcode-main-bg CSS 变量自定义背景：

.my-qrcode {
  --pms-qrcode-main-bg: linear-gradient(to bottom, #f0f0f0, #ffffff);
}

# 如何修改装饰性圆角镂空的位置？

装饰性圆角镂空在距离底部 60px（1.2rem）位置，可通过修改 --pms-qrcode-main-bg 变量中的 calc(100% - 1.2rem) 和 1.2rem 值来调整位置。

← MatchTableHeader →