rtdeviceApp/pages/user/success.vue

<template>
	<view class="content">
		<!-- 个人信息 -->
		<view class="blur-bg-2"></view>
		<view class="top-btn">
			<view class="back x-c" @click="$navBack()">
				<image src='/static/image/new/icon_back.svg'></image>
				返回
			</view>
			<view class="title x-c">
				<image src='/static/image/new/img_title1.svg'></image>
				<text>信息采集</text>
				<image src='/static/image/new/img_title2.svg'></image>
			</view>
			<view class="index x-c" @click="goIndex">
				<image src='/static/image/new/icon_home.svg'></image>
				首页
			</view>
		</view>
		<view class="userBox y-bc">
			<view class="successBox">
				<image src='/static/image/new/img_finish.svg'></image>
				<view class="title">信息采集完成</view>
				<view class="text">接下来，我开始为您做健康检测啦～</view>
			</view>
			<view class="stepBox">
				<view class="title">检测环节</view>
				<view class="stepInfo x-bc">
					<view class="step y-c">
						<image src='/static/image/new/icon_face.svg'></image>
						<text>面诊</text>
					</view>
					<image class="arrow" src='/static/image/new/icon_arrow.svg'></image>
					<view class="step y-c">
						<image src='/static/image/new/icon_tone.svg'></image>
						<text>舌诊</text>
					</view>
					<image class="arrow" src='/static/image/new/icon_arrow.svg'></image>
					<view class="step y-c">
						<image src='/static/image/new/icon_question.svg'></image>
						<text>问诊</text>
					</view>
					<image class="arrow" src='/static/image/new/icon_arrow.svg'></image>
					<view class="step y-c">
						<image src='/static/image/new/icon_hand.svg'></image>
						<text>脉诊</text>
					</view>
				</view>
			</view>
            <view class="btnBox">
				<view class="timer">即将开始检测 {{countDown}}s</view>
				<view class="btn" @click="goTest">立即开始</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getUserInfoByUserId,
		getUserInfo
	} from '@/api/user.js';
	export default {
		data() {
			return {
				countDown: 5, // 初始倒计时5秒
				timer: null // 定时器标识
			}
		},
		onLoad(option) {
			this.startCountDown();
		},
		onShow() {
			if (this.countDown <= 0) {
			      this.countDown = 5;
			      this.startCountDown();
			    }
		},
		  onUnload() {
		    // 页面销毁时清除定时器，避免内存泄漏
		    clearInterval(this.timer);
		    this.timer = null;
		  },
		methods: {
			 // 倒计时逻辑
			    startCountDown() {
			      this.timer = setInterval(() => {
			        if (this.countDown > 0) {
			          this.countDown--;
			        } else {
			          // 倒计时结束，清除定时器
			          clearInterval(this.timer);
			          this.timer = null;
					  // uni.navigateTo({
					  // 	url:"/pages/device/tongue/facePhoto"
					  // });
			        }
			      }, 1000);
			    },
			//首页
			goIndex(){
				uni.reLaunch({
					url: '/pages/index/index',
					animationType: 'none',
					animationDuration: 2000
				})
			},
			// 性别切换
			genderChange(sex) {
				this.form.sex = sex;
			},
			// 设置输入框高亮状态
			setHighlight(field, status) {
				this.$set(this.highlightStatus, field, status);
			},
			// 确认提交
			goTest(){
				uni.navigateTo({
					url:"/pages/device/tongue/facePhoto"
				});
			},
		}
	}
</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;
		.blur-bg-2 {
		   width: 350px;
		   height: 350px;
		   background: #FFFDCC;
		   // opacity: 0.47;
		   filter: blur(200px);
		   position: absolute;
		   z-index: 1;
		   top: 60px;
		   right: calc(0px - 107px); 
		   pointer-events: none
		}
	}

	.top-btn {
		display: flex;
		align-items: center;
		justify-content: space-between;
z-index:2;
		.back {
			width: 140px;
			height: 48px;
			background: rgba(255, 255, 255, 0.64);
			border-radius: 45px 45px 45px 45px;
			border: 2px solid #FFFFFF;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 22px;
			color: #327E6F;

			image {
				margin-right: 4px;
				width: 24px;
				height: 24px;
			}
		}

		.title {
			font-family: PingFang SC, PingFang SC;
			font-weight: 600;
			font-size: 36px;
			color: #327E6F;
			line-height: 54px;

			text {
				margin: 0 14px;
			}

			image {

				width: 153px;
				height: 25px;
			}
		}

		.index {
			width: 140px;
			height: 48px;
			background: rgba(255, 255, 255, 0.64);
			border-radius: 55px 55px 55px 55px;
			border: 2px solid #FFFFFF;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 22px;
			color: #327E6F;

			image {
				margin-right: 4px;
				width: 24px;
				height: 24px;
			}
		}
	}

	.userBox {
		flex: 1;
		margin-top: 28px;
		background: rgba(255, 255, 255, 0.7);
		border-radius: 24px 24px 24px 24px;
		padding: 27px 40px;
        z-index: 9;
		.successBox{
			display: flex;
			align-items: center;
			flex-direction: column;
			margin-top: 80px;
			image{
				width: 99px;
				height: 99px;
			}
			.title{
				margin-top: 42px;
				width: 468px;
				height: 57px;
				line-height: 57px;
				text-align: center;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 35px;
				color: #333333;
				background-image:url(/static/image/new/img_cloud.svg);
				background-repeat: no-repeat;
				position: relative;
				background-size: 100% 100%;
			}
			.text{
				margin-top: 11px;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28px;
				color: #333333;
			}
		}
		.stepBox{
			display: flex;
			align-items: center;
			flex-direction: column;
			justify-content: center;
			width: 525px;
			height: 220px;
			background-image:url(/static/image/new/bg_step.svg);
			background-repeat: no-repeat;
			position: relative;
			background-size: 100% 100%;
			.title{
				position: absolute;
				top:-21px;
				width: 170px;
				height: 42px;
				display: flex;
				align-items: center;
				justify-content: center;
				background-image:url(/static/image/new/bg_title.svg);
				background-repeat: no-repeat;
				background-size: 100% 100%;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 24px;
				color: #FFFFFF;
			}
			.arrow{
				width: 27px;
				height: 19px;
				margin: 0 12px;
				padding-top: 22px;
			}
			.step{
				image{
					width: 64px;
					height: 64px;
				}
				text{
					margin-top: 15px;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24px;
					color: #333333;
				}
			}
			
		}
		.btnBox{
			display: flex;
			align-items: center;
			flex-direction: column;
			.timer{
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24px;
				color: #37C3A0;
				animation: pulse 1s infinite alternate;
			}
			.btn {
				margin-top: 28px;
				margin-bottom: 16px;
				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>