docs: add design for miniprogram inventory pound QR popup.
Replace list「生成地磅单」with a centered pound-slip QR dialog aligned to the transport-plan popup. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
wuzilongandCursor committed
1 parent
7d09ebee96
commit
71f3fde31c
1 file changed
+104
@@ -0,0 +1,104 @@
|
||||
# 小程序出入库列表 · 磅单二维码弹窗
|
||||
|
||||
> 日期：2026-09-24
|
||||
> 适用范围：`miniprogram/pages/db/inventory/list.vue` 及新建 db-ui 弹窗组件
|
||||
> 视觉权威：运输计划 webview（`web-admin` `DbPoundSlipQrcodeDialog` + `PoundSlipQrcodeView`）
|
||||
> 关联：`docs/superpowers/specs/2026-09-13-pound-qrcode-public-link-design.md`（公开页/链接语义；本变更不改后端）
|
||||
|
||||
---
|
||||
|
||||
## 1. 目标与已确认决策
|
||||
|
||||
### 1.1 目标
|
||||
|
||||
1. 出入库管理列表卡片去掉「生成地磅单」。
|
||||
2. 新增「磅单二维码」主色实心按钮；点击弹出与运输计划一致的磅单二维码卡片，供现场截图保存。
|
||||
3. 保留「关联」描边按钮。
|
||||
|
||||
### 1.2 决策摘要
|
||||
|
||||
| 项 | 约定 |
|
||||
|----|------|
|
||||
| 卡片底部按钮 | 「关联」（plain）+「磅单二维码」（primary） |
|
||||
| 交互 | 弹窗预览；`@click.stop`，不进入详情 |
|
||||
| 视觉 | 对齐 `PoundSlipQrcodeView`（黄底车牌、往来单位、物料+数量、备注、日期+单 ID、二维码、「出入库单标识（扫码核验）」） |
|
||||
| 弹层形态 | **居中**深色遮罩卡片；不使用底部抽屉 `db-popup` |
|
||||
| 二维码内容 | 出入库单 `id`（与管理端 / 运输计划一致） |
|
||||
| 二维码生成 | 小程序本地生成（如 `uqrcodejs` 或 canvas）；**禁止**依赖外网 `api.qrserver.com` |
|
||||
| 数据 | 优先列表行字段；缺字段时 `inventoryApi.get(id)` 补全 |
|
||||
| 后端 | 不改接口、不改 public pound-qr API |
|
||||
|
||||
### 1.3 非目标
|
||||
|
||||
- 复制二维码图片到剪贴板（微信能力受限；以截图为主）
|
||||
- 多条出入库择一弹窗（列表一卡一行，直接对应当前 `id`）
|
||||
- 恢复或迁移「生成地磅单」入口到其它位置
|
||||
- 改管理端 / 运输计划 webview 现有实现
|
||||
|
||||
---
|
||||
|
||||
## 2. 架构与组件
|
||||
|
||||
```
|
||||
inventory/list.vue
|
||||
├─ db-btn「关联」→ 现有关联弹窗（不变）
|
||||
└─ db-btn「磅单二维码」→ db-pound-qrcode-popup
|
||||
├─ 遮罩 + 居中面板 + 标题（入/出库磅单二维码）
|
||||
├─ 加载态 / 错误 toast 后关闭
|
||||
└─ 磅单卡片 UI + 本地 QR 图（内容 = inventoryId）
|
||||
```
|
||||
|
||||
### 2.1 新建
|
||||
|
||||
| 路径 | 职责 |
|
||||
|------|------|
|
||||
| `miniprogram/components/db-ui/db-pound-qrcode-popup.vue` | `show` + `inventoryId`（可选传入行快照）；拉取/展示/生成二维码；关闭释放临时图 |
|
||||
|
||||
样式从 `web-admin/src/styles/db-module.scss` 中 `.pound-slip-capture-inline` 及相关规则迁入组件 scoped SCSS（三墙 Token 仅用于页面壳；**磅单卡片保持原黄牌/白卡视觉**，与运输计划一致，不换成薄荷绿）。
|
||||
|
||||
### 2.2 修改
|
||||
|
||||
| 路径 | 变更 |
|
||||
|------|------|
|
||||
| `miniprogram/pages/db/inventory/list.vue` | 替换按钮；挂载弹窗；删除 `genWeighing` |
|
||||
| `miniprogram/package.json` | 若采用 npm 库则增加二维码依赖 |
|
||||
|
||||
### 2.3 弹窗字段映射
|
||||
|
||||
| UI | 来源 |
|
||||
|----|------|
|
||||
| 车牌黄牌 | `vehicleNo`（空则「未填车牌」或 `--`，与列表一致即可） |
|
||||
| 往来单位 | `partnerCompany` |
|
||||
| 物料名称 | `product` + 规格（若有）+ `（{quantity} 吨）` |
|
||||
| 备注 | `remarks` / `remark`（有则显示） |
|
||||
| 日期 + 单 ID 行 | `date` + `出库单ID：` / `入库单ID：` + `id` |
|
||||
| 二维码 | 编码字符串 = `id` |
|
||||
|
||||
标题：`businessType === '出库'` →「出库磅单二维码」，否则「入库磅单二维码」。
|
||||
|
||||
---
|
||||
|
||||
## 3. 错误处理
|
||||
|
||||
| 场景 | 行为 |
|
||||
|------|------|
|
||||
| `get` 失败 | `uni.showToast` 失败文案；关闭弹窗 |
|
||||
| 二维码生成失败 | 同上 |
|
||||
| 关闭弹窗 | 清空行数据；释放临时图片路径 / Object URL（若有） |
|
||||
|
||||
---
|
||||
|
||||
## 4. 验收标准
|
||||
|
||||
1. 列表卡片仅见「关联」「磅单二维码」两个操作按钮；无「生成地磅单」。
|
||||
2. 点「磅单二维码」出现居中弹窗，视觉与运输计划磅单弹窗一致（黄牌、字段、二维码区文案）。
|
||||
3. 扫码结果为该出入库单 `id`。
|
||||
4. 点「关联」、点卡片进详情行为与改前一致。
|
||||
5. 弱网 / 无外网二维码服务时仍可生成二维码（本地生成）。
|
||||
|
||||
---
|
||||
|
||||
## 5. 实现备注
|
||||
|
||||
- 不扩大到地磅单列表或其它 db 页，除非后续单独需求。
|
||||
- 组件可复用：若其它原生页需要同一弹窗，直接引用 `db-pound-qrcode-popup`。
|
||||
Reference in new issue
Block a user