ec.uniapp-master/pages/index/openScreenAd/openScreenAd.vue

<template>
	<view class="content">
		<lf-nav bgColor="transparent" :spreadOut="false" @changeHeight="e => head_height = e"></lf-nav>
		<block v-if="$isRight(full)">
			<image class="img" :src="full.image" @click="clickAd"></image>
			<view class="tips" @click="next" :style="{top: 'calc('+ head_height +'px + 10rpx)'}">跳过 {{ num }}s</view>
		</block>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				num: 5,
				timer: null,
				full: {},
				head_height: 0
			}
		},
		onLoad(){
			this.getAd();
		},
		onUnload(){
			if(this.timer){
				clearInterval(this.timer);
				this.timer = null;
			}
		},
		methods: {
			getAd(){
				this.$http.get({
					api: 'api/ad'
				}).then(res => {
					this.full = res.data.data.full;
					if(this.$isRight(res.data.data.full)){
						this.num = Number(res.data.data.full.duration) || 5;
						this.startTime();
					}else{
						this.next();
					}
				}).catch(rej => {
					this.next();
				})
			},
			startTime(){
				this.timer = setInterval(() => {
					this.num--;
					if(this.num <= 0){
						clearInterval(this.timer);
						this.timer = null;
						this.next();
					}
				}, 1000);
			},
			next(){
				this.$url('/pages/index/index/index', {type: 'redirect'});
			},
			clickAd(){
				this.$url(this.full.url, {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%;
			position: absolute;
			z-index: 9;
		}
		.tips{
			position: absolute;
			right: 32rpx;
			// top: 132rpx;
			// top: 10vh;
			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;
			z-index: 999;
		}
	}
</style>