Press Next

# MatchFillApplicationPopup 填写申请弹窗

填写申请表单的弹窗组件,用于收集业主信息和网吧申请资料。支持表单输入、地址选择、文件上传等功能。

# 特性

  • 📝 表单收集 - 完整的申请信息表单,包含姓名、电话、地址等字段
  • 📍 地址选择 - 支持省市地址选择和详细地址输入
  • 📎 文件上传 - 支持营业执照等文件上传功能
  • 🎨 主题定制 - 丰富的CSS变量支持主题定制
  • 🔧 插槽支持 - 支持自定义上传按钮、提交按钮和选择图标
  • ⚡ 轻量高效 - 优化的代码结构,性能出色

# 适用场景

  • 网吧申请注册
  • 商户入驻申请
  • 业务资质申请
  • 信息收集表单

# 引入

import PressMatchFillApplicationPopup from 'press-next/press-match-fill-application-popup/press-match-fill-application-popup';

# 代码演示

# 基础用法

<template>
  <PressMatchFillApplicationPopup
    :show="showPopup"
    @close="onClose"
    @submit="onSubmit"
    @select-address="handleSelectAddress"
    @upload-license="handleUploadLicense"
  />
</template>

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

const showPopup = ref(false);

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

const onSubmit = (data: any) => {
  console.log('提交数据:', data);
  // 处理提交逻辑
};

const handleSelectAddress = () => {
  console.log('选择地址');
  // 打开地址选择器
};

const handleUploadLicense = () => {
  console.log('上传营业执照');
  // 打开文件选择器
};
</script>

# 带初始数据

<template>
  <PressMatchFillApplicationPopup
    :show="showPopup"
    :initial-data="initialData"
    @close="onClose"
    @submit="onSubmit"
  />
</template>

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

const showPopup = ref(false);

const initialData = {
  ownerName: '张三',
  phone: '13800138000',
  cafeName: '游戏人生网吧',
  address: '广东省深圳市',
  detailAddress: '南山区科技园',
};

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

const onSubmit = (data: any) => {
  console.log('提交数据:', data);
};
</script>

# 自定义占位符

<template>
  <PressMatchFillApplicationPopup
    :show="showPopup"
    :placeholders="customPlaceholders"
    @close="onClose"
    @submit="onSubmit"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';

const customPlaceholders = {
  ownerName: '请填写您的姓名',
  phone: '请填写手机号码',
  cafeName: '请填写网吧名称',
  address: '请选择所在省市',
  detailAddress: '请填写详细地址信息',
};

const showPopup = ref(false);

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

const onSubmit = (data: any) => {
  console.log('提交数据:', data);
};
</script>

# 自定义主题

<template>
  <PressMatchFillApplicationPopup
    :show="showPopup"
    custom-class="my-custom-theme"
    @close="onClose"
    @submit="onSubmit"
  />
</template>

<style>
.my-custom-theme {
  /* 表单样式 */
  --fap-form-label-color: #333333;
  --fap-form-input-field-color: #9fabb6;
  
  /* 按钮样式 */
  --fap-submit-btn-background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --fap-submit-btn-border-radius: .4rem;
  
  /* 上传按钮样式 */
  --fap-form-upload-btn-background: #f5f5f5;
}
</style>

# API

# Props

参数 说明 类型 默认值
custom-class 自定义样式类 string ''
show 是否显示弹窗 boolean false
z-index 弹窗层级 number 100
title 弹窗标题 string '填写申请'
submit-text 提交按钮文字 string '提交'
placeholders 输入框占位符配置 Placeholders 见下方说明
initial-data 初始表单数据 Partial<FormData> {}

# Placeholders 默认值

{
  ownerName: '请输入业务姓名',
  phone: '请输入联系电话',
  cafeName: '请输入网吧名称',
  address: '选择省市',
  detailAddress: '请输入详细地址'
}

# FormData 数据结构

interface FormData {
  ownerName: string; // 业主姓名
  phone: string; // 联系电话
  cafeName: string; // 网吧名称
  address: string; // 网吧地址(省市)
  detailAddress: string; // 详细地址
  licenseFile?: File | string; // 营业执照文件
}

# Placeholders 数据结构

interface Placeholders {
  ownerName: string; // 业主姓名占位符
  phone: string; // 联系电话占位符
  cafeName: string; // 网吧名称占位符
  address: string; // 网吧地址占位符
  detailAddress: string; // 详细地址占位符
}

# Slots

名称 说明
icon-select 自定义地址选择图标
upload-btn 自定义上传按钮区域内容
submit-btn 自定义提交按钮区域内容

# Events

事件名 说明 回调参数
close 关闭弹窗时触发 -
submit 点击提交按钮时触发 data: FormData
input-change 输入框内容变化时触发 field: keyof FormData, value: string
select-address 点击选择地址时触发 -
upload-license 点击上传营业执照时触发 -

# 注意事项

# 使用建议

  1. 表单验证：组件不包含内置验证逻辑,建议在 submit 事件中进行数据验证
  2. 文件上传：upload-license 事件仅触发上传动作,实际上传逻辑需要业务方实现
  3. 地址选择：select-address 事件需要配合地址选择器组件使用
  4. 数据监听：可通过 input-change 事件实时监听表单字段变化
  5. 初始数据：使用 initial-data 时,建议提供完整的字段以避免类型问题
  6. 响应式适配：在小屏幕设备上,建议适当调整 --fap-form-item-height 等尺寸变量

# 性能优化

  • 组件使用虚拟化节点减少DOM层级
  • 表单数据使用 ref 响应式管理
  • 深度监听优化,仅在字段变化时触发事件
  • 建议在大文件上传时添加进度提示
  • 样式使用CSS变量,便于动态主题切换

# 兼容性

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

# 主题定制

# 样式变量

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

# 间距系统 (Spacing)

名称 默认值 描述
--fap-form-item-height 1.12rem 表单项高度
--fap-form-item-upload-height auto 上传表单项高度
--fap-form-label-max-width 2rem 表单标签最大宽度
--fap-form-input-field-width 100% 输入框宽度
--fap-form-input-arrow-width .4rem 箭头图标宽度
--fap-form-input-arrow-height .4rem 箭头图标高度
--fap-form-input-select-min-height .48rem 选择框最小高度
--fap-form-upload-btn-width .92rem 上传按钮宽度
--fap-form-upload-btn-height .92rem 上传按钮高度
--fap-submit-btn-width 100% 提交按钮宽度
--fap-submit-btn-height .8rem 提交按钮高度

# 块状系统 (Box Model)

名称 默认值 描述
--fap-form-item-margin 0 表单项外边距
--fap-form-item-upload-padding $spacing-lg 0 上传表单项内边距
--fap-form-label-margin-right $spacing-md 表单标签右边距
--fap-form-input-margin-left auto 输入框左边距
--fap-form-input-select-gap .08rem 选择框内部间距
--fap-form-upload-margin-left auto 上传区域左边距

# 颜色系统 (Colors)

名称 默认值 描述
--fap-form-label-color $color-text-primary 表单标签颜色
--fap-form-input-field-color #9fabb6 输入框文字颜色
--fap-form-input-placeholder-color #9fabb6 占位符文字颜色
--fap-form-input-arrow-color #3e4c5a 箭头图标颜色
--fap-form-upload-icon-color rgba(163, 171, 180, 1) 上传图标颜色
--fap-form-upload-btn-border-color #c8ced7 上传按钮边框颜色
--fap-submit-btn-text-color $color-text-invert-light 提交按钮文字颜色
--fap-form-input-field-background transparent 输入框背景色
--fap-form-upload-btn-background $color-surface-secondary 上传按钮背景色
--fap-submit-btn-background $color-surface-brand 提交按钮背景色

# 字体系统 (Typography)

名称 默认值 描述
--fap-form-label-font-size $font-size-lg 表单标签字体大小
--fap-form-label-font-weight $font-weight-regular 表单标签字体粗细
--fap-form-label-line-height 1.5 表单标签行高
--fap-form-input-field-font-size $font-size-md 输入框字体大小
--fap-form-input-field-text-align right 输入框文本对齐
--fap-form-input-placeholder-font-size $font-size-md 占位符字体大小
--fap-form-input-placeholder-text-align right 占位符文本对齐
--fap-form-input-arrow-font-size .36rem 箭头图标字体大小
--fap-form-upload-icon-font-size .36rem 上传图标字体大小
--fap-submit-btn-font-size $font-size-lg 提交按钮字体大小
--fap-submit-btn-font-weight $font-weight-bold 提交按钮字体粗细

# 圆角系统 (Border Radius)

名称 默认值 描述
--fap-form-upload-btn-border-radius $border-radius-circle 上传按钮圆角
--fap-submit-btn-border-radius $border-radius-999 提交按钮圆角

← MatchFollowMpDialog →