Authored by shuaiguo

feat(商品详情): 视频资源位非全屏播放&购买title修改

... ... @@ -130,13 +130,14 @@ export default {
}
},
methods: {
async parentHandleclick() {
async parentHandleclick({isFullScreen = true} = {}) {
this.player.play();
if (isFullScreen) {
const timeId = setTimeout(() => {
this.player.requestFullscreen();
clearTimeout(timeId);
});
}
},
delay(ns) {
return new Promise(resolve => {
... ...
... ... @@ -61,11 +61,12 @@
ref="videoResourceImg"
v-if="videoResource.src">
<div
v-if="!isShowVideo"
class="video-mask"
@click="onVideoPlay"></div>
<VideoPlayer
ref="videoPlayer"
class="video-player"
:class="isShowVideo ? 'video-player' : 'video-player video-player-opacity'"
:source="videoResource.url"
/>
<img-size :src="sizeImg(videoResource.src)"/>
... ... @@ -187,6 +188,7 @@ export default {
},
recommendYasIndex: 0, // 推荐商品爆光顺序
articleData: {}, // 9宫格推荐文章
isShowVideo: false
};
},
computed: {
... ... @@ -666,7 +668,7 @@ export default {
dest: 'OrderBuyConfirm',
type: 'buy',
title: '购买',
btnTitle: '现货'
btnTitle: '全新现货'
};
this.showSizeSelectSheet = true;
},
... ... @@ -967,7 +969,8 @@ export default {
}, yasReportHandler);
},
onVideoPlay() {
this.$refs.videoPlayer.parentHandleclick();
this.isShowVideo = true;
this.$refs.videoPlayer.parentHandleclick({isFullScreen: false});
const {url, template_id, template_name} = this.videoResource;
let param = {
... ... @@ -1011,7 +1014,6 @@ export default {
display: block;
height: 100%;
width: 100%;
opacity: 0;
position: absolute;
bottom: 0;
overflow: hidden;
... ... @@ -1022,6 +1024,10 @@ export default {
}
}
.video-player-opacity {
opacity: 0;
}
.video-resource {
margin-top: 30px;
position: relative;
... ...