dyqc_hdapp/components/fuyu-MixSwiper/fuyu-MixSwiper.vue

<template>
	<view class="swiper_s">
		<swiper class="swiper_s"  :autoplay="autoplaySwiper" indicator-active-color="#0DAE11" indicator-color="#ffffff" :indicator-dots="false"  :current="swiperCurrent" @change="swiperChange">
			<swiper-item v-for="(item,index) in list" :key="index">
				<span class="fnon_tit"><span class="text">{{ item.title?item.title:'' }}</span></span>
				<!-- @click="click(item.url)" 跳转活动链接 -->
				<image class="swiper-image" v-if="isImageUrl(item.image)"  :src="item.image" mode="scaleToFill" lazy-load />
				<div style="height: 100%;width: 100%;position: relative;" v-else>

					<!-- #ifdef APP -->
					<MyVideo :item="item" :isPlay="!isShow && videoId == item.id" @onEnded="endVideo(item.id)" />
					<view v-if="isShow"
						style="z-index:99;position: absolute;width:100%;height:100%;top:0;left:0;display:flex; justify-content:center; align-items:center;">
						<image @click.stop="plays(item.id,index)" src="@/static/bofang.png"
							style="width: 40px;height: 40px;"></image>
					</view>
					<!-- #endif -->

					<!-- #ifdef MP-WEIXIN -->
					<video class="swiper-video" :id="`Video${item.id}`" :src="item.image" :autoplay="true"
						:controls="true" :show-center-play-btn="false" :enable-progress-gesture="false"
						@ended="endVideo(item.id)" @loadedmetadata="loadVideo(item.id)" />
					<cover-view v-if="isShow"
						style="z-index:99;position: absolute;width:100%;height:100%;top:0;left:0;display:flex; justify-content:center; align-items:center;">
						<cover-image @click.stop="plays(item.id,index)" src="@/static/bofang.png"
							style="width: 40px;height: 40px;"></cover-image>
					</cover-view>
					<!-- #endif -->

					<!-- #ifdef H5 -->
					<video class="swiper-video" :id="`Video${item.id}`" :src="item.image" :autoplay="true" :controls="false"
						:show-center-play-btn="false" :enable-progress-gesture="false" @ended="endVideo(item.id)" />
					<view v-if="isShow"
						style="z-index:99;position: absolute;width:100%;height:100%;top:0;left:0;display:flex; justify-content:center; align-items:center;">
						<image @click.stop="plays(item.id,index)" src="@/static/bofang.png"
							style="width: 40px;height: 40px;"></image>
					</view>
					<!-- #endif -->
				</div>
			</swiper-item>
			
		</swiper>
		<!-- 自定义指示器 -->
		<view class="dots">
			<text 
				v-for="(dot, idx) in list.length" 
				:key="idx" 
				:class="['dot', { active: swiperCurrent === idx }]"
			/>
		</view>
	</view>	  
</template>

<script>
	// #ifdef APP
	import MyVideo from '@/components/fuyu-MixSwiper/MyVideo.vue'
	// #endif
	export default {
		components: {
			// #ifdef APP
			MyVideo
			// #endif
		},
		props: {
			list: {
				type: Array,
				default: () => []
			}
		},
		data() {
			return {
				swiperCurrent: 0, //轮播下标
				autoplaySwiper: true,
				isShow: true,
				videoIndex: null,
				videoId: null,
				dotsShow:true,
				currentItemType:''
			}
		},
		created() {
			// #ifdef MP-WEIXIN
			const regex = /^(http|https):\/\//;
			this.list.forEach(v => {
				const bool = regex.test(v.url);
				if (!bool) {
					const fs = uni.getFileSystemManager();
					const res = new Promise((resolve, reject) => {
						fs.readFile({
							filePath: v.url, // 相对于static目录的路径
							encoding: 'base64',
							success: (res) => {
								v.url = res.data
								// 为临时文件生成一个文件名，您可以根据需要自定义文件名
								const fileName = `temp_video_${Date.now()}.mp4`;
								// 指定临时文件的完整路径
								const tempFilePath = `${uni.env.USER_DATA_PATH}/${fileName}`;
								// 将Base64编码的数据写入临时文件
								fs.writeFile({
								  filePath: tempFilePath, // 临时文件路径
								  data: v.url, // Base64数据（去掉数据URI部分）
								  encoding: 'base64', // 指定编码格式为base64
								  success: () => {
									  v.url = tempFilePath
								  },
								  fail: (err) => {
								    console.error('写入文件失败：', err);
								  }
								});
							},
							fail: (err) => {
								console.error('读取视频文件失败：', err);
							}
						});
					});
				}
			})
			// #endif
		},
		methods: {
			swiperChange(e) {
				this.swiperCurrent = e.detail.current;
				const currentItem = this.list[this.swiperCurrent];
				this.currentItemType = currentItem.showtype;
				if (this.currentItemType === 'video') {
					this.dotsShow = false
				} else {
					this.dotsShow = true
				}
				if (e.detail.current != this.videoIndex) {
					this.endVideo(this.videoId, 'swiper')
				}
			},
			click(e){
				uni.navigateTo({
					url: e
				});
			},
			isImageUrl(url) {
				// 定义常见的图片文件后缀
				const imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'tiff', 'svg'];
				// 获取URL中的文件后缀
				const ext = url.substring(url.lastIndexOf('.') + 1).toLowerCase();
				// 检查文件后缀是否在图片文件后缀数组中
				return imageExtensions.includes(ext)
			},
			//当video播放得时候 覆盖曾隐藏，不能轮播
			plays(id, index) {
				// #ifndef APP
				let videoContext = uni.createVideoContext(`Video${id}`, this);
				videoContext.play()
				// #endif
				this.videoId = id
				this.videoIndex = index
				this.isShow = false
				this.autoplaySwiper = false
			},
			//加载视频时触发，解决小程序加载报错问题
			loadVideo(id) {
				let videoContext = uni.createVideoContext(`Video${id}`, this);
				videoContext.pause()
				videoContext.seek(0)
			},
			//当video播放结束得时候 进行初始化，恢复轮播
			endVideo(id, type) {
				// #ifndef APP
				let videoContext = uni.createVideoContext(`Video${id}`, this);
				videoContext.pause()
				// #endif
				this.isShow = true
				this.videoIndex = null
				this.videoId = null
				this.autoplaySwiper = true
				if (!type) {
					setTimeout(v => {
						this.swiperCurrent++
					}, 500)
				}
			},
		}
	}
</script>
<style scoped lang="scss">
	.swiper_s {
		width: 100%;
		height: 100%;
	}
	
	
	.swiper-image,
	.swiper-video {
		width: 100%;
		height: 100%;
		border-radius: 36rpx;
		object-fit: contain;
	}
	.fnon_tit {
		position: absolute;
		left: 5%;
		font-family: "YouSheBiaoTiHei";
		font-weight: 400;
		font-size: 38rpx;
		color: #ffffff;
		text-align: center;
		font-style: normal;
		text-transform: none;
		z-index: 1;
		width: 630rpx;
		height: 117rpx;
		line-height: 100rpx;
		background: rgba(0, 0, 0, 0.24);
		border-radius: 36rpx;
		bottom: 30rpx;
		.text {
			position: relative; /* 确保文字在模糊背景之上 */
			z-index: 10; /* 确保文字位于最上层 */
		}
	}
	.fnon_tit::after {
		content: "";
		position: absolute;
		top: 0; left: 0; right: 0; bottom: 0;
		backdrop-filter: blur(4px); /* 调整模糊程度 */
		pointer-events: none; /* 确保模糊效果不会干扰点击事件 */
		border-radius: 36rpx;
	}
	.dots {
		position: absolute;
		bottom: 50rpx;
		width: 100%;
		display: flex;
		justify-content: center;
	
		.dot {
			background-color: #ffffff ;
			width: 30rpx;
			height: 6rpx;
			border-radius: 0;
			margin-right: 10rpx;
			&.active {
				background:  #0DAE11;
				// transform: scale(0.9);
			}
		}
	}
</style>