<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;
}