rtdeviceApp/pages/index/loading.vue

<template>
	<view class="content">
		<!-- 个人信息 -->
		<view class="blur-bg-2"></view>
		<view class="userBox y-c">
			<view class="loadBox">
				<image src='/static/image/new/logo2.svg'></image>
				<view class="progress">
					<u-line-progress :percentage="progressPercent" :showText="false" height="18" inactiveColor="#fff" activeColor="#3CD3AD"></u-line-progress>
				</view>
				<view class="text">AI大脑正在为您综合分析数据...</view>
			</view>
            <!-- <view class="btnBox">
				<view class="btn" @click="goIndex">返回首页</view>
			</view> -->
		</view>
	</view>
</template>

<script>
	import {
		getUserInfoByUserId,
		getUserInfo
	} from '@/api/user.js';
	export default {
		data() {
			return {
				progressPercent: 0, // 进度条百分比
			    progressTimer: null // 定时器
			}
		},
		onLoad(option) {
			this.startProgress();
		},
		onShow() {
			
		},
		onUnload() {
		 			// 清除定时器，防止内存泄漏
		 	clearInterval(this.progressTimer);
		 	this.progressTimer = null;
		},
		methods: {
			//首页
			goIndex(){
				uni.reLaunch({
					url: '/pages/index/index',
					animationType: 'none',
					animationDuration: 2000
				})
			},
			startProgress() {
							const step = 2; // 每次增加的进度
							const target = 100; // 目标进度
							
							this.progressTimer = setInterval(() => {
								if (this.progressPercent >= target) {
									clearInterval(this.progressTimer);
									this.progressTimer = null;
									// 加载完成后跳转到目标页面（示例：首页）
									//this.goIndex();
									return;
								}
								this.progressPercent += step;
							}, 100);
						},
		}
	}
</script>


<style scoped lang="scss">
	page {
		background: #fff;
		font-size: 16px
	}

	.content {
		width: 100%;
		height: 100vh;
		background: #D8F6EF;
		padding: 28px;
		display: flex;
		flex-direction: column;
		background:#D8F6EF;
		background-image:url(/static/image/new/bg_mountain.svg);
		background-repeat: no-repeat;
		position: relative;
		background-size: 100% 100%;
	}

	

	.userBox {
		flex: 1;
		// background: rgba(255, 255, 255, 0.7);
		// border-radius: 24px 24px 24px 24px;
		padding: 27px 40px;
        z-index: 9;
		.loadBox{
			display: flex;
			align-items: center;
			flex-direction: column;
			image{
				width: 197px;
				height: 197px;
			}
			.text{
				margin-top: 11px;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28px;
			color: #333333;
			}
			.progress{
				width: 100%;
				margin-top:200px ;
				margin-bottom: 33px;
			}
		}
		.btnBox{
			display: flex;
			align-items: center;
			flex-direction: column;
			.btn {
				margin-top: 97px;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 360px;
				height: 68px;
				background: #37C3A0;
				border-radius: 121px 121px 121px 121px;
				font-family: PingFang SC, PingFang SC;
				font-weight: 600;
				font-size: 28px;
				color: #FFFFFF;
			}
		}
		
	}
	@keyframes pulse {
	  from { opacity: 0.8; }
	  to { opacity: 1; }
	}
</style>