mobile_h5/poly/pages/led/index3.uvue

<!-- LED分辨率： 1920 * 1080 -->
<template>
	<view class="body">

		<view v-if="pageType == 1" class="content bg-led01">
			<view class="distance-container-1">
				<view class="total-time-1">总用时:　{{durationStr}}</view>
				<view class="total-distance-1">{{distanceKm}}KM</view>
			</view>
			<!-- <image class="run" mode="aspectFit" src="/static/led/run.png"></image> -->
		</view>

		<view v-if="pageType == 2" class="content bg-led02">
			<view class="pic-container">
				<!-- <image class="pic" mode="aspectFill" :src="imageSrc"></image> -->
				<swiper ref="swiper" class="swiper" :autoplay="autoplay" circular :current="swiperCurrent" :interval="picInterval"
					:duration="picDuration" @change="swiperChange" @animationfinish="animationfinish">
					<swiper-item v-for="(image, index) in swiperData" :key="index">
						<image class="pic-bg" :src="image"></image>
						<image class="pic" mode="aspectFit" :src="image"></image>
					</swiper-item>
				</swiper>
			</view>
			<view class="distance-container-2">
				<view class="total-time-2">总用时: {{durationStr}}</view>
				<view class="total-distance-2">{{distanceKm}}KM</view>
			</view>
			<image class="mascot" mode="aspectFit" src="/static/led/mascot-2.png"></image>
			<!-- <image class="lpzg" mode="aspectFit" src="/static/lpzg.png"></image> -->
		</view>
	</view>
</template>

<script>
	import tools from '../../common/tools';
	import { apiGetStatistics, apiGetUploadPic } from '../../common/api';

	export default {
		data() {
			return {
				testMode: 0, // 测试模式  0:否 1:是
				testDuration: 0,
				testDistance: 0,
				pageAutoChange: 0, // 有照片是否自动切换背景 0:否 1:是
				pageType: 1, // 1: 无照片  2: 有照片
				actIdArrStr: "",
				SumDuration: 0,
				SumDistance: 0,
				picCount: 0,
				autoplay: true,
				swiperData: [],		// swiper控件的数据 
				swiperCurrent: 0,	// swiper当前所在滑块的 index
				lastSwiperCurIndex: 0,	// 用于新图片加载后恢复之前的图片index
				picGroupSize: 90,	// 图片分组 每组最大图片数量
				picGroupNum: 0,		// 图片分组 分组数量
				picGroupCurIndex: 0,// 图片分组 当前播放的分组序号
				picSwiperIndex: 0,	// 图片分组 当前播放的分组内的图片序号
				picList: [],		// 图片列表 存放从服务器获取的所有图片
				picInterval: 3000,	// 自动切换时间间隔
				picDuration: 500,	// 滑动动画时长
				intervalSta: 0,
				intervalGrpSw: 0,
				// imageSrc: '',
			}
		},
		computed: {
			durationStr() {
				return tools.convertSecondsToHMS(this.SumDuration);
			},
			distanceKm() {
				if (this.SumDistance < 1000000)
					return Math.round(this.SumDistance * 10 / 1000) / 10;
				else
					return Math.round(this.SumDistance / 1000);
			}
		},
		onLoad(event) { // 类型非必填，可自动推导
			// this.SumDuration = 1622;
			// this.SumDistance = 999050;
			// this.SumDistance = 999949;
			// this.SumDistance = 2066869;
			// this.imageSrc = "/static/led/pic2.jpg";
			
			this.swiperData = this.picList[0];

			this.testMode = event["test"] ?? 0;
			this.pageAutoChange = event["pac"] ?? 0;
			this.pageType = event["page"] ?? 1;
			this.actIdArrStr = event["act"] ?? "175,176,177,178";

			this.getUploadPic();
			this.getStatistics();
			this.handleGroupSwitch();

			this.intervalSta = setInterval(this.getStatistics, 1000);
			// this.intervalGrpSw = setInterval(this.handleGroupSwitch, 1000);
		},
		onUnload() {
			console.log("onUnload");
			clearInterval(this.intervalSta);
			// clearInterval(this.intervalGrpSw);
		},
		methods: {
			handleGroupSwitch() {
				// console.log("[handleGroupSwitch] pic group: " + this.picGroupCurIndex + " / pic index: " + this.picSwiperIndex);
				if (this.swiperData == undefined) {
					setTimeout(this.handleGroupSwitch, 1000);
					return;
				}
				
				// 当前组已播完
				if (this.picSwiperIndex == this.swiperData.length - 1) {
					this.picSwiperIndex = 0;
					this.autoplay = false;
					setTimeout(() => {
						// 播放下一组图片
						if (this.picGroupCurIndex < this.picGroupNum - 1) {
							this.picGroupCurIndex++;
							// this.swiperData = this.picList[this.picGroupCurIndex];
							this.setSwiperData(this.picList[this.picGroupCurIndex]);
							this.swiperCurrent = 0;
							console.log("播放下一组图片 picGroupCurIndex = " + this.picGroupCurIndex);
						}
						// 所有图片组都播放完后，重新获取图片数据
						else {
							console.log("播放完毕，重新获取图片数据...  picGroupCurIndex: " , this.picGroupCurIndex);
							this.lastSwiperCurIndex = this.picSwiperIndex;
							this.getUploadPic();
						}
						
						this.autoplay = true;
						setTimeout(this.handleGroupSwitch, 1000);
						
					}, this.picInterval - 100);	// 时间-100ms，防止swiper滑动到下一个图片
				}
				else {
					setTimeout(this.handleGroupSwitch, 1000);
				}
			},
			setSwiperData(res) {
				// console.log("[setSwiperData] res:", res);
				if (res == undefined) {
					return;
				}
				this.swiperData = [];
				for (let n=0; n<res.length; n++) {
					this.swiperData.push(res[n]);
					// console.log("[setSwiperData] swiperData.push", res[n]);
				}
			},
			getStatistics() {
				if (this.testMode == 1) {
					this.testDuration += 1;
					this.testDistance += 100;
					// this.testDistance = 999949;
					this.SumDuration = this.testDuration;
					this.SumDistance = this.testDistance;
					return;
				}
				
				uni.request({
					url: apiGetStatistics,
					header: {
						"Content-Type": "application/x-www-form-urlencoded",
					},
					method: "POST",
					data: {
						actIdArrStr: this.actIdArrStr
					},
					success: (res) => {
						// console.log("getStatistics", res)
						const data = res.data.data;
						this.SumDuration = data.SumDuration;
						this.SumDistance = data.SumDistance;
					},
					fail: (err) => {
						console.log("getStatistics err", err)
					},
				});
			},
			getUploadPic() {
				uni.request({
					url: apiGetUploadPic,
					header: {
						"Content-Type": "application/x-www-form-urlencoded",
					},
					method: "POST",
					data: {
						actIdArrStr: this.actIdArrStr
					},
					success: (res) => {
						// console.log("getUploadPic", res);
						const data = res.data.data;
						const newCount = data.List.length;
						console.log("获取到的图片数量:", newCount);

						if (newCount > 0) {
							if (this.pageAutoChange == 1) {
								this.pageType = 2;
							}
						} else {
							if (this.pageAutoChange == 1) {
								if (this.picCount == 0)
									this.pageType = 1;
								else
									this.pageType = 2;
							}
						}

						if (newCount > this.picCount) { // 有新图片
							console.log("有 " + (newCount - this.picCount) + " 张新图片");
							// 将新增的图片追加到图片队列
							for (let i = this.picCount; i < newCount; i++) {
								let picUrl = data.Domain + data.List[i];
								
								if (this.picList.length == 0) {
									this.picGroupNum = 1;
									this.picList[this.picGroupNum-1] = new Array();
									console.log("新增图片分组: " + this.picGroupNum);
								}
								if (this.picList[this.picGroupNum-1].length >= this.picGroupSize) {
									this.picGroupNum++;
									this.picList[this.picGroupNum-1] = new Array();
									console.log("新增图片分组: " + this.picGroupNum);
								}
								this.picList[this.picGroupNum-1].push(picUrl);
								// console.log("picList[" + (this.picGroupNum-1) + "][" + (this.picList[this.picGroupNum-1].length-1) + "]: " + picUrl);
								// console.log("--> picList", this.picList[this.picGroupNum-1]);
								// for (let j=0; j<15; j++) {
								// 	this.picList[this.picGroupNum-1].push(picUrl);
								// }
							}
							// console.log("*** picList 总数量", this.picList.length);
							
							// if (this.picCount > 0) {
							// 	// this.swiperCurrent = this.picCount;
							// 	this.swiperCurrent = this.lastSwiperCurIndex;
							// 	console.log("重定位 picGroupCurIndex", this.picGroupCurIndex);
							// 	console.log("重定位 index", this.swiperCurrent);
							// }
							
							this.picCount = newCount;
							this.autoplay = false;
							// this.swiperData = this.picList[this.picGroupCurIndex];
							this.setSwiperData(this.picList[this.picGroupCurIndex]);
							this.swiperCurrent = this.lastSwiperCurIndex;
							this.picSwiperIndex = this.lastSwiperCurIndex;
							this.autoplay = true;
							console.log("重定位 picGroupCurIndex", this.picGroupCurIndex);
							console.log("重定位 index", this.swiperCurrent);
						}
						else { // 没有新图片
							// 从第1组重新开始播放图片
							console.log("没有新图片，从第1组重新开始播放图片");
							this.autoplay = false;
							this.picGroupCurIndex = 0;
							this.swiperCurrent = 0;
							this.picSwiperIndex = 0;
							// this.swiperData = this.picList[this.picGroupCurIndex];
							this.setSwiperData(this.picList[this.picGroupCurIndex]);
							this.autoplay = true;
							// console.log("picList", this.picList);
							// console.log("swiperData", this.swiperData);
						}
						
						if (this.picCount == 0) {
							// console.log('this.picCount == 0');
							setTimeout(this.getUploadPic, 1000);
						}
						else if (this.picCount == 1) {
							// console.log('this.picCount == 1');
							// swiper在只有1张图片的情况下不会触发 @change事件，需要在这里再次获取图片数据
							setTimeout(this.getUploadPic, this.picInterval);
						}
						// console.log("picList", this.picList);
					},
					fail: (err) => {
						console.log("getUploadPic err", err);
						setTimeout(this.getUploadPic, 3000);
					},
				});
			},
			//当前轮播索引
			swiperChange(e) {
				console.log("pic group: " + this.picGroupCurIndex + " / pic index: " + e.detail.current);
				// console.log("picGroupNum: " + this.picGroupNum);
				const curIndex = e.detail.current;
				this.picSwiperIndex = curIndex;
				
				// // 当前组已播完
				if (curIndex == this.swiperData.length - 1) {
					this.autoplay = false;
				// 	setTimeout(() => {
				// 		// 播放下一组图片
				// 		if (this.picGroupCurIndex < this.picGroupNum - 1) {
				// 			this.picGroupCurIndex++;
				// 			// this.swiperData = this.picList[this.picGroupCurIndex];
				// 			// this.swiperCurrent = 0;
				// 			this.setSwiperData(this.picList[this.picGroupCurIndex]);
				// 			console.log("播放下一组图片 picGroupCurIndex = " + this.picGroupCurIndex);
				// 		}
				// 		// 所有图片组都播放完后，重新获取图片数据
				// 		else {
				// 			console.log("播放完毕，重新获取图片数据..." , this.picGroupCurIndex);
				// 			this.lastSwiperCurIndex = curIndex;
				// 			this.getUploadPic();
				// 		}
				// 	}, this.picInterval - 100);	// 时间-100ms，防止swiper滑动到下一个图片
				}

			},
			//点击轮播
			swiperClick(e) {
				console.log('点击轮播', e);
			},
			animationfinish(e) {
				// console.log('animationfinish');
				// console.log("pic group: " + this.picGroupCurIndex + " / pic index: " + e.detail.current);
				// const curIndex = e.detail.current;
				
				// // 当前组已播完
				// if (curIndex == this.swiperData.length - 1) {
				// 	// setTimeout(() => {
				// 		// 播放下一组图片
				// 		if (this.picGroupCurIndex < this.picGroupNum - 1) {
				// 			this.picGroupCurIndex++;
				// 			this.swiperCurrent = 0;
				// 			// this.swiperData = this.picList[this.picGroupCurIndex];
				// 			this.setSwiperData(this.picList[this.picGroupCurIndex]);
				// 			console.log("播放下一组图片 picGroupCurIndex = " + this.picGroupCurIndex);
				// 			// console.log("picList", this.picList);
				// 			// console.log("swiperData", this.swiperData);
				// 		}
				// 		// 所有图片组都播放完后，重新获取图片数据
				// 		else {
				// 			console.log("播放完毕，重新获取图片数据..." , this.picGroupCurIndex);
				// 			this.lastSwiperCurIndex = curIndex;
				// 			this.getUploadPic();
				// 		}
				// 	// }, this.picInterval - 1000);	// 时间-100ms，防止swiper滑动到下一个图片
				// }
				
			}
		}
	}
</script>

<style>
	.body {
		/* width: 100%; */
		/* height: 100vh; */
		width: 1920px;
		height: 1080px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.content {
		width: 100%;
		height: 100%;
		flex-direction: row;
		align-items: flex-start;
		/* justify-content: flex-start; */
	}

	.bg-led01 {
		background-image: url("/static/led/led01-3.webp");
		background-repeat: no-repeat;
		background-size: contain;
	}

	.bg-led02 {
		background-image: url("/static/led/led02-3.webp");
		background-repeat: no-repeat;
		background-size: contain;
	}

	.pic-container {
		width: 1220px;
		height: 810px;
		margin-left: 100px;
		margin-top: 100px;
		background: url("/static/led/pic_border-3.png");
		background-repeat: no-repeat;
		background-size: contain;
	}

	.swiper {
		height: 812px;
		mask-image: url('/static/led/pic_mask-3.png');
		mask-size: 1218px;
		mask-repeat: no-repeat;
	}

	.pic {
		margin: 3px;
		width: 1218px;
		height: 810px;
	}

	.pic-bg {
		position: absolute;
		margin: -10px;
		width: 1240px;
		height: 830px;
		filter: blur(15px);
	}

	.distance-container-1 {
		align-items: center;
		justify-content: space-around;
		width: 1130px;
		height: 476px;
		margin-left: 175px;
		margin-top: 165px;
	}

	.total-time-1 {
		font-family: 'Arial Black';
		font-size: 50px;
		color: #ffffff;
		margin-left: 390px;
		line-height: 90px;
		margin-top: 0px;
	}

	.total-distance-1 {
		font-family: 'Arial';
		font-size: 330px;
		transform: scaleX(0.8);
		color: #ffffff;
		line-height: 300px;
	}

	.distance-container-2 {
		align-items: center;
		justify-content: space-around;
		width: 660px;
		height: 280px;
		margin-left: -163px;
		margin-top: 366px;
		background: url("/static/led/distance_bg.png") no-repeat;
		background-size: cover;
	}

	.total-time-2 {
		font-family: 'Arial Black';
		font-size: 36px;
		transform: scaleX(0.9);
		color: #ffffff;
		margin-left: 320px;
		line-height: 50px;
	}

	.total-distance-2 {
		font-family: 'Arial';
		font-size: 200px;
		transform: scaleX(0.78);
		color: #ffffff;
		line-height: 180px;
	}

	.run {
		width: 468px;
		height: 468px;
		margin-left: -840px;
		margin-top: 130px;
	}

	.mascot {
		height: 358px;
		margin-left: -525px;
		margin-top: 80px;
	}

	.lpzg {
		width: 468px;
		margin-left: -1510px;
		margin-top: 832px;
	}
</style>