功能点:
1.60s倒计时功能
2.调用后台短信接口
<!--公用的发送短信模块 -->
<template>
<span class="yanzhengcode" @click="getPhoneCode()" :disabled="BtnSms">{
{
smsTip}}</span>
</template>
<script>
import LoginApi from "@/api/platform/login.js"; //自己封装的api接口,可以将下面的网络请求接口都改成自己的
export default {
props: {
phoneNum: {
type: String,
default: ""
},
type: {
type: Number,
default: 1
},
isCheck: {
type: Boolean,
default: false
},
isNew: {
type: Boolean,
default: false
}
},
data() {
return {
count: 60, //当前倒计时
BtnSms: false, //控制验证码按钮是否可用
timer: "", //定时器名称
smsTip: "获取验证码" //验证码文本
};
},
methods: {
//获取手机验证码
getPhoneCode: function() {
if (!/^1[3456789]d{9}$/.test(this.phoneNum)) {
uni.showToast({
title: 请检查手机号是否填写正确!,
icon:none
})
} else {
if (this.isCheck) {
this.checkPhone();
} else {
this.getSmsCode();
}
}
},
/**
* 检测手机是否可用
*/
checkPhone: function() {
var thisApp = this;
LoginApi.checkPhone(thisApp.phoneNum)
.then(response => {
if (response.data.state == 0) {
if (thisApp.isNew) {
thisApp.getNewSmsCode();
} else {
thisApp.getSmsCode();
}
} else {
uni.showToast({
title: 手机号已存在!,
icon:none
})
}
})
.catch(error => {
console.log(error);
});
},
/**
* 获取手机验证码
*/
getSmsCode: function() {
var thisApp = this;
LoginApi.getPhoneCode(thisApp.phoneNum, thisApp.type)
.then(response => {
if (response.data.state == 1) {
this.countDownTimer();
}
uni.showToast({
title: response.data.message
})
})
.catch(error => {
console.log(error);
});
},
/**
* 获取新的手机验证码
*/
getNewSmsCode: function() {
var thisApp = this;
LoginApi.getNewPhoneCode(thisApp.phoneNum, thisApp.type)
.then(response => {
if (response.data.state == 1) {
this.countDownTimer();
}
uni.showToast({
title: response.data.message
})
})
.catch(error => {
console.log(error);
});
},
//获取验证码倒计时
countDownTimer: function() {
this.BtnSms = true;
this.smsTip = this.count + "秒后重新获取";
this.timer = setInterval(() => {
this.count -= 1;
if (this.count > 0) {
this.smsTip = this.count + "秒后重新获取";
} else {
this.BtnSms = false;
this.smsTip = "获取验证码";
this.count = 60;
clearInterval(this.timer);
}
}, 1000);
}
}
};
</script>
<style>
.loginright_btn {
width: 98px;
height: 36px;
border-radius: 4px;
background-color: rgba(140, 0, 255, 1);
color: #fff;
position: absolute;
border: 0;
right: 4px;
top: 14px;
text-align: center;
text-decoration: none;
line-height: 24px;
font-size: 13px;
}
.el-table {
padding: 0;
}
</style>
