19 lines
1.1 KiB
Markdown
19 lines
1.1 KiB
Markdown
# TicketHome 视频封面设计
|
||
|
||
## 目标
|
||
|
||
让 `TicketHome.vue` 的 `homeData.coverImage` 同时支持图片和 MP4 视频，保持景区头图现有尺寸、渐变遮罩、导航与文字信息不变。
|
||
|
||
## 实现
|
||
|
||
- 在 `TicketHome.vue` 内新增 `isMp4Video(url)`，与现有 `ExploreCards`、`PanoramicHome` 规则一致：字符串去除首尾空格及查询参数、hash 后，不区分大小写判断是否以 `.mp4` 结尾。
|
||
- `coverImage` 是 MP4 时渲染铺满头图区的 `<video>`；视频启用 `autoplay`、`loop`、`muted`，关闭 controls、播放按钮、全屏按钮、静音按钮和进度手势，使用 `object-fit="cover"`。
|
||
- `coverImage` 非 MP4 时继续渲染 `<image mode="aspectFill">`。
|
||
- `coverImage` 为空时不渲染媒体元素，保留头图区背景色。
|
||
- 不抽取公共媒体工具，不修改其他页面或接口字段。
|
||
|
||
## 验证
|
||
|
||
- 先在 `view-contract.test.mjs` 添加失败测试，覆盖视频分支、图片回退、播放器属性和带查询参数的 MP4 判断。
|
||
- 测试转绿后运行完整票务视图契约、票务模型测试、`git diff --check` 和 `yarn dev:mp-weixin`。
|