134 lines
3.8 KiB
Vue
134 lines
3.8 KiB
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)" 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 && isVideo" 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="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:''},
|
|
{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
|
|
}
|
|
},
|
|
computed: {
|
|
...mapState({
|
|
ifAutoplay: state => state.moduleA.ifAutoplay
|
|
})
|
|
},
|
|
data() {
|
|
return {
|
|
bcurrent: 0, // 默认当前选中项
|
|
isShowVideo:false, // 是否显示视频
|
|
isVideo:uni.getStorageSync('is_video') // 是否是视频
|
|
};
|
|
},
|
|
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.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 {
|
|
// 有链接，跳转链接
|
|
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%;}
|
|
.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);}
|
|
</style>
|