基于element-ui实现待支付订单显示定时器

基于element-ui实现待支付订单显示定时器

表格显示内容：

<el-table-column label="订单状态" prop="state" align="center">
    <template slot-scope="scope">
         {{ _orderState[parseInt(scope.row.state)] }}
         <br>
         <span style="color: #f10215" v-if="scope.row.state===1 && scope.row.ext.isPreOrderPaid !== true">{{timeObj[scope.row.orderNo]}}</span>
     </template>
</el-table-column>

data中定义：

timeObj:{},

1、init()函数获取表格数据(dataList)后：

if(this.dataList){
    let that = this;
    this.dataList.forEach(elem =>{
        // 判断是否是待支付订单
        if(elem.state === 1 && elem.ext.isPreOrderPaid !== true){
            // 传递创建时间和订单编号参数
            that.deadLine(elem.createTime,elem.orderNo);
        }
    })
}

2、周期性执行状态函数

deadLine(createTime,id){
    let that = this;
    let interval = setInterval(() =>{
        that.countTime(createTime,id,interval)
    },1000)

},

3、过期的数据改变状态为’已过期’

async countTime(createTime,id,interval) {
    let startTime = this.$formatIntValue(createTime);
    let nowTime = Date.parse(new Date()) / 1000;   // 当前时间时间戳 精确到秒
    let endTime = startTime + 30 * 60;   // 结束时间戳
    let downTime = (endTime - nowTime) > 0 ? (endTime - nowTime) : 0;
    let that = this;
    if (downTime <= 0) {
        clearInterval(interval);
        that.timeObj = {}
        let params = {
            orderNo: id
        };
        // 调用接口改变订单状态(此处可以和后端协商：后端也用定时器到期后改变订单状态，这样就无需调用接口改变状态，也无需调用接口刷新表格数据，前端遍历表格数据将该订单状态改为过期即可)
        let res = await this.$api('Order.CancelOrder', params);
        // 刷新表格数据
        if(res) {that.init()};
        //超时 事件处理
    } else {
        downTime--;
        let min = Math.floor(downTime % 3600)
        let val = that.$formatBit(Math.floor(downTime / 3600)) + ':' + 	that.$formatBit(Math.floor(min / 60)) + ':' + that.$formatBit(downTime % 60);
        //响应式修改数据，确保数据改变时视图同步更新
        this.$nextTick( async ()=>{
            this.$set(that.timeObj,id,val)
        })
    }
},

说明：
$formatIntValue是自己封装的函数，用于将数据转为整型
$formatBit用于将1位数补0，如：1–>01

Vue.prototype.$formatBit = function (val) {
    val = +val
    return val > 9 ? val : '0' + val
}

注：原创代码，可能存在性能问题，有需要者可自行优化