1. 程式人生 > >vue中倒計時的用法

vue中倒計時的用法

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中倒計時的用法