后台传递过来创建时间,前端进行倒计时十分钟,十分钟之后更改订单状态 把待支付改为过期或者其他 来验证订单状态
<template slot-scope="text, record" slot="status"> <span :class="tostatusclass(text)">{{text}} <br> <label v-if="record.countDown > 0">{{Countdown(record.countDown)}}</label></span>
//订单状态(未提交) 将毫秒数转化为分+秒
</template>
this.$axios.post(‘url‘,this.orderData, { headers:{ ‘token‘:localStorage.getItem(‘token‘) } }).then(res=>{ //我们在请求过来后台数据中就先处理时间 let times = Date.parse(new Date()) //当前时间,本来应该由后台传回服务器时间,但是后台没有传,暂时已浏览器本机时间来计算 let expires = 10*60*1000 //有效时长,默认是10分钟,本来应该由后台给出,但是后台没给,暂时写死 for ( let i = 0 ; i<res.data.results.rows.length ; i++){ res.data.results.rows[i].countDown = 0 //在rows里面添加一个属性 cuntDown来计算两个时间之间的差值 if(res.data.results.rows[i].orderStatus =="待支付"){ res.data.results.rows[i].countDown = expires - (times - res.data.results.rows[i].createTime) //当前时间减去创建时间 得到差值 十分钟减去差值 差值小于0 订单已过期 if(res.data.results.rows[i].countDown < 0){ res.data.results.rows[i].orderStatus = "过期" //此处可以修正后端没有及时设置为已过期的问题 } } } this.data=res.data.results.rows if(this.interval){ //判断定时器这个属性是否为空,存在则清除 clearInterval(this.interval) } this.interval = setInterval(() => { //这个interval是在data(){return{}} 中创建,初始化为null 防止重复请求到这个页面定时器重复生成 for ( let i = 0 ; i<this.data.length ; i++){ if(this.data[i].orderStatus =="待支付"){ this.data[i].countDown = this.data[i].countDown - 1000 //data.countDown 这个新属性上面更改,不会影响视图层 if(this.data[i].countDown < 0){ this.data[i].orderStatus = "过期" //倒计时结束后设置过期 } } } }, 1000);
相应的处理函数
Countdown(time) { //将传递过来的时间戳差值转化为时分形式 let ts = time let days = parseInt(ts / (1000 * 60 * 60 * 24)); let hours = parseInt((ts % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); let minutes = parseInt((ts % (1000 * 60 * 60)) / (1000 * 60)); let seconds = (ts % (1000 * 60)) / 1000; let str = `${seconds}秒`; if(minutes > 0){ str = `${minutes}分钟${seconds}秒` } return str },
原文:https://www.cnblogs.com/6909ye/p/10710245.html