jucai/public/themes/default/views/app/common/ajax/per_login.blade.php

<div class="modal_login_box">
    <!--个人会员登录-->
    <div class="login-box-per-body">
        <div class="login-form">
            <div class="form-l">
                <div class="switch-title">
                    <span class="active" data-type="1">普通账户登录</span>
                    <span data-type="2">手机动态码登录</span>
                </div>
                <!--普通用户登录-->
                <div class="login-type user-login">
                    <form id="form_account" action="{{route('login.account')}}" method="post">
                        <input type="hidden" name="ticket" id="ticket">
                        <input type="hidden" name="bizState" id="bizState">
                        <input type="hidden" name="randstr" id="randstr">
                        {{ csrf_field() }}
                        <div id="account"></div>
                        <div id="message_account"></div>
                        <div class="form-group yhm">
                            <div class="imgbg"></div>
                            <input class="input-login" type="text"  value="" name="account" placeholder="请输入用户名"/>
                        </div>
                        <div id="password"></div>
                        <div class="form-group mm">
                            <div class="imgbg"></div>
                            <input  class="input-login" type="password"  value="" name="password" placeholder="请输入密码"/>
                        </div>
                        <div class="txt-group">
                            <input type="checkbox" name="autoLogin"  value="1" checked />
                            <span class="check-box yes" onclick="checkAutoLogin()">下次自动登录</span>
                            <span class="txt-r"><a href="{{route('password.request')}}">忘记密码？</a></span>
                        </div>
                        <div class="btn-group login-account" >
                            登录
                        </div>
                    </form>
                </div>

                <!--手机登录-->
                <div class="login-type mob-login" style="display: none;">
                    <form id="form_mobile" action="{{route('login.sms')}}" method="post">
                        <input type="hidden" name="ticket" id="ticket1">
                        <input type="hidden" name="bizState" id="bizState1">
                        <input type="hidden" name="randstr" id="randstr1">
                        {{ csrf_field() }}
                        <div id="mobile"></div>
                        <div id="message_mobile"></div>
                        <div class="form-group yhm">
                            <div class="imgbg"></div>
                            <input  class="input-login" type="text"  value="" name="mobile" placeholder="请输入手机号"/>
                        </div>
                        <div id="code"></div>
                        <div class="form-group mm">
                            <div class="imgbg"></div>
                            <input  class="input-login code" type="text"  value="" name="code" placeholder="请输入手机验证码"/>
                            <input type="button"  class="btn-getcode" value="获取验证码"/>
                        </div>
                        <div class="txt-group">
                            <input type="checkbox" name="autoLogin"  value="1" checked />
                            <span class="check-box yes" onclick="checkAutoLogin(this)">下次自动登录</span>
                            <span class="txt-r"><a href="{{route('password.request')}}">忘记密码？</a></span>
                        </div>
                        <div class="btn-group login-mobile" >
                            登录
                        </div>
                    </form>
                </div>

                <div class="reg-link-box">
                    还没有账号？<a class="reg-txt" href="{{route('register.index')}}">立刻注册</a>
                </div>
            </div>
            <div class="form-r">
                <div id="thirdlogin-wechat-web" class="qr-code">

                </div>
                <div class="appsparent">
                    <p class="txt">使用合作账号直接登录</p>
                    <a class="app-icon qq" href=""></a>
                </div>
                <div class="other-user">
                    <a href="{{route('login')}}">其他用户登录>></a>
                </div>

            </div>
            <div class="clear"></div>
        </div>
    </div>
</div>
<script type="text/javascript" src="{{ theme_asset('gt/gt.js') }}"></script>
<script type="text/javascript" src="{{ theme_asset('gt/gt.handle.js') }}"></script>
<script type="text/javascript" src="https://captcha.253.com/TCaptcha.js"></script>
@include('module.widgets.thirdlogin', ['redirect_url'=>$redirect_url])
<script>
    $(function () {
        // var is_need_geetest=0;//全局,是否使用极验.
        // var login_type=1;//登录模式,1用户账号登录,2用户手机登录,3企业登录.
        // var gt_call_back=function(captchaObj) {
        //     captchaObj.onReady(function () {
        //         //极验加载完成
        //     });
        //     captchaObj.onSuccess(function () {
        //         ajax_login(login_type,captchaObj);
        //
        //     });
        //     captchaObj.onError(function () {
        //         show_error(login_type,"请先进行验证");
        //     });
        //     captchaObj.onClose(function () {
        //         show_error(login_type,"请先进行验证");
        //     });
        //     $('.login-account').on('click', function () {
        //         login_type=1;
        //         clean_message();
        //         if (is_need_geetest==1){
        //             captchaObj.bindForm("#form_account");
        //             captchaObj.verify();
        //         }
        //         else{
        //             ajax_login(login_type,captchaObj);
        //         }
        //
        //     });
        //
        //     $('.login-mobile').on('click', function () {
        //         login_type=2;
        //         clean_message();
        //         if (is_need_geetest==1){
        //             captchaObj.bindForm("#form_mobile");
        //             captchaObj.verify();
        //         }
        //         else{
        //             ajax_login(login_type,captchaObj);
        //         }
        //     });
        //
        //     $('.login-company').on('click', function () {
        //         login_type=3;
        //         clean_message();
        //         if (is_need_geetest==1){
        //             captchaObj.bindForm("#form_company");
        //             captchaObj.verify();
        //         }
        //         else{
        //             ajax_login(login_type,captchaObj);
        //         }
        //     });
        // };
        //
        // gt_init(gt_call_back);//初始化极验
        var captcha_callback = function(res){
            if(res.hasOwnProperty('errorMessage')){
                alert(res.errorMessage)
            }
            if(res.ret == 0){
                console.log('行为验证通过');
                $("#ticket").val(res.ticket);
                $("#bizState").val(res.bizState);
                $("#randstr").val(res.randstr);
                ajax_login(1);
            }else{
                console.log('用户主动关闭验证码')
            }
            console.log('callback:', res);
        }

        var mobile_captcha_flag = false;
        var mobile_captcha_callback = function(res){
            if(res.hasOwnProperty('errorMessage')){
                alert(res.errorMessage)
            }
            if(res.ret == 0){
                mobile_captcha_flag = true;
                console.log('行为验证通过');
                $("#ticket1").val(res.ticket);
                $("#bizState1").val(res.bizState);
                $("#randstr1").val(res.randstr);
                submit_data={
                    "mobile":$("input[name='mobile']").val(),
                    "type":"login"
                };
                $.ajax({
                    method: 'post',
                    url: '{{route('sms.send')}}',
                    data: submit_data,
                    beforeSend:function () {
                        // console.log('请求开始');
                        $(".errinfo").text("");
                        $(".errinfo").removeClass("errinfo");

                    },
                    complete:function() {
                        console.log('请求结束');
                    },
                    success: function (data) {
                        // console.log(data);
                        $("#message_mobile").addClass("successinfo");
                        $("#message_mobile").text("发送成功,请注意查收");
                        settime();
                    },
                    error: function (errorData) {
                        // console.log(errorData);
                        if (errorData.status==422) {//验证错误
                            $.each(errorData.responseJSON.errors,function (key,val) {
                                $("#"+key).addClass("errinfo");
                                $("#"+key).text(val[0]);
                            });
                        }
                        else if(errorData.status==400) {//业务错误
                            $("#message_mobile").addClass("errinfo");
                            $("#message_mobile").text(errorData.responseJSON.message);
                        }
                    }
                });
            }else{
                console.log('用户主动关闭验证码')
            }
            console.log('callback:', res);
        }

        var captcha = new TencentCaptcha('196587903', captcha_callback, {});
        $('.login-account').on('click', function () {
            captcha.show();

        });

        var mobile_captcha = new TencentCaptcha('196587903', mobile_captcha_callback, {});
        $('.btn-getcode').on('click', function () {
            mobile_captcha.show();

        });

        $('.login-mobile').on('click', function () {
            login_type=2;

            if (mobile_captcha_flag){
                ajax_login(2);
            }
            else{
                alert('验证码组件异常')
            }
        });

        $(document).on("click",".switch-title span",function () {
            var index = $(this).index();
            $(this).addClass("active").siblings("span").removeClass("active");
            $(".login-type").eq(index).show().siblings(".login-type").hide();
        });
        $(".rightab").click(function () {
            $(".login-box-per-body").toggle();
            $(".login-box-com-body").toggle();
        });
        $('.btn-getcode').on('click', function () {
            submit_data={
                "mobile":$("input[name='mobile']").val(),
                "type":"login"
            };
            $.ajax({
                method: 'get',
                url: '{{url('api/common/sms/send')}}',
                data: submit_data,
                beforeSend:function () {
                    // console.log('请求开始');
                    $(".errinfo").text("");
                    $(".errinfo").removeClass("errinfo");

                },
                complete:function() {
                    console.log('请求结束');
                },
                success: function (data) {
                    // console.log(data);
                    $("#message_mobile").addClass("successinfo");
                    $("#message_mobile").text("发送成功,请注意查收");
                    settime();
                },
                error: function (errorData) {
                    // console.log(errorData);
                    if (errorData.status==422) {//验证错误
                        $.each(errorData.responseJSON.errors,function (key,val) {
                            $("#"+key).addClass("errinfo");
                            $("#"+key).text(val[0]);
                        });
                    }
                    else if(errorData.status==400) {//业务错误
                        $("#message_mobile").addClass("errinfo");
                        $("#message_mobile").text(errorData.responseJSON.message);
                    }
                }
            });
        });


        function ajax_login(type) {
            if (type==1) {
                $.ajax({
                    method: 'post',
                    url: $("#form_account").attr('action'),
                    data: $("#form_account").serialize(),
                    beforeSend:function () {
                        //console.log('请求开始');
                        clean_message();

                    },
                    complete:function() {
                        //console.log('请求结束');
                    },
                    success: function (data) {
                        //console.log(data);
                        //location.href=data.data.redirect_url;
                        window.location.reload();
                    },
                    error: function (errorData) {
                        if (is_need_geetest==1){
                            captchaObj.reset();
                        }
                        if (errorData.status==422) {//验证错误
                            $.each(errorData.responseJSON.errors,function (key,val) {
                                $("#"+key).addClass("errinfo");
                                $("#"+key).text(val[0]);
                            });
                        }
                        else if(errorData.status==400) {//业务错误
                            $("#message_account").addClass("errinfo");
                            $("#message_account").text(errorData.responseJSON.message);
                        }
                    }
                });
            }
            else if (type==2) {
                $.ajax({
                    method: 'post',
                    url: $("#form_mobile").attr('action'),
                    data: $("#form_mobile").serialize(),
                    beforeSend:function () {
                        //console.log('请求开始');
                        clean_message();

                    },
                    complete:function() {
                        //console.log('请求结束');
                    },
                    success: function (data) {
                        //console.log(data);
                        //location.href=data.data.redirect_url;
                        window.location.reload();
                    },
                    error: function (errorData) {
                        //console.log(errorData);
                        if (is_need_geetest==1){
                            captchaObj.reset();
                        }
                        if (errorData.status==422) {//验证错误
                            $.each(errorData.responseJSON.errors,function (key,val) {
                                $("#"+key).addClass("errinfo");
                                $("#"+key).text(val[0]);
                            });
                        }
                        else if(errorData.status==400) {//业务错误
                            $("#message_mobile").addClass("errinfo");
                            $("#message_mobile").text(errorData.responseJSON.message);
                            is_need_geetest=errorData.responseJSON.errors.is_need_geetest;
                        }
                    }
                });
            }
            else if (type==3){
                $.ajax({
                    method: 'post',
                    url: $("#form_company").attr('action'),
                    data: $("#form_company").serialize(),
                    beforeSend:function () {
                        //console.log('请求开始');
                        clean_message();

                    },
                    complete:function() {
                        //console.log('请求结束');
                    },
                    success: function (data) {
                        //console.log(data);
                        //location.href=data.data.redirect_url;
                        window.location.reload();
                    },
                    error: function (errorData) {
                        //console.log(errorData);
                        if (is_need_geetest==1){
                            captchaObj.reset();
                        }
                        if (errorData.status==422) {//验证错误
                            $.each(errorData.responseJSON.errors,function (key,val) {
                                $("#"+key).addClass("errinfo");
                                $("#"+key).text(val[0]);
                            });
                        }
                        else if(errorData.status==400) {//业务错误
                            $("#message_company").addClass("errinfo");
                            $("#message_company").text(errorData.responseJSON.message);
                            is_need_geetest=errorData.responseJSON.errors.is_need_geetest;
                        }
                    }
                });
            }
        };

        function show_error(type,message) {
            if (type==1) {

                $("#message_account").addClass("errinfo");
                $("#message_account").text(message);

            }
            else if (type==2) {
                $("#message_mobile").addClass("errinfo");
                $("#message_mobile").text(message);

            }
            else if (type==3){
                $("#message_company").addClass("errinfo");
                $("#message_company").text(message);

            }
        };
        function clean_message() {
            $(".errinfo").text("");
            $(".errinfo").removeClass("errinfo");
            $(".successinfo").text("");
            $(".successinfo").removeClass("successinfo");
        }

    });



    function checkAutoLogin() {
        var isCheck = $(".check-box").hasClass("yes");
        if (isCheck) {
            $(".check-box").removeClass("yes");
            $(".check-box").closest(".txt-group").find("input[name=autoLogin]").prop("checked", false);
        } else {
            $(".check-box").addClass("yes");
            $(".check-box").closest(".txt-group").find("input[name=autoLogin]").prop("checked", true);
        }

    }

    // 倒计时
    var countdown = 60;
    function settime() {
        if (countdown == 0) {
            $('.btn-getcode').prop("disabled", false);
            $('.btn-getcode').removeClass('btn-disabled');
            $('.btn-getcode').val('获取验证码');
            countdown = 60;
            return;
        } else {
            $('.btn-getcode').prop("disabled", true);
            $('.btn-getcode').addClass('btn-disabled');
            $('.btn-getcode').val('重新发送' + countdown + '秒');
            countdown--;
        }
        setTimeout(function() {
            settime()
        },1000)
    }
</script>