shanjuandong/pages/index/index.vue

<template>
	<view class="bg">
		<!-- <view class="content" :style="{backgroundImage: 'url('+imgSrc+')'}" @click="click"
		 @touchstart="touchStart" @touchend="touchEnd"></view> -->
		
		<view class="content content_bg" style="background-image: url(/static/1/1.png);" v-show="number == 0">
			<!-- <image class="bg-image" src="/static/1/1.png" mode="widthFix"></image> -->
			<image src="/static/1/1btn.png" class="btn_1" @click="click"></image>
		</view>
		
		<view class="content content_2" v-show="number == 1">
			<image class="title_2" src="/static/1/2title.png" ></image>
			<view class="progress-container">
				<view class="progress" :style="{'width':progressNum+'%'}">
					<image class="dongxiao" src="/static/1/loading.png"></image>
				</view>
			</view>
			<view style="font-weight: bold;font-size: 24rpx;color: #8F76EE;">{{progressNum}}%</view>
		</view>
		
		<view class="content content_bg" v-show="number == 2" @click="click"
		 @touchstart="touchStart" @touchend="touchEnd">
			<!-- <image class="bg-image" style="opacity: 0;" src="/static/1/2.png" mode="widthFix"></image> -->
			<swiper class="swiper-box" style="height: 100%;" :vertical="true">
				<swiper-item style="position: relative;">
					<!-- <image class="bg-image" src="/static/1/2.png" mode="widthFix"></image> -->
					<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="number == 3">
			<image class="bg-image" src="/static/1/3.png" mode="widthFix"></image>
			<view class="btn-box" >
				<image src="/static/1/btn1.png" mode="" class="btn1"></image>
				<image src="/static/1/btn2.png" mode="" class="btn2" @click="gotoPath('/pages/index/tiansheng')"></image>
				<image src="/static/1/btn3.png" mode="" class="btn2" @click="gotoPath('/pages/index/dongLing')" style="left: 449rpx;"></image>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgSrc: require('static/1/1.png'),
				progressNum: 0,
				number: 0,
				startY: 0,
			}
		},
		onLoad() {

		},
		methods: {
			gotoPath(url) {
				uni.navigateTo({
					url: url
				})
			},
			click() {
				this.number += 1
				switch (this.number){
					case 1:
						this.startProgress()
						break;
					case 2:
						this.imgSrc = require('static/1/2.png')
						break;
					case 3:
						this.imgSrc = require('static/1/3.png')
						break;
					default:
						break;
				}
			},
			startProgress() {
				let timer = setInterval(()=>{
					this.progressNum++
					if (this.progressNum>=100) {
						this.progressNum = 100
						clearInterval(timer)
						this.number = 2
					}
				},10)
			},
			touchStart(e) {
				this.startY = e.changedTouches[0].clientY;
			},
			touchEnd(e) {
				const endY = e.changedTouches[0].clientY;
				const distanceY = this.startY - endY;
				if (distanceY > 50 && this.number == 2) {
					console.log('上滑操作触发');
					setTimeout(()=>{this.click()},100)
					
					// 在此处编写上滑操作执行的逻辑
				}
			},
		}
	}
</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;
	}
	.btn-box {
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		bottom: 0;
		
		image {
			position: absolute;
		}
		
		
		.btn1 {
			width: 298rpx;
			height: 62rpx;
			top: 810rpx;
			left: 229rpx;
		}
		
		.btn2 {
			width: 243rpx;
			height: 74rpx;
			bottom: 223rpx;
			left: 78rpx;
		}
	}
	.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%;
	}
</style>