vue手机验证倒计时

效果图：

1.htmli

<van-form>
  <van-field
    v-model="userphone"
    name="手机号"
    label="新手机号"
    placeholder="请填写手机号"
  />
<van-field
  v-model="sms"
  center
  clearable
  label="短信验证码"
  placeholder="请输入短信验证码"
>
  <template #button>
    <van-button size="small" color='#FC705C' @click="obtain(60)" v-show="isShowBtn">获取验证码van-button>
    <van-button size="small" color='#cccccc'  v-show="isShareCount">
      <span id="showtimes">span>
      <span>s后重试span>
    van-button>
  template>
van-field>
  <div style="margin: 59px;">
        <van-button
          round
          block
          type="info"
          native-type="submit"
          @click="submitbutton()"
          style=" font-size:18px;background: linear-gradient(27deg, #fc5c56 0%, #fb9867 100%);border:0"
        >提      交
        van-button>
  div>
van-form>

2.js

import { Dialog, Toast } from 'vant';
const myreg=/^((13[0-9])|(17[0-1,6-8])|(15[^4,\\D])|(18[0-9]))\d{8}$///手机号正则
export default {
  data() {
    return {      
      userphone:'',//手机号码
      sms:'',//验证码输入
      validationcode: '',//验证码后台返回
      fang: require("../assets/qita/fang.png"),     // 图
      isShareCount: false,//显示秒数
      isShowBtn: true, //开始按钮
    };
  },
  methods: {
    // 获取验证码
    obtain(countdown) {
var phone=this.userphone.replace(/\s/g, "");//去除空格
  if(myreg.test(phone)){
    if(localStorage.getItem('showtimes')){
      Toast.fail('操作过于频繁请60s后重试')
    }else{
      this.apiPost("user/send_sms_code", {
          mobile: this.userphone,
          type: 1,
      })
        .then(res => {
          console.log(res);
        this.validationcode=res.data.code
        let errmsg=res.errmsg
        if(res.errcode==1000){
        this.showTime(countdown)//countdown 60秒
        }
        })
        .catch(err => {
        console.log(err);
        });
    }
}else{
  Toast('请输入正确手机号')
}
    },
  // 显示秒数
    showTime(countdown){
        let self = this;
        self.isShowBtn = false;
        self.isShareCount = true;
        if (countdown == 0) {
            self.isShareCount = false;
            self.isShowBtn = true;
            localStorage.removeItem('showtimes');
        } else {
            countdown -= 1;
            setTimeout(function () {
                self.showTime(countdown);
            }, 1000);
            localStorage.setItem('showtimes',countdown)
        }
        document.getElementById('showtimes').innerHTML = localStorage.getItem('showtimes');
    },
    // 提交
    submitbutton(){
      var phone=this.userphone.replace(/\s/g, "");//去除空格
      if(myreg.test(phone)&& this.sms==this.validationcode && this.sms!=''){
      this.apiPost("/user/binding_mobile", {
          mobile: String(phone),
          code: String(this.sms),
      })
        .then(res => {
          console.log('绑定成功',res.data);
        Toast.success('绑定成功');
          setTimeout(
            ()=>{
                  this.$router.push({
                  name: "personal"
                });
            },1000
          )
        })
        .catch(err => {
          console.log('绑定失败',err);
          Toast.fail('绑定失败');
        });
      }else if(this.sms!=this.validationcode || this.sms==''){
        Toast('请输入正确验证码')
      }else{ Toast('请输入正确手机号')}
     
    },
    }