tongan-points-h5/pages/index/index.vue

<template>
	<view class="container">
		<image class="logo" :src="require('@/static/index-logo.png')"></image>
		<image class="logo1" :src="require('@/static/index-logo1.png')"></image>
		<image class="logo2" :src="require('@/static/index-logo2.png')"></image>
		<view class="titlewrap">
			<image class="title" :src="require('@/static/index-title.png')"></image>
			<view class="title-progress">
				<view class="progress-text">{{progressPercentage}}%</view>
				
				<view class="progress-bar-container">
					<view class="progress-bar" :style="{'width':progressPercentage+'%'}"></view>
				</view>
			</view>
			
		</view>

		<view class="support">
			<view>
				<p>技术支撑：江苏有线苏州分公司</p>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				progressPercentage: 0,
				interval:null,
				isShare:false,
			}
		},
		async onLoad() {
			// await this.$onLaunched;
			this.start();
			
		},
		beforeDestroy() {
			clearInterval(this.interval);
		},
		methods: {
			start() {
				 this.interval = setInterval(() => {
					 this.isShare = uni.getStorageSync('tadk2_lifeData').vuex_share?true:false
					const userInfo = uni.getStorageSync('tadk2_lifeData').vuex_user
					// if(this.isShare){
						if(this.progressPercentage<100){
							this.progressPercentage++;
						}else{
							// return
							clearInterval(this.interval);
							if(userInfo && userInfo.mobile){
								uni.navigateTo({
									url:'/pages/map/map'
								})
							}else{
								uni.navigateTo({
									url:'/pages/login/login'
								})
							}
						}
					// }else{
					// 	if(this.progressPercentage<99){
					// 		this.progressPercentage++;
					// 	}
					// }
					
				}, 60);
			},
		},
	}
</script>

<style lang="scss">
	.container {
		height: 100vh;
		width: 100vw;
		background: #e1f1f2;
		position: relative;

		.logo {
			width: 59rpx;
			height: 106rpx;
			position: absolute;
			top: 35rpx;
			left: 65rpx;
		}

		.logo1 {
			width: 97rpx;
			height: 86rpx;
			position: absolute;
			top: 45rpx;
			left: 140rpx
		}
		.logo2 {
			width: 189rpx;
			height: 88rpx;
			position: absolute;
			top: 45rpx;
			left: 250rpx
		}
		.titlewrap{
			position: absolute;
			top: 40%;
			left: 50%;
			transform: translate(-50%, -50%);
			.title {
				width: 633rpx;
				height: 498rpx;
			}
			.title-progress{
				margin-top:30rpx;
				.progress-text{
					text-align: center;
					color:#156e68;
					font-size: 60rpx;
					margin-bottom:20rpx
				}
				.progress-bar-container {
					width: 90%;
					height: 55rpx;
					background-color: #f7f1e1;
					overflow: hidden;
					border:4rpx solid #156e68;
					border-radius: 20rpx;
					margin:0 auto;
					font-size: 0;
				}
				
				.progress-bar {
					height: 100%;
					background-color: #156e68;
					width:0;
					border-radius:0 16rpx 16rpx 0;
					// transition: width 0.5s;
					// animation: width100 5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
				}
				// @keyframes width100 {
				// 	0% {
				// 		width:0%
				// 	}
				// 	30% {
				// 		width:30%
				// 	}
				// 	50%{
				// 		width:30%
				// 	}
				// 	70%{
				// 		width:70%
				// 	}
				// 	100% {
				// 		width:100%
				// 	}
				// }
			}

		}
		

		.support {
			position: absolute;
			bottom: 10rpx;
			width: 100%;
			font-size: 24rpx;
			color: #333;
			font-family: '宋体';
			opacity: 1;
			text-align: center;
			z-index: 9;
		}
	}
</style>