VTY PC / H5 / APP 全链路产品PRD
文档使用说明及评审口径- 本需求为前端页面改版。最终页面的视觉效果、布局、组件样式、间距及适配表现，以评审确认后的 UI 设计稿为准；本原型主要用于说明页面结构、业务流程、功能入口及交互状态，不作为最终视觉验收标准。
- 本次改版原则上不调整现有业务规则和功能逻辑。未在本需求中明确提出变更的功能，均保持与当前生产环境一致。如原型、PRD 与生产环境实际逻辑存在差异，需在评审阶段核验，并由产品确认后更新文档，作为开发和测试依据。
- 由于目前缺少完整的历史产品文档、页面状态清单及业务规则沉淀，本原型和 PRD 由产品根据当前生产环境可见模块、实测页面、截图资料及现有业务链路整理，用于建立本次改版的基础范围和统一评审口径。
- 当前材料已覆盖现阶段能够识别和验证的主要流程、页面及状态，但不代表已穷尽全部历史业务场景。评审、UI 设计、开发和测试过程中，如发现遗漏的业务分支、登录状态、权限差异、异常提示、边界场景或状态页面，应及时反馈产品确认，并同步补充至原型和 PRD。
- 对核心业务链路或上线使用有影响的遗漏项，应在本期补充并完成验证后上线；不影响主链路且不属于本次改版范围的事项，经评估确认后可纳入后续版本处理。
1. 需求概述
1.1 背景
现有前台链路页面多、跨端状态分散，UI、研发和测试缺少同一份可追溯的页面、规则及异常口径，需要将PC、H5、APP主链路统一整理。
1.2 目标
- 建立可按模块和状态查看的高保真原型。
- 明确登录、账户、体育、资金、安全及服务模块的业务规则。
- 覆盖表单校验、Toast、Popup、空态、加载态和异常态。
- 为UI设计、技术评审、测试用例及产品验收提供统一依据。
2. 范围与端口
| 端口 | 范围 | 依据 |
|---|
| PC | 首页、登录、体育、充值、提款、账户与服务主链路 | 既有PC全链路业务关系 |
| H5 | 14个业务模块、51个已整理页面/状态 | H5实测截图 |
| APP | 复用H5业务链路，补充原生返回、键盘、权限、保存及外部唤起 | H5页面＋移动端验收 |
3. 全链路流程
- 游客进入首页或“我的”未登录态。
- 点击受限功能时进入登录页，并记录触发页面。
- 登录成功后返回触发页面；从“我的”发起时进入登录态“我的”。
- 底部主导航：首页、充值、注单、客服、我的。
- 充值、提款、银行卡、钱包、安全中心等流程按用户资料完成状态分支。
- 退出登录后清除会员数据并返回未登录态。
4. 核心业务规则
| 模块 | 规则 |
|---|
| 登录 | 字段校验通过后提交；失败保留输入；登录成功回到原触发页面。 |
| 注册 | 账号注册与手机号注册可切换；必须同意服务条款与隐私政策。 |
| 体育 | 赛事、比分、盘口、时间均为实时数据；接口异常不得展示过期盘口。 |
| 充值 | 先选渠道和方式，再选金额；快捷金额与自定义金额互斥；支付中禁止重复下单。 |
| 提款 | 校验余额、方式、限额、次数及安全资料；确认后校验六位提款密码。 |
| 安全 | 手机号、邮箱、银行卡、提款地址和密码状态以接口为准。 |
| 站内信 | 按公告、通知、活动、赛事推荐分类；角标数量取未读数。 |
5. 页面状态矩阵
| 状态 | 页面表现 | 处理 |
|---|
| 默认态 | 展示当前用户、配置及接口数据 | 允许执行满足条件的操作 |
| 加载态 | Loading或骨架屏 | 防止重复提交 |
| 空状态 | 空状态图、说明，必要时提供操作按钮 | 保留筛选条件 |
| 校验失败 | 字段下红字或对应Toast | 不提交接口，焦点定位错误字段 |
| 接口异常 | 错误提示和重试入口 | 保留用户输入及当前筛选 |
| 弱网/超时 | 超时提示 | 允许重试，避免重复订单 |
| 极限态 | 超长文本截断、金额格式化、列表滚动 | 不遮挡关键操作 |
6. 校验与提示
- 账号：6–20位数字与字母组合。
- 密码：8–20位数字与字母组合；提款密码为6位。
- 昵称：4–10个字符。
- 反馈：问题类型与内容必填，内容上限150字，最多上传3张图片。
- Toast建议底部居中显示约2.2秒；需阻断用户决策的内容使用Popup。
- 字段错误优先在对应字段下方显示红字，不清空正确字段。
7. 异常处理
- 接口500、超时、断网：显示统一异常提示及重试。
- 充值订单创建失败：不得跳转支付中页面，不得生成重复订单。
- 提款校验失败：停留当前页并说明余额、限额、次数或资料原因。
- 登录失败：保留账号；密码按现网安全策略处理。
- 图片加载失败：使用占位图，不破坏页面布局。
- 返回及中途退出：未提交表单不产生业务数据；已创建订单按订单状态处理。
8. 多端差异
| 场景 | PC | H5 | APP |
|---|
| 返回 | 页面返回/面包屑 | 顶部返回＋浏览器返回 | 顶部返回＋系统返回键 |
| 输入 | 键盘与鼠标 | 移动软键盘 | 原生键盘及安全输入 |
| 客服/下载 | 新窗口或弹层 | 浏览器唤起 | 原生或三方SDK |
| 图片/二维码 | 右键或按钮保存 | 长按/下载 | 相册权限与保存结果提示 |
9. 验收标准
- 总入口两个入口均可正常打开。
- 模块标签、状态标签、截图和右侧说明一一对应。
- 所有图片可加载，无破图和跨模块错配。
- 登录拦截及登录回跳符合触发来源。
- 主导航及返回路径正确。
- 表单必填、格式、长度、按钮状态、Toast及Popup符合文档。
- 空态、加载态、异常态、弱网及极限内容完成测试。
- PC、H5、APP相同业务规则一致，端差异单独验收。
10. 实测截图
106张实测截图已全部接入原型，可按未登录流程、已登录流程和通用页面筛选查看。模块页面的进入路径、业务规则、校验和异常说明在原型右侧同步展示。 查看106张H5实测截图 →