vue中倒計時的用法

后台傳遞過來創建時間，前端進行倒計時十分鍾，十分鍾之后更改訂單狀態 把待支付改為過期或者其他 來驗證訂單狀態

 

 <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
            },