Press Next

# MatchMustReadPopup 参赛必读弹窗

参赛必读信息展示弹窗组件,用于展示比赛报名须知、参赛指引和开赛准备信息。支持多标签切换、二维码展示、比赛流程等功能。

# 特性

  • 📋 多标签切换 - 支持报名须知、如何参赛、开赛准备等多个标签页
  • 📝 比赛信息 - 完整的比赛信息展示,包含模式、玩法、时间、地点等
  • 📍 地点导航 - 支持点击地址跳转到地图导航
  • 📱 二维码展示 - 支持比赛二维码和客服群二维码展示
  • 🎨 主题定制 - 丰富的CSS变量支持主题定制
  • ⚡ 轻量高效 - 优化的代码结构,性能出色

# 适用场景

  • 比赛报名须知展示
  • 参赛指引说明
  • 开赛准备提醒
  • 比赛规则说明

# 引入

import PressMatchMustReadPopup from 'press-next/press-match-must-read-popup/press-match-must-read-popup';

# 代码演示

# 基础用法

<template>
  <PressMatchMustReadPopup
    :show="showPopup"
    :tabs="tabs"
    :sign-up-info="signUpInfo"
    @close="onClose"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import PressMatchMustReadPopup from 'press-next/press-match-must-read-popup/press-match-must-read-popup';

const showPopup = ref(false);

const tabs = ['报名须知', '如何参赛', '开赛准备', '详细规则'];

const signUpInfo = {
  mode: '1v1',
  play: '经典模式',
  requireTeamType: '城市赛队伍',
  time: '2024年7月7日 14:00',
  address: '深圳市南山区腾讯滨海大厦',
};

const onClose = () => {
  showPopup.value = false;
};
</script>

# 完整配置

<template>
  <PressMatchMustReadPopup
    :show="showPopup"
    :tabs="tabs"
    :sign-up-info="signUpInfo"
    :match-q-r-code="matchQRCode"
    :group-q-r-code="groupQRCode"
    :match-date="matchDate"
    :match-time="matchTime"
    :z-index="1000"
    @close="onClose"
    @jump-to-rule-page="handleJumpToRule"
    @goto-map="handleGotoMap"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import PressMatchMustReadPopup from 'press-next/press-match-must-read-popup/press-match-must-read-popup';

const showPopup = ref(false);

const tabs = ['报名须知', '如何参赛', '开赛准备', '详细规则'];

const signUpInfo = {
  mode: '1v1',
  play: '经典模式',
  requireTeamType: '城市赛队伍',
  other: '账号下拥有16个角色(含限免角色)可参赛',
  time: '2024年7月7日 14:00',
  address: '深圳市南山区腾讯滨海大厦',
  process: [
    { process: '队长报名', processDesc: '满2人方可进入赛程' },
    { process: '裁判签到', processDesc: '7/7 14:00前满2人才可参赛' },
    { process: '生成赛程', processDesc: '已签到队伍不能调整队员' },
    { process: '比赛开始', processDesc: '通过本页面进入比赛房间' },
  ],
};

const matchQRCode = 'https://example.com/match-qrcode.png';
const groupQRCode = 'https://example.com/group-qrcode.png';
const matchDate = '7月7日';
const matchTime = '14:00';

const onClose = () => {
  showPopup.value = false;
};

const handleJumpToRule = () => {
  console.log('跳转到详细规则页面');
};

const handleGotoMap = () => {
  console.log('跳转到地图');
};
</script>

# 自定义主题

<template>
  <PressMatchMustReadPopup
    :show="showPopup"
    :tabs="tabs"
    :sign-up-info="signUpInfo"
    custom-class="my-custom-theme"
    @close="onClose"
  />
</template>

<style>
.my-custom-theme {
  /* 标签样式 */
  --mrp-tab-active-color: #ff6b00;
  --mrp-tab-active-bg-color: rgba(255, 107, 0, 0.1);
  --mrp-tab-active-border-color: #ff6b00;
  
  /* 内容样式 */
  --mrp-title-color: #333333;
  --mrp-rule-value-color: #666666;
  
  /* 步骤颜色 */
  --mrp-guide-step-color: #ff6b00;
  --mrp-guide-step-bg-color: rgba(255, 107, 0, 0.1);
}
</style>

# API

# Props

参数 说明 类型 默认值
custom-class 自定义样式类 string ''
show 是否显示弹窗 boolean false
z-index 弹窗层级 number 100
tabs 标签页列表 string[] []
sign-up-info 报名须知信息 SignUpInfo {}
match-q-r-code 比赛二维码图片地址 string ''
group-q-r-code 客服群二维码图片地址 string ''
match-date 比赛日期 string ''
match-time 比赛时间 string ''

# SignUpInfo 数据结构

interface ProcessItem {
  process: string; // 流程名称
  processDesc: string; // 流程描述
}

interface SignUpInfo {
  mode?: string; // 比赛模式,如"1v1"、"5v5"
  play?: string; // 比赛玩法,如"经典模式"、"排位赛"
  requireTeamType?: string; // 阵营要求,如"城市赛队伍"
  other?: string; // 其他要求说明
  time?: string; // 比赛时间,如"2024年7月7日 14:00"
  address?: string; // 比赛地点,如"深圳市南山区腾讯滨海大厦"
  process?: ProcessItem[]; // 比赛流程列表
}

# Events

事件名 说明 回调参数
close 关闭弹窗时触发 -
jump-to-rule-page 点击"详细规则"标签时触发 -
goto-map 点击比赛地点时触发 -

# 注意事项

# 使用建议

  1. 标签配置：tabs数组建议配置为['报名须知', '如何参赛', '开赛准备', '详细规则'],最后一个标签会触发跳转事件
  2. 二维码图片：二维码图片建议使用清晰度较高的图片,尺寸建议不小于200x200
  3. 比赛流程：process数组建议配置2-5个流程步骤,过多会影响展示效果
  4. 地址跳转：需要在goto-map事件中实现地图跳转逻辑
  5. 阵营要求提示：当设置了requireTeamType时,会显示提示图标,点击可查看说明
  6. 响应式适配：在小屏幕设备上,建议适当调整--mrp-content-height等尺寸变量

# 性能优化

  • 组件使用虚拟化节点减少DOM层级
  • 标签切换使用v-if控制渲染,减少不必要的DOM
  • 二维码图片建议使用懒加载
  • 样式使用CSS变量,便于动态主题切换

# 兼容性

  • 支持 Vue 3.0+
  • 兼容现代浏览器(Chrome 60+, Firefox 60+, Safari 12+)
  • 支持微信小程序、支付宝小程序等平台

# 主题定制

# 样式变量

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

# 间距系统 (Spacing)

名称 默认值 描述
--mrp-content-height 50vh 内容区高度
--mrp-tab-height .6rem 标签高度
--mrp-tab-border-width .02rem 标签边框宽度
--mrp-title-padding .4rem 0 .24rem 标题内边距
--mrp-rules-form-padding .4rem 规则表单内边距
--mrp-rules-form-li-padding .24rem 规则表单项内边距
--mrp-rule-form-label-width .96rem 规则表单标签宽度
--mrp-rule-form-label-margin .32rem 规则表单标签边距
--mrp-rule-sche-item-padding 0 0 .24rem .3rem 规则进度项内边距
--mrp-rule-step-name-margin .48rem 规则步骤名称外边距
--mrp-guide-wrap-padding .32rem 引导内容内边距
--mrp-guide-text-padding .16rem 引导文案内边距
--mrp-guide-example-padding .16rem 0 示例边距
--mrp-guide-example-margin .4rem 引导示例外边距
--mrp-guide-tips-padding .16rem 引导提示内边距
--mrp-game-tip-icon-margin .08rem 图标左间距

# 颜色系统 (Colors)

名称 默认值 描述
--mrp-tab-color $color-text-secondary 标签颜色
--mrp-tab-bg-color $color-surface-secondary 标签背景色
--mrp-tab-border-color $color-border-tertiary 标签边框颜色
--mrp-tab-active-color $color-text-brand 激活标签颜色
--mrp-tab-active-bg-color $color-surface-brand-light 激活标签背景色
--mrp-tab-active-border-color $color-border-brand 激活标签边框颜色
--mrp-title-color #212124 标题颜色
--mrp-rule-form-label-color $color-text-invert-default 规则表单标签颜色
--mrp-rules-form-li-border-color $color-divider-light 分割线颜色
--mrp-rule-value-color $color-text-secondary 规则表单值颜色
--mrp-rule-step-name-color $color-text-brand 规则步骤名称颜色
--mrp-rule-step-content-color $color-text-invert-default 规则步骤内容颜色
--mrp-rule-sche-line-color $color-text-brand 规则进度线颜色
--mrp-game-start-tips-bg-color #000 游戏开始提示背景色
--mrp-game-start-text-color #fff 游戏开始提示文字颜色
--mrp-game-tip-icon-color $color-icon-brand 提示图标颜色
--mrp-guide-step-color $color-text-brand 引导步骤颜色
--mrp-guide-step-bg-color $color-surface-brand-light 引导步骤背景色
--mrp-guide-text-color $color-text-primary 引导文案颜色
--mrp-guide-tips-color $color-text-invert-default 引导提示文字颜色
--mrp-code-bg-color $color-surface-default 二维码背景色
--mrp-guide-example-bg-color $color-divider-light 示例背景色
--mrp-guide-calendar-date-color #000 日历日期颜色

# 字体系统 (Typography)

名称 默认值 描述
--mrp-tab-font-size $font-size-sm 标签字体大小
--mrp-tab-line-height .6rem 标签行高
--mrp-tab-font-weight $font-weight-bold 标签字体粗细
--mrp-title-font-size $font-size-md 标题字体大小
--mrp-title-font-weight $font-weight-bold 标题字体粗细
--mrp-rule-form-label-font-size $spacing-md 规则表单标签字体大小
--mrp-rule-form-label-line-height .36rem 规则表单标签行高
--mrp-rule-value-font-size $spacing-md 规则表单值字体大小
--mrp-rule-step-name-font-size $font-size-sm 规则步骤名称字体大小
--mrp-game-start-tips-font-size .2rem 游戏开始提示字体大小
--mrp-game-tip-icon-size $font-size-xs 图标大小
--mrp-guide-tips-font-size .24rem 引导提示字体大小
--mrp-guide-step-font-size $font-size-xxs 步骤字体大小
--mrp-guide-text-font-size $font-size-sm 引导字体大小
--mrp-guide-text-font-weight $font-weight-bold 引导字体粗细

# 圆角系统 (Border Radius)

名称 默认值 描述
--mrp-guide-example-radius .08rem 示例圆角

← MatchOperationPopup →