MatchSignActionPopup 报名状态弹窗

# MatchSignActionPopup 报名状态弹窗

用于展示报名操作结果的状态弹窗组件，支持成功和失败两种状态，包含状态图标、标题、描述信息和操作按钮。

# 引入

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

# 代码演示

# 基础用法

<template>
  <PressButton @click="showSuccess = true">
    报名成功
  </PressButton>
  <PressButton @click="showWarning = true">
    报名失败
  </PressButton>

  <!-- 成功状态 -->
  <PressMatchSignActionPopup
    :show="showSuccess"
    title-popup="报名结果"
    status="success"
    status-title="报名成功"
    info-text="请关注开赛短信通知"
    button-text="加入比赛群"
    @close="showSuccess = false"
    @confirm="handleSuccessConfirm"
  />

  <!-- 失败状态 -->
  <PressMatchSignActionPopup
    :show="showWarning"
    title-popup="报名结果"
    status="warning"
    status-title="报名失败"
    info-text="请稍后重试或联系客服"
    button-text="重新报名"
    @close="showWarning = false"
    @confirm="handleWarningConfirm"
  />
</template>

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

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

const handleSuccessConfirm = () => {
  console.log('报名成功确认');
  showSuccess.value = false;
};

const handleWarningConfirm = () => {
  console.log('重新报名');
  showWarning.value = false;
  // 执行重新报名逻辑
};
</script>

# 多按钮模式

<template>
  <PressButton @click="showMultiButton = true">
    双按钮示例
  </PressButton>
  <PressButton @click="showTripleButton = true">
    三按钮示例
  </PressButton>

  <!-- 双按钮示例 -->
  <PressMatchSignActionPopup
    :show="showMultiButton"
    title-popup="操作提示"
    status="success"
    status-title="操作成功"
    info-text="请选择下一步操作"
    :buttons="[
      { text: '取消', type: 'default', action: 'cancel' },
      { text: '确定', type: 'primary', action: 'confirm' }
    ]"
    @close="showMultiButton = false"
    @button-click="handleButtonClick"
  />

  <!-- 三按钮示例 -->
  <PressMatchSignActionPopup
    :show="showTripleButton"
    title-popup="报名成功"
    status="success"
    status-title="报名成功"
    info-text="选择您的下一步操作"
    :buttons="[
      { text: '查看详情', type: 'default', action: 'detail' },
      { text: '分享', type: 'info', action: 'share' },
      { text: '加入群聊', 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.text}, action: ${button.action}, index: ${index}`);
  
  // 根据不同的 action 执行不同操作
  switch (button.action) {
    case 'cancel':
      console.log('取消操作');
      break;
    case 'confirm':
      console.log('确认操作');
      break;
    case 'detail':
      console.log('查看详情');
      break;
    case 'share':
      console.log('分享');
      break;
    case 'join':
      console.log('加入群聊');
      break;
  }
  
  showMultiButton.value = false;
  showTripleButton.value = false;
};
</script>

# 自定义插槽

<template>
  <PressMatchSignActionPopup
    :show="show"
    title-popup="比赛报名"
    status="success"
    status-title="报名成功"
    custom-class="custom-sign-popup"
    button-text="我知道了"
    @close="handleClose"
    @confirm="handleConfirm"
  >
    <!-- 自定义信息内容 -->
    <template #info>
      <div class="custom-info">
        <div class="custom-info__text">
          恭喜您报名成功！
        </div>
        <div class="custom-info__desc">
          比赛将于2024年1月15日开始
        </div>
        <div class="custom-info__tips">
          请添加比赛群获取最新消息
        </div>
      </div>
    </template>
  </PressMatchSignActionPopup>
</template>

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

const show = ref(false);

const handleClose = () => {
  console.log('弹窗关闭');
  show.value = false;
};

const handleConfirm = () => {
  console.log('确认操作');
  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

参数	说明	类型	默认值
show	是否显示弹窗	boolean	`false`
titlePopup	弹窗标题	string	`''`
status	状态类型	'success' \| 'warning'	`'success'`
statusTitle	状态标题文案	string	`''`
infoText	信息文案	string	`''`
buttonText	单按钮文案（已废弃，建议使用 buttons）	string	`'确定'`
buttons	多按钮配置列表	ButtonConfig[]	`[]`
customClass	自定义CSS类名	string	`''`

# ButtonConfig 数据结构

参数	说明	类型	默认值
text	按钮文案	string	-
type	按钮类型	'primary' \| 'default' \| 'info' \| 'warning' \| 'danger'	`'primary'`
action	按钮操作标识	string	-

# Events

事件名	说明	回调参数
close	弹窗关闭时触发	-
confirm	确认按钮点击时触发（单按钮模式）	-
buttonClick	按钮点击时触发（多按钮模式）	`button: ButtonConfig, index: number`

# Slots

插槽名	说明	参数
info	自定义信息内容区域	-
foot-btn	自定义底部按钮区域	-

# CSS 变量

组件提供了下列 CSS 变量，可用于自定义样式：

# 间距系统

CSS 变量	说明	默认值
--pmsap-status-mb	状态图标下边距	`$spacing-sm`
--pmsap-title-mb	标题下边距	`$spacing-xs`
--pmsap-foot-btn-gap	底部按钮间距	`$spacing-md`

# 尺寸系统

CSS 变量	说明	默认值
--pmsap-status-icon-size	状态图标容器大小	`.9rem`
--pmsap-status-icon-font-size	状态图标字体大小	`.6rem`

# 颜色系统

CSS 变量	说明	默认值
--pmsap-popup-bg	弹窗背景色	`$color-surface-default`
--pmsap-status-success-bg	成功状态背景色	`$color-surface-brand`
--pmsap-status-warning-bg	警告状态背景色	`$color-surface-secondary`
--pmsap-status-success-icon-color	成功状态图标颜色	`$color-surface-default`
--pmsap-status-warning-icon-color	警告状态图标颜色	`$color-icon-secondary`
--pmsap-title-color	标题文字颜色	`$color-text-primary`
--pmsap-info-color	信息文字颜色	`$color-text-primary`

# 字体系统

CSS 变量	说明	默认值
--pmsap-title-font-size	标题字体大小	`$font-size-lg`
--pmsap-info-font-size	信息字体大小	`$font-size-md`
--pmsap-title-font-weight	标题字体粗细	`$font-weight-bold`

# 圆角系统

CSS 变量	说明	默认值
--pmsap-status-border-radius	状态图标圆角	`$border-radius-circle`

# 使用示例

/* 自定义报名状态弹窗样式 */
:root {
  --pmsap-status-icon-size: 48px;
  --pmsap-status-success-bg: #52c41a;
  --pmsap-status-warning-bg: #ff4d4f;
  --pmsap-title-color: #333;
  --pmsap-info-color: #666;
}

/* 或通过customClass覆盖 */
.custom-sign-popup {
  --pmsap-status-mb: 24px;
  --pmsap-title-mb: 16px;
  --pmsap-title-font-size: 20px;
  --pmsap-info-font-size: 16px;
}

# 使用场景

# 1. 比赛报名结果

显示报名成功或失败状态
提供后续操作指引
展示比赛相关信息

# 2. 操作结果反馈

用户操作完成后的状态反馈
成功或失败状态的统一展示
引导用户进行下一步操作

# 3. 状态通知

重要操作的结果通知
系统状态变更提醒
用户行为确认反馈

# 注意事项

状态类型：目前支持 success 和 warning 两种状态
图标字体：需要确保项目中已引入相应的图标字体文件
文案长度：建议控制标题和信息文案的长度，避免显示异常
按钮操作：确保按钮点击后有明确的后续操作或页面跳转
小程序兼容：支持微信小程序的 virtualHost 和 styleIsolation 配置
无障碍访问：状态图标具有语义化的类名，便于屏幕阅读器识别

# 依赖组件

PressMatchPopUp：基础弹窗组件
PressButton：按钮组件

← MatchSharePopTips MatchSignQRCode →