mall-applet1/components/swipers/swiper-pu.vue

<template>
	<view class="banner-box">
		<swiper :current="bcurrent" @change="changeBanner" :style="{height: newHeight}" :autoplay="isplay" :circular="true" :interval="3000" :duration="500">
			<swiper-item v-for="(item,index) in bannerList" :key="index">
				<view @tap="chooseImg(index,item.url)" class="img-box">
					<image :style="{borderRadius:newRadius,height:newHeight}" class="img animated fadeIn" :src="item.imgSrc" mode="aspectFill"></image>
					<image @tap.stop="playVideo(index)" v-if="item.isVideo && isVedio" class="posia animated bounceIn" style="width: 126rpx;height: 126rpx;z-index: 1;" src="/static/public/video.png" mode=""></image>
				</view>
			</swiper-item>
		</swiper>
		<!-- 指示点 -->
		<view v-if="isDot" class="dot-box" :style="{bottom:newBottom}">
			<view class="item-dot" :style="{backgroundColor: bcurrent==indexd ? activec : defaultc}"
			v-for="(itemd,indexd) in bannerList.length" :key="indexd"
			@tap="chooseDot(indexd)"></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:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',url:'',isVideo:false,poster:''},
						{imgSrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',url:'',isVideo:false,poster:''},
						{imgSrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',url:'',isVideo:false,poster:''},
					]
				}
			},
			newHeight:{//swiper的高
				type:String,
				default:'200px'
			},
			newBottom:{//指示点距离底部位置
				type:String,
				default:'18px'
			},
			newRadius:{//图片圆角
				type:String,
				default:'0px'
			},
			browseP:{//是否可预览
				type:Boolean,
				default:false
			},
			activec:{
				type:String,
				default:'#dd062f'
			},
			defaultc:{
				type:String,
				default:'#FFFFFF'
			}
		},
		data() {
			return {
				bcurrent: 0, // 默认当前选中项
				isShowVideo:false, // 是否显示视频
				autoplay:false, // 是否开启自动轮播
				isVedio:uni.getStorageSync('is_vedio') // 是否是视频
			};
		},
		methods:{
			// 图片点击事件
			chooseImg(index,url){
				// 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:`/${url}`
					})
				}
			},
			// 切换后获取当前索引
			changeBanner(e){
				this.bcurrent = e.detail.current//当前的指示点下标
				// console.log(this.bcurrent);
			},
			// 点击当前指示点
			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;}
	.img{width:100%;vertical-align: bottom;}
	.dot-box{position: absolute;bottom: 36rpx;display: flex;justify-content: center;width: 100%;}
	.item-dot {width: 20rpx;height: 20rpx;margin-right: 16rpx;border-radius: 100%;}
</style>