shanjuandong/pages/index/index.vue

<template>
	<view class="bg">
		<!-- 第一页 -->
		<view :class="['content', 'content_bg', {'content-first': isFlipFade}]"
			style="background-image: url(/static/1/1.png);" v-show="currentPage === 0">
			<image src="/static/1/1btn.png" class="btn_1" @click="handleFirstPageClick"></image>
		</view>

		<!-- 加载页 -->
		<view class="content content_2" v-show="currentPage === 1">
			<image class="title_2" src="/static/1/2title.png"></image>
			<view class="progress-container">
				<view class="progress" :style="{'width': progressPercentage + '%'}">
					<image class="dongxiao" src="/static/1/loading.png"></image>
				</view>
			</view>
			<view style="font-weight: bold;font-size: 24rpx;color: #8F76EE;">{{progressPercentage}}%</view>
		</view>

		<!-- 第二页 -->
		<!-- <view class="content content_bg" v-show="currentPage === 2" @click="handlePageClick"
			@touchstart="handleTouchStart" @touchend="handleTouchEnd">
			<swiper class="swiper-box" style="height: 100%;" :vertical="true">
				<swiper-item style="position: relative;">
					<image class="bg-image" src="/static/1/2.png" style="height: 100%;"></image>
					<image style="position: absolute;left: 349rpx;bottom: 187rpx;width: 49rpx;height: 30rpx;"
						src="/static/1/arrow.png"></image>
				</swiper-item>
			</swiper>
		</view> -->

		<!-- 第三页 -->
		<view class="content" v-show="currentPage >= 2">
			<image class="bg-image" src="/static/1/3.png" mode="widthFix"></image>
			<view class="btn-box" >
				<image style="margin-top: 129rpx;" src="/static/1/btn1.png" mode="widthFix" class="com-img"></image>
				<image style="margin-top: 302rpx;" src="/static/1/btn2.png" mode="widthFix" class="com-img" 
				@click="navigateToPage('/pages/index/shan')"></image>
				<image style="margin-top: 100rpx;" src="/static/1/btn3.png" mode="widthFix" class="com-img" 
				@click="viewCard()"></image>
				<image style="margin-top: 78rpx;" src="/static/1/btn4.png" mode="widthFix" class="com-img" 
				@click="navigateToPage('/pages/index/zichan')"></image>
			</view>
		</view>
		
		<uni-popup ref="popup" type="center" >
			<image style="width: 535rpx;" mode="widthFix" src="/static/1/IPCenter.png"></image>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				progressPercentage: 0,
				currentPage: 0,
				startTouchY: 0,
				isFlipFade: false,
				progressTimer: null
			};
		},
		onLoad() {
			// 页面加载时的逻辑
		},
		methods: {
			// 跳转到指定页面
			navigateToPage(url) {
				uni.navigateTo({
					url: url,
				})
			},
			// 处理第一页按钮点击事件
			handleFirstPageClick() {
				this.isFlipFade = true;
				setTimeout(() => {
					this.handlePageClick();
				}, 1500);
			},
			// 处理页面点击事件
			handlePageClick() {
				this.currentPage++;
				this.updatePageContent();
			},
			// 根据当前页面更新内容
			updatePageContent() {
				switch (this.currentPage) {
					case 1:
						this.startProgress();
						break;
					case 2:
						// 这里可以添加第二页的特殊逻辑
						break;
					case 3:
						// 这里可以添加第三页的特殊逻辑
						break;
					default:
						break;
				}
			},
			// 开始加载进度条
			startProgress() {
				this.progressTimer = setInterval(() => {
					this.progressPercentage++;
					if (this.progressPercentage >= 100) {
						this.progressPercentage = 100;
						clearInterval(this.progressTimer);
						this.currentPage = 2;
					}
				}, 10);
			},
			// 处理触摸开始事件
			handleTouchStart(e) {
				this.startTouchY = e.changedTouches[0].clientY;
			},
			// 处理触摸结束事件
			handleTouchEnd(e) {
				const endY = e.changedTouches[0].clientY;
				const distanceY = this.startTouchY - endY;
				if (distanceY > 50 && this.currentPage === 2) {
					console.log('上滑操作触发');
					setTimeout(() => {
						this.handlePageClick();
					}, 100);
				}
			},
			
			viewCard () {
				this.$refs.popup.open()
			},
		},
		beforeDestroy() {
			// 组件销毁前清除定时器
			if (this.progressTimer) {
				clearInterval(this.progressTimer);
			}
		}
	};
</script>

<style lang="scss" scoped>
	.bg {
		width: 100%;
		min-height: 100vh;
		font-size: 0;
		background: black;
	}

	.content {
		width: 100%;
		min-height: 100vh;
		position: relative;

		.bg-image {
			width: 100%;
			min-height: 100vh;
			height: auto;
		}

		.btn_1 {
			width: 569rpx;
			height: 74rpx;
			position: absolute;
			bottom: 68rpx;
			left: 95rpx;
		}

		&.content_2 {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			.title_2 {
				width: 65rpx;
				height: 76rpx;
			}

			.progress-container {
				width: 387rpx;
				height: 24rpx;
				border-radius: 20rpx;
				border: 2px solid #8F76EE;
				margin: 26rpx 0;

				.progress {
					height: 100%;
					background: rgba(143, 118, 238, 0.3);
					border-radius: 20rpx;
					width: 0;
					overflow: hidden;
					position: relative;
				}
			}
		}


	}

	.content_bg {
		height: 100vh;
		background-size: 100% auto;
		background-repeat: no-repeat;
	}

	.btn-box {
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		bottom: 0;

		.com-img{
			width: 580rpx;
			margin: 0 auto;
			display: block;
		}
	}

	.dongxiao {
		position: absolute;
		right: 0;
		height: 100%;
		width: 158rpx;
	}

	.swiper-box {
		position: absolute;
		top: 0;
		bottom: 0;
		right: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	.content-first {
		animation: flipFade 2s forwards;
		opacity: 1;
		transform: rotateY(0deg);
	}

	/* 定义动画 */
	@keyframes flipFade {
		0% {
			opacity: 1;
			transform: rotateY(0deg);
		}

		100% {
			opacity: 0;
			transform: rotateY(180deg);
		}
	}
</style>