hengmei-two/components/swiper-pu.vue

<template>
	<view>
		<view v-if="isDot" class="banner-box">
			<swiper :current="bcurrent" @change="changeBanner" :style="{height: newHeight+'px'}" :autoplay="isplay" :circular="true" :interval="3000" :duration="500">
				<swiper-item v-for="(item,index) in bannerList" :key="index">
					<view @tap="chooseImg(index)" class="posir">
						<image lazy-load :style="{borderRadius:newRadius+'px',height:newHeight+'px'}" class="img" :src="item.imgSrc" mode="aspectFill"></image>
						<image lazy-load @tap.stop="playVideo(index)" v-if="item.isVideo && isVedio" class="posia" style="top: 50%;left: 50%;transform: translate(-50%,-50%);width: 126rpx;height: 126rpx;z-index: 1;" src="/static/public/video.png" mode=""></image>
					</view>
				</swiper-item>
			</swiper>
			<!-- 指示点 -->
			<view class="dot-box" :style="{bottom:newBottom+'px'}">
				<view :class="bcurrent==indexd ? 'dotActive' : 'dotMo'" v-for="(itemd,indexd) in bannerList.length" :key="indexd"></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"swiper-pu",
		props:{
			isplay:{
				type:Boolean,
				default:false
			},
			isDot:{//是否显示指示点
				type:Boolean,
				default:true
			},
			bannerList:{//默认轮播图片
				type:Array,
				default:function(){
					return [
						{imgSrc:'/static/public/banner.png',url:'',isVideo:false,poster:''},
						{imgSrc:'/static/public/banner.png',url:'',isVideo:false,poster:''},
					]
				}
			},
			newHeight:{//swiper的高
				type:String,
				default:'200'
			},
			newBottom:{//指示点距离底部位置
				type:String,
				default:'18'
			},
			newRadius:{//图片圆角
				type:String,
				default:'0'
			},
			browseP:{
				type:Boolean,
				default:false
			}
		},
		data() {
			return {
				bcurrent:0,
				isShowVideo:false,
				autoplay:false,
				isVedio:uni.getStorageSync('isVedio')
			};
		},
		methods:{
			chooseImg(index){
				// console.log('当前banner图',index);
				this.bcurrent = index
				if(this.browseP){
					let imgList = []
					this.bannerList.forEach(item=>{
						let nurl = ''
						let obj = {}
						if(this.isVedio) {
							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 {
					uni.navigateTo({
						url:this.bannerList[index].url
					})
				}
			},
			changeBanner(e){
				this.bcurrent = e.detail.current//当前的指示点下标
			},
			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{width:100%;}
	.dot-box{position: absolute;bottom: 36rpx;display: flex;justify-content: center;width: 100%;}
	.dotActive{width: 22rpx;height: 12rpx;margin-right: 10rpx;border-radius: 20rpx; background-color: rgba(56, 117, 246, .5);}
	.dotMo{width: 12rpx;height: 12rpx;margin-right: 10rpx;border-radius: 100%;background-color: rgba(191, 191, 191, 0.5);}
</style>