获取短信验证码

<template>
  <div>
    <el-form :model="schoolForm" ref="schoolForm" class="demo-ruleForm design" enctype="multipart/form-data"
      method="post">
      <el-form-item label="负责人手机" :label-width="formLabelWidth" prop="chargeTel">
        <el-input v-model="schoolForm.chargeTel" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="验证码" :label-width="formLabelWidth">
        <el-input v-model="schoolForm.code" autocomplete="off"></el-input>
        <el-button type="info" plain @click="sendMsg()" :disabled="sendDisabled">{{btnTxt}}</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import {
    getsendMsg
  } from '@/api/school'
  export default {
    //自定义事件
    components: {},
    data() {
      return {
        formLabelWidth: '120px',
        time: undefined,
        sendDisabled: false,
        btnTxt: "获取验证码",
        schoolForm: {
          chargeTel:undefined,
          code: undefined,
        }
      };
    },
    //计算属性
    computed: {},
    //监听
    watch: {},
    //方法
    methods: {
      //倒计时方法
      timer() {
        if (this.time > 0) {
          this.time--;
          // console.log(this.time);
          this.btnTxt = this.time + "s后重新获取验证码";
          this.sendDisabled = true
          setTimeout(this.timer, 1000);
        } else {
          this.time = 0;
          this.sendDisabled = false
          this.btnTxt = "获取验证码";
          this.disabled = false;
        }
      },
      sendMsg() {
        this.time = 30
        this.timer(); //调用倒计时方法
        getsendMsg(this.schoolForm.chargeTel, {
          chargeTel: this.schoolForm.chargeTel
        }).then(response => {
          console.log(response)
          localStorage.setItem("code", response.data)
        }, errorCode => {
          this.btnTxt = "获取验证码";
          this.time = 0
          this.$message.error('获取验证码失败')
        })
      },
    },
    beforeCreate() {},
    created() {},
    beforeMount() {},
    //钩子函数
    mounted() {},
    beforeUpdate() {},
    updated() {},
    beforeDestroy() {},
    destroyed() {},
    activated() {},
    //过滤器
    filters: {},
    //自定义指令
    directives: {}
  }
</script>

// 获取验证码
export function getsendMsg(chargeTel, data) {
  return request({
    url: `school/sendMsg/${chargeTel}`,
    method: 'get',
    data
  })
}

controller

    @RequestMapping(value = "/sendMsg/{chargeTel}", method = RequestMethod.GET)
    public ResponseData sendMsg(@PathVariable(value = "chargeTel", required = true) String chargeTel, HttpSession session) {
    ;
    String sendMsg = this.schoolService.sendMsg(chargeTel);
    return ResponseData.success(sendMsg);
}

service
    @Override
    public String sendMsg(String chargeTel) {
    //判断是否是手机号，不是手机号的话抛异常
    if (!ValidateUtil.isPhone(chargeTel)) {
        throw new ServiceException(ApiExceptionEnum.FORMAT_PHONE_ERROR);
    }
    if (!ValidateUtil.isEmpty(chargeTel)) {
        String string = ValidateCodeUtils.generateValidateCode(4).toString();//随机生成验证码
        logger.info("code", string); 
        SMSUtil.sendSMS(chargeTel, string);//阿里短信服务
        return string;
    }
    return null;
}