hldy_xcx/pages/oldmanindex/paysuccess.vue

<template>
	<div class="container">

		<view class="white-content">
			<image class="white-img" src="https://www.focusnu.com/media/directive/index/jumpImge/jiaofei.png" />
			<view class="white-font">
				缴费成功
			</view>
			<view class="bottom-font">
				<text style="color: #068DFF;">{{ seconds }}秒后</text>自动跳转到长者端 ...
			</view>
		</view>

	</div>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue'
	import {
		onLoad,
		onUnload
	} from '@dcloudio/uni-app';

	const seconds = ref(6)

	const goBack = () => {
		uni.navigateBack()
	}

	let timer = null

	onLoad(() => {
		// 保证每次进页面都从 6 开始
		seconds.value = 6

		// 每 1 秒减 1，减到 0 清理计时器（不做其他动作）
		timer = setInterval(() => {
			if (seconds.value > 0) {
				seconds.value -= 1
			} else {
				clearInterval(timer)
				timer = null;
				goToBack()
			}
		}, 1000)
	})

	// 页面卸载时清理（防止内存泄漏）
	onUnload(() => {
		if (timer) {
			clearInterval(timer)
			timer = null
		}
	})
	const goToBack = () => {
		uni.reLaunch({
			url: '/pages/oldmanindex/index'
		})
	}
</script>

<style lang="scss" scoped>
	.container {
		display: flex;
		flex-direction: column;
		min-height: 100vh;
		width: 100%;
		background-color: rgb(239, 241, 252);
		justify-content: center;
		align-items: center;

		.white-content {
			width: 70%;
			height: 600rpx;
			border-radius: 50rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			margin-top: -50rpx;
			position: relative;

			.white-img {
				width: 200rpx;
				height: 200rpx;
			}

			.white-font {
				font-size: 38rpx;
				font-weight: 600;
				margin-top: 40rpx;
			}

			.bottom-font {
				position: absolute;
				bottom: 100rpx;
				left: 0;
				width: 100%;
				font-size: 28rpx;
				color: #666666;
				text-align: center;
			}
		}
	}
</style>