vue中倒計時的用法
阿新 • • 發佈:2019-04-15
this record temp brush new http storage 有效 interval
後臺傳遞過來創建時間,前端進行倒計時十分鐘,十分鐘之後更改訂單狀態 把待支付改為過期或者其他 來驗證訂單狀態
<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 },
vue中倒計時的用法