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;
        }

        .article_item {padding:5px 0;}

        .news_item{
            text-decoration:none;
            color:#4689e2;
            width:500px;
        }

        .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)" style="padding:5px 0;">
                                <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>
                        @if(!empty($member_info) && empty($member_info['id_card']))
                            <el-row>
                                <el-button type="primary" style="margin-top:10px;" @click="dialogFormVisible = true">
                                    点击完善身份信息
                                </el-button>
                            </el-row>
                        @endif
                    </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 article_item" @click="toNews(item.url)">
                                <a href="javascript:void(0)" class="news_item">
                                    <span>@{{ item.title }}</span>
                                </a>
                                <span style="float:right;">@{{ item.created_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>

        <el-dialog title="完善信息" :visible.sync="dialogFormVisible">
            <el-form :model="form">
                <el-form-item label="真实姓名" :label-width="formLabelWidth">
                    <el-input v-model="form.realname" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="证件类型" :label-width="formLabelWidth">
                    <el-select v-model="form.card_t_cn" placeholder="请选择证件类型">
                        <el-option label="身份证" :value="306"></el-option>
                        <el-option label="通行证" :value="307"></el-option>
                        <el-option label="护照" :value="308"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="证件号" :label-width="formLabelWidth">
                    <el-input v-model="form.id_card" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="perfect">确 定</el-button>
            </div>
        </el-dialog>
    </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 src="{{theme_asset('app/js/qs.min.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 !!},
                    dialogFormVisible: false,
                    form: {
                        realname: '',
                        card_t_cn: 306,
                        id_card: '',
                    },
                    formLabelWidth: '120px',
                    card_t_cn:[{
                        value: 306,
                        label: '身份证'
                    }, {
                        value: 307,
                        label: '通行证'
                    }, {
                        value: 308,
                        label: '护照'
                    }]
                }
            },
            methods: {
                toHouse(url) {
                    if (this.user_id == 0) {
                        this.$message({
                            type: 'info',
                            message: `请先登录`
                        });
                        return false;
                    }

                    location.href = url;
                },
                toNews(url) {
                    location.href = url;
                },
                perfect() {
                    this.form._token = '{{csrf_token()}}';
                    axios.post("{{route('buyhouse.perfect')}}", Qs.stringify(this.form)).then(response => {
                        if (response.data.status) {
                            this.$alert(response.data.msg, '提交成功', {
                                confirmButtonText: '确定',
                                callback: action => {
                                    window.location.reload();
                                }
                            });
                        } else {
                            this.$message.error(response.data.msg);
                            this.loading.close();
                            return false;
                        }
                    });
                }
            }
        })
    </script>
@endsection