jucai/public/themes/default/views/app/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('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('home')}}'">返回首页</p>
                <p class="header-title">个人会员登录</p>
                <p onclick="window.location='{{route('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('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('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('login.sms')}}" method="post">
                            {{ 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('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('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,captchaObj);
            //     }else{
            //         console.log('用户主动关闭验证码')
            //     }
            //     console.log('callback:', res);
            // }
            //
            // var captcha = new TencentCaptcha('196587903', captcha_callback, {});
            // $('.login-account').on('click', function () {
            //     captcha.show();
            //
            // });



            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();
            });
            $('.btn-getcode').on('click', function () {
                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);
                        }
                    }
                });
            });

            $(".register_user").click(function(){
				 var url=$(this).attr("url")
                $.getJSON("{{route('register.status')}}", function (result) {
                        
                        if (result.status == 0) {
                            disapperTooltip('remind', result.msg);
                        } else{
                            location.href=url;
                        }
                });
            })


            function ajax_login(type, captchaObj) {
                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