jucai/public/themes/default/views/jkq/auth/login.blade.php

@extends('module.layouts.empty')

@push('meta')

@endpush

@push('css')
    <link href="{{ theme_asset('app/css/login.css') }}" rel="stylesheet">
    <link href="{{ theme_asset('app/css/common.css') }}" rel="stylesheet">

@endpush

@push('js')
    <script type="text/javascript" src="{{ theme_asset('gt/gt.js') }}"></script>
    <script type="text/javascript" src="{{ theme_asset('gt/gt.handle.js') }}"></script>
    <script src="https://captcha.253.com/TCaptcha.js"></script>
@endpush

@section('content')
    <div class="login-box">
        <div class="login-logo"><a href="{{route('jkq.home')}}"><img src="{{upload_asset(subsite_config('aix.system.site.site.logo'))}}" alt="logo"/></a></div>
        <!--个人会员登录-->
        <div class="login-box-per-body">
            <div class="login-box-header">
                <p class="gohome" onclick="window.location.href='{{route('jkq.home')}}'">返回首页</p>
                <p class="header-title">个人会员登录</p>
                <p onclick="window.location='{{route('jkq.login.company')}}'" class="rightab">切到企业登录</p>
            </div>
            <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('jkq.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="{{trans('auth.member.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(this)">下次自动登录</span>
                                <a class="txt-r" href="{{route('jkq.password.request')}}?utype=user" >忘记密码？</a>
                            </div>
                            <div>
                                <input class="btn-group login-account" type="button" value="登录">
                            </div>
                        </form>
                    </div>

                    <!--手机登录-->
                    <div class="login-type mob-login" style="display: none;">
                        <form id="form_mobile" action="{{route('jkq.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>
                                <a class="txt-r" href="{{route('jkq.password.request')}}" >忘记密码？</a>
                            </div>
                            <div >
                                <input class="btn-group login-mobile" type="button" value="登录">
                            </div>
                        </form>
                    </div>

                    <div class="reg-link-box">

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

                    </div>
                    <div id="other-thirdlogin" class="appsparent">
                        <p class="txt">使用合作账号直接登录</p>
                    </div>

                </div>
                <div class="clear"></div>
            </div>
        </div>
        <div class="bottom-pic">
            <img src="{{theme_asset('app/images/login/login_bottom_pic.png')}}" class="bottom-pic"/>
        </div>
    </div>
@endsection


@section('script')
    <script type="text/javascript" src="{{theme_asset('app/js/jquery.disappear.tooltip.js ')}}"></script>

    @include('module.widgets.thirdlogin')
    <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);
            //         }
            //     });
            // };

            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",
                        "ticket": res.ticket,
                        "bizState": res.bizState,
                        "randstr": res.randstr
                    };
                    $.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 () {

                var mobile = $("input[name='mobile']").val();
                if(mobile == null || mobile == ''){
                    $("#message_mobile").addClass("errinfo");
                    $("#message_mobile").text("请输入手机号码");
                    return false;
                }
                mobile_captcha.show();

            });

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

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

            //gt_init(gt_call_back);//初始化极验

            $(".input-login").keydown(function(ev){
                ev = ev || window.event;
                var code = (ev.keyCode || ev.which);
                if (code == 10 || code == 13) {
                    $(this).closest("form").find(".btn-group").click();
                }
            });

            $(".switch-title span").click(function () {
                var index = $(this).index();
                $(this).addClass("active").siblings("span").removeClass("active");
                $(".login-type").eq(index).show().siblings(".login-type").hide();
            });


            $(".register_user").click(function(){
                var url=$(this).attr("url")
                $.getJSON("{{route('jkq.register.status')}}", function (result) {

                    if (result.status == 0) {
                        disapperTooltip('remind', result.msg);
                    } else{
                        location.href=url;
                    }
                });
            })


            function ajax_login(type) {
                console.log(type)
                if (type==1) {
                    $.ajax({
                        method: 'post',
                        url: $("#form_account").attr('action'),
                        data: $("#form_account").serialize(),
                        beforeSend:function () {
                            //console.log('请求开始');
                            clean_message();
                            $('.login-account').addClass("btn-disabled").prop('disabled', true);
                            $('.login-account').val("登录中...");

                        },
                        complete:function() {
                            //console.log('请求结束');
                            $('.login-account').val("登录");
                            $('.login-account').removeClass("btn-disabled").prop('disabled', false);

                        },
                        success: function (data) {
                            //console.log(data);
                            $("#message_account").addClass("successinfo");
                            $("#message_account").text("登录成功, 正在跳转...");
                            location.href=data.data.redirect_url;
                        },
                        error: function (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_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();
                            $('.login-mobile').addClass("btn-disabled").prop('disabled', true);
                            $('.login-mobile').val("登录中...");

                        },
                        complete:function() {
                            //console.log('请求结束');
                            $('.login-mobile').val("登录");
                            $('.login-mobile').removeClass("btn-disabled").prop('disabled', false);
                        },
                        success: function (data) {
                            //console.log(data);
                            $("#message_mobile").addClass("successinfo");
                            $("#message_mobile").text("登录成功, 正在跳转...");
                            location.href=data.data.redirect_url;
                        },
                        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();
                            $('.login-company').addClass("btn-disabled").prop('disabled', true);
                            $('.login-company').val("登录中...");

                        },
                        complete:function() {
                            //console.log('请求结束');
                            $('.login-company').val("登录");
                            $('.login-company').removeClass("btn-disabled").prop('disabled', false);

                        },
                        success: function (data) {
                            //console.log(data);
                            $("#message_company").addClass("successinfo");
                            $("#message_company").text("登录成功, 正在跳转...");
                            location.href=data.data.redirect_url;
                        },
                        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(obj) {
            var isCheck = $(obj).hasClass("yes");
            if (isCheck) {
                $(obj).removeClass("yes");
                $(obj).closest(".txt-group").find("input[name=autoLogin]").prop("checked", false);
            } else {
                $(obj).addClass("yes");
                $(obj).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>
@endsection