需求描述:在某个页面,当用户点击 按钮 时,如果用户没有登录,则 3 秒后自动跳转到登录页面
思路:
1.判断用户有没有进行登录,如果没有登录,那么就调用this.delayTime()这个方法
2.首先写一个展示弹框的方法 this.showTips()
3.在this.delayTime()里面进行延时器以及页面跳转的操作
// 如果没有token,则判断用户是没有登录的,调用this.delayTime()
if(!this.token) return this.delayTime()
2.实现倒计时跳转功能的方法
data() {
return {
time: 3, // 倒计时的秒数
timeId: null // 定时器ID
};
},
methods: {
// 专门用来展示倒计时以及页面跳转的方法
delayTime() {
// 1.每次点击结算,都需要将倒计时秒数还原
this.time = 3
// 2.展示倒计时弹框
this.showTips(this.time)
// 3.使用setInterval 实现倒计时
this.timeId = setInterval(() => {
// 3.1 秒数每次减1
this.time -= 1
// 3.3 做一个判断,如果秒数为0的话清除定时器
if(this.time <= 0) {
clearInterval(this.timeId)
// 3.4 进行页面跳转
uni.switchTab({
url:'/pages/my/my'
})
return
}
// 3.2 定时器每循环一次调一次弹窗
this.showTips(this.time)
},1000)
},
// 弹窗方法
showTips(n) {
// 调用 uni.showToast() 方法,展示提示消息
uni.showToast({
icon:'none', // 不展示任何图标
duration:1500, // 1.5 秒后自动消失
mask:true, // 为页面添加透明遮罩,防止点击穿透
title:'请登录后再结算!' + n + ' 秒后自动跳转到登录页',
})
}
}