报销申请 · 发票缩略图选择 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 等非图片用扩展名占位,选中逻辑相同。