MinNan/components/mn_yindaoye.vue

<template>
	<view class="box" :style="{ height: screenHeight + 'px' }">
		<view class="tiaoguo" @click="skipGuide">
			<view>{{ countdown }}跳过</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			screenHeight: 0,
			interval: null, // 用于存储倒计时的定时器ID
			countdown: 3 // 倒计时初始值
		};
	},
	onLoad() {
		// 获取窗口高度
		const systemInfo = uni.getSystemInfoSync();
		this.screenHeight = systemInfo.screenHeight;
	},
	mounted() {
		this.startCountdown();
	},
	methods: {
		// 开始倒计时
		startCountdown() {
			this.interval = setInterval(() => {
				if (this.countdown > 0) {
					this.countdown--;
				} else {
					clearInterval(this.interval);
					this.closeGuide();
				}
			}, 1000); // 每秒减少1
		},
		// 跳过引导
		skipGuide() {
			// 清除延时器不然会跳 两次
			clearInterval(this.interval);
			this.closeGuide();
		},
		closeGuide() {
			uni.switchTab({
				url: '/pages/index/index'
			});
		}
	}
};
</script>

<style>
.box {
	width: 100%;
	height: 100%;
	background-image: url('https://huli-app.wenlvti.net/app_static/minnanhun/image/mn_yindaoye.jpg');
	background-size: cover;
}
.img {
	width: 100%;
	height: 100%;
}
.tiaoguo {
	width: 100rpx;
	border-radius: 20rpx;
	position: absolute;
	top: 180rpx;
	right: 38rpx;
	text-align: center;
	background-color: rgba(0, 0, 0, 0.3);
}
</style>