Press Next

# MatchCertificationPopup Real-name Authentication

Real-name authentication popup component for collecting user's name and ID card information, with field-level change monitoring support.

# Import

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

# Usage

# Basic Usage

<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('Submit certification:', info);
  showPopup.value = false;
};

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

# With Default Values

<template>
  <PressMatchCertificationPopup
    :show="showPopup"
    default-name="John Doe"
    default-code="110101199001011234"
    title-text="Update Certification"
    desc-text="You can modify previously submitted information"
    button-text="Update"
    @confirm="handleConfirm"
    @close="handleClose"
  />
</template>

# Listen to Field Changes

The component provides three ways to listen to field changes:

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

<script lang="ts" setup>
// Method 1: Unified change event with field distinction
const handleChange = (field: 'name' | 'code', value: string, event: Event) => {
  if (field === 'name') {
    console.log('Name changed:', value);
  } else {
    console.log('ID card changed:', value);
  }
};

// Method 2: Name-specific change event
const handleNameChange = (value: string, event: Event) => {
  console.log('Name changed:', value);
};

// Method 3: ID card-specific change event
const handleCodeChange = (value: string, event: Event) => {
  console.log('ID card changed:', value);
};
</script>

# Custom Styling

<template>
  <PressMatchCertificationPopup
    :show="showPopup"
    custom-class="my-certification"
    title-text="Identity Verification"
    desc-text="Please fill in your real name and ID number"
    button-text="Verify Now"
    @confirm="handleConfirm"
    @close="handleClose"
  />
</template>

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

# Custom Slots

<template>
  <PressMatchCertificationPopup
    :show="showPopup"
    @confirm="handleConfirm"
    @close="handleClose"
  >
    <!-- Custom description -->
    <template #info-desc>
      <div class="custom-desc">
        <div class="desc-title">Important Notice</div>
        <div class="desc-content">Please ensure the information is authentic</div>
      </div>
    </template>
    
    <!-- Custom footer buttons -->
    <template #foot-btn>
      <div class="custom-buttons">
        <button class="cancel-btn" @click="handleClose">Cancel</button>
        <button class="confirm-btn" @click="handleConfirm">Submit</button>
      </div>
    </template>
  </PressMatchCertificationPopup>
</template>

# API

# Props

Attribute Description Type Default
show Whether to show popup boolean false
z-index PopupPlus z-index number 100
title-text Title text string 实名认证
desc-text Description text string 应国家政策要求，参赛需进行实名制验证，实名信息仅作参赛身份核实使用。
button-text Button text string 确定
default-name Default name value string ''
default-code Default ID card value string ''
custom-class Custom class name string ''
is-pop-up-round Whether popup has rounded corners boolean true

# Events

Event Description Parameters
close Triggered when popup is closed -
confirm Triggered when confirm button is clicked info: { name: string; code: string }
change Triggered when input changes (with field distinction) field: 'name' \| 'code', value: string, event: Event
name-change Triggered when name input changes value: string, event: Event
code-change Triggered when ID card input changes value: string, event: Event

# Slots

Name Description
info-desc Custom description content
foot-btn Custom footer button area

# Theme Customization

The component provides the following CSS variables for style customization. Please refer to the ConfigProvider component for usage.

# Style Variables

Name Default Value Description
--pmc-info-margin 0 auto Info text margin
--pmc-form-mt $spacing-sm Form top margin
--pmc-info-color $color-text-secondary Info text color
--pmc-info-text-align center Text alignment
--pmc-info-font-size $font-size-sm Info text font size
--pmc-info-width 6rem Info area width
--pmc-form-width 100% Form width
--pmc-form-label-min-width 2.3rem Form label min width

← MatchChangeScorePopup →