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

# 中介黑名单弹窗优化设计

## 需求概述

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

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

## 设计方案

### 1. 交互流程

**新增操作流程：**

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

**修改操作：**

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

### 2. 界面布局

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

### 3. 表单字段

**个人类型表单字段：**

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

**机构类型表单字段：**

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

### 4. 表单验证规则

**个人类型验证：**

```javascript
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" }
  ]
}
```

**机构类型验证：**

```javascript
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`