MatchCertificationPopup 实名认证弹窗

# MatchCertificationPopup 实名认证弹窗

实名认证弹窗组件,用于收集用户的姓名和身份证号码信息,支持字段级别的变更监听。

# 引入

import PressMatchCertificationPopup from 'press-next/press-match-certification-popup/press-match-certification-popup';

# 代码演示

# 基础用法

<template>
  <PressMatchCertificationPopup
    :show="showPopup"
    @confirm="handleConfirm"
    @close="handleClose"
  />
</template>

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

const showPopup = ref(false);

const handleConfirm = (info: { name: string; code: string }) => {
  console.log('提交认证信息:', info);
  showPopup.value = false;
};

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

# 带默认值

<template>
  <PressMatchCertificationPopup
    :show="showPopup"
    default-name="张三"
    default-code="110101199001011234"
    title-text="修改认证信息"
    desc-text="您可以修改之前提交的实名信息"
    button-text="更新信息"
    @confirm="handleConfirm"
    @close="handleClose"
  />
</template>

# 监听字段变更

组件提供了三种方式监听字段变更:

<template>
  <PressMatchCertificationPopup
    :show="showPopup"
    @change="handleChange"
    @name-change="handleNameChange"
    @code-change="handleCodeChange"
    @confirm="handleConfirm"
    @close="handleClose"
  />
</template>

<script lang="ts" setup>
// 方式1: 统一的change事件,可区分字段
const handleChange = (field: 'name' | 'code', value: string, event: Event) => {
  if (field === 'name') {
    console.log('姓名变更:', value);
  } else {
    console.log('身份证号变更:', value);
  }
};

// 方式2: 姓名专属变更事件
const handleNameChange = (value: string, event: Event) => {
  console.log('姓名变更:', value);
};

// 方式3: 身份证号专属变更事件
const handleCodeChange = (value: string, event: Event) => {
  console.log('身份证号变更:', value);
};
</script>

# 自定义样式

<template>
  <PressMatchCertificationPopup
    :show="showPopup"
    custom-class="my-certification"
    title-text="身份验证"
    desc-text="请填写真实姓名和身份证号"
    button-text="立即验证"
    @confirm="handleConfirm"
    @close="handleClose"
  />
</template>

<style>
.my-certification {
  --pmc-info-color: #ff6b00;
  --pmc-info-font-size: .32rem;
  --pmc-form-mt: .4rem;
}
</style>

# 自定义插槽

<template>
  <PressMatchCertificationPopup
    :show="showPopup"
    @confirm="handleConfirm"
    @close="handleClose"
  >
    <!-- 自定义描述信息 -->
    <template #info-desc>
      <div class="custom-desc">
        <div class="desc-title">重要提醒</div>
        <div class="desc-content">请确保填写的信息真实有效</div>
      </div>
    </template>
    
    <!-- 自定义底部按钮 -->
    <template #foot-btn>
      <div class="custom-buttons">
        <button class="cancel-btn" @click="handleClose">取消</button>
        <button class="confirm-btn" @click="handleConfirm">确认提交</button>
      </div>
    </template>
  </PressMatchCertificationPopup>
</template>

# API

# Props

参数	说明	类型	默认值
show	是否显示弹窗	boolean	`false`
z-index	弹窗层级	number	`100`
title-text	标题文案	string	`实名认证`
desc-text	描述文案	string	`应国家政策要求，参赛需进行实名制验证，实名信息仅作参赛身份核实使用。`
button-text	按钮文案	string	`确定`
default-name	默认姓名	string	`''`
default-code	默认身份证号	string	`''`
custom-class	自定义类名	string	`''`
is-pop-up-round	是否圆角弹窗	boolean	`true`

# Events

事件名	说明	参数
close	关闭弹窗时触发	-
confirm	点击确认按钮时触发	`info: { name: string; code: string }`
change	输入框变化时触发(可区分字段)	`field: 'name' \\| 'code', value: string, event: Event`
name-change	姓名输入框变化时触发	`value: string, event: Event`
code-change	身份证号输入框变化时触发	`value: string, event: Event`

# Slots

名称	说明
info-desc	自定义描述信息内容
foot-btn	自定义底部按钮区域

# 主题定制

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

# 样式变量

名称	默认值	描述
--pmc-info-margin	`0 auto`	提示文案边距
--pmc-form-mt	`$spacing-sm`	表单上间距
--pmc-info-color	`$color-text-secondary`	提示文字颜色
--pmc-info-text-align	`center`	文本对齐方式
--pmc-info-font-size	`$font-size-sm`	提示文字大小
--pmc-info-width	`6rem`	提示区域宽度
--pmc-form-width	`100%`	表单宽度
--pmc-form-label-min-width	`2.3rem`	表单标签最小宽度

← MatchCardInfo MatchChangeScorePopup →