1. public index.html 引入js:
<script src="https://static.geetest.com/static/tools/gt.js"></script>
2.在需要的.vue中的data 中声明相应参数
codeParams:{
product: 'bind',
https:false,
success:'',
gt:'',
challenge:'',
new_captcha:''
},
3. 获取验证码参数
getCodeParams(){
var round = parseInt(Math.random()*10+1);
this.$get('xxx',{code:round}).then((res)=>{ //这是后台获取极限验证码的接口
if(res.success==1){
this.codeParams.success = res.success
this.codeParams.gt = res.gt
this.codeParams.challenge = res.challenge
this.codeParams.new_captcha = res.new_captcha
initGeetest(this.codeParams,this.getCode);
}
})
},
4.获取验证码
getCode(captchaObj){
let vm = this;
if(document.getElementById('numberCodes')){
document.getElementById('numberCodes').addEventListener('click', function () {
let handleTelBlur = vm.handleTelBlur();
if (handleTelBlur) {
if(vm.telPhone.indexOf('@') > -1){
vm.$get('xxx',{keyWordType:2,email:vm.telPhone}).then((response)=>{
if(response.enterpriseStatus == 0){
Toast('邮箱未注册',2);
return false;
}else{
captchaObj.verify(); //正常情况
}
})
}
}
});
captchaObj.onSuccess(function () {
if(vm.telPhone.indexOf('@') > -1){
vm.$post('xxxx',{email:vm.telPhone,codeType:1}).then((response)=>{
})
}
vm.showGetCodeBtn = false;
var timer = setInterval(function(){
vm.time -- ;
if(vm.time<=0){
vm.time = 60;
vm.showGetCodeBtn = true;
clearInterval(timer);
vm.codeMobileValue = "重新发送"
}
},1000)
})
}
},
5.初始化
created(){
this.getCodeParams();
},
