82 lines
5.1 KiB
Markdown
82 lines
5.1 KiB
Markdown
# 报告短片：下载到本地（产品说明）
|
||
|
||
> 状态：**已实现**（微信小程序「保存视频」+ H5「下载短片」）；App 内 WebView 仍为后续。
|
||
> 目标：宠主/店员在报告页将**已生成成功的回顾短片**保存到相册或系统下载目录，便于私发、二次剪辑或留存。
|
||
|
||
---
|
||
|
||
## 与当前实现同步（工程 · 2026-04）
|
||
|
||
| 端 | 入口文案 | 行为摘要 |
|
||
|----|-----------|----------|
|
||
| **微信小程序** | **「保存视频」**（仅 `highlight_video_status === done` 且有效 URL） | 用户点击 → `downloadFile` → `saveVideoToPhotosAlbum`；失败含域名未配置、权限引导；页内提示**右上角「···」转发本页**；分享小程序卡片仍用底部「转发给宠主」。 |
|
||
| **H5 报告页** | **「下载短片」** | 优先 `fetch` 同源/CORS 视频为 Blob 触发浏览器下载；失败则**复制视频链接**并说明可在浏览器打开或右上角分享。 |
|
||
|
||
**前置条件与验收**仍以下文 §2、§6 为准；若产品与研发口径冲突，以本表与 `reportView.vue` / `ReportHighlightBlock.vue` 实际交互为准。
|
||
|
||
### 生成短片（与「下载/保存」不同）
|
||
|
||
- 报告页「服务回顾短片」：**先选编排方式**（**预设顺序** / **穿插成片**），再点 **「生成短片」**。成片 **时长随素材量与门店配置的总时长上限变化**，**不提供固定 15 秒 / 30 秒选项**（与《洗美报告短视频成片方案》§0、《产品改进建议》修订备忘一致）。
|
||
- 展示端：**微信小程序** 使用 `pages/report-view/reportView.vue`；**H5 独立链接** `report.html` 使用 `views/ReportView.vue`，二者均挂载同一套 `ReportHighlightBlock` 组件，避免一端仍是旧交互。
|
||
|
||
---
|
||
|
||
## 1. 是否要做
|
||
|
||
**建议做。** 成片的核心价值之一是**可带走、可转发**；仅在线播放而不提供「保存」，会削弱传播与留存，尤其在微信生态外分享、或用户希望「先存再发」时。
|
||
|
||
---
|
||
|
||
## 2. 前置条件
|
||
|
||
- 仅当 **`highlight_video_status === done`** 且存在有效 **成片 URL** 时展示下载入口。
|
||
- **生成中 / 失败**：不展示下载；失败态沿用现有「重试生成」等能力，不误导为可下载。
|
||
|
||
---
|
||
|
||
## 3. 端与能力差异
|
||
|
||
| 场景 | 常见实现要点 | 产品注意 |
|
||
|------|----------------|----------|
|
||
| **微信小程序内嵌报告页** | 使用 `video` 组件 + 用户触发后调 **`wx.downloadFile`** → **`wx.saveVideoToPhotosAlbum`**（或等价 API）；需处理**相册权限**授权失败文案 | 必须**用户主动点击**（入口「保存视频」），符合平台规范；首次需说明用途 |
|
||
| **H5 报告页** | 同源或可 CORS 的视频 URL：`fetch` blob 触发下载；跨域受限时可服务端 **`Content-Disposition`** 或代理（可选增强） | 若视频在**另一域名**（如 CDN/API 域名），需配置 **CORS** 等；失败时提供「复制链接到浏览器打开」类降级（已实现） |
|
||
| **App 内 WebView** | 与容器约定是否允许下载/保存相册 | 暂无 App 时可标为后续 |
|
||
|
||
**产品结论**：**小程序与 H5 均已按上表实现全量能力**（入口、loading、成功/失败反馈一致）；两端差异仅来自平台能力（相册 vs 本机下载），不作为「一端全量、一端仅兜底」的阶段性策略。可选后续：独立下载接口、CDN 防盗链与签名 URL，由运维与研发按环境评估。
|
||
|
||
---
|
||
|
||
## 4. 交互与文案
|
||
|
||
- **入口名称**：建议统一为 **「保存视频」** 或 **「下载短片」**（与「生成短片」区分）。
|
||
- **位置**：成片播放器旁或下方，与「分享」并列（若本期有分享能力）。
|
||
- **过程**：点击 → loading（短）→ 成功 toast「已保存到相册」/「已开始下载」；失败 toast **可理解原因**（权限拒绝 / 网络 / 格式不支持），不暴露技术栈。
|
||
- **权限**：小程序拒绝相册权限时，引导用户去设置页，**单次**即可，勿连环弹窗。
|
||
|
||
---
|
||
|
||
## 5. 合规与品牌
|
||
|
||
- 视频内容为门店服务记录，下载行为视为用户**自行保存**；对外页已有隐私与转发提示的，与《产品改进建议》§八 一致即可。
|
||
- 若短片含水印/门店标识，下载文件与在线播放**一致**，无需单独说明。
|
||
|
||
---
|
||
|
||
## 6. 验收标准（建议）
|
||
|
||
1. 成片成功状态下，用户可一键触发保存/下载，**无需**额外登录（与当前报告 token 访问策略一致）。
|
||
2. 保存成功后在系统相册（或浏览器下载目录）中**可找到**对应 mp4。
|
||
3. 权限拒绝、网络错误、资源 404 等均有明确提示，**不出现**白屏或无反馈。
|
||
4. 生成中、未生成、失败时**不出现**下载入口，或置灰并说明原因。
|
||
|
||
---
|
||
|
||
## 7. 与仓库文档的关系
|
||
|
||
- 《产品设计文档》§5.5 H5 报告页「分享能力」可后续增补「保存视频」一条。
|
||
- 《本期主线-下一步产品优化点》中 **B. 成片** 的传播属性可与本说明交叉引用。
|
||
|
||
---
|
||
|
||
*实现细节（接口域名、小程序 downloadFile 合法域名、H5 跨域、视频格式）由运维与研发按环境配置；本文定产品与验收口径。*
|