7.4 KiB
7.4 KiB
PDA 拣货静态页面设计
目标
在 apps/pda-uniapp 中将 docs/悦/PDA拣货/pda-picking.html 转换为可运行在 Android PDA 上的 uni-app 页面。原型是唯一视觉和交互依据；实现保留原型文案、布局、颜色、页面密度、演示数据和本地状态流。
本次不接后端、不实现真实鉴权、不接厂商扫描 SDK、不实现持久化或离线队列。
实现方案
采用单页面作业流：登录态与拣货态均由 pages/index/index.vue 承载，使用 Vue 本地响应式状态切换，而不拆成多个路由。原因如下：
- 原型本身是连续的单页状态机，登录后立即进入同一作业上下文。
- 本阶段没有后端、深链、权限路由或跨页面数据恢复需求。
- 单页面可避免箱号、货品状态和弹层状态在路由之间同步，保持改动小而聚焦。
为避免页面文件承担过多重复结构，可将货品卡片和通用弹层拆成局部业务组件；演示数据与状态转换仍由页面统一管理。当前不引入状态管理库或新依赖。
页面结构
登录态
- 蓝色渐变背景、系统标识、
柏悦物流 · PDA拣货标题和副标题。 - 工号、密码、作业仓库三个字段。
- 普通登录按钮和三个演示账号快捷登录按钮。
- 空工号、空密码和账号密码错误使用原型文案提示。
- 登录成功后显示欢迎提示并进入拣货态；退出后清空登录表单与作业状态。
拣货态
- 顶部蓝色作业栏：页面标题、仓库、退出、当前箱号、订单号和人员身份。
pages.json将首页设置为navigationStyle: "custom"，不显示当前标题为uni-app的原生导航栏，避免与原型作业栏重复；页面自行处理状态栏安全区。- 箱号选择器：显示全部演示箱号与订单号，切换时重置当前箱的未提交本地操作。
- 扫码区：输入或扫描 SKU 后回车确认；匹配当前箱中待拣 SKU 时标记已拣，错误码显示失败提示。登录进入拣货态、成功或失败扫码、确认拣出、撤销以及关闭任一弹层后，都应把焦点恢复到扫码输入框；打开需要输入数量的部分拣货弹层时，焦点临时交给数量输入框。成功扫码后清空输入值，无效码和重复扫描已处理 SKU 时保留明确错误反馈，并在反馈后继续接收下一次扫描。
- 箱号与订单信息卡。
- 拣货进度、货品列表、集装箱完成/待拣统计和底部提交栏。
- 底部提交栏固定在可视区域底部，并避让 Android 导航栏安全区。
- 提交按钮初始禁用；当所有货品均已处理时启用并显示“提交拣货完成”；当至少存在一件已拣或部分拣货、同时仍有待拣货品时启用并显示“提交拣货完成（N件待拣将视为未拣）”；仅发生部分跳拣且仍有待拣货品时保持禁用。
货品状态
每个货品使用以下本地状态之一：
pending：待拣，提供确认拣出、部分拣货、跳拣。picked：已拣，显示完成标签与撤销入口。partial：部分拣货，显示实际数量、目标数量与撤销入口。skipped：跳拣或提交时自动未拣，显示原因与撤销入口。
待拣货品排在已处理货品之前。进度按已拣、部分拣和跳拣的已处理数量计算。
弹层与反馈
- 跳拣弹层：单选原型中的五个原因，未选择时禁止确认并提示。
- 部分拣货弹层：显示 SKU、描述、总量、单位、快捷比例和数量输入；数量必须大于 0 且小于需求总量。
- 集装箱列表弹层：分别展示已完成与待拣箱，允许从待拣列表切换箱号。
- 完成弹层：展示已拣、部分拣、跳拣/未拣统计，并提供返回查看和下一箱。
- 短反馈沿用原型顶部提示条及成功、警告、错误配色。
Android 系统返回键按以下优先级处理：关闭当前弹层，关闭箱号下拉；若处于拣货态且无覆盖层，则调用与“退出”按钮相同的重置流程返回登录态；登录态交由系统退出页面。
本地数据与状态
保留原型中的三个箱号、订单号、货品、库位、单位、演示账号和跳拣原因。页面维护：
- 当前用户与仓库；
- 当前箱号索引；
- 当前箱内各 SKU 状态；
- 部分拣货数量；
- 已完成箱号集合；
- 当前下拉、弹层、目标货品和提示条状态；
- 扫码输入值。
提交时，未处理货品按原型标记为“未拣出（提交时自动标记）”，保存当前箱的最终演示状态并更新集装箱统计。刷新、退出或重启应用后允许数据重置，因为本阶段没有持久化要求。
视觉与响应式
- 颜色遵循原型：主色
#1a73e8、成功#0d9488、危险#dc2626、警告#f59e0b、页面背景#f5f7fa。 - 保留 12px 圆角、浅阴影、蓝色当前货品边线、状态色和卡片密度。
- 使用 uni-app 支持的
rpx、百分比和安全区变量适配 Android PDA，以360 × 640 dp为主要检查尺寸，兼容约320–480 dp宽度。 - 不引入新字体、图片生成素材、第三方图标库或新的视觉语言。
- 图标优先使用简单 CSS/文本符号或现有静态资源，避免依赖网页专属 SVG 注入方式。
- 本阶段不使用网络、震动、相机或存储能力，因此实现时移除
manifest.json中手工声明的VIBRATE和ACCESS_NETWORK_STATE权限；未来接入对应能力时再按明确用途恢复最小权限。
边界状态
- 登录加载态：当前纯本地操作无需异步加载，不添加虚假等待动画。
- 空态：保留“该箱号暂无拣货任务”“暂无已拣完成的集装箱”“所有集装箱已拣完成”等原型语义。
- 错误态：覆盖登录校验、空扫码、无效 SKU、未选跳拣原因、无效部分数量和最后一箱提示。
- 重复操作：已处理货品不再匹配扫码；撤销后恢复为待拣。
- 权限态：本阶段没有服务端权限；人员角色仅作演示展示，不据此隐藏功能。
- 软键盘：输入区与部分拣货输入不得被键盘永久遮挡，关闭弹层后恢复扫码输入上下文。
验证
仓库当前没有项目根级依赖清单、可核实的构建脚本或自动化测试设施，因此不新增或编造测试命令。实现后进行以下可核实检查：
- 静态检查
pages.json、Vue 模板、脚本和样式是否符合现有 uni-app 结构。 - 若当前环境可用 HBuilderX/uni-app 运行能力，则以 Android App 方式运行；否则明确记录未执行构建。
- 在常见 PDA 尺寸核对登录、主作业、弹层、底部固定栏和软键盘遮挡。
- 手工走通快捷登录、箱号切换、有效/无效/重复扫码、确认拣出、部分拣货、跳拣、撤销、提前提交、完整提交和下一箱，并核对每次关键操作后的扫码焦点。
- 检查提交按钮在初始、仅部分跳拣、存在已拣且仍有待拣、全部处理四种状态下的启用状态和文案。
- 检查系统返回对弹层、下拉、拣货态和登录态的处理，并确认返回登录态时执行完整状态重置。
- 检查首页未出现重复原生导航栏，并确认 Android 配置不再手工声明当前未使用的网络与震动权限。
真实扫描速度、连续扫描、低电量、断网、前后台切换、厂商扫描头和正式打包发布不属于本次静态实现的可验证范围，需在设备与工具链确定后补测。