看代码:

<p>
    <img src="../../assets/chengsetanhao-icon.png" style="margin-right:0.05rem;">
    请在
    <span>{{minute}}:{{second}}</span> 分钟内完成支付,否则将取消订单!
</p>

export default {
  data() {
    return {
      minutes: 5,
      seconds: 0
    };
  },
  mounted() {
    this.add();
  },
  methods: {
    // 倒计时
    num: function(n) {
      return n < 10 ? "0" + n : "" + n;
    },
    add: function() {
      var _this = this;
      var time = window.setInterval(function() {
        if (_this.seconds === 0 && _this.minutes !== 0) {
          _this.seconds = 59;
          _this.minutes -= 1;
        } else if (_this.minutes === 0 && _this.seconds === 0) {
          _this.seconds = 0;
          window.clearInterval(time);
        } else {
          _this.seconds -= 1;
        }
      }, 1000);
    },
    goBack() {
      this.$router.back();  //返回上一页
    }
  },
  watch: {
    second: {
      handler(newVal) {
        this.num(newVal);
      }
    },
    minute: {
      handler(newVal) {
        this.num(newVal);
      }
    }
  },
  computed: {
    second: function() {
      return this.num(this.seconds);
    },
    minute: function() {
      return this.num(this.minutes);
    }
  }
};

还有一个倒计时结束后跳转到指定页面的写法

<p class="success_psd_dv_time">{{time}}秒后跳转到个人信息页面</p>


<script>
export default {
   data() {
    return {
       time:0,
    };
  },
  mounted() {
    let THIS=this;
    THIS.time=2;
    setInterval(THIS.countDown,1000);
  },
  methods:{
     countDown(){
      let THIS=this;
      THIS.time--;
    }
  },
//监听事件
  watch:{
    'time':function(newVal,oldVal){
          if(newVal==0){
            this.$router.push('/Personal_details'); //跳转到指定页面
          }
    }
  } 
}
</script>

感谢百度找到的各位大神的帮助!

Logo

前往低代码交流专区

更多推荐