<template>
	<view class="content">
		<image class="img" src="https://picsum.photos/200" mode="aspectFill"></image>
		<view class="tips" @click="next">跳过 {{ num }}s</view>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				num: 5,
				timer: null
			}
		},
		onLoad(){
			this.timer = setInterval(() => {
				this.num--;
				if(this.num <= 0){
					clearInterval(this.timer);
					this.timer = null;
					this.next();
				}
			}, 1000);
		},
		onUnload(){
			if(this.timer){
				clearInterval(this.timer);
				this.timer = null;
			}
		},
		methods: {
			next(){
				this.$url('/pages/index/index/index', {type: 'redirect'});
			}
		}
	}
</script>

<style>
	page{
		overflow: hidden;
	}
</style>
<style lang="scss" scoped="scoped">
	.content{
		position: relative;
		width: 100vw;
		height: 100vh;
		.img{
			width: 100%;
			height: 100%;
		}
		.tips{
			position: absolute;
			right: 32rpx;
			top: 132rpx;
			width: 144rpx;
			height: 55rpx;
			background-color: rgba(0,0,0,0.5);
			color: #FFFFFF;
			font-size: 26rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 28rpx;
		}
	}
</style>
