Authored by shuaiguo

feat(channel):首页增加视频资源位

... ... @@ -4,6 +4,16 @@
<li v-for="(item, index) in list" :key="index">
<LayoutLink :href="item.url" :report="{PAGE_URL, ...item.reportParams}" reportEvent="XY_UFO_MAIN_EVENT">
<ImageFormat :data-secc="item.src" :lazy="false" :src="item.src" :alt="item.alt" :width="item.width || 750" :height="item.height || 160" />
<div
v-if="videoUrl"
class="video-mask"
@click="e => onClickHandler(e, item.url, index)"></div>
<VideoPlayer
:ref="`videoPlayer-${index+1}`"
class="video-player"
v-if="videoUrl"
:source="videoUrl"
/>
</LayoutLink>
</li>
</ul>
... ... @@ -11,6 +21,8 @@
</template>
<script>
import VideoPlayer from "@/components/video-player";
export default {
name: 'banner',
props: {
... ... @@ -22,16 +34,64 @@ export default {
type: String,
}
},
components: { VideoPlayer },
computed: {
videoUrl() {
let videoUrl = null;
for(const resourceInfo of this.list) {
const { url} = resourceInfo;
if(/(\.mp4)$/.test(url)) {
videoUrl = url
break;
}
}
return videoUrl;
},
},
methods: {
onClickHandler(e, url, index) {
e.stopPropagation();
e.preventDefault();
if(/(\.mp4)$/.test(url)) {
const key = `videoPlayer-${index+1}`;
this.$refs[key][0].parentHandleclick()
}
}
}
};
</script>
<style lang="scss" scoped>
.video-mask {
z-index: 10;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.video-player {
display: block;
height: 100%;
width: 100%;
opacity: 0;
position: absolute;
top: 0;
}
.banner {
width: 100%;
/deep/ .layout-link {
position: relative;
height: 100%;
width: 100%;
box-sizing: border-box;
display: inline-block;
}
img {
width: 100%;
display: block;
... ...
... ... @@ -3,14 +3,44 @@
<div class="swiper-item swiper-item-left">
<LayoutLink :href="list[0].url" class="img-link" :report="{PAGE_URL, ...list[0].reportParams}" reportEvent="XY_UFO_MAIN_EVENT">
<ImageFormat :lazy="false" class="item-imge" :src="list[0].src" :width="310" :height="402"></ImageFormat>
<div
v-if="videoInfo && videoInfo.id === list[0].id"
class="video-mask"
@click="e => onClickHandler(e, list[0].url)"></div>
<VideoPlayer
ref="videoPlayer"
class="video-player"
v-if="videoInfo && videoInfo.id === list[0].id"
:source="videoInfo.url"
/>
</LayoutLink>
</div>
<div class="swiper-item swiper-item-right">
<LayoutLink :href="list[1].url" class="img-link" :report="{PAGE_URL, ...list[1].reportParams}" reportEvent="XY_UFO_MAIN_EVENT">
<ImageFormat :lazy="false" class="item-imge" :src="list[1].src" :width="380" :height="196"></ImageFormat>
<div
v-if="videoInfo && videoInfo.id === list[1].id"
class="video-mask"
@click="e => onClickHandler(e, list[1].url)"></div>
<VideoPlayer
ref="videoPlayer"
class="video-player"
v-if="videoInfo && videoInfo.id === list[1].id"
:source="videoInfo.url"
/>
</LayoutLink>
<LayoutLink :href="list[2].url" class="img-link img-link2" :report="{PAGE_URL, ...list[2].reportParams}" reportEvent="XY_UFO_MAIN_EVENT">
<ImageFormat :lazy="false" class="item-imge" :src="list[2].src" :width="380" :height="196"></ImageFormat>
<div
v-if="videoInfo && videoInfo.id === list[2].id"
class="video-mask"
@click="e => onClickHandler(e, list[2].url)"></div>
<VideoPlayer
ref="videoPlayer"
class="video-player"
v-if="videoInfo && videoInfo.id === list[2].id"
:source="videoInfo.url"
/>
</LayoutLink>
</div>
</div>
... ... @@ -29,21 +59,59 @@ export default {
type: String,
}
},
components: {VideoPlayer},
computed: {
videoInfo() {
let videoInfo = null;
for(const resourceInfo of this.list) {
const { url, id } = resourceInfo;
if(/(\.mp4)$/.test(url)) {
videoInfo = {url, id};
break;
}
}
return videoInfo;
},
},
data() {
return {
params: {},
}
},
mounted() {
console.log(this.list)
},
methods: {
onClickHandler(e, url) {
e.stopPropagation();
e.preventDefault();
if(/(\.mp4)$/.test(url)) {
this.$refs.videoPlayer.parentHandleclick()
}
}
},
};
</script>
<style lang="scss" scoped>
.video-mask {
z-index: 10;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.video-player {
display: block;
height: 100%;
width: 100%;
opacity: 0;
position: absolute;
top: 0;
}
.swiper {
display: flex;
align-content: stretch;
... ... @@ -52,6 +120,10 @@ export default {
margin-left: 8px;
margin-right: 8px;
/deep/ .layout-link {
position: relative;
}
.swiper-item-left {
width: 44%;
}
... ...
... ... @@ -129,6 +129,7 @@ export default {
slideOptions: {
eventPassthrough: 'vertical',
},
videoUrl: 'https://v.yohobuy.com/d3afd3b6vodtranscq1400201211/e553618a5285890795944899907/v.f30.mp4',
prdDetailTip,
prdDetailImage,
... ... @@ -797,15 +798,27 @@ export default {
<style lang="scss" scoped>
@import "./product-detail";
.video-wrapper {
overflow: hidden;
}
.video-player {
display: block;
height: 40px;
opacity: 0;
}
.cube-btn {
border-radius: 0;
}
.fade-enter, .fade-leave-to {
.fade-enter,
.fade-leave-to {
opacity: 0;
}
.fade-enter-active, .fade-leave-active {
.fade-enter-active,
.fade-leave-active {
transition: opacity 300ms linear;
}
... ...