3.9 KiB
3.9 KiB
小程序 · 司机运输计划单「复制发群」设计
日期: 2026-09-28
状态: 已确认
范围:miniprogram/pages/pl/driver-plan/list+detail(司机回执)
对齐: 加油登记 / ETC 充值申请的纯文本uni.setClipboardData模式
1. 目标
在【司机运输计划单】列表卡片与【司机回执】保存成功后提供【复制发群】,将计划关键信息复制为纯文本,供司机粘贴到微信群。
2. 已确认决策
| # | 项 | 决策 |
|---|---|---|
| D1 | 载体 | 纯文本剪贴板(uni.setClipboardData) |
| D2 | 附件 | 不包含附件行,不生成长图,不写入图片剪贴板 |
| D3 | 装/送货方 | 装货方取装货段客户名;送货方按送货段顺序编号为 #1 #2… |
| D4 | 实际装货量 / 实际送货量 | 装货段、各送货段 × 产品逐行列出;未填显示 — |
| D5 | 缺数据 | 仍可复制;空值统一 — |
| D6 | 数据来源 | 列表点击时 GET /transport/driver-plan/{planId} 拉详情(列表历史不含 actualQty) |
| D7 | 回执保存后 | showModal 提供【复制发群】/【关闭】;复制成功后返回列表;关闭则留在回执页 |
3. 非目标
- 不把附件图片写入剪贴板或合成长图
- 不改后端列表 history schema(本需求用详情接口即可)
4. 复制文案模板
计划编号:TP2026xxxx
装货方:某某供方
送货方#1:客户A
送货方#2:客户B
实际装货量:
装货方:10 吨
实际送货量:
送货方#1:12 吨
送货方#2:8 吨
字段规则:
计划编号:planNo;空则—装货方:stops中stopType === 'load'的customerName;无装货段则—送货方#N:stopType === 'delivery'按出现顺序从 1 编号,值为customerName实际装货量:固定标题行;其下遍历装货段产品(不展示产品名称)- 格式:
装货方:{actualQty} {unit} - 无装货产品行时标题下追加
—
- 格式:
实际送货量:固定标题行;其下仅遍历送货段产品(不展示产品名称)- 格式:
送货方#N:{actualQty} {unit} actualQty为空:送货方#N:—- 某送货段无产品:不输出该段产品行;若全部送货段均无产品行,则在标题下追加一行
—
- 格式:
- 不输出附件、车牌、地址、备注、产品名称等其它字段
5. 交互
- 列表卡片增加中性描边按钮【复制发群】(
btn btn-sm btn-ghost),@click.stop防止跳详情。 - 点击后
showLoading→driverPlanApi.get(planId)→ 拼文案 →setClipboardData→hideLoading。 - 成功 toast「已复制」;详情拉取或复制失败 toast「复制失败」/「计划无效」。
- 按钮位置:卡片底部操作区(与加油登记列表一致),不挤占顶部「磅单二维码」区域。
司机回执保存成功
- 各停靠段
saveDriverFeedback全部成功后loadDetail刷新。 uni.showModal:内容「保存成功,可将信息复制发到微信群」;确认「复制发群」、取消「关闭」。- 确认 →
copyDriverPlanToClipboard(page);成功则navigateBack回列表;失败 toast 且留在回执页。 - 取消 → 留在回执页。
6. 实现结构
| 文件 | 职责 |
|---|---|
miniprogram/utils/plDriverPlanCopy.js |
buildDriverPlanCopyText(page) + copyDriverPlanToClipboard(page) |
miniprogram/pages/pl/driver-plan/list.vue |
按钮 + handleCopy 拉详情后调用工具函数 |
miniprogram/pages/pl/driver-plan/detail.vue |
保存成功弹窗 → 复制 → 成功回列表 |
miniprogram/styles/pl-driver-plan.scss |
如需底部操作区间距,最小改动 |
7. 测试要点
- 单装货 + 多送货、有/无 actualQty、无产品送货段
- 无装货段 / 无送货段
- 复制过程中点卡片不误跳详情
- 微信端粘贴文案换行与模板一致