mirror of
https://codeup.aliyun.com/67c68d4e484ca2f0a13ac3c1/ydc/jsowell-charger-web.git
synced 2026-04-20 11:05:18 +08:00
234 lines
5.3 KiB
Markdown
234 lines
5.3 KiB
Markdown
# 开户信息页面重做实施说明（新页面版）
|
||
|
||
## 背景
|
||
|
||
财务中心原开户页基于旧组件 `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 决策历史
|
||
- 本文档
|
||
- 用于记录当前已落地的“新页面重做”方向与实现边界
|