jucai/public/themes/default/views/mobile/app/auth/register_person.blade.php

@extends('mobile.module.layouts.content')

@push('meta')

@endpush

@push('css')
    <link href="{{ theme_asset('mobile/css/members.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>
@endpush

@section('content')
    <div class="qs-top-nav x2 list_height">
        <div class="n-cell active">手机注册<div class="b-line"></div></div>
        <div class="n-cell" onclick="javascript:location.href='{{route($sub_site.'mobile.register.person.email')}}'">邮箱注册<div class="b-line"></div></div>
        <div class="clear"></div>
    </div>
    <div class="split-block"></div>
    <form id="regMobileForm" method="post" action="{{route($sub_site.'mobile.register.person')}}">
        {{csrf_field()}}
        <div class="loging-input-group">
            {{--<div class="group-list verfy">
                <input id="id_card" name="id_card" type="text" class="l-input font14" placeholder="请输入身份证号码" autocomplete="off">
            </div>--}}
            <div class="group-list mobile">
                <input id="mobile" name="mobile" type="text" class="l-input font14" placeholder="请输入手机号码" autocomplete="off" value="">
                <a href="javascript:;" id="getVerfyCode" class="qs-btn qs-btn-inline qs-btn-medium qs-btn-border-gray font14">获取验证码</a>
            </div>
            <div class="group-list had-remind-box qs-center link_blue" onclick="javascript:location.href='{{route($sub_site.'mobile.login')}}'"><a href="javascript:;"><span class="mal"></span><span class="txt-o-red">点击立即登录</span></a></div>
            <div class="group-list verfy">
                <input id="mobile_vcode" name="mobile_vcode" type="text" class="l-input font14" placeholder="请输入手机验证码" autocomplete="off">
            </div>
            <div class="group-list pwd">
                <input id="password" name="password" type="password" class="l-input font14" placeholder="请输入账户密码" autocomplete="off">
            </div>
            <div class="group-list pwd">
                <input id="password_confirmation" name="password_confirmation" type="password" class="l-input font14" placeholder="请确认账户密码" autocomplete="off">
            </div>
        </div>
        <div class="l-tool-bar list_height">
            <div class="read-agreement">
                <div class="for-checkbox active" id="for-checkbox">我已阅读并同意
                </div>
            </div>
            <div class="agreement link_gray6"><a href="#userAgreenment" id="reg_agreement">《用户服务协议》</a></div>
            <div class="clear"></div>
        </div>
        <div class="split-block"></div>
        <div class="btn-spacing btn-spacing-nmb"><a id="btnRegPersonal" href="javascript:;" class="qs-btn qs-btn-blue font18">注册个人会员</a></div>
        <input type="hidden" name="reg_type" value="1" />
        <input type="hidden" name="utype" value="2" />
        <input type="hidden" name="reg_source" value="2" />
        <input type="hidden" name="agreement" value="1" />
    </form>
    <div class="r-link-box qs-center link_blue"><a href="{{route($sub_site.'mobile.login')}}">已有账号，立即登录</a></div>
    <input type="hidden" id="J_config_varify_reg" value="1"/>
    <!--用户服务协议-->
    <script type="text/html" id="agreementTxt">
        <div class="headernavfixed">
            <div class="headernav font18"><div class="title">用户服务协议<div class="return js-back"></div><div class="rbtn"></div></div></div>
        </div>
        <div class="agreement-content">{!! str_replace(["\r\n","\n"], ["",""], config('aix.system.register_agreement.register_agreement.reg_agreement')) !!}</div>
    </script>
@endsection


@section('script')
    <script type="text/javascript" src="{{ theme_asset('app/js/regular.js') }}"></script>
    <script type="text/javascript" src="{{ theme_asset('mobile/js/popWin.js') }}"></script>
<script>
    // 用户服务协议
    $('#for-checkbox').on('click', function() {
        $(this).toggleClass('active');
        if ($(this).hasClass('active')) {
            $('input[name=agreement]').val(1);
        } else {
            $('input[name=agreement]').val(0);
        }
    })
    var agreementTemp = $('#agreementTxt').html();
    $("#reg_agreement").on("click",function(){
        popWin.init({
            from:"right",
            html:agreementTemp,
            handle:function (a) {
            }
        })
    })
    var config_varify_reg = eval($('#J_config_varify_reg').val());
    // 配置极验
    if (config_varify_reg) {
        //手机注册
        var handlerRegMobile = function(captchaObj) {
            captchaObj.bindForm("#regMobileForm");
            captchaObj.onSuccess(function() {
                regPerByMobileHandler();
            });
            captchaObj.onError(function() {

            });
            $('#btnRegPersonal').on('click', function () {
                // var id_cardValue = $.trim($('input[name=id_card]').val());
                var mobileValue = $.trim($('input[name=mobile]').val());
                var verifycodeValue = $.trim($('input[name=mobile_vcode]').val());
                var passwordValue = $.trim($('input[name=password]').val());
                var password_confirmation = $.trim($('input[name=password_confirmation]').val());
                var agreementValue = $('input[name=agreement]').val();
                /*if (id_cardValue == '') {
                    qsToast({type:2,context: '请输入身份证号码'});
                    return false;
                }
                if(!IsCardVali('id_card',id_cardValue)) {
                    qsToast({type:2,context: '身份证格式错误'});
                    return false;
                }
                if(!IsCard('id_card',id_cardValue)) {
                    qsToast({type:2,context: '该身份证已被注册'});
                    return false;
                }*/
                if (mobileValue == '') {
                    qsToast({type:2,context: '请输入手机号码'});
                    return false;
                }
                if (mobileValue != "" && !regularMobile.test(mobileValue)) {
                    qsToast({type:2,context: '手机号码格式不正确'});
                    return false;
                }
                if (verifycodeValue == '') {
                    qsToast({type:2,context: '请输入手机验证码'});
                    return false;
                }
                if (passwordValue == '') {
                    qsToast({type:2,context: '请输入账户密码'});
                    return false;
                }
                if(!inputRegValiPassword(passwordValue)){
                    qsToast({type:2,context: '密码长度要求为6-16个字符'});
                    return false;
                }
                if (password_confirmation == '') {
                    qsToast({type:2,context: '请确认账户密码'});
                    return false;
                }
                if (passwordValue != password_confirmation) {
                    qsToast({type:2,context: '两次输入的密码不一致'});
                    return false;
                }
                if (agreementValue !=1) {
                    qsToast({type:2,context: '请接受用户服务协议'});
                    return false;
                }
                captchaObj.verify();

            });
        };

        //发送短信
        var handler = function(captchaObj) {
            captchaObj.appendTo("#popup-captcha");
            captchaObj.onSuccess(function() {
                var result = captchaObj.getValidate();
                toSetSms(result);
            });

            captchaObj.onError(function() {

            });
            $('#getVerfyCode').on('click', function () {
                var mobileValue = $.trim($('input[name=mobile]').val());
                if (mobileValue == '') {
                    qsToast({type:2,context: '请输入手机号'});
                    return false;
                }
                captchaObj.verify();

            });
        };

        gt_init(handlerRegMobile);
        gt_init(handler);
    }


    $('input[name=mobile]').change(function () {
        var currentValue = $(this).val();
        if (currentValue.length >= 11) {
            if(regularMobile.test(currentValue) && !remoteValid('mobile',currentValue)) {
                $('.had-remind-box .mal').text('手机号 ' + currentValue + ' 已注册，');
                $('.had-remind-box').show();
            } else {
                $('.had-remind-box').hide();
            }
        } else {
            $('.had-remind-box').hide();
        }
    });


    $('input[name=id_card]').change(function () {
        var currentValue = $(this).val();
        if(!IsCardVali('id_card',currentValue)) {
            qsToast({type:2,context: '身份证格式错误'});
            return false;
        }
        if(!IsCard('id_card',currentValue)) {
            qsToast({type:2,context: '该身份证已被注册'});
            return false;
        }

    });

    function IsCard(validType, validValue) {
        var result = false;
        $.ajax({
            url: "{{route('register.check', ['utype'=>2])}}",
            cache: false,
            async: false,
            type: 'post',
            dataType: 'json',
            data: { type: validType, param: validValue},
            success: function(json) {
                result= true;
            }
        });
        return result;
    }


    function IsCardVali(validType, validValue){
        var result = false;
        $.ajax({
            url: "{{route('register.check', ['utype'=>2])}}",
            cache: false,
            async: false,
            type: 'post',
            dataType: 'json',
            data: { type: validType, param: validValue,vail:1 },
            success: function(json) {
                result= true;
            }
        });
        return result;
    }




    // 发送手机验证码
    function toSetSms(geet_result) {
        var mobileValue = $.trim($('input[name=mobile]').val());
        function settime(countdown) {
            if (countdown == 0) {
                $('#getVerfyCode').removeClass('qs-btn-border-disabled');
                $('#getVerfyCode').text('获取验证码');
                countdown = 180;
                return;
            } else {
                $('#getVerfyCode').addClass('qs-btn-border-disabled');
                $('#getVerfyCode').text('重新发送' + countdown + '秒');
                countdown--;
            }
            setTimeout(function() {
                settime(countdown)
            },1000)
        }
        $('#getVerfyCode').prop("disabled", !0);
        $('#getVerfyCode').addClass('qs-btn-border-disabled');
        $('#getVerfyCode').text('发送中...');
        geet_result.mobile= mobileValue;
        geet_result.type= "register";
        $.ajax({
            url: "{{route('sms.send')}}",
            type: 'POST',
            dataType: 'json',
            data: geet_result,
            success: function (data) {
                // console.log(data);
                setTimeout(function() {
                    qsToast({type:2,context: '验证码已发送，请注意查收'});
                    // 开始倒计时
                    var countdowns = 180;
                    settime(countdowns);
                },1000)
            },
            error: function (errorData) {
                // console.log(errorData);
                var response=$.parseJSON(errorData.response);
                if (errorData.status==422) {//验证错误
                    $.each(response.errors,function (key,val) {
                        qsToast({type:2,context: val[0]});
                        return false;
                    });
                }
                else if(errorData.status==400) {//业务错误
                    qsToast({type:2,context: response.message});
                }
                setTimeout(function() {
                    $('#getVerfyCode').prop("disabled", 0);
                    $('#getVerfyCode').removeClass('qs-btn-border-disabled');
                    $('#getVerfyCode').text('获取验证码');
                },1500)
            }
        });
    }

    // 个人手机注册处理程序
    function regPerByMobileHandler() {
        $('#btnRegPersonal').text('注册中...').addClass('btn_disabled').prop('disabled', !0);
        $.ajax({
            url: "{{route($sub_site.'mobile.register.person')}}",
            type: 'POST',
            dataType: 'json',
            data: $('#regMobileForm').serialize(),
            success: function (data) {
                qsToast({type:2,context: "注册成功,正在为你跳转.."});
                setTimeout(function () {
                    window.location.href = data.data.url;
                },1000)

            },
            error:function(errorData) {
                $('#btnRegPersonal').text('注册个人会员').removeClass('btn_disabled').prop('disabled', 0);
                var response=$.parseJSON(errorData.response);
                if (errorData.status==422) {//验证错误
                    $.each(response.errors,function (key,val) {
                        qsToast({type:2,context: val[0]});
                        return false;
                    });
                }
                else if(errorData.status==400) {//业务错误
                    qsToast({type:2,context: response.message});
                }
            }
        });
    }

    /**
     * 验证用户名等是否重复
     * @param validType 验证类型
     * @param validValue 值
     * @returns {boolean|*}
     */
    function remoteValid(validType, validValue){
        var result = false;
        $.ajax({
            url: "{{route('register.check', ['utype'=>2])}}",
            cache: false,
            async: false,
            type: 'post',
            dataType: 'json',
            data: { type: validType, param: validValue },
            success: function(json) {
                result= true;
            }
        });
        return result;
    }

    /**
     * 验证密码长度
     * @param value 密码
     * @returns {boolean}
     */
    function inputRegValiPassword(value){
        achoice = true;
        if(value.length>16 || value.length<6){
            achoice = false;
        }
        return achoice;
    }

</script>

@endsection