ant vue根据支付时间写一个距离48小时以后的倒计时效果

116 阅读1分钟

1.首先获取列表数据的时候,把支付时间pay_time取出来,再写一个倒计时方法

// 获取列表数据
    getList() {
      const { dataType, queryParam, page } = this
      this.isLoading = true
      return Api.list({ dataType, ...queryParam, page })
        .then((response) => {
          // console.log(response.data.date,'服务器时间');
          this.$nextTick(() => {
            response.data.list.data.map((res) => {
              res.disparityTimeStr = ''
              let disparityTime = Date.parse(new Date(res.pay_time)) + 172800000 - response.data.date * 1000 //时间差
              if (disparityTime > 0) {
                res.disparityTime = disparityTime
                this.getDisparityTimeStr(res)
              }
            })
            this.orderList = response.data.list
          })
        })
        .finally(() => {
          this.isLoading = false
        })
    },
     // 倒计时
    getDisparityTimeStr(item) {
      let setTime = setInterval(() => {
        item.disparityTime = item.disparityTime - 1000
        // let day = parseInt((item.disparityTime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60 * 24));
        let hours = parseInt((item.disparityTime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))
        let minutes = parseInt((item.disparityTime % (1000 * 60 * 60)) / (1000 * 60))
        let seconds = parseInt((item.disparityTime % (1000 * 60)) / 1000)
        // console.warn(day);
        item.disparityTimeStr =
          (hours < 10 ? '0' + hours : hours) +
          '小时' +
          (minutes < 10 ? '0' + minutes : minutes) +
          '分' +
          (seconds < 10 ? '0' + seconds : seconds) +
          '秒'
        if (item.disparityTime < 0) {
          // item.disparityTimeStr = '已超时'
          clearTimeout(setTime)
        }
        // console.log(item.disparityTimeStr,'1111111111111111111')
      }, 1000)
      // this.goodsList.map((item,index)=>{
      // })
    },

2.页面显示

<a-tag color="red" v-if="item.disparityTimeStr">
    剩余时间:{{ item.disparityTimeStr }}
</a-tag>