vue 项目中引入极限验证

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();

    },