ccdi/doc/implementation/中介黑名单弹窗优化设计.md

中介黑名单弹窗优化设计

需求概述

优化中介黑名单的添加弹窗交互流程：

1. 点击新增后先选择中介类型（个人/机构）
2. 然后弹出对应类型的信息输入窗口
3. 不需要tab栏，直接显示对应类型的表单
4. 机构类型只需输入一次证件号，该值同时作为"证件号"和"统一社会信用代码"

设计方案

1. 交互流程

新增操作流程：

1. 用户点击"新增"按钮
2. 弹出一个简洁的对话框，顶部有两个大卡片式按钮：【个人】和【机构】
3. 用户点击其中一个类型按钮
4. 对应的表单立即展开显示在下方（无需确认操作）
5. 用户填写信息后点击"确定"提交

修改操作：

• 修改时直接显示原有数据的表单，不允许切换类型

2. 界面布局

┌─────────────────────────────────────┐
│     添加中介黑名单                   │
├─────────────────────────────────────┤
│                                     │
│  ┌─────────┐  ┌─────────┐          │
│  │  个人   │  │  机构   │          │ ← 大卡片式选择按钮（仅新增时显示）
│  └─────────┘  └─────────┘          │
│                                     │
│  ────────────────────────────────   │ ← 分隔线
│                                     │
│  [对应类型的表单字段]               │
│  • 姓名/机构名称                    │
│  • 证件号                           │
│  • 机构类型：统一社会信用代码        │
│  • 其他选填字段...                  │
│                                     │
├─────────────────────────────────────┤
│        [ 确定 ]    [ 取消 ]         │
└─────────────────────────────────────┘

3. 表单字段

个人类型表单字段：

• 姓名/机构名称*（必填）
• 证件号*（必填）
• 人员类型
• 人员子类型
• 性别
• 证件类型
• 手机号码
• 微信号
• 联系地址
• 所在公司
• 职位
• 关联人员ID
• 关联关系
• 备注

机构类型表单字段：

• 姓名/机构名称*（必填）
• 证件号*（必填，自动同步到统一社会信用代码）
• 主体类型
• 企业性质
• 成立日期
• 行业分类
• 所属行业
• 注册地址
• 法定代表人
• 法定代表人证件类型
• 法定代表人证件号码
• 股东1-5
• 备注

4. 表单验证规则

个人类型验证：

rules: {
  name: [
    { required: true, message: "姓名不能为空", trigger: "blur" },
    { max: 100, message: "姓名长度不能超过100个字符", trigger: "blur" }
  ],
  certificateNo: [
    { required: true, message: "证件号不能为空", trigger: "blur" },
    { max: 50, message: "证件号长度不能超过50个字符", trigger: "blur" }
  ],
  remark: [
    { max: 500, message: "备注长度不能超过500个字符", trigger: "blur" }
  ]
}

机构类型验证：

rules: {
  name: [
    { required: true, message: "机构名称不能为空", trigger: "blur" },
    { max: 100, message: "机构名称长度不能超过100个字符", trigger: "blur" }
  ],
  certificateNo: [
    { required: true, message: "证件号不能为空", trigger: "blur" },
    { max: 18, message: "统一社会信用代码长度为18位", trigger: "blur" }
  ],
  remark: [
    { max: 500, message: "备注长度不能超过500个字符", trigger: "blur" }
  ]
}

5. 边界情况处理

场景	处理方式
用户点击新增后未选择类型就点确定	禁用"确定"按钮，直到选择类型
用户选择类型后想重新选择	只有关闭弹窗重新打开才能选择
修改操作时类型锁定	隐藏类型选择器，直接显示对应表单
表单验证失败	高亮显示错误字段，滚动到第一个错误位置
网络请求失败	显示错误提示，弹窗保持打开状态

6. 用户体验优化

1. 视觉反馈：

   • 类型选择按钮在未选中时有hover效果
   • 选中后按钮变为高亮状态，其他按钮变灰
   • 表单展开有淡入动画

2. 输入提示：

   • 个人类型的证件号字段下方显示提示："请输入证件号码"
   • 机构类型的证件号字段下方显示提示："统一社会信用代码（18位）"

3. 表单布局：

   • 保持两列布局，充分利用空间
   • 必填项（姓名、证件号）标记红色星号

7. 技术实现要点

状态管理：

• 新增模式：isAddMode: true，显示类型选择器
• 修改模式：isAddMode: false，隐藏类型选择器
• 已选类型：selectedType: '1' | '2' | null

数据同步：

• 机构类型提交时，将 form.certificateNo 的值同时赋给 form.corpCreditCode