tyapi-frontend/src/pages/certification

企业入驻流程

📋 概述

企业入驻流程是一个基于Vue 3 + Element Plus + Tailwind CSS构建的步骤式认证系统，用于引导用户完成企业信息填写、认证验证、合同签署等入驻流程。

🏗️ 架构设计

目录结构

certification/
├── index.vue                 # 主页面容器
├── components/               # 子组件目录
│   ├── EnterpriseInfo.vue    # 企业信息填写
│   ├── EnterpriseVerify.vue  # 企业认证验证
│   ├── ContractSign.vue      # 合同签署
│   └── CertificationComplete.vue # 完成页面
└── README.md                 # 本文档

技术栈

• 前端框架: Vue 3 (Composition API)
• UI组件库: Element Plus
• 样式框架: Tailwind CSS v4
• 图标库: Heroicons
• 状态管理: Pinia (用户状态)
• 路由: Vue Router

🔄 流程步骤

1. 填写企业信息 (enterprise_info)

组件: EnterpriseInfo.vue

功能特性:

• 企业基本信息收集
• 法人信息验证
• 手机号验证码验证
• 实时表单验证

表单字段:

• 企业名称 (2-100字符)
• 统一社会信用代码 (18位)
• 法人姓名 (2-20字符)
• 法人身份证号 (18位)
• 法人手机号 (11位)
• 验证码 (6位数字)

验证规则:

// 统一社会信用代码验证
const pattern = /^[0-9A-HJ-NPQRTUWXY]{18}$/

// 身份证号验证
const pattern = /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/

// 手机号验证
const pattern = /^1[3-9]\d{9}$/

2. 企业认证 (enterprise_verify)

组件: EnterpriseVerify.vue

功能特性:

• 集成e签宝企业认证服务
• iframe嵌入认证页面
• 认证状态监控
• 加载状态管理

集成服务:

• 认证URL: https://smlt.esign.cn/Z1Dc9Ts
• 支持iframe加载
• 认证完成回调处理

3. 签署合同 (contract_sign)

组件: ContractSign.vue

功能特性:

• 集成电子合同签署服务
• iframe嵌入签署页面
• 签署状态监控
• 完成确认机制

集成服务:

• 签署URL: https://smlt.esign.cn/95wqyN2
• 支持iframe加载
• 签署完成回调处理

4. 完成入驻 (completed)

组件: CertificationComplete.vue

功能特性:

• 入驻成功展示
• 企业信息汇总
• 后续操作引导
• 状态标签显示

操作入口:

• 前往控制台
• 返回账户中心

🎨 UI/UX 设计

视觉设计原则

• 现代化: 毛玻璃效果、渐变背景、圆角设计
• 一致性: 统一的色彩系统和间距规范
• 可访问性: 清晰的视觉层次和状态反馈

响应式设计

/* 桌面端 */
@media (min-width: 1200px) {
  .iframe-container { height: 700px; }
}

/* 移动端 */
@media (max-width: 768px) {
  .iframe-container { height: 400px; }
  .form-section { padding: 20px; }
}

状态指示

• 未开始: 灰色图标，等待状态
• 进行中: 蓝色图标，脉冲动画
• 已完成: 绿色图标，完成状态

🔧 技术实现

状态管理

// 主要状态
const currentStep = ref('enterprise_info')
const certificationData = ref(null)
const enterpriseForm = ref({
  companyName: '',
  unifiedSocialCode: '',
  legalPersonName: '',
  legalPersonID: '',
  legalPersonPhone: '',
  legalPersonCode: ''
})

组件通信

// 事件定义
const emit = defineEmits(['submit', 'apply', 'check-status', 'go-dashboard', 'go-profile'])

// 数据传递
const props = defineProps({
  formData: Object,
  enterpriseData: Object,
  companyName: String,
  certificationData: Object
})

表单验证

// 自定义验证器
const validateUnifiedSocialCode = (rule, value, callback) => {
  const pattern = /^[0-9A-HJ-NPQRTUWXY]{18}$/
  if (!pattern.test(value)) {
    callback(new Error('统一社会信用代码格式不正确'))
    return
  }
  callback()
}

🚀 开发特性

开发模式

// 开发模式控制器
const isDevelopment = ref(false)
const devCurrentStep = ref('enterprise_info')

// 步骤切换功能
const switchToStep = (stepKey) => {
  currentStep.value = stepKey
}

const resetToFirstStep = () => {
  currentStep.value = 'enterprise_info'
}

错误处理

• 表单验证错误提示
• API调用异常处理
• 网络错误友好提示
• 加载状态管理

性能优化

• 组件懒加载
• 表单数据缓存
• 防抖处理
• 内存清理

📱 移动端适配

布局调整

• 垂直布局适配
• 按钮全宽显示
• 步骤图标缩小
• 间距优化

交互优化

• 触摸友好的按钮尺寸
• 简化的表单布局
• 优化的iframe高度
• 响应式步骤条

🔌 第三方集成

e签宝服务

• 企业认证: 统一身份认证
• 合同签署: 电子合同服务
• iframe集成: 无缝嵌入体验

短信服务

• 验证码发送: 手机号验证
• 倒计时功能: 防止重复发送
• 错误处理: 发送失败重试

📊 状态流转

认证状态映射

const setCurrentStepByStatus = () => {
  switch (certificationData.value.status) {
    case 'not_started':
    case 'pending':
      currentStep.value = 'enterprise_info'
      break
    case 'info_submitted':
      currentStep.value = 'enterprise_verify'
      break
    case 'enterprise_verified':
    case 'contract_applied':
    case 'contract_pending':
    case 'contract_approved':
      currentStep.value = 'contract_sign'
      break
    case 'contract_signed':
    case 'completed':
      currentStep.value = 'completed'
      break
    default:
      currentStep.value = 'enterprise_info'
  }
}

🧪 测试指南

开发模式测试

1. 启用开发模式控制器
2. 使用步骤选择器切换不同步骤
3. 测试表单验证和提交
4. 验证响应式布局

功能测试

1. 表单验证测试
2. 验证码发送测试
3. iframe加载测试
4. 状态切换测试

兼容性测试

1. 不同浏览器测试
2. 移动端适配测试
3. 网络异常测试
4. 性能压力测试

📝 使用说明

基本使用

<template>
  <div class="certification-page">
    <!-- 步骤条 -->
    <CustomSteps :steps="certificationSteps" :current-step="currentStep" />
    
    <!-- 内容区域 -->
    <EnterpriseInfo v-if="currentStep === 'enterprise_info'" @submit="handleSubmit" />
    <EnterpriseVerify v-if="currentStep === 'enterprise_verify'" @submit="handleVerify" />
    <ContractSign v-if="currentStep === 'contract_sign'" @apply="handleApply" />
    <CertificationComplete v-if="currentStep === 'completed'" @go-dashboard="goToDashboard" />
  </div>
</template>

配置步骤

const certificationSteps = [
  {
    key: 'enterprise_info',
    title: '填写企业信息',
    description: '填写企业基本信息和法人信息',
    icon: BuildingOfficeIcon
  },
  // ... 其他步骤
]

🔮 未来规划

功能增强

• 支持多语言国际化
• 增加进度保存功能
• 支持离线填写
• 增加数据导出功能

技术优化

• 引入TypeScript支持
• 增加单元测试覆盖
• 优化包体积
• 增加PWA支持

用户体验

• 增加引导提示
• 优化加载动画
• 增加操作确认
• 支持快捷键操作

📞 技术支持

如有问题或建议，请联系开发团队或提交Issue。

---

最后更新: 2024年