diff --git a/.playwright-mcp/console-2026-03-25T12-23-27-715Z.log b/.playwright-mcp/console-2026-03-25T12-23-27-715Z.log new file mode 100644 index 000000000..d271175b3 --- /dev/null +++ b/.playwright-mcp/console-2026-03-25T12-23-27-715Z.log @@ -0,0 +1 @@ +[ 626ms] [ERROR] Failed to load resource: net::ERR_TUNNEL_CONNECTION_FAILED @ https://www.googletagmanager.com/gtag/js?id=UA-35939480-17:0 diff --git a/docs/financial-account-user-info-rebuild.md b/docs/financial-account-user-info-rebuild.md new file mode 100644 index 000000000..6980ab4c6 --- /dev/null +++ b/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 决策历史 +- 本文档 + - 用于记录当前已落地的“新页面重做”方向与实现边界 diff --git a/docs/financial-account-user-info-redesign-options.md b/docs/financial-account-user-info-redesign-options.md index 678b21a2b..10ff0ed80 100644 --- a/docs/financial-account-user-info-redesign-options.md +++ 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:实体卡片式重构**。 + +当时原因: + - 改动集中在模板结构与样式层 - 不需要改业务逻辑 - 不需要重构数据流 diff --git a/docs/financial-account-user-info-redesign-plan.md b/docs/financial-account-user-info-redesign-plan.md index 9970e6dab..c31df78e3 100644 --- a/docs/financial-account-user-info-redesign-plan.md +++ b/docs/financial-account-user-info-redesign-plan.md @@ -1,4 +1,6 @@ -# 开户信息页面重构实施说明(方案 A) +# 开户信息页面重构实施说明(方案 A,历史版本) + +> 说明:本文档记录的是上一轮“基于旧组件做方案 A 微调”的实施思路,现已不再作为当前落地方向。当前实际实现已切换为“新页面重做”,请优先参考 `docs/financial-account-user-info-rebuild.md`。 ## 目标