<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>
uniapp微信小程序启动页广告(每天显示一次)
最新推荐文章于 2024-07-02 11:00:45 发布