jsowell-charger-web/docs/financial-account-user-info-rebuild.md

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

背景

财务中心原开户页基于旧组件 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 决策历史
• 本文档
  • 用于记录当前已落地的“新页面重做”方向与实现边界