重构汇付会员页面

docs/financial-account-user-info-rebuild.md

@@ -0,0 +1,233 @@
+# 开户信息页面重做实施说明（新页面版）
+
+## 背景
+
+财务中心原开户页基于旧组件 `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 决策历史
+- 本文档
+  - 用于记录当前已落地的“新页面重做”方向与实现边界

docs/financial-account-user-info-redesign-options.md

@@ -2,10 +2,27 @@
 
 ## 当前决策
 
-当前优先实施 **方案 A：实体卡片式重构**。
+当前已从“优先实施方案 A”切换为：**直接按新页面重做方向落地**。
 
 原因：
 
+- 方案 A 的视觉结果未满足最新评审预期
+- 用户已明确要求不要继续考虑原来的样式与逻辑
+- 新需求强调顶部操作栏、新建/更新全新弹窗、以及更独立的用户资料展示
+- 因此当前实现不再继续沿 `adapayMember.vue` 做修补，而是重写 `financial/accountUserInfo.vue`
+
+历史上，方案 A 与方案 B 仍保留为前一轮讨论记录，供后续回看。
+
+当前落地文档见：`docs/financial-account-user-info-rebuild.md`
+
+---
+
+## 历史决策（已废弃）
+
+历史上曾优先考虑 **方案 A：实体卡片式重构**。
+
+当时原因：
+
 - 改动集中在模板结构与样式层
 - 不需要改业务逻辑
 - 不需要重构数据流

docs/financial-account-user-info-redesign-plan.md

@@ -1,4 +1,6 @@
-# 开户信息页面重构实施说明（方案 A）
+# 开户信息页面重构实施说明（方案 A，历史版本）
+
+> 说明：本文档记录的是上一轮“基于旧组件做方案 A 微调”的实施思路，现已不再作为当前落地方向。当前实际实现已切换为“新页面重做”，请优先参考 `docs/financial-account-user-info-rebuild.md`。
 
 ## 目标