手机短信验证码

<template>
  <div class="salary-page">
   <van-form>
    <van-field v-model="form.name" label="姓名" placeholder="请输入姓名" clearable required />
    <van-field v-model="form.phone" label="手机号" placeholder="请输入手机号" clearable required />
	<van-field v-model="form.code" center clearable label="验证码" placeholder="请输入验证码" required>
      <template #button>
          <van-button size="mini" type="primary" @click="handleCode">
            <span v-if="show">发送验证码</span>
            <span v-else>{{count}}s后重发</span>
          </van-button>
      </template>    
    </van-field>
  </van-form>
 </div>
</template>

<script>
export default {
  data() {
    return {
       show: true,
       form:{},
       count: 60,
    },
  },
  methods: {
    //表单验证（用promise的方法封装验证，可在页面重复使用）
    validForm() {
      return new Promise((resolve, reject) => {
        if (this.form) {
          if (!this.form.name) {
            this.$notify({ type: "danger", message: "请填写姓名" });
            return;
          }  else if (!this.form.phone) {
            this.$notify({ type: "danger", message: "请输入手机号" });
            return
          } else if (!checkMobile(this.form.phone)) {
            this.$notify({ type: "danger", message: "手机号有误，请重新输入" });
            return
          }
          resolve()
        } else {
          reject()
        }
      })
    },
  	// 短信验证码
    handleCode() {
     this.validForm().then(res => {
        let params = {
          ...this.form,
        }
        //验证码接口
        sendCode({ data: params }).then(res => {
          if (res.code == 0) {
            this.show = false;
            this.timer = setInterval(() => {
              if (this.count <= 0) {
                this.show = true;
                clearInterval(this.timer);
                this.count = 60;
              }
              else {
                this.count--;
              }
            }, 1000);
          } else {
            this.$notify({ type: 'danger', message: res.message });
          }
        })
      }).catch(err => {
        this.$notify({ type: "danger", message: "信息有误" });
      })
    }
    
  }
}

下方是我微信公众号的二维码，可以扫码关注以下，后期博文推送主要在公众号上面，有什么问题也可以通过公众号跟我发消息哦~