vue 微信录音倒计时_vue中倒计时的用法

后台传递过来创建时间，前端进行倒计时十分钟，十分钟之后更改订单状态 把待支付改为过期或者其他 来验证订单状态

{{text}} {{Countdown(record.countDown)}}

//订单状态(未提交)　　　　　　　　　　　　　　　　　　　　　将毫秒数转化为分+秒

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[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

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

},