业务场景
我在做自助机入住的业务的时候,有这样的一个情况,用户在没一个页面都需要自己操作,例如:预定,刷身份证,输入订单号,人脸识别等等操作,每一个页面都需要一定的时间进行操作,但是会有一种情况,刷身份证的时候,我是页面进来的时候就通知安卓调取硬件的信息,进行身份识别,这个时候安卓那边会告诉我有没有读取成功,如果没有我继续发送读取的请求,在机器没有故障的情况下,直到读取成功才停止,但是如果客户今天没有拿身份证呢?他走了,因为是自助机,所以是没有服务员的,那么如果有素质的顾客是会直接点击回到主页就走的,这样不会影响别的客户使用,那么如果他没有点击,那么就会一直请求按照调取硬件识别身份证的操作,这样显然是不行的,所以我需要做的是每一个页面进来的时候就开始计时90秒,如果90秒以内客户还没有操作结束,我就认为他不再操作了,直接返回到主页。今天就简单的记录一下我实现的过程!
首先,由于是每一个页面都会用到这个计时器,所以我直接写到公共的组价里面,然后在每一个页面里面引入,这里直接记录计时器的实现过程,具体怎么引入以后再写。毕竟我还不是很熟写公共组件,就不班门弄斧了,熟悉了会单独更新这方面的知识!
代码实现
<script>
export default {
name: "return",
data(){
return {
//计时 90秒
seconds_timeout : 90,
time : '',
}
},
/**
* @created 页面加载的时候进行页面自减函数的间隔执行操作
*/
created : function () {
let that = this;
that.time = setInterval(that.remain_sec,1000)
},
methods:{
/**
* @remain_sec 进行秒数自减的操作
*/
remain_sec(){
let that = this;
if(that.seconds_timeout === 0){
that.$router.push({path:'/'});
}else{
that.seconds_timeout--;
}
},
back(){
this.$router.go(-1);//返回上一层
}
},
/**
* @beforeDestroy 页面销毁前,将Interval清除
*/
beforeDestroy : function () {
let that = this;
clearInterval(that.time);
}
}
</script>
PS:这里需要注意的是在页面销毁前一定要将计时器清除,不然这个计时器在整个流程中只会进行一次计时。