js实现获取验证码倒计时

框架：vue + vuex
效果图：

代码实现：

<template>
  <div class="container">
	
	<x-header style="background-color:#30A2F4;">城市服务</x-header>
	
    <div class="common"></div>
	
    <group>
	  <x-input title="手机号 "   v-model="phone"></x-input>
	</group>
	
	<group>
      <x-input title="验证码" class="weui-vcode" v-model="authcode">
        <x-button class="btn" @click.native="getCode" :disabled="isdisabled" slot="right" type="primary" mini>{{codeText}}</x-button>
      </x-input>
    </group>
	
    <div class="paydiv">
        <x-button class="btn" @click.native="confirmPay" type="primary">确定</x-button>
    </div>
	
  </div>
</template>

<script>
import { XInput, Group, XButton,XHeader } from 'vux'
import Tools from '../utils/Tools'
export default {
  name: 'OrderInfo',
  components: {
    Tools,
    XInput, 
    XButton,
	XHeader,
    Group
  },
  data () {
    return {
		phone: '',
		isdisabled: false,
		codeText: '获取验证码',
		authcode: '123456'
    }
  },
  mounted: function (params) {
  },
  methods:{
      confirmPay:function (params) {
        console.log('click confirmPay');
        this.$router.push('/result')
      },
	  getCode:function (e){
		console.log("获取验证码");
		this.setTime();
	  },
	  setTime:function (){
		let time = 60;
		let i = 0;
		let that = this;
		//1.在60秒之内，button上倒计时60秒，并显示
		//2.向controller请求验证码，并发送到指定的手机号上面
		let set = setInterval(function() {
			that.codeText = (--time)+"秒后重发";
			i++;	
			//此变量用于标识只调用一次获取验证码的函数
			if (i==1) {
				console.log("get code start1 ... ");
				//使获取验证码按钮不可点击
				that.isdisabled=true
				that.getVerificationCode();
			}
		}, 1000);
		
		//60秒之后需要做的事情
		setTimeout(function() {
			//恢复获取验证码按钮可点击
			that.isdisabled=false
			that.codeText = "获取验证码";
			clearInterval(set);//清除计时器
		}, time * 1000); //60000  
	  },
	  getVerificationCode: function(){
	  	//向服务器获取验证码
		  console.log("get code start2 ... ");
	  }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.container{
    width: 100%;
}
.common{
    margin-top: 15px;
}
.paydiv{
    width: 94%;
    margin-top: 20%;
    padding-left: 3%;
    padding-right: 3%;
}
.btn{
	background-color: #30A2F4;
}
.btn:active { 
	background-color: #30A2F4;
} 
</style>