目录

uniapp微信小程序启动页广告每天显示一次

目录

uniapp微信小程序启动页广告(每天显示一次)

<template>
	<view class="viewpager__-wrapper">
		<u-swiper
			:list="list6"
			@change="e => currentNum = e.current"
			:autoplay="true"
			height="100%"
			indicatorStyle="right: 20px">
			<view slot="indicator" class="indicator-num">
				<text class="indicator-num__text">{{ currentNum + 1 }}/{{ list6.length }}</text>
			</view>
		</u-swiper>
		<view class="viewpager__-time l-box-pf-t" v-if="countDown!=0">
			{{countDown}}后自动关闭
		</view>
		<view class="viewpager__-button l-box-pf-b" v-if="currentNum == 2">
			<u-button type="success" text="立即体验" @click="handleIndex"></u-button>
		</view>
	</view>
</template>

<script>
const app = getApp()

    export default {
    	name:"viewpager",
    	data() {
    		return {
    			currentNum: 1,
    			bannerList:[],
    			list6: [],
    			countDown: 0,
    			timerThree: null,
    			_temp:''
    		};
    	},
    	created() {
    	},
    	onLoad() {
    		this.test()
    	},
    	methods:{
    		test(){
                //记录当天时间 存起来
    			const that = this
    			if(!uni.getStorageSync('today')){
    				that.countDownFunc()
    				uni.setStorageSync("today", new Date().toLocaleDateString());
    			} else {
    				let _time = uni.getStorageSync('today')
    				let _today =  new Date().toLocaleDateString()
                    // 第二次进来 如果存起来的时间等于今天的时间  直接进首页
    				if(_time == _today) {
    					uni.switchTab({
    						url: '../index/index'
    					})
    				} else {
                      // 当天时间不等于存起来的时间。重新存今天的时间,请求广告并且展示
    					uni.setStorageSync("today", new Date().toLocaleDateString());
    					that.countDownFunc()
    				}
    			}
    		},
    		getBanner() {
    			let _url =app.globalData.url
    		   	const newUrl = _url.substr(0, _url.length - 1);
    			自己拿广告图的接口().then((res) => {
    				if(res) {
    					this.bannerList = res
    					let arr = []
    					res.forEach(item => {
    						let imgUrl = newUrl + item.picUrl
    						arr.push(imgUrl)
    					});
    					this.list6 = arr
    				}
    			})
    		},
    		countDownFunc(){
    			this.getBanner()
    			const TIME_COUNT = 8;
    			if(!this.timerThree){
    				this.countDown = TIME_COUNT;
    				this.timerThree = setInterval(()=>{
    				if(this.countDown > 0 && this.countDown <= TIME_COUNT){
    					this.countDown--;
    				} else {
    					clearInterval(this.timerThree);
    					this.timerThree = null;
    					uni.switchTab({
    						url: '../index/index'
    					})
    				}
    				},1000)
    			}
    		},
    		handleIndex(){
    			if(this.timerThree){
    				clearInterval(this.timerThree);
    				this.timerThree = null;
    				uni.switchTab({
    					url: '../index/index'
    				})
    			}
    		}
    	}
    }

</script>

<style lang="scss">
.viewpager__{
&-wrapper{
height: 100vh;
}
&-time{top:40px;color: #C4C6C9;left: 20rpx;font-size: 24rpx;}
&-button{bottom: 45px;width: 50%;left: 25%;}
}
.indicator {
@include flex(row);
justify-content: center;

        &__dot {
             height: 6px;
             width: 6px;
             border-radius: 100px;
             background-color: rgba(255, 255, 255, 0.35);
             margin: 0 5px;
             transition: background-color 0.3s;

            &--active {
                 background-color: #ffffff;
             }
        }
    }

    .indicator-num {
        padding: 2px 0;
        background-color: rgba(0, 0, 0, 0.35);
        border-radius: 100px;
        width: 35px;
        @include flex;
        justify-content: center;

        &__text {
             color: #FFFFFF;
             font-size: 12px;
         }
    }

</style>