jucai/public/themes/default/views/app/content/buyhouse/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">
    <link rel="stylesheet" type="text/css" href="{{theme_asset('app/css/elementui.min.css')}}">
    <style>
        body {background: url({{theme_asset('app/images/buyhouse/login_bg.jpg')}}) no-repeat;}
        .login-box {margin-top:100px;width: 1200px;position:relative;}
        .login-box .jucai {position:absolute;left:-167px;bottom:-20px;}
        .login-box .login-box-per-body{width: 1200px;height:700px;}
        .login-box .login-form .form-r {width: 758px;box-sizing:border-box;padding:10px;}
        .login-box .login-box-header {width: 1200px;background: url({{theme_asset('app/images/buyhouse/login_header.jpg')}}) no-repeat;}
        .login-box .login-form .form-l {padding: 100px 20px 0 40px;margin-left: 0;height: 527px;}
        .news_item {text-decoration:none;color:#4689e2;width:500px;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;}
        .news_item:hover {text-decoration:underline;}
    </style>
@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>
@endpush

@section('content')
    <div id="app">
        <div class="login-box">
            <!--个人会员登录-->
            <div class="login-box-per-body">
            <div class="login-box-header">
                <p class="header-title">人才刚需购房系统</p>
            </div>
            <div class="login-form">
                {{--未登录--}}
                <div class="form-l" v-if="user_id == 0">
                    <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">
                            {{ 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.person')}}"  href="javascript:;" >立刻注册</a>
                    </div>
                </div>

                {{--已登录--}}
                <div class="form-l" v-if="user_id > 0" style="padding:10px 10px 0;width:420px;">
                    <h1 style="text-align:center;">请点击右边房源信息进行申报</h1>
                    <el-card class="box-card" style="margin-top:20px;">
                        <div slot="header" class="clearfix">
                            <span style="font-size:18px">我的申报</span>
                        </div>
                        <div v-for="item in apply" class="text item" @click="toHouse(item.url)">
                            <a href="javascript:void(0)" class="news_item">
                                <span class="news_title">@{{item.house.name}}</span>
                            </a>
                            <span style="float:right;">
                                <el-tag :type="item.status_tag" effect="dark" size="mini">
                                    @{{ item.status_text }}
                                </el-tag>
                            </span>
                        </div>
                    </el-card>
                </div>

                {{--右侧--}}
                <div class="form-r">
                    <el-card class="box-card">
                        <div slot="header" class="clearfix">
                            <span style="font-size:18px">房源信息</span>
                            <el-button style="float: right; padding: 3px 0" type="text" @click="location.href='{{route('buyhouse.house')}}'">更多</el-button>
                        </div>
                        <div v-for="item in house" class="text item" @click="toHouse(item.url)" style="height:25px;">
                            <a href="javascript:void(0)" class="news_item">
                                <span class="news_title">@{{item.name}}</span>
                                <el-tag :type="item.status_tag" effect="dark" size="mini">
                                    @{{ item.status_text }}
                                </el-tag>
                            </a>
                            <span style="float:right;">@{{ item.apply_time_start }} 至 @{{ item.apply_time_end }}</span>
                        </div>
                    </el-card>
                    <el-card class="box-card" style="margin-top:20px;">
                        <div slot="header" class="clearfix">
                            <span style="font-size:18px">公告</span>
                            <el-button style="float: right; padding: 3px 0" type="text" @click="location.href='{{route('buyhouse.news')}}'">更多</el-button>
                        </div>
                        <div v-for="item in news" class="text item" @click="toNews(item.url)">
                            <a href="javascript:void(0)" class="news_item">
                                <span>@{{ item.title }}</span>
                            </a>
                            <span style="float:right;">@{{ item.updated_at_text }}</span>
                        </div>
                    </el-card>
                </div>
                <div class="clear"></div>
            </div>
        </div>
            <img src="{{theme_asset('app/images/buyhouse/login_jucai.png')}}" class="jucai">
        </div>
    </div>
@endsection


@section('script')
    <script type="text/javascript" src="{{theme_asset('app/js/jquery.disappear.tooltip.js ')}}"></script>
    <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);//初始化极验

            $(".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.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);
                                is_need_geetest=errorData.responseJSON.errors.is_need_geetest;
                            }
                        }
                    });
                }
                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.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();
                            $('.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.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(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>
    <script type="text/javascript" src="{{theme_asset('app/js/vue.min.js')}}"></script>
    <script src="{{theme_asset('app/js/axios.js')}}"></script>
    <script type="text/javascript" src="{{theme_asset('app/js/elementui.min.js')}}"></script>
    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    user_id: {{$user_id}},
                    house: {!! $house !!},
                    news: {!!$news!!},
                    apply: {!! $apply !!}
                }
            },
            methods: {
                toHouse(url) {
                    if (this.user_id == 0) {
                        this.$message({
                            type: 'info',
                            message: `请先登录`
                        });
                        return false;
                    }

                    location.href = url;
                },
                toNews(url) {
                    console.log(url);
                    location.href = url;
                },
            }
        })
    </script>
@endsection