1.只有待付款的订单启用倒计时，避免频繁请求接口

陶杰

2024-12-18 6f7d07bad2b1af2664f3190bb3e92b0819c46864

1.只有待付款的订单启用倒计时，避免频繁请求接口

 pages/order/order.vue

@@ -46,53 +46,18 @@
            this.query.status = options.status || ''
            this.listApi = `/api/customer/order/list`
            await this.getList()

            console.log('order-list-query',this.query.status)
            if(this.query.status=='PENDING'){
                this.getPendingTimer()
            }
            
            this.timer = setInterval(async () => {
				
                let res = await this.$http.request('get', `/api/order/time/now`, {
                    params: {}
                })
                let serverTime=res.data;
				
                //倒计时
                var nowdate = serverTime - 1000 * 60 * 15
                // var nowdate = new Date().getTime() - 1000 * 60 * 5
                var change = false
                for (var item of this.list) {
                    if (item.statusBackend === 'PENDING') {
                        //计算倒计时
				
                        var diff = new Date(item.createTime).getTime() - nowdate
                        // console.log('diff', diff, item)
                        if (diff <= 2000 && true) {
                            //超过了5分钟
                            item.statusBackend = 'CANCEL'
                            item.statusBackend = '已取消'
                            item.status = 'CANCEL'
                            item.statusStr = '已取消'
        },

                            item.bctime = ''
                            change = true

                        } else {
                            //相差
                            var alltime = parseInt(diff / 1000)
                            var tt = 0
                            if (alltime > 60) {
                                tt = alltime - parseInt(alltime / 60) * 60
                            } else {
                                tt = alltime
                            }
                            // item.bctime = `0${parseInt(alltime / 60)}:${tt<10?'0':''}${tt}`
                            item.bctime = `${parseInt(alltime / 60) < 10 ? '0' : ''}${parseInt(alltime / 60)}:${tt < 10 ? '0' : ''}${tt}`
                            change = true

                        }
                    }
                }
                if (change)
                    this.$forceUpdate()
            }, 1000)
        onShow() {
            // console.log("onshow")
        },
        onReachBottom() {
            this.getMore()
@@ -104,6 +69,69 @@
        },
        methods: {

            changeStatus(item) {
                this.query.status = item.value || '';
                this.refreshList();
                if(item.value=='PENDING'){
                    this.getPendingTimer()
                }else{
                    if(this.timer){
                        clearTimeout(this.timer)
                        this.timer=null
                    }
                }
				
            },

            getPendingTimer(){

                this.timer = setInterval(async () => {
				
                    let res = await this.$http.request('get', `/api/order/time/now`, {
                        params: {}
                    })
                    let serverTime=res.data;
					
                    //倒计时
                    var nowdate = serverTime - 1000 * 60 * 15
                    // var nowdate = new Date().getTime() - 1000 * 60 * 5
                    var change = false
                    for (var item of this.list) {
                        if (item.statusBackend === 'PENDING') {
                            //计算倒计时
					
                            var diff = new Date(item.createTime).getTime() - nowdate
                            // console.log('diff', diff, item)
                            if (diff <= 2000 && true) {
                                //超过了5分钟
                                item.statusBackend = 'CANCEL'
                                item.statusBackend = '已取消'
                                item.status = 'CANCEL'
                                item.statusStr = '已取消'

                                item.bctime = ''
                                change = true

                            } else {
                                //相差
                                var alltime = parseInt(diff / 1000)
                                var tt = 0
                                if (alltime > 60) {
                                    tt = alltime - parseInt(alltime / 60) * 60
                                } else {
                                    tt = alltime
                                }
                                // item.bctime = `0${parseInt(alltime / 60)}:${tt<10?'0':''}${tt}`
                                item.bctime = `${parseInt(alltime / 60) < 10 ? '0' : ''}${parseInt(alltime / 60)}:${tt < 10 ? '0' : ''}${tt}`
                                change = true

                            }
                        }
                    }
                    if (change)
                        this.$forceUpdate()
                }, 1000)
            },

            openbrand(item) {
                console.log(item)
@@ -447,11 +475,20 @@
            </view>
        </view>
        <view class="status-list m-t-12 flex flex-wrap-normal">
            <view v-for="each of status" :key="each.value" @click.stop="(e)=>{
            <!-- <view v-for="each of status" :key="each.value" @click.stop="(e)=>{
              query.status = each.value || '';
              refreshList();
              if(query.status!='PENDING'){
                timer && clearTimeout(this.timer)
                timer=null
              }else{
                getPendingTimer()
              }
            }" class="status-each" :class="[query.status===each.value?'cur':'']">
                {{ each.name }}
            </view> -->
            <view v-for="each of status" :key="each.value" @click.stop="changeStatus(each)" class="status-each" :class="[query.status===each.value?'cur':'']">
                {{ each.name }}
            </view>
        </view>
        <no-data v-if="!list||list.length===0" style="width: 100%;" class="m-t-12"></no-data>