2026-03-26 11:05:38 +08:00
|
|
|
|
# 开户信息页面重构实施说明（方案 A，历史版本）
|
|
|
|
|
|
|
|
|
|
|
|
> 说明：本文档记录的是上一轮“基于旧组件做方案 A 微调”的实施思路，现已不再作为当前落地方向。当前实际实现已切换为“新页面重做”，请优先参考 `docs/financial-account-user-info-rebuild.md`。
|
2026-03-25 17:32:28 +08:00
|
|
|
|
|
|
|
|
|
|
## 目标
|
|
|
|
|
|
|
|
|
|
|
|
本次针对财务中心开户信息页面做 UI 优化，保持原有字段、按钮、接口和提交逻辑不变，仅调整页面结构与视觉表现。
|
|
|
|
|
|
|
|
|
|
|
|
核心目标：
|
|
|
|
|
|
|
|
|
|
|
|
- 保留全部字段展示
|
|
|
|
|
|
- 保留所有操作入口
|
|
|
|
|
|
- 明确信息展示区与操作区分离
|
|
|
|
|
|
- 提升页面层次感、可读性与后台质感
|
|
|
|
|
|
- 降低改造风险，优先复用现有组件逻辑
|
|
|
|
|
|
|
|
|
|
|
|
## 实施范围
|
|
|
|
|
|
|
|
|
|
|
|
涉及文件：
|
|
|
|
|
|
|
|
|
|
|
|
- `jsowell-charge-ui/src/views/pile/merchant/components/adapayMember.vue`
|
|
|
|
|
|
- `jsowell-charge-ui/src/views/financial/accountUserInfo.vue`（本次仅作为壳页，不调整核心逻辑）
|
|
|
|
|
|
|
|
|
|
|
|
## 方案 A：实体卡片式重构
|
|
|
|
|
|
|
|
|
|
|
|
### 页面结构
|
|
|
|
|
|
|
|
|
|
|
|
页面按业务实体拆成 4 个清晰区域：
|
|
|
|
|
|
|
|
|
|
|
|
1. 页面顶部说明区
|
|
|
|
|
|
- 页面标题
|
|
|
|
|
|
- 简短说明文案
|
|
|
|
|
|
- 刷新与查询快捷操作
|
|
|
|
|
|
|
|
|
|
|
|
2. 汇付用户信息区
|
|
|
|
|
|
- 顶部状态标签
|
|
|
|
|
|
- 汇付会员ID / 用户类型 / 结算账户状态 / 删除状态摘要
|
|
|
|
|
|
- 完整的个人或企业资料信息
|
|
|
|
|
|
- 审核说明与删除提示保留
|
|
|
|
|
|
|
|
|
|
|
|
3. 用户操作区
|
|
|
|
|
|
- 新增个人用户
|
|
|
|
|
|
- 新增企业用户
|
|
|
|
|
|
- 修改用户信息
|
|
|
|
|
|
- 删除汇付用户
|
|
|
|
|
|
|
|
|
|
|
|
4. 结算账户信息与操作区
|
|
|
|
|
|
- 独立展示结算账户详情
|
|
|
|
|
|
- 独立展示创建、查询、删除结算账户按钮
|
|
|
|
|
|
|
|
|
|
|
|
### 视觉策略
|
|
|
|
|
|
|
|
|
|
|
|
- 顶部使用轻量渐变信息头，强化“开户信息”主视觉
|
|
|
|
|
|
- 信息区采用卡片 + 子卡片层级
|
|
|
|
|
|
- 操作区采用侧栏卡片，强调“动作”与“数据”分离
|
|
|
|
|
|
- 空状态增加引导文案
|
|
|
|
|
|
- 弹窗表单增加分段标题，提高可读性
|
|
|
|
|
|
|
|
|
|
|
|
## 保持不变的内容
|
|
|
|
|
|
|
|
|
|
|
|
以下内容本次不改：
|
|
|
|
|
|
|
|
|
|
|
|
- API 请求与返回结构
|
|
|
|
|
|
- 表单字段本身
|
|
|
|
|
|
- 表单校验规则
|
|
|
|
|
|
- 上传逻辑与附件结构
|
|
|
|
|
|
- 按钮点击方法
|
|
|
|
|
|
- 按钮显隐/禁用逻辑
|
|
|
|
|
|
- 个人/企业两类用户逻辑
|
|
|
|
|
|
- 结算账户创建与删除逻辑
|
|
|
|
|
|
|
|
|
|
|
|
## 验收标准
|
|
|
|
|
|
|
|
|
|
|
|
1. 页面上信息展示与操作按钮必须明显分开
|
|
|
|
|
|
2. 个人 / 企业 / 结算账户字段不得遗漏
|
|
|
|
|
|
3. 无汇付用户、有汇付用户、无结算账户、有结算账户四类场景都能正常展示
|
|
|
|
|
|
4. 所有按钮行为与改造前一致
|
|
|
|
|
|
5. 弹窗中的字段、附件上传和校验不受影响
|
|
|
|
|
|
|
|
|
|
|
|
## 回归检查清单
|
|
|
|
|
|
|
|
|
|
|
|
- [ ] 无汇付用户时空状态与新增入口正常
|
|
|
|
|
|
- [ ] 个人用户信息字段完整展示
|
|
|
|
|
|
- [ ] 企业用户信息字段完整展示
|
|
|
|
|
|
- [ ] 审核状态与审核说明展示正常
|
|
|
|
|
|
- [ ] 删除提示展示正常
|
|
|
|
|
|
- [ ] 结算账户详情字段完整展示
|
|
|
|
|
|
- [ ] 新增/修改/删除用户按钮逻辑正常
|
|
|
|
|
|
- [ ] 创建/查询/删除结算账户按钮逻辑正常
|
|
|
|
|
|
- [ ] 企业用户附件上传流程正常
|
|
|
|
|
|
- [ ] 弹窗表单校验正常
|
|
|
|
|
|
|
|
|
|
|
|
## 设计参考
|
|
|
|
|
|
|
|
|
|
|
|
主要参考页面：
|
|
|
|
|
|
|
|
|
|
|
|
- `jsowell-charge-ui/src/views/member/info/components/MemberInfo.vue`
|
|
|
|
|
|
|
|
|
|
|
|
参考点：
|
|
|
|
|
|
|
|
|
|
|
|
- 卡片头层级
|
|
|
|
|
|
- 标签样式
|
|
|
|
|
|
- 信息模块留白
|
|
|
|
|
|
- 页面区块化表达
|
