Press Next

# MatchSignActionPopup

A status popup component for displaying match registration operation results, supporting success and failure states with status icons, titles, description information, and action buttons.

# Import

import PressMatchSignActionPopup from 'press-next/press-match-sign-action-popup/press-match-sign-action-popup';

# Usage

# Basic Usage

<template>
  <PressButton @click="showSuccess = true">
    Registration Success
  </PressButton>
  <PressButton @click="showWarning = true">
    Registration Failed
  </PressButton>

  <!-- Success State -->
  <PressMatchSignActionPopup
    :show="showSuccess"
    title-popup="Registration Result"
    status="success"
    status-title="Registration Successful"
    info-text="Please pay attention to the match start notification"
    button-text="Join Match Group"
    @close="showSuccess = false"
    @confirm="handleSuccessConfirm"
  />

  <!-- Failure State -->
  <PressMatchSignActionPopup
    :show="showWarning"
    title-popup="Registration Result"
    status="warning"
    status-title="Registration Failed"
    info-text="Please try again later or contact customer service"
    button-text="Retry Registration"
    @close="showWarning = false"
    @confirm="handleWarningConfirm"
  />
</template>

<script setup>
import { ref } from 'vue';

const showSuccess = ref(false);
const showWarning = ref(false);

const handleSuccessConfirm = () => {
  console.log('Registration success confirmed');
  showSuccess.value = false;
};

const handleWarningConfirm = () => {
  console.log('Retry registration');
  showWarning.value = false;
  // Execute retry registration logic
};
</script>

# Multiple Buttons Mode

<template>
  <PressButton @click="showMultiButton = true">
    Two Buttons Example
  </PressButton>
  <PressButton @click="showTripleButton = true">
    Three Buttons Example
  </PressButton>

  <!-- Two Buttons Example -->
  <PressMatchSignActionPopup
    :show="showMultiButton"
    title-popup="Operation Prompt"
    status="success"
    status-title="Operation Successful"
    info-text="Please select the next action"
    :buttons="[
      { text: 'Cancel', type: 'default', action: 'cancel' },
      { text: 'Confirm', type: 'primary', action: 'confirm' }
    ]"
    @close="showMultiButton = false"
    @button-click="handleButtonClick"
  />

  <!-- Three Buttons Example -->
  <PressMatchSignActionPopup
    :show="showTripleButton"
    title-popup="Registration Successful"
    status="success"
    status-title="Registration Successful"
    info-text="Choose your next action"
    :buttons="[
      { text: 'View Details', type: 'default', action: 'detail' },
      { text: 'Share', type: 'info', action: 'share' },
      { text: 'Join Group', type: 'primary', action: 'join' }
    ]"
    @close="showTripleButton = false"
    @button-click="handleButtonClick"
  />
</template>

<script setup>
import { ref } from 'vue';

const showMultiButton = ref(false);
const showTripleButton = ref(false);

const handleButtonClick = (button, index) => {
  console.log(`Button clicked: ${button.text}, action: ${button.action}, index: ${index}`);
  
  // Execute different actions based on action type
  switch (button.action) {
    case 'cancel':
      console.log('Cancel action');
      break;
    case 'confirm':
      console.log('Confirm action');
      break;
    case 'detail':
      console.log('View details');
      break;
    case 'share':
      console.log('Share');
      break;
    case 'join':
      console.log('Join group');
      break;
  }
  
  showMultiButton.value = false;
  showTripleButton.value = false;
};
</script>

# Custom Slots

<template>
  <PressMatchSignActionPopup
    :show="show"
    title-popup="Match Registration"
    status="success"
    status-title="Registration Successful"
    custom-class="custom-sign-popup"
    button-text="Got it"
    @close="handleClose"
    @confirm="handleConfirm"
  >
    <!-- Custom info content -->
    <template #info>
      <div class="custom-info">
        <div class="custom-info__text">
          Congratulations on successful registration!
        </div>
        <div class="custom-info__desc">
          The match will start on January 15, 2024
        </div>
        <div class="custom-info__tips">
          Please join the match group for the latest updates
        </div>
      </div>
    </template>
  </PressMatchSignActionPopup>
</template>

<script setup>
import { ref } from 'vue';

const show = ref(false);

const handleClose = () => {
  console.log('Popup closed');
  show.value = false;
};

const handleConfirm = () => {
  console.log('Confirm action');
  show.value = false;
};
</script>

<style scoped>
.custom-info {
  text-align: center;

  &__text {
    font-size: 16px;
    color: #333;
    margin-bottom: 8px;
  }

  &__desc {
    font-size: 14px;
    color: #666;
    margin-bottom: 8px;
  }

  &__tips {
    font-size: 12px;
    color: #999;
  }
}
</style>

# API

# Props

Prop Description Type Default
show Whether to show popup boolean false
titlePopup PopupPlus title string ''
status Status type 'success' | 'warning' 'success'
statusTitle Status title text string ''
infoText Information text string ''
buttonText Single button text (deprecated, use buttons instead) string '确定'
buttons Multiple buttons configuration ButtonConfig[] []
customClass Custom CSS class name string ''

# ButtonConfig Data Structure

Prop Description Type Default
text Button text string -
type Button type 'primary' | 'default' | 'info' | 'warning' | 'danger' 'primary'
action Button action identifier string -

# Events

Event Description Parameters
close Triggered when popup is closed -
confirm Triggered when confirm button is clicked (single button mode) -
buttonClick Triggered when button is clicked (multiple buttons mode) button: ButtonConfig, index: number

# Slots

Slot Description Parameters
info Custom information content area -
foot-btn Custom footer button area -

# CSS Variables

The component provides the following CSS variables for custom styling:

# Spacing System

CSS Variable Description Default Value
--pmsap-status-mb Status icon bottom margin $spacing-sm
--pmsap-title-mb Title bottom margin $spacing-xs
--pmsap-foot-btn-gap Footer buttons gap $spacing-md

# Size System

CSS Variable Description Default Value
--pmsap-status-icon-size Status icon container size .9rem
--pmsap-status-icon-font-size Status icon font size .6rem

# Color System

CSS Variable Description Default Value
--pmsap-popup-bg PopupPlus background color $color-surface-default
--pmsap-status-success-bg Success status background color $color-surface-brand
--pmsap-status-warning-bg Warning status background color $color-surface-secondary
--pmsap-status-success-icon-color Success status icon color $color-surface-default
--pmsap-status-warning-icon-color Warning status icon color $color-icon-secondary
--pmsap-title-color Title text color $color-text-primary
--pmsap-info-color Information text color $color-text-primary

# Font System

CSS Variable Description Default Value
--pmsap-title-font-size Title font size $font-size-lg
--pmsap-info-font-size Information font size $font-size-md
--pmsap-title-font-weight Title font weight $font-weight-bold

# Border Radius System

CSS Variable Description Default Value
--pmsap-status-border-radius Status icon border radius $border-radius-circle

# Usage Example

/* Custom registration status popup styles */
:root {
  --pmsap-status-icon-size: 48px;
  --pmsap-status-success-bg: #52c41a;
  --pmsap-status-warning-bg: #ff4d4f;
  --pmsap-title-color: #333;
  --pmsap-info-color: #666;
}

/* Or override via customClass */
.custom-sign-popup {
  --pmsap-status-mb: 24px;
  --pmsap-title-mb: 16px;
  --pmsap-title-font-size: 20px;
  --pmsap-info-font-size: 16px;
}

# Use Cases

# 1. Match Registration Results

  • Display registration success or failure status
  • Provide follow-up operation guidance
  • Show match-related information

# 2. Operation Result Feedback

  • Status feedback after user operations
  • Unified display of success or failure states
  • Guide users to perform next steps

# 3. Status Notifications

  • Result notifications for important operations
  • System status change reminders
  • User behavior confirmation feedback

# Notes

  1. Status Types: Currently supports success and warning states
  2. Icon Fonts: Ensure that the corresponding icon font files are included in the project
  3. Text Length: Recommend controlling the length of title and information text to avoid display issues
  4. Button Actions: Ensure there are clear follow-up actions or page navigation after button clicks
  5. Mini Program Compatibility: Supports WeChat mini program virtualHost and styleIsolation configuration
  6. Accessibility: Status icons have semantic class names for screen reader recognition

# Dependencies

  • PressMatchPopUp: Base popup component
  • PressButton: Button component

← MatchSignQRCode →