CommunityApp/pages/guide/guide.vue

<template>
	<view class="content">
		<view v-if="guideShow">
			<u-image :src="img" :height="guideHeight"></u-image>
			<u-button :custom-style="customStyle" shape="circle" class="jump-over" @click="handleGo" size="mini">跳过 {{countdown}}</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				customStyle:{
					color:"#ffffff",
					backgroundColor: 'rgba(0, 0, 0,0.4)'
				},
				guideShow:true,
				guideHeight:0,
				img:'https://szsq.nxzhsq.cn/community/miniofile/app/guide.png',
				countdown:3,
				timeout:null,
				timer:null,
			}
		},
		onLoad() {
			this.getImg()
			this.guideHeight = uni.getSystemInfoSync().windowHeight * ( 750 / uni.getSystemInfoSync().windowWidth);
			this.init();
		},
		methods: {
			getImg(){
				if(!this.$isEmpty(uni.getStorageSync("guideImg"))){
					this.img=uni.getStorageSync("guideImg")
				}
			},
			/**
			 * 下载图片
			 */
			downloadFile(){
				let that=this
				uni.downloadFile({
				    url: 'http://139.9.103.171:1888/img/image/guide.png', //仅为示例，并非真实的资源
				    success: (res) => {
						uni.saveFile({
							 tempFilePath: res.tempFilePath,
							 success: function (res) {
							   var savedFilePath = res.savedFilePath;
							   that.img=savedFilePath
							   uni.setStorage({
							   	key:"guideImg",
								data:savedFilePath
							   })
							 }
						});
				    }
				});
			},
			init() {
				this.timeout = setTimeout(function () {
					this.guideShow = false;
					uni.reLaunch({
						url:"/pages/index/index?isFlush=true"
					})
				},3500)
				this.timer = setInterval(() =>{
					this.countdown--;
					if(this.countdown === 0) {
						clearInterval(this.timer);
					}
				}, 1000);
			},
			handleGo(){
				clearInterval(this.timer);
				clearTimeout(this.timeout);
				uni.showLoading({
				    title: '加载中'
				});
				setTimeout(function () {
				  uni.hideLoading();
					this.guideShow=false
					uni.reLaunch({
						url:"/pages/index/index?isFlush=true"
					})
				}, 500);
			},
		}
	}
</script>

<style>
	 page,
	 .content{
	 	width: 100%;
		height: 100%;
	 	background-size: 100% auto ;
	 	padding: 0;
	 }
	 .jump-over{
	 	position: absolute;
		right: 30rpx;
		bottom: 200rpx;
		z-index: 999;
	 }
</style>