vue--获取手机短信验证码

1、初始化秒:

	return {
        //初始值
        show: 'false',
        count: '',
        }

2、页面中:


        
        获取验证码 
        {{count}}s后重试 

接口调用:

      // 获取短信验证码
      getCode() {
        if(this.validatePhone()){
          this.vaTime()
          let params={phone:this.form.phone}
          sendCode(params).then(res => {
            if(res.code===200){
              this.$message({
                message: '验证码已发送成功',
                type: 'success'
              });              
            }
						}).catch((error) => {
            console.log(error)
          })
        }
      },
      // 判断手机号是否合法
      validatePhone(){
       if(!this.form.phone) {
        this.$message({
          message: '手机号码不能为空',
          type: 'error'
          });
       } else if(!/^1[3|4|5|7|8][0-9]\d{8}$/.test(this.form.phone)) {
          this.$message({
            message: '请输入正确是手机号',
            type: 'error'
            });
       } else {
        return true
       }
      }, 
      // 验证码倒计时
      vaTime(){
        this.count = 120;
        this.show = false;
        let timer=0
        timer = setInterval(() => {
          if (this.count > 0 && this.count <= 120) {
            this.count--;
          } else {
            this.show = true;
            clearInterval(timer);
            timer = 0;
          }
        }, 1000);
      },
			// 提交
			handSubmit() {
				this.$refs.form.validate(valid => {
					if (valid) {
            // 验证码校验
            let params={
              code:this.form.code,
              number:this.form.phone
            } 
            //后台接口校验验证码
            checkCode(params).then(res => {
              if(res.code===200){ 
                this.loading = true;
                // 所有信息提交
                 pmadApplyRecord (this.form).then(res => {
                  console.log(res)
                  this.loading = false;
                  this.show = true;
                   this.$message({
                     message: '信息提交成功',
                     type: 'success'
                   });
                  this.open= false;
                  }).catch(() => {
                  this.loading = false;
                })          
              }else if(res.code===500){
                this.$message({
                  message: '验证码错误,请输入正确的验证码',
                  type: 'error'
                });              
              }
              }).catch((error) => {
                console.log(error)
            })
					}
				});
			}

你可能感兴趣的:(前端)