shop-applet/components/productConSwiper/indexNew.vue

239 lines
5.5 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view class='product-bg'>
<swiper :indicator-dots="indicatorDots" :current='current' indicator-active-color="#e93323" :autoplay="autoplay"
:circular="circular" :interval="interval" :duration="duration" @change="change" v-if="isPlay">
<!-- #ifndef APP-PLUS -->
<block v-for="(item,index) in imgUrls" :key='index'>
<swiper-item v-if="isVideoUrl(item)">
<video :src="isVideoUrl(item,true)" objectFit="cover" controls style="width:100%;height:100% "
show-center-play-btn show-mute-btn="true" auto-pause-if-navigate
:enable-progress-gesture="false" :poster="item+coverUrl"></video>
</swiper-item>
<swiper-item v-else>
<image :src="item" class="slide-image" @click='getpreviewImage(item)' />
</swiper-item>
</block>
<!-- #endif -->
<!-- #ifdef APP-PLUS -->
<block v-for="(item,index) in imgUrls" :key='index'>
<swiper-item v-if="isVideoUrl(item)">
<view>
<image :src="item+coverUrl" class="slide-image" />
<image class="image-play-icon" src="../../static/images/stop.png"
@click='videoPlay(item,index)'>
</image>
</view>
</swiper-item>
<swiper-item v-else>
<image :src="item" class="slide-image" @click='getpreviewImage(item)' />
</swiper-item>
</block>
<!-- #endif -->
</swiper>
<!-- #ifdef APP-PLUS -->
<view v-if="!isPlay" style="width: 100%; height: 750rpx;">
<video id="myVideo" :src='playingUrl' objectFit="cover" controls style="width:100%;height:100% "
show-center-play-btn show-mute-btn="true" auto-pause-if-navigate :enable-progress-gesture="false"
:poster="playingUrl+coverUrl" @pause="videoPause" @ended="endedFun()"></video>
</view>
<!-- #endif -->
</view>
</template>
<script>
// +----------------------------------------------------------------------
// | CRMEB [ CRMEB赋能开发者助力企业发展 ]
// +----------------------------------------------------------------------
// | Copyright (c) 2016~2021 https://www.crmeb.com All rights reserved.
// +----------------------------------------------------------------------
// | Licensed CRMEB并不是自由软件未经许可不能去掉CRMEB相关版权
// +----------------------------------------------------------------------
// | Author: CRMEB Team <admin@crmeb.com>
// +----------------------------------------------------------------------
export default {
props: {
imgUrls: {
type: Array,
default: function() {
return [];
}
},
videoline: {
type: String,
value: ""
},
videoCoverImg: {
type: String,
}
},
data() {
return {
coverUrl: '?spm=a2c4e.11153940.blogcont573781.6.c1032027sQ46VG&x-oss-process=video/snapshot,t_1000,m_fast',
current: '0',
videoTypeList: ['mp4', 'avi', 'mov', 'wmv', 'mkv', 'flv', 'mpeg', '3gp', 'webm'],
playingUrl: '',
indicatorDots: true,
circular: true,
autoplay: true,
interval: 5000,
duration: 500,
currents: "1",
controls: true,
isPlay: true,
videoContext: ''
};
},
created() {
},
watch: {
},
mounted() {
// #ifndef APP-PLUS
this.videoContext = uni.createVideoContext('myVideo', this);
// #endif
},
methods: {
isVideoUrl(url, getRightUrl) {
const str = url;
const lastIndex = str.lastIndexOf(".");
let extension;
if (lastIndex !== -1) {
extension = str.substring(lastIndex + 1);
} else {
extension = 'jpg'
}
if (getRightUrl) return url.replace(/\\/g, "")
return this.videoTypeList.includes(extension)
},
videoPlay(url, index) {
this.playingUrl = url
this.current = index
console.log(this.current)
this.bindPause()
},
getpreviewImage: function(item) {
uni.previewImage({
urls: this.imgUrls,
current: item
});
},
videoPause(e) {
// #ifdef APP-PLUS
this.isPlay = true
this.autoplay = true
// #endif
},
bindPause: function() {
// #ifndef APP-PLUS
this.videoContext.play();
this.$set(this, 'controls', false)
this.autoplay = false
// #endif
// #ifdef APP-PLUS
this.isPlay = false
this.videoContext = uni.createVideoContext('myVideo', this);
this.$nextTick(() => {
this.videoContext.play();
})
// #endif
},
change: function(e) {
this.$set(this, 'currents', e.detail.current + 1);
},
endedFun() {
this.controls = true
}
}
}
</script>
<style scoped lang="scss">
.product-bg {
width: 100%;
height: 750rpx;
position: relative;
}
.product-bg swiper {
width: 100%;
height: 100%;
position: relative;
}
.product-bg .slide-image {
width: 750rpx;
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%;
}
.image-play-icon {
position: absolute;
width: 100rpx;
height: 100rpx;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>