1.1 KiB
1.1 KiB
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。