154 lines
5.1 KiB
Markdown
154 lines
5.1 KiB
Markdown
# 中介黑名单弹窗优化设计
|
||
|
||
## 需求概述
|
||
|
||
优化中介黑名单的添加弹窗交互流程：
|
||
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`
|
||
|