<template>
|
<view class='product-bg'>
|
<swiper ref="mySwiper" :current="current" :indicator-dots="indicatorDots" indicator-active-color="#e93323" :autoplay="autoplay"
|
:circular="circular" :interval="interval" :duration="duration" @change="change">
|
<swiper-item v-if="videoline">
|
<view class="item">
|
<view v-show="!controls" style="width:100%;height:750rpx">
|
<video ref="myVideo" id="myVideo" :src='videoline' objectFit="contain" controls style="width:100%;height:100% "
|
show-center-play-btn="true" show-mute-btn="true" muted="true" show-fullscreen-btn="true" auto-pause-if-navigate :custom-cache="false"
|
:enable-progress-gesture="true" show-progress="false" :poster="imgUrls[0]" @pause="videoPause"></video>
|
</view>
|
<view class="poster" v-show="controls">
|
<image class="image" :src="imgUrls[0]"></image></view>
|
<view class="stop" v-show="controls" @tap="bindPlay">
|
<image class="image" src="https://ossacmall.bluedeer.com.cn/app/static/images/stop.png"></image>
|
</view>
|
</view>
|
</swiper-item>
|
|
<block v-for="(item,index) in imgUrls" :key='index'>
|
<swiper-item>
|
<image :src="item" class="slide-image" />
|
<image v-if="!productSelect.stock||productSelect.stock<=0" style="position:absolute;left:0;top:0" class="slide-image" src="https://ossacmall.bluedeer.com.cn/app/static/images/noStock.png" mode="aspectFill"></image>
|
</swiper-item>
|
</block>
|
</swiper>
|
<view class="numBox" >
|
<view class="num num1" v-if="videoline" :class="type=='video'?'active':''" @click="changeType('video')">视频</view>
|
<view class="num" :class="type=='image'?'active':''" @click="changeType('image')">
|
图集{{videoline?(type=='video'?1:current):current+1}}/{{imgUrls.length}}</view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
props: {
|
productSelect:{
|
type:Object,
|
default:function() {
|
return {};
|
}
|
},
|
imgUrls: {
|
type: Array,
|
default: function() {
|
return [];
|
}
|
},
|
videoUrls: {
|
type: Array,
|
default: function() {
|
return [];
|
}
|
},
|
videoline: {
|
type: String,
|
value: ""
|
}
|
},
|
data() {
|
return {
|
indicatorDots: true,
|
circular: true,
|
autoplay: false,
|
interval: 3000,
|
duration: 500,
|
current: 0,
|
controls: true,
|
isPlay: true,
|
videoContext: '',
|
type: 'image'
|
};
|
},
|
mounted() {
|
|
},
|
methods: {
|
show(){
|
//this.videoContext = uni.createVideoContext('myVideo', this);
|
console.log('999999999',this.videoline);
|
if (this.videoline) {
|
this.type = 'video';
|
//this.imgUrls.shift()
|
}
|
},
|
getLen(arr) {
|
return arr.length;
|
},
|
videoPause(e) {},
|
bindPlay: function() {
|
if(!this.videoContext){
|
this.videoContext = uni.createVideoContext('myVideo', this);
|
}
|
console.log(this.videoContext);
|
this.$set(this, 'controls', false)
|
this.videoContext.play();
|
|
// this.autoplay = false
|
},
|
change: function(e) {
|
this.current=e.detail.current;
|
console.log('change',this.current);
|
if(this.videoline){
|
if(this.current>0){
|
this.type='image';
|
}else{
|
this.type='video';
|
}
|
}
|
|
},
|
changeType:function(type){
|
this.type=type;
|
if(!this.videoline){
|
return false;
|
}
|
if(type=='video'){
|
this.current=0;
|
}else{
|
this.current=1;
|
}
|
console.log('changeType',this.current);
|
this.$nextTick(()=>{
|
if(this.current>0){
|
if(this.videoContext){
|
this.videoContext.pause();
|
this.videoContext=null;
|
}
|
}else{
|
this.videoContext = uni.createVideoContext('myVideo', this);
|
}
|
})
|
}
|
}
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.product-bg {
|
width: 100%;
|
height: 800rpx;
|
position: relative;
|
margin-bottom: -20rpx;
|
}
|
|
.product-bg swiper {
|
width: 100%;
|
height: 800rpx;
|
position: relative;
|
}
|
|
.product-bg .slide-image {
|
width: 100%;
|
height: 750rpx;
|
}
|
|
.product-bg .pages {
|
position: absolute;
|
background-color: #fff;
|
height: 34rpx;
|
padding: 0 10rpx;
|
border-radius: 3rpx;
|
right: 30rpx;
|
bottom: 30rpx;
|
line-height: 34rpx;
|
font-size: 24rpx;
|
color: #050505;
|
}
|
|
#myVideo {
|
width: 100%;
|
height: 100%
|
}
|
|
.product-bg .item {
|
position: relative;
|
width: 100%;
|
height: 100%;
|
}
|
|
.product-bg .item .poster {
|
position: absolute;
|
top: 0;
|
left: 0;
|
height: 750rpx;
|
width: 100%;
|
z-index: 9;
|
}
|
|
.product-bg .item .poster .image {
|
width: 100%;
|
height: 100%;
|
}
|
|
.product-bg .item .stop {
|
position: absolute;
|
top: 50%;
|
left: 50%;
|
width: 136rpx;
|
height: 136rpx;
|
margin-top: -68rpx;
|
margin-left: -68rpx;
|
z-index: 9;
|
}
|
|
.product-bg .item .stop .image {
|
width: 100%;
|
height: 100%;
|
}
|
|
.numBox {
|
position: absolute;
|
right: 22rpx;
|
bottom: 122rpx;
|
font-size: 23rpx;
|
line-height: 38rpx;
|
padding: 4rpx;
|
color: #ffffff;
|
border-radius: 23rpx;
|
background-color: rgba(0, 0, 0, .2);
|
|
.num {
|
display: inline-block;
|
padding: 0 0.75em;
|
|
&.active {
|
background-color: rgba(0, 0, 0, .2);
|
border-radius: 19rpx;
|
}
|
|
position:relative;
|
}
|
.num1{
|
padding-left: 1.5em;
|
}
|
.num1:after {
|
content: '';
|
display: block;
|
width: 0;
|
height: 0;
|
border-left: 12rpx solid #ffffff;
|
border-top: 8rpx solid transparent;
|
border-bottom: 8rpx solid transparent;
|
position: absolute;
|
left: 15rpx;
|
top: 10rpx;
|
}
|
}
|
</style>
|
