# 开户信息页面重做实施说明（新页面版）

## 背景

财务中心原开户页基于旧组件 `adapayMember.vue` 承载，之前的方案 A 仍然建立在旧结构上做 UI 微调。评审后确认该方向无法满足当前视觉与交互要求，因此本次调整为：**不再沿用旧页结构做修补，直接重做一个新的页面实现**。

本次重做仍复用现有后端接口与前端 API 封装，但页面信息架构、视觉层级、弹窗组织方式全部重新设计。

## 当前实现入口

- 页面路由保持不变：`accountUserInfo`
- 实际页面文件：`jsowell-charge-ui/src/views/financial/accountUserInfo.vue`
- 旧组件：`jsowell-charge-ui/src/views/pile/merchant/components/adapayMember.vue`
  - 继续保留，主要用于字段、接口参数与上传逻辑参考
  - 不再作为本次页面 UI 基础

## 本次目标

1. 新建一版更清晰的汇付会员开户页
2. 顶部第一排集中放操作按钮
3. 未查询到汇付会员时，只显示新建个人/企业用户按钮
4. 已查询到汇付会员时，只显示更新用户信息按钮
5. 页面内展示完整的个人 / 企业会员资料
6. 页面内独立展示结算账户详情
7. 新增与更新均使用新的弹窗结构
8. 保持现有接口协议不变

## 复用的接口

仍然复用 `jsowell-charge-ui/src/api/adapayMember/adapayMember.js`：

- `selectAdapayMember`
- `selectSettleAccount`
- `createAdapayMember`
- `createCorpMember`
- `updateAdapayMember`

## 新页面信息架构

### 1. 顶部 Hero 区

展示页面标题、简介，以及会员存在时的摘要信息：

- 会员类型
- 汇付会员 ID
- 结算账户状态
- 审核状态

### 2. 顶部操作栏

操作栏固定放在最上方卡片中，逻辑如下：

- 无会员：
  - 新建个人用户
  - 新建企业用户
- 有会员：
  - 更新用户信息
- 通用辅助动作：
  - 刷新信息

这样可以把“页面主操作”前置，避免用户在信息区中寻找按钮。

### 3. 会员资料区

按会员类型分别展示。

#### 个人用户字段

- 昵称
- 性别
- 邮箱
- 地址

#### 企业用户字段

按 4 组展示：

- 企业主体
  - 企业名称
  - 统一社会信用码
  - 证件有效期
  - 经营范围
- 法人信息
  - 法人姓名
  - 法人身份证号
  - 法人证件有效期
  - 法人手机号
- 联系信息
  - 企业地址
  - 省份编码
  - 地区编码
  - 企业电话
  - 企业邮箱
  - 邮编
- 审核结果
  - 审核状态
  - 审核说明

同时保留：

- 汇付会员 ID
- 用户类型
- 结算账户状态
- 删除状态 / 删除限制提示

### 4. 结算账户区

单独展示 `selectSettleAccount` 返回的第一条账户信息，避免与企业资料混排。

当前展示字段：

- 结算账户 ID
- 账户类型
- 银行卡号
- 户名
- 手机号
- 银行编码
- 银行名称
- 证件类型
- 证件号
- 省份编码
- 地区编码

## 弹窗设计

### 新建弹窗

- 统一入口：`新建汇付用户`
- 顶部先选择用户类型：个人 / 企业
- 根据类型切换表单内容

#### 新建个人用户

字段：

- 昵称
- 性别
- 邮箱
- 地址

#### 新建企业用户

字段按分组展示：

- 企业主体
- 法人信息
- 联系信息
- 附件上传

附件上传继续保留 4 张：

- 法人身份证正面
- 法人身份证反面
- 开户许可证
- 营业执照

提交前继续组装 `imgList`。

### 更新弹窗

- 统一入口：`更新汇付用户`
- 若当前是个人用户，则展示个人编辑表单
- 若当前是企业用户，则展示企业编辑表单
- 企业更新继续要求重新上传 4 张附件

## 数据来源与模型划分

### 会员主数据

来源：`selectAdapayMember`

用途：

- 控制页面按钮显示
- 驱动顶部摘要信息
- 回填个人 / 企业表单

### 结算账户数据

来源：`selectSettleAccount`

用途：

- 独立展示结算账户详情
- 不再把企业资料中的银行信息当作主账户展示来源

## 保持不变的部分

本次重做不改以下内容：

- 后端接口地址
- 请求参数协议
- 创建 / 更新接口调用方式
- 商户 ID 获取方式
- 企业附件上传接口
- 企业附件提交前的 `imgList` 组装逻辑

## 当前实现状态

当前已完成：

- 新页面 `accountUserInfo.vue` 重写
- 顶部操作栏改为按会员状态切换按钮
- 会员资料区重组
- 结算账户区独立展示
- 新建弹窗重做
- 更新弹窗重做
- 企业附件上传逻辑迁移

## 回归检查清单

- [ ] 无汇付会员时仅展示“新建个人用户 / 新建企业用户”
- [ ] 有汇付会员时仅展示“更新用户信息”
- [ ] 刷新信息按钮可重新拉取会员与结算账户数据
- [ ] 个人用户资料完整展示
- [ ] 企业用户资料完整展示
- [ ] 企业审核状态与审核说明展示正常
- [ ] 删除限制提示展示正常
- [ ] 结算账户详情独立展示正常
- [ ] 新建个人用户提交正常
- [ ] 新建企业用户提交正常
- [ ] 更新个人用户提交正常
- [ ] 更新企业用户提交正常
- [ ] 企业附件上传与 `imgList` 组装正常

## 与旧方案文档的关系

- `docs/financial-account-user-info-redesign-plan.md`
  - 保留，作为上一轮“方案 A 微调旧页”的记录
- `docs/financial-account-user-info-redesign-options.md`
  - 保留，作为 A / B 决策历史
- 本文档
  - 用于记录当前已落地的“新页面重做”方向与实现边界