mp_exhibitor_miniprog/components/common/u-swiper/index.vue

<template>
	<view class="swiper-container">
		<swiper class="swiper" circular :indicator-dots="false" :circular="circular" :next-margin="nextMargin"
			:autoplay="autoplay" :interval="interval" :duration="duration" :style="style" @change="onSwiperChange">
			<template v-for="(item, index) in logoList" v-if="useComponentName === 'logoSwiper'">
				<swiper-item :key="index">
					<view class="image-wrapper">
						<slot :scope="item"></slot>
					</view>
				</swiper-item>
			</template>
			<template v-for="(item, index) in limitList" v-if="useComponentName !== 'logoSwiper'">
				<swiper-item :key="index">
					<view class="image-wrapper" @tap="onImageClick(item)">
						<image v-if="useComponentName === 'topSwiper'" :mode="imageMode" :src="item.url" :style="imageStyle" @click="onClickAlbum(limitList,index)"/>
						<image v-else-if="useComponentName === 'videoSwiper'" :mode="imageMode" :src="item.cover_url"
							:style="imageStyle" />
						<image v-else-if="useComponentName === 'imageSwiper'" :mode="imageMode" :src="String(item)" @click="onClickAlbum(limitList,index)"
							:style="imageStyle" />
						<slot v-else :scope="item"></slot>
						<view class="video-play" v-if="item.url && item.url.indexOf('.mp4') !== -1">
							<view class="iconfont icon-playcircle"></view>
						</view>
					</view>
				</swiper-item>
			</template>
		</swiper>
		<!-- 自定义指示点 -->
		<view v-if="indicatorDots && useComponentName === 'logoSwiper'" class="custom-indicator logo-indicator"
			:class="{ 'morphing': indicatoDotsStyle === 'morphing' }">
			<view v-for="(item, index) in logoList" :key="index" class="dot" :class="{ 'active': current === index }"></view>
		</view>
		<view v-if="indicatorDots && useComponentName !== 'logoSwiper'" class="custom-indicator"
			:class="{ 'morphing': indicatoDotsStyle === 'morphing' }">
			<view v-for="(item, index) in limitList" :key="index" class="dot" :class="{ 'active': current === index }"></view>
		</view>
		<van-overlay :show="showOverlay" @tap="onClickHideOverlay">
			<view class="overlay-wrapper">
        <view class="iconfont icon-Cancel"></view>
        <video v-if="videoUrl" :src="videoUrl" controls autoplay loop @tap.stop></video>
			</view>
		</van-overlay>
	</view>
</template>

<script>
	import VanOverlay from '@/wxcomponents/vant/overlay/index'

	export default {
		options: {
			styleIsolation: 'shared'
		},
		components: {
			VanOverlay
		},
		props: {
			items: Array,
			useComponentName: {
				type: String,
				default: ''
			},
			borderRadius: {
				type: Number
			},
			nextMargin: {
				type: String,
				default: ''
			},
			height: {
				type: Number,
				default: 400
			},
			imageWidth: {
				type: Number,
				default: 0
			},
			imageHeight: {
				type: Number,
				default: 0
			},
			imageMode: {
				type: String,
				default: 'aspectFill' // 参考https://zh.uniapp.dcloud.io/component/image.html
			},
			indicatoDotsStyle: {
				type: String,
				default: 'default' // or 'morphing'
			},
			indicatorDots: {
				type: Boolean,
				default: true
			},
			circular: {
				type: Boolean,
				default: true
			},
			autoplay: {
				type: Boolean,
				default: true
			},
			interval: {
				type: Number,
				default: 5000
			},
			duration: {
				type: Number,
				default: 500
			}
		},
		computed: {
			style() {
				return 'height:' + (this.height + 2) + 'rpx;'
			},
			imageStyle() {
				let style = 'height:' + (this.imageHeight || this.height) + 'rpx;'
				if (this.imageWidth) {
					style += 'width:' + this.imageWidth + 'rpx;'
				}
				if (this.borderRadius) {
					style += 'border-radius:' + this.borderRadius + 'rpx;'
				}
				return style
			},
			limitList() {
				return this.data.slice(0, this.limit);
			}
		},
		watch: {
      items(value) {
        this.data = value
        if (this.useComponentName === 'logoSwiper') {
          this.getLogoPage()
        }
      }
    },
		data() {
			return {
        data: [],
				showOverlay: false,
				videoUrl: '',
				current: 0,
				logoPage: 1,
				logoList: [],
				limit: 4
			}
		},
		created() {},
		mounted() {
			if (this.useComponentName === 'logoSwiper') {
				this.getLogoPage()
			}
		},
		methods: {
      onClickAlbum(albumPics,index) {
        const pics = albumPics.map(v => {
          return v
        })
        uni.previewImage({
          current: index,
          urls: pics
        })
      },
			onClickHideOverlay() {
				this.showOverlay = false
			},
			onSwiperChange(e) {
				this.current = e.detail.current
			},
			onImageClick(item) {
				if (item.url) {
					if (item.url.indexOf('.mp4') !== -1) {
						this.videoUrl = item.url
						this.showOverlay = true
					} else {
						this.navigateTo(item.href)
					}
				}
			},
			getLogoPage() {
				this.logoPage = Math.floor(this.data.length / 6 - 0.000000000001)
				for (let i = 0; i <= this.logoPage; i++) {
					let starPage = i * 6
					let lastPage = (starPage + 5) < this.data.length - 1 ? (starPage + 5) : this.data.length - 1
					this.logoList[i] = []
					for (let k = starPage; k <= lastPage; k++) {
						this.logoList[i].push(this.data[k])
					}
				}
			}
		}
	}
</script>
<style lang="scss" scoped>
	.image-wrapper {
		position: relative;

		.video-play {
			@include display-flex-center;
			position: absolute;
			top: 0;
			bottom: 0;
			right: 0;
			left: 0;
			width: 82rpx;
			height: 82rpx;
			border-radius: 50%;
			margin: auto;
			background-color: rgba(229, 117, 25, 0.5);
			z-index: 1;

			.iconfont {
				color: #FFFFFF;
				font-size: 62rpx;
			}
		}

		image {
			width: 100%;
		}
	}

	.overlay-wrapper {
		@include display-flex-center;
		height: 100%;
    .iconfont {
      color: #ffffff;
      font-size: 86rpx;
      position: absolute;
      right: 20rpx;
      top: 30%;
      z-index: 9;
    }
		video {
			width: 100%;
		}
	}

	.swiper-container {
		position: relative;
	}

	/* 自定义指示点样式 */
	.custom-indicator {
		position: absolute;
		bottom: 24rpx;
		width: 100%;
		display: flex;
		justify-content: center;
		margin-top: 10rpx;

		&.logo-indicator {
			bottom: -34rpx;
		}

		&.morphing {
			.dot {
				margin: 0 5rpx;
			}

			.dot.active {
				width: 26rpx;
				border-radius: 8rpx;
				background-color: white;
			}
		}
	}

	.dot {
		width: 12rpx;
		height: 12rpx;
		border-radius: 50%;
		background-color: #D9D9D9;
		margin: 0 2.5rpx;

		&.active {
			background-color: $buttonPrimaryColor;
			/* 当前激活的指示点颜色 */
		}
	}
</style>