martial-arts/components/swipers/swiper-pu.vue

<template>
	<view class="banner-box">
		<swiper :current="bcurrent" @change="changeBanner" :style="{height: newHeight}" :autoplay="ifAutoplay" :circular="true" :interval="3000" :duration="500">
			<swiper-item v-for="(item,index) in bannerList" :key="index">
				<view @tap="chooseImg(index,item.url,item.type)" class="img-box">
					<!-- 图片 -->
					<image :style="{borderRadius:newRadius,height:newHeight}" class="img animated fadeIn" :src="item.imgSrc" mode="aspectFill" v-if="item.type === 'img'"></image>
					<!-- 视频 -->
					<video :id="`video${index}`" style="width: 100%;" v-if="item.type === 'video'"
						:videoAutoplay="videoAutoPlay" :enable-progress-gesture="false" :src="item.imgSrc"
						@play="handleVideoPlay" @pause="handleVideoPause" @ended="handleVideoEnd" class="banner-video"></video>
				</view>
			</swiper-item>
		</swiper>
		<!-- 指示点 -->
		<view v-if="isDot" class="dot-box" :style="{bottom:newBottom}">
			<view :class="bcurrent==indexd ? 'dotActive' : 'dotMo'" 
			v-for="(itemd,indexd) in bannerList.length" :key="indexd"
			@tap="chooseDot(indexd)"></view>
		</view>
	</view>
</template>

<script>
	import { mapState } from 'vuex';
	export default {
		name:"swiper-pu",
		props:{
			isDot:{//是否显示指示点
				type:Boolean,
				default:true
			},
			bannerList:{//默认轮播图片
				type:Array,
				default:function(){
					return [
						{imgSrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',url:'',isVideo:false,poster:'',type:'image'},
						{imgSrc:'https://www.runoob.com/try/demo_source/movie.mp4',url:'',isVideo:false,poster:'',type:'video'},
						{imgSrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',url:'',isVideo:false,poster:'',type:'image'},
					]
				}
			},
			newHeight:{//swiper的高
				type:String,
				default:'200px'
			},
			newBottom:{//指示点距离底部位置
				type:String,
				default:'18px'
			},
			newRadius:{//图片圆角
				type:String,
				default:'0px'
			},
			browseP:{//是否可预览
				type:Boolean,
				default:false
			},
			ifAutoplays: { //banner是否自动轮播
				type: Boolean,
				default: true,
			},
			videoAutoPlays: { //视频是否自动播放
				type: Boolean,
				default: true,
			},
		},
		computed: {
			// ...mapState({
			// 	ifAutoplay: state => state.moduleA.ifAutoplay
			// })
		},
		data() {
			return {
				videoAutoPlay: this.videoAutoPlays,
				ifAutoplay: this.ifAutoplays,
				bcurrent: 0, // 默认当前选中项
				isShowVideo:false, // 是否显示视频
				isVideo:uni.getStorageSync('is_video') // 是否是视频
			};
		},
		methods:{
			// 图片点击事件
			chooseImg(index,url,type){
				// console.log('当前banner图',index);
				this.bcurrent = index
				if(this.browseP){
					let imgList = []
					this.bannerList.forEach(item=>{
						let nurl = ''
						let obj = {}
						if(this.isVideo) {
							item.url=='' ? nurl = item.imgSrc : nurl = item.url
							obj = {
								url:nurl,
								type:item.isVideo?'video':'image',
								poster:item.poster
							}
						} else {
							nurl = item.imgSrc
							obj = {
								url:nurl,
								type:'image',
								poster:item.poster
							}
						}
						imgList.push(obj)
					})
					// 预览图片和视频
					uni.previewMedia({
						current:this.bcurrent,
						sources:imgList
					})
				} else if(type == 'video') {
					return false
				}else {
					// 有链接，跳转链接
					uni.navigateTo({
						url:`/${url}`
					})
				}
			},
			// 切换后获取当前索引
			changeBanner(e){
				this.bcurrent = e.detail.current;//当前的指示点下标
				let videoIndex = e.detail.current;
				//切换时要把视频暂停
				uni.createVideoContext("video" + (videoIndex),this).pause()
			},
			handleVideoPlay() {
				this.ifAutoplay = false
				this.videoAutoPlay = true;
			},
			handleVideoPause() {
				this.ifAutoplay = true
			},
			handleVideoEnd() {
				this.ifAutoplay = true;
			},
			// 点击当前指示点
			chooseDot(index){
				this.bcurrent = index;
			},
			playVideo(index){
				// console.log('播放视频');
				uni.navigateTo({
					url:`/pagesB/video/playVideo?src=${this.bannerList[index].url}&posterSrc=${this.bannerList[index].poster}`
				})
			},
		}
	}
</script>

<style scoped>
	.banner-box{position: relative;}
	.img-box{position: relative;display: flex;justify-content: center;align-items: center;width: 100%;height: 100%;}
	.img{width:100%;vertical-align: bottom;}
	.dot-box{position: absolute;bottom: 36rpx;display: flex;justify-content: center;width: 100%;}
	.dotActive{width: 16rpx;height: 16rpx;margin-right: 16rpx;border-radius: 100%; background-color: rgba(255, 255, 255, 1);}
	.dotMo{width: 16rpx;height: 16rpx;margin-right: 16rpx;border-radius: 100%;background-color: rgba(0, 0, 0, 0.5);}
	.banner-video {
		width: 100%;
		height: 100%;
		object-fit: fill;
		display: block;
	}
</style>