订单支付倒计时(实时)(Vue + Vant)

1.创建订单

此处省略200字.......0.0

2.查看订单详情

此处又省略200字......0.0

3.上正题

此处就随便贴一下吧，哈哈

<div class="stayPayTime">
  <div class="stayPayTime-left">
    <img src="../../assets/img/待支付.png" alt="" />
  </div>
  <div class="stayPayTime-right">
    <p>等待买家付款</p>
    <p class="gray">
      请于
      <van-count-down
        ref="countDown"
        class="timer"
        @finish="finish"
        :time="time"
        format="mm 分 ss 秒"
      >
        <template #default="timeData">
          <span class="block">{{
            timeData.minutes < "10" ? "0" + timeData.minutes : timeData.minutes || "~"
          }}</span>
          <span class="colon">:</span>
          <span class="block">{{
            timeData.seconds < "10" ? "0" + timeData.seconds : timeData.seconds || "~"
          }}</span>
        </template> </van-count-down
      >内付款，超时订单将自动关闭
    </p>
  </div>
</div>

设置订单开始倒计时的时间(毫秒数)

    return {
      time: 1 * 60 * 1000 //初始值
    }
  },

就这样一段简单的代码想了很久，虽然丢人啊，但还是做个记录吧！

countTime() {
      var date = new Date(); //每次进入当前订单详情页面的时间
      var now = date.getTime(); //将当前时间转化为vant组件倒计时能固定识别的毫秒数
      
      //创建订单的时间格式处理
      var createDate = new Date(创建订单的时间);
      var create = createDate.getTime();
      
      //时间差(倒计时一小时) = 创建订单时间 + 设置的倒计时时间 - 当前进入页面的最新时间
      var diffTime = create + 60 * 60 * 1000 - now; 
      this.time = diffTime;
      
      //这里是在判断是都到点了，到点了就自动去调用对应改变状态的接口，没到点就继续倒计时呗
      if (this.time < 0 && this.$route.query.status == 1) {
        // this.cancelOrder();
        clearTimeout(this.countTime);
      } else {
        setTimeout(this.countTime, 1000);
      }
    },

最后贴一下效果吧

本文章硬度不够，纯作为个人笔记，不喜勿喷。。。 It's over