diff --git a/docs/superpowers/demos/2026-09-16-bx-reimburse-invoice-thumb-demo.html b/docs/superpowers/demos/2026-09-16-bx-reimburse-invoice-thumb-demo.html new file mode 100644 index 000000000..331b632b9 --- /dev/null +++ b/docs/superpowers/demos/2026-09-16-bx-reimburse-invoice-thumb-demo.html @@ -0,0 +1,767 @@ + + + + + + 报销申请 · 发票缩略图选择 Demo + + + +
+

报销申请 · 发票缩略图选择 Demo

+

左侧：申请页已选发票改为缩略图（点击预览，× 删除）。右侧：从发票夹选择 = 3 列缩略图网格，滚动加载，默认每次 10 条。

+

可直接在手机框内操作；也可打开本地文件：docs/superpowers/demos/2026-09-16-bx-reimburse-invoice-thumb-demo.html

+
+ 缩略图 1:1 · aspectFill + pageSize = 10 + 多选 + 勾选角标 + 非图片显示扩展名占位 +
+
+ +
+ +
+
+ ① 报销申请 · 已选展示 + 用缩略图替代发票名称 +
+
+
+
+ ← + 报销申请 + +
+
+
+
+
+

报销信息

+ 新建 +
+
+ 申请人 +
张三
+
+
+ 报销日期 * +
2026-09-16
+
+
+ +
+
+

关联发票（可选）

+
+
发票余额 ¥1,280.00 · 本次合计 ¥356.50
+ + +
+
请先在「我的发票夹」上传发票；提交时按合计扣减余额。点击缩略图可预览。
+
+ +
+

报销说明

+
请输入报销说明
+
+
+
+ +
+ +
+ 预览 +
点击空白处关闭
+
+
+
+ 已选区约定：仅展示缩略图 + 金额角标文案；不再展示文件名。点击图片 → uni.previewImage；点 × 仅移除关联，不删发票夹原件。 +
+
+ + +
+
+ ② 从发票夹选择 · 缩略图列表 + 滚动到底自动加载下一批（10 条） +
+
+
+
+ ← + 报销申请 + +
+
+
+

关联发票

…
+
+ +
+
+
+ 选择发票附件 + +
+
+
+
+
+
+ +
+
+
+
+ 选择态：点整卡切换勾选（角标 ✓）。金额与日期在缩略图下方，便于快速辨认。PDF 等非图片用扩展名占位，选中逻辑相同。 +
+
+
+ + + + diff --git a/docs/superpowers/specs/2026-09-16-bx-reimburse-invoice-thumbnail-design.md b/docs/superpowers/specs/2026-09-16-bx-reimburse-invoice-thumbnail-design.md new file mode 100644 index 000000000..b3b220689 --- /dev/null +++ b/docs/superpowers/specs/2026-09-16-bx-reimburse-invoice-thumbnail-design.md @@ -0,0 +1,136 @@ +# 小程序报销申请 · 关联发票缩略图展示设计 + +**日期**：2026-09-16 +**范围**：`miniprogram` 报销申请页、报销详情页（我的申请单 / 全部申请单共用详情） +**方案**：页面内改造（方案 1），不抽公共组件、不改后端接口 +**Demo**：`docs/superpowers/demos/2026-09-16-bx-reimburse-invoice-thumb-demo.html` + +--- + +## 1. 背景与目标 + +### 现状 + +| 位置 | 行为 | +|------|------| +| 申请页「从发票夹选择」 | 文字列表（文件名 + 金额），一次最多拉 200 条 | +| 申请页已选关联发票 | 文字列表（文件名 + 金额），不可预览 | +| 详情页 | **无**「关联发票」区块；仅有「申请附件」缩略图 | +| 我的申请单 / 全部申请单 | 均跳转同一 `reimburse/detail`，故同样看不到关联发票 | + +### 目标 + +1. 选择弹层改为发票**缩略图网格**，支持**滚动加载**（默认每次 10 条）。 +2. 申请页已选关联发票改为**缩略图**，支持点击预览。 +3. 详情页在「申请附件」**上方**增加「关联发票」缩略图展示，可点击预览。 +4. 缩略图下方统一展示：**金额 + 日期**。 + +--- + +## 2. 非目标 + +- 不改后端 API / Schema（详情已有 `invoices`；列表已支持 `page`/`pageSize`）。 +- 不抽独立选择页或跨页公共组件（本需求用方案 1）。 +- 不改变提交载荷结构（仍为 `invoiceIds` + `invoiceLinks`）。 +- 不删除发票夹原件；申请页 × 仅解除本单关联。 + +--- + +## 3. 架构与数据流 + +``` +申请页 apply.vue + ├─ invoiceWalletApi.mineSummary → 余额提示（与列表解耦） + ├─ 打开弹层 → invoiceApi.list({ page, pageSize: 10 }) → 扁平化附件项 + │ → attachmentApi.preview(id) → previewUrl + ├─ 勾选/确定 → selectedInvoicePicks（含 previewUrl / amount / createTime） + └─ 提交 → buildInvoicePayload()（不变） + +详情页 detail.vue + └─ reimburseApi.getById → data.invoices[] + → attachmentId + fileType → attachmentApi.preview → 缩略图网格 +``` + +**列表项键**：继续使用 `invoiceId:attachmentId` 作为 `key`（与现网一致）。 + +**日期字段**：优先 `createTime` / `create_time`；展示为 `YYYY-MM-DD`（取日期部分）。无日期时显示 `—`。 + +--- + +## 4. 界面规格 + +### 4.1 申请页 · 选择弹层 + +- 容器：现有 `bx-sheet` + `scroll-view`。 +- 布局：3 列网格，缩略图 **1:1**，`mode="aspectFill"`。 +- 选中：主色描边 + 右上角 ✓；点整卡切换多选。 +- 下方文案：金额（`¥x.xx`）+ 日期。 +- 非图片：扩展名占位（如 PDF），可选中。 +- 分页：`page` 从 1 递增，`pageSize = 10`；`@scrolltolower` 加载下一页；底部提示「加载中… / 没有更多了」。 +- 打开时：用当前已选 keys 回填 `pickerDraftKeys`；若列表尚未加载则先拉第一页。 +- 确定：按 draft keys 从**已加载**项 + 必要时已选缓存合并写回 `selectedInvoicePicks`（避免未再次滚到的已选项丢失——见 4.2）。 + +### 4.2 申请页 · 已选区 + +- 去掉 `invoice-picked-item` 文件名行，改为缩略图网格（约 72×72，对齐 `att-grid`/`att-img`）。 +- 下方：金额 + 日期；右上角 × 移除关联。 +- 点击缩略图：图片 → `uni.previewImage`；非图片 → `uni.showToast` 简短提示（不强制下载）。 +- **已选与分页**：确定时合并「当前 draft 中仍勾选、且可能尚未出现在本轮已加载列表中的旧选中项」，防止滚动分页导致已选项被冲掉。 + +### 4.3 详情页 · 关联发票 + +- 文件：`pages/bx/reimburse/detail.vue`。 +- 位置：在「申请附件」卡片**上方**新增「关联发票」`detail-info-card`。 +- 数据：`detail.invoices`（`ReimburseInvoiceBriefOut`：`id`/`amount`/`attachmentId`/`fileName`/`fileType`/`createTime`）。 +- 展示：只读缩略图网格（金额 + 日期）；无数据时「暂无关联发票」。 +- 点击预览规则同申请页。 +- 「申请附件」逻辑与文案不变。 + +### 4.4 样式 + +- 优先复用 `bx-theme.scss` 中 `att-grid` / `att-img`。 +- 选择弹层网格、选中描边、金额/日期副文案：在 `bx-theme.scss` 增加少量 sheet 内类名（如 `.invoice-thumb-grid`），色值用现有 `--primary` / `--text-muted`，不混用 Fresh Mint。 + +--- + +## 5. 错误与边界 + +| 场景 | 处理 | +|------|------| +| 列表接口失败 | toast；保留已加载数据，可重试打开弹层 | +| preview 失败 | 该格占位（空图/扩展名），不阻断选择 | +| 余额不足 | 现有提示文案不变 | +| 无发票 | 弹层空态「暂无发票附件」；详情「暂无关联发票」 | +| 编辑回填 | `loadEditData` 根据 `data.invoices` 建 picks，并异步补 `previewUrl` | + +--- + +## 6. 测试要点 + +1. 发票 > 10 张时，弹层滚动加载第 2 页且勾选状态正确。 +2. 先选后滚再改选，确定后已选区与提交 payload 一致。 +3. 已选缩略图可预览；× 仅移除关联。 +4. 详情（从「我的申请单」「全部申请单」进入）显示关联发票在申请附件上方。 +5. PDF 等非图片可选中，点击预览有提示。 +6. 无关联发票时详情空态正确。 + +--- + +## 7. 涉及文件 + +| 文件 | 变更 | +|------|------| +| `miniprogram/pages/bx/reimburse/apply.vue` | 弹层缩略图 + 分页；已选缩略图 + 预览 | +| `miniprogram/pages/bx/reimburse/detail.vue` | 新增关联发票区块 | +| `miniprogram/styles/bx-theme.scss` | 缩略图网格 / 选中态样式（按需） | + +参考实现：`miniprogram/pages/bx/invoice/mine.vue`（preview 懒加载、`scrolltolower`）。 + +--- + +## 8. 决策记录 + +- 实现路径：**方案 1**（页面内改造）。 +- 详情区块顺序：**关联发票 → 申请附件**。 +- 缩略图副文案：**金额 + 日期**（申请弹层、已选区、详情一致）。 +- Companion Demo 已产出，作为视觉对照。