Withdrawal Request
提现申请弹窗 PRD，覆盖入口、余额展示、银行账户选择、金额输入、手续费预览、提交校验和异常处理。
Withdrawal Request 是代理商从全局 Top 发起提现申请的弹窗流程。财务、运营、客服和开发主要用它确认提现入口、银行选择、金额校验、手续费预览和提交后的记录追踪。
1. 页面摘要
| 项目 | 说明 |
|---|---|
| 页面性质 | 可操作弹窗流程；提交成功后生成提现记录 |
| 核心动作 | 查看可提现余额、选择收款银行、输入金额、确认手续费和实际到账金额、提交提现申请 |
| 数据范围 | 当前登录代理商本人及其有权限使用的提现余额、银行账户和提现规则 |
| 当前状态 | 银行选择、金额输入和费用预览已定义；手续费公式、限额、二次确认、移动端和部分错误状态仍待确认 |
2. 需求状态
| 状态 | 内容 |
|---|---|
Confirmed | 未选银行时不展示金额输入和提交按钮；提交前必须校验银行、金额、余额、手续费、权限和重复提交；提交成功后进入 Withdrawal Record 查询。 |
Inferred from Figma | 空金额下 Request Withdrawal 仍是紫色主按钮，暂按“可点击后校验”处理；切换银行后暂保留金额草稿并重新校验。 |
Open Question | 手续费公式、最小/最大限额、单日次数、二次确认视觉、移动端布局、银行异常状态，见 开放问题。 |
3. Figma 参考
页面状态 Figma 截图
Withdrawal Request
打开 Withdrawal Request 弹窗后的默认状态：左侧展示 Withdrawal Balance、操作提示和银行账户列表，右侧仅展示 No Bank Selected 空态。
选中 Kookmin Bank 后，左侧卡片显示紫色选中边框；右侧显示银行名、账户名、账号、Amount 输入框、WON 币种、快捷金额、费用汇总和 Request Withdrawal。
Kookmin Bank 选中且金额输入为 100,000.00，Amount 输入框为紫色焦点态，底部同步显示 Withdrawal Amount、Charge 和绿色 Actual Withdrawal Amount。
切换到 Shinhan Bank 后，左侧 Shinhan 卡片选中，右侧标题和账号更新为 Shinhan Bank 与 987-654-321098，金额与费用汇总回到空值/0 状态。
4. 页面定位
| 项目 | 定义 |
|---|---|
| 页面类型 | Page PRD / 弹窗操作流程 |
| 默认入口 | Top 中的 Withdrawal Request 主按钮 |
| 展示形式 | 居中弹窗，背景业务页面保留并被遮罩弱化 |
| 主要任务 | 选择收款银行、输入提现金额、预览手续费和实际到账金额、提交提现申请 |
| 结果归属 | 提交成功后生成 Withdrawal Record 记录，并按资金状态进入 Transaction History |
5. 全局依赖
| 全局模块 | 说明 |
|---|---|
| Top | 提供 Withdrawal Request 入口和顶部 Withdrawal Balance。弹窗内余额必须与财务提现口径一致。 |
| Withdrawal Record | 提现提交成功后生成记录，用户在该页面追踪 Pending、Processing、Complete、Refusal、Cancelled 等状态。 |
| Transaction History | 提现完成或失败后的资金变动进入流水查询；本弹窗不展示历史流水。 |
| 共享规则 | 语言、权限、金额格式、表单校验、敏感信息展示、反馈和异常处理遵守共享规则。 |
6. 页面组成
页面组成只描述 UI 结构。余额口径、选择行为、金额校验、提交限制和异常处理写在功能说明中。
| 区域 | UI 表现 | 对应功能说明 |
|---|---|---|
| 弹窗外壳 | 标题 Withdrawal Request、右上角关闭按钮、标题下分隔线、背景遮罩 | 弹窗入口与关闭 |
| 余额卡片 | 左侧白色卡片展示钱包图标、Withdrawal Balance 和大号紫色金额 7,668,630,487 | 余额卡片与提示 |
| 操作提示 | 橙色提示框展示 Set Withdrawal Account and Amount 及说明文案 | 余额卡片与提示 |
| 银行账户列表 | 左侧两列卡片展示 Kookmin Bank、Shinhan Bank、Woori Bank、Hana Bank、Nonghyup Bank 等账户 | 银行账户选择 |
| 右侧空态 | 未选银行时展示插画和 No Bank Selected | 右侧详情面板 |
| 银行详情 | 已选银行时展示银行名、账户名、账号、金额输入、币种、快捷金额、费用汇总和提交按钮 | 右侧详情面板 |
| 金额输入 | Amount *、提示图标、金额输入框、WON 币种下拉、100K / 500K / 1M / MAX 快捷按钮 | 金额输入与快捷金额 |
| 费用汇总 | Withdrawal Amount、Charge、Actual Withdrawal Amount 三行，实际到账金额使用绿色强调 | 费用与实际到账金额 |
| 提交按钮 | 紫色主按钮 Request Withdrawal，位于右侧详情面板底部 | 提交提现 |
7. 功能说明
7.1 弹窗入口与关闭
Withdrawal Request 通过全局 Top 的提现入口打开。当前截图表现为居中弹窗覆盖在原页面之上，原页面保持可见但被遮罩弱化。
| 项目 | 规则 |
|---|---|
| 打开行为 | 点击 Top 的 Withdrawal Request 后打开弹窗，并加载最新提现余额和银行账户列表。 |
| 背景页面 | 背景页面不应被刷新、跳转或清空筛选；关闭弹窗后返回打开前的页面状态。 |
| 关闭按钮 | 点击右上角 X 关闭弹窗。 |
| 未提交关闭 | 仅有银行选择或金额草稿时，关闭不产生提现记录；是否需要二次确认由未保存草稿规则控制。 |
| 提交中关闭 | 请求提交中禁止关闭或关闭前必须明确提示，避免用户误以为申请已取消。 |
7.2 余额卡片与提示
弹窗左上方展示本次提现可用余额，下面固定展示操作提示。
| 元素 | 规则 |
|---|---|
| 余额卡片 | 显示钱包图标、Withdrawal Balance 和可提现金额。金额使用千分位，不展示模拟值。 |
| 余额口径 | 与 Top 的 Withdrawal Balance 使用同一财务口径；如果两处不一致，以弹窗打开时重新拉取的财务结果为准并记录同步问题。 |
| 加载规则 | 打开弹窗时刷新余额；刷新期间可以展示骨架或占位，但不能展示旧余额作为已确认余额。 |
| 操作提示 | 提示框文案为 Set Withdrawal Account and Amount / Please select the account you wish to withdraw from and enter the amount. |
| 提示性质 | 当前截图中已选银行和已输入金额后提示仍然存在，因此它是流程说明，不是错误提示。 |
7.3 银行账户选择
左侧银行列表用于选择本次提现收款账户。截图展示 5 个账户卡片，按两列排列，最后一个账户单独占左列。
| 项目 | 规则 |
|---|---|
| 卡片内容 | 每张卡片展示银行名称、分隔线、账户名和账号。 |
| 默认选择 | 弹窗打开后默认不选择任何银行，即使账户列表非空也不自动选中第一项。 |
| 单选行为 | 点击卡片后选中该银行，其他卡片取消选中。 |
| 选中样式 | 选中卡片使用紫色边框和轻微阴影；银行名颜色更深。 |
| 切换银行 | 切换银行时右侧标题、账号字段和收款账户随之更新；当前按 Inferred from Figma 保留金额草稿并重新校验。 |
| 账户状态 | 已冻结、未验证、被禁用或无提现权限的银行账户不能作为有效选项；如仍需展示，必须有禁用样式和原因。 |
| 列表溢出 | 银行账户较多时，左侧列表在弹窗内部滚动，不挤压右侧详情面板和底部提交区。 |
7.4 右侧详情面板
右侧面板根据银行选择状态展示空态或提交表单。
| 状态 | UI 表现 | 规则 |
|---|---|---|
| 未选银行 | 大面积空白面板中部展示钱包插画和 No Bank Selected | 不展示金额输入、费用汇总和提交按钮；用户必须先选择左侧银行账户。 |
| 已选 Kookmin Bank | 面板标题为 Kookmin Bank，账户名为 Hong Gil-dong，账号为 123-123123-123 | 右侧字段只读，金额输入为空时费用汇总为 0。 |
| 已输入金额 | 金额输入框出现紫色焦点边框，示例值为 100,000.00 | 同步刷新 Withdrawal Amount 和 Actual Withdrawal Amount。 |
| 已选 Shinhan Bank | 面板标题为 Shinhan Bank，账户名为 Hong Gil-dong，账号为 987-654-321098 | 选择不同银行后右侧账户信息必须立即切换。 |
账号字段属于敏感信息。若当前账号权限不足，账号可以按规则脱敏，但提交前仍必须能明确识别收款账户，避免用户选错银行。
7.5 金额输入与快捷金额
Amount * 是提现提交的必填项。当前截图中的币种为 WON，输入框支持聚焦态和快捷金额按钮。
| 控件 | 规则 |
|---|---|
| 金额输入 | 未输入时占位为 Enter amount；输入后按千分位和两位小数展示，例如 100,000.00。 |
| 输入格式 | 只允许数字和小数点；最多两位小数；非法字符不得进入有效值。 |
| 必填校验 | 金额为空或为 0 时不能提交成功，点击 Request Withdrawal 后需要在金额区域给出明确提示。 |
| 最小金额 | 低于系统最小提现金额时阻止提交，并提示最小提现额。 |
| 最大金额 | 不得超过当前可提现余额、单次限额和当日剩余额度。 |
100K | 快速填入 100,000 WON。 |
500K | 快速填入 500,000 WON。 |
1M | 快速填入 1,000,000 WON。 |
MAX | 填入当前允许提交的最大金额，应取可提现余额、单次限额和当日剩余额度中的最小值。 |
| 币种选择 | 当前截图只展示 WON；如果后续支持多币种，币种切换必须重新计算限额、手续费和实际到账金额。 |
快捷金额点击后等价于用户手动输入金额，需要触发同一套格式化、费用计算和校验逻辑。
7.6 费用与实际到账金额
右侧面板底部在分隔线下展示提现金额、手续费和实际到账金额。
| 字段 | 规则 |
|---|---|
| Withdrawal Amount | 展示用户当前输入的申请提现金额；空值或无效值展示 ₩0。 |
| Charge | 展示本次提现手续费；截图示例为 ₩0。 |
| Actual Withdrawal Amount | 展示实际到账金额，使用绿色强调；计算方式为提现金额减去手续费，最低不能小于 0。 |
| 刷新规则 | 用户输入金额、点击快捷金额、切换币种或手续费规则变化后，三行金额必须同步刷新。 |
| 格式规则 | 有金额时按 ₩100,000.00 展示；0 手续费可按截图展示为 ₩0。 |
费用规则未在截图中体现具体公式。实现和测试需要使用财务系统配置的手续费规则，不能在前端写死。
7.7 提交提现
Request Withdrawal 是提交本次提现申请的主按钮，只在已选择银行后展示。
| 项目 | 规则 |
|---|---|
| 按钮位置 | 固定在右侧详情面板底部，位于费用汇总下方。 |
| 点击校验 | 点击后校验银行账户、金额必填、金额上下限、余额、手续费、账号状态、提现权限、当日次数和当日额度。 |
| 二次确认 | 当前截图未覆盖；业务上仍要求提交前展示申请金额、手续费、实际到账金额和银行账户，用户确认后才真正提交。视觉样式见开放问题。 |
| 提交中 | 按钮进入 loading，金额输入、快捷金额、银行选择和关闭行为按提交中规则锁定，避免重复提交。 |
| 成功 | 生成提现记录，提示提交成功，并提供进入 Withdrawal Record 的入口。 |
| 失败 | 保留已选银行和金额草稿，展示失败原因，允许用户修改后重试。 |
8. 主流程
用户在任意登录后业务页面点击 Top 的
Withdrawal Request。系统打开 Withdrawal Request 弹窗，刷新提现余额和银行账户列表，右侧默认展示
No Bank Selected。用户在左侧银行列表中选择本次收款银行，右侧展示银行名、账户名、账号、金额输入、快捷金额和费用汇总。
用户输入金额，或点击
100K、500K、1M、MAX 快捷按钮。系统实时校验金额并刷新
Withdrawal Amount、Charge、Actual Withdrawal Amount。用户点击
Request Withdrawal，系统完成全部校验并展示二次确认。用户确认后系统提交申请；成功后生成 Withdrawal Record，失败时保留当前草稿并提示原因。
9. 已确认规则
- 未选银行时不能进入提交校验；右侧保持
No Bank Selected空态。 - 银行选择、右侧银行标题、账户名和账号必须保持一致，不能出现选中 Kookmin Bank 但右侧展示 Shinhan Bank 账号的情况。
- 提现金额必须大于 0，并满足最小提现额、最大提现额、可提现余额、单次限额、单日次数和单日额度规则。
- 手续费和实际到账金额必须在提交前展示，且与最终提交使用同一计算结果。
MAX不能简单填入页面展示余额，必须考虑单次限额、当日剩余额度、冻结金额和风控限制。- 提交请求同一时间只能存在一个进行中状态，重复点击不能生成重复提现申请。
- 提交成功后新增提现记录，初始状态默认为 Pending；后续处理、拒绝、取消和完成在 Withdrawal Record 中查询。
- 弹窗中的银行账号、账户名和金额属于敏感信息，日志、错误上报和截图留存需要按敏感信息规则处理。
10. 异常与空态
| 场景 | 处理 |
|---|---|
| 余额加载失败 | 不展示模拟余额；禁用提交并提示刷新或稍后重试。 |
| 银行列表为空 | 左侧展示无可用银行账户提示，右侧保持空态；引导用户到 Profile 或对应银行登记流程补充银行信息。 |
| 未选银行点击提交 | 当前截图不展示按钮；如果后续保留全局提交入口，必须提示先选择银行账户。 |
| 金额为空或为 0 | 阻止提交，在 Amount 区域提示请输入提现金额。 |
| 金额超过可提现范围 | 阻止提交，提示可提现余额或当前限额。 |
| 手续费计算失败 | 保留输入，但不能提交；提示用户重试。 |
| 银行账户异常 | 禁止提交，提示账户不可用或需要重新绑定。 |
| 提交超时 | 保留提交中防重复状态，直到系统确认结果；如结果未知，引导用户查看 Withdrawal Record。 |
| 提交失败 | 保留银行和金额，展示可操作的失败原因。 |
11. 开放问题
| 问题 | 当前默认处理 | 影响角色 | 是否阻塞上线 | 待确认方 |
|---|---|---|---|---|
右侧详情面板第二个只读字段标为 Account Name 但内容是账号 | 主规则按 Account Number 处理 | 设计 / 开发 / QA | 否 | 设计 |
| 二次确认、提交中、成功、失败、金额错误、余额不足、银行异常的视觉状态缺失 | 按共享反馈和本页业务规则实现默认状态 | 财务 / 客服 / 开发 / QA | 是 | 产品 / 设计 |
| 移动端布局是否需要弹窗或独立页面 | 当前只确认桌面弹窗；移动端需补 Figma | 产品 / 开发 / QA | 按范围决定 | 产品 / 设计 |
手续费公式、最小提现额、单次限额、单日次数、单日额度和 MAX 口径 | 不在前端写死，使用财务配置；MAX 取可用规则中的最小允许值 | 财务 / 开发 / QA | 是 | 财务 / 产品 |
| 切换银行后是否保留已输入金额 | Inferred from Figma：暂保留草稿并重新校验 | 运营 / 客服 / 开发 | 否 | 产品 |
| 空金额时按钮是可点击校验还是禁用态 | Inferred from Figma：暂按可点击后校验，符合共享按钮策略 | 开发 / QA | 否 | 产品 / 设计 |
12. 页面文案
| Key | English | Korean | 简体中文 |
|---|---|---|---|
withdrawal_request.title | Withdrawal Request | 출금 신청 | 提现申请 |
withdrawal_request.balance | Withdrawal Balance | 출금 잔액 | 提现余额 |
withdrawal_request.guidance_title | Set Withdrawal Account and Amount | 출금 계정과 금액을 설정하세요 | 设置提现账户和金额 |
withdrawal_request.guidance_desc | Please select the account you wish to withdraw from and enter the amount. | 출금할 계정을 선택하고 금액을 입력하세요. | 请选择要提现的账户并输入金额。 |
withdrawal_request.no_bank_selected | No Bank Selected | 선택된 은행 없음 | 未选择银行 |
withdrawal_request.account_name | Account Name | 계정 이름 | 账户名 |
withdrawal_request.account_number | Account Number | 계좌번호 | 账号 |
withdrawal_request.amount | Amount | 금액 | 金额 |
withdrawal_request.enter_amount | Enter amount | 금액 입력 | 输入金额 |
withdrawal_request.withdrawal_amount | Withdrawal Amount | 출금 금액 | 提现金额 |
withdrawal_request.charge | Charge | 수수료 | 手续费 |
withdrawal_request.actual_amount | Actual Withdrawal Amount | 실제 출금 금액 | 实际到账金额 |
withdrawal_request.submit | Request Withdrawal | 출금 신청 | 提交提现申请 |
13. 验收标准
- 点击 Top 的
Withdrawal Request后打开居中弹窗，背景页面被遮罩但状态不丢失。 - 弹窗默认展示余额卡片、操作提示、银行账户列表和右侧
No Bank Selected空态。 - 未选择银行时右侧不展示金额输入、费用汇总和提交按钮。
- 点击银行卡片后仅该卡片出现紫色选中边框，右侧展示对应银行名、账户名和账号。
- Kookmin Bank 和 Shinhan Bank 的右侧详情必须与截图中的账号示例一致。
- 金额输入
100,000.00后，费用汇总同步展示Withdrawal Amount ₩100,000.00、Charge ₩0、Actual Withdrawal Amount ₩100,000.00。 100K、500K、1M、MAX快捷按钮能填入或计算对应金额，并触发同一套校验和费用计算。- 金额为空、为 0、超限、余额不足或银行异常时不能提交成功，并展示明确原因。
- 提交前必须二次确认金额、手续费、实际到账金额和银行账户。
- 重复点击
Request Withdrawal不能生成重复提现申请；成功后可进入 Withdrawal Record 查看记录。