省份二级联动

2018-12-11 09:04:23来源：博客园阅读 ()


$(function(){

    //适配本地和测试环境
    var  host = "http://api.bch.xuemao.com",
        xmhost = 'http://dev.www.xuemao.com';


    var winurl = (window.location.href).split('/')[2];

    if(winurl.indexOf('dev')>=0){
        host = "http://api.bch.xuemao.com";
        xmhost = 'http://dev.www.xuemao.com';

    }else if(winurl.indexOf('bch') >= 0){

        host = "http://api.bch.xuemao.com";
        xmhost = 'http://www.bch.xuemao.com';

    }else{
        host = "http://api.xuemao.com";
        xmhost = '//www.xuemao.com';
    }

    var cityMassage = '';
    //手机号
    function checkPhone(){
        var phoneNumber = $.trim($('#t_codeLayer').val());
        var phone = document.getElementById('t_codeLayer').value;
        if (phoneNumber == null || phoneNumber == "") {
            $('#smsmsgLayer .error').show();
            $('#smsmsgLayer .error .error_msg').html("请输入手机号！");
            return false;
            //手机号正则
        }else if(!(/^1[3456789]\d{9}$/.test(phone))) {
            $('#smsmsgLayer .error').show();
            $('#smsmsgLayer .error .error_msg').html("请输入正确的手机号");
            return false;
        }
        return true;
    }
    //手机验证码
    function checkSmsCode(){
        var smsCode  = $.trim($('#smsCodeLayer').val());
        if (smsCode == null || smsCode == "") {
            $('#smsmsgLayer .error').show();
            $('#smsmsgLayer .error .error_msg').html("请输入验证码");
            $('#smsmsgLayer .error .error_msg').css({
                'color':'#fff'
            })
            return false;
        }
        return true;
    }

    var daoshus = 60;
    var timer = null;
    //获取验证码倒计时1分钟
    function fn_daoshu(){
        $("#smsmsgLayer .daoshus").show();
        daoshus -- ;
        $("#smsmsgLayer .daoshus").text(daoshus +'s');
        if(daoshus == 0){
            clear_Inter();
        }
    }
    //清楚定时器
    function clear_Inter(){
        daoshus = 60;
        $("#smsmsgLayer .daoshus").text('60s').hide();
        clearInterval(timer);
    }

    //发送短信验证码
    $("#hq_smsLayer").click(function(){
        var mobile = $.trim($('#t_codeLayer').val());
        if(!checkPhone()){
            return false;
        }
        send_login_code(mobile);
    });


    //发送短信验证码
    function send_login_code(mobile)
    {

        $("#smsmsgLayer .daoshus").show();
        timer = setInterval(fn_daoshu,1000);
        $("#smsCodeLayer").attr("disabled" , false);
        $.ajax({
            type:"GET",
            url:xmhost+'/api/user/get_sms_code',
            data:{
                mobile: mobile,
            },
            datatype: "json",
            success:function(res){
                if(res.status == 'true'){
                    // com.prompt("发送成功！");
                    $('#smsmsgLayer .succ').fadeIn(500);
                    $('#smsmsgLayer .succ').html("发送成功！");
                    $('#smsmsgLayer .succ').fadeOut(3000);
                }else{
                    $('#smsmsgLayer .error').fadeIn(500);
                    $('#smsmsgLayer .error .error_msg').html(res.info);
                    $('#smsmsgLayer .error').fadeOut(3000);
                    clear_Inter();
                    return false;
                }
            },
            error: function(res){
                $('#smsmsgLayer .error').show();
                $('#smsmsgLayer .error .error_msg').html("请重新获取");

                clear_Inter();
                return false;
                // console.log(res)
            }
        });
    }

    //用户名非必填,填了就检验格式
    $("#nusernameLayer").blur(function(){
        var nusername  = $('#nusernameLayer').val();
        if(nusernameLayer == '') return false;
        //只能输入中文 英文 和空格
        var reg =/^[a-zA-Z\u4e00-\u9fa5\s ]{1,20}$/;
        if(!(reg.test(nusername))) {
            $('#nameMsgLayer .error .error_msg').html("姓名格式不正确");
            $('#nameMsgLayer .error').show();
            return false;
        }else {
            $('#nameMsgLayer .error .error_msg').html("");
            $('#nameMsgLayer .error').hide();
            return true;
        }

    });
    //用户名验证码
    function t_usrname(){
        var nusername  = $('#nusernameLayer').val();
        //只能输入中文 英文 和空格
        var reg =/^[a-zA-Z\u4e00-\u9fa5\s ]{1,20}$/;
        if(nusername == null || nusername == "") {
            return true;
        }else if(nusername!=''){
            if(!(reg.test(nusername))) {
                $('#nameMsgLayer .error .error_msg').html("姓名格式不正确");
                $('#nameMsgLayer .error').show();
                return false;
            }
            return true;
        }
    }
    $('#nusernameLayer').on("input",function(){
        var nusername = $('#nusername').val();
        if (nusername == null || nusername == "") {
            $('#nameMsgLayer .error').hide();
            $('#nameMsgLayer .error .error_msg').html("");
            return true;
        }
    })


    //手机号失焦校验
    $('#t_codeLayer').blur(function(){
        if(!checkPhone()){
            return false;
        }
    })
    //正在输入检验
    $('#t_codeLayer').on("input",function(){
        var phoneNumber = $.trim($('#t_codeLayer').val());
        var phone = document.getElementById('t_code').value;
        if (phoneNumber == null || phoneNumber == "") {
            $("#hq_smsLayer").css({"background":"#eee","color":"#999"});
            return false;
            //手机号正则
        }else if(!(/^1[3456789]\d{9}$/.test(phone))) {
            $("#hq_smsLayer").css({"background":"#eee","color":"#999"});
            return false;
        }
        $("#hq_smsLayer").css({"background":"#b41f5e","color":"#fff"});
        $("#hq_smsLayer.colr").css({"background":"#13c5c1","color":"#fff"});
        $("#hq_smsLayer .dbing").css({"background":"#b41f5e","color":"#fff"});
        $("#smsmsgLayer .error").hide();
        $("#smsmsgLayer .error .error_msg").html('');
    })


    //省份
    var citysData = [];
    $('.city-picker-spanLayer').click(function(){
        $('#provincesLayer').hide();
        $('#citysLayer').hide();
        // var cityVal =$('#city-picker-span .placeholder').html();
        $.ajax({
            type:"GET",
            url: host+'/xuemao/public/china_city_class.json',
            data:{
                city:'北-上'
            },
            dataType: 'json',
            success: function(res){
                if(res.result == 'succ'){
                    citysData = res.data;
                    var data=res.data;
                    var html ='';
                    for(var i=0;i<data.length;i++){
                        var province= data[i].province;
                        html+='<a data-id="'+data[i].id+'" >'+province+'</a>';
                    }
                    $('#provincesLayer .a_padd').html(html)
                    $('#provincesLayer').show();
                }

            },
            error: function(res){

            }
        })

    })

    //选择市
    var proVal = '';
    var  cityVal = '';
    $("#provincesLayer").on("click" , ".a_padd a" ,function(){
        $('#cityLayer').hide();

        proVal=$(this).html();
        var this_id = $(this).attr('data-id');
        $('.city-picker-spanLayer .placeholder').html(proVal);
        cityMassage = proVal;
        if(this_id == '2'|| this_id == '19' ||this_id == '857' ||this_id == '2459'){
            var html = $(this).html();

            $('#citysLayer .a_padd').html('<a >'+html+'</a>');
            $('#provincesLayer').hide();
            $('#citysLayer').show();
        }else {
            //二级
            for(var i=0;i<citysData.length;i++){
                if(this_id == citysData[i].id){
                    var html = '';
                    for(var j=0;j<citysData[i].son.length;j++){

                        html += '<a data-id="'+citysData[i].son[j].id+'">'+citysData[i].son[j].city+'</a>'
                    }
                    // console.log(html);
                    $('#provincesLayer').hide();
                    $('#citysLayer .a_padd').html(html);
                    $('#citysLayer').show();

                }
            }
        }
    });

    //填充表单数据
    $("#citysLayer").on("click" , ".a_padd a" ,function(){
        cityVal= $(this).html();
        $('.city-picker-spanLayer .placeholder').html(proVal+'-'+cityVal)
        cityMassage = proVal+'-'+cityVal;
        $('#provincesLayer').hide();
        $('#citysLayer').hide();
    })

    //提交前手机号验证码验证
    function mobile_submit(userInfo ){
        $.ajax({
            type:"GET",
            url: xmhost+'/api/user/check_sms_code',
            data:{
                mobile : userInfo.mobile,
                code : userInfo.code
            },
            dataType: 'json',
            success: function(res){
                if(res.status == 'true'){
                    postMsg(userInfo);
                }else{
                    $('#smsmsgLayer .error .error_msg').html(res.info);
                    $('#smsmsgLayer .error').css({
                        'color':'#fff',
                        "position":"absolute",
                        "bottom":'-23px',
                        "left":0,
                        'display':'block'
                    });
                    return false;
                }
            },
            error: function(res){
                return false;
            }
        })

    }

    //提交按钮
    function postMsg(userInfo){
        var reg_source = $.trim($("#source").val()), //暂时写死
            name=$('#nusernameLayer').val();
        var submitInfo = {
            name:name,
            city:cityMassage,
            mobile : userInfo.mobile,
            code : userInfo.code ,
            reg_source : reg_source,
            pf_source:1 ,  //pf_source:2(1是pc，2是触屏)
            ip: returnCitySN["cip"]

        };
        $.ajax({
            type:"GET",
            url: host+'/xuemao/formcollection/save_form_data.json',
            data:submitInfo,
            xhrFields: {
                withCredentials: true
            },
            dataType: 'json',
            success: function(res){
                if(res.result == 'succ'){
                    clear_Inter();
                    $('#submsgLayer').fadeIn(500);
                    $('#submsgLayer').html("已提交！");
                    $('#submsgLayer').fadeOut(1000);
                    $('#smsmsgLayer .error').hide();
                    $('#t_codeLayer').val('');
                    $("#smsCodeLayer").attr('disabled','disabled').val('');
                    $("#hq_smsLayer").css({"background":"#eee","color":"#999"});
                    $('.city-picker-spanLayer .placeholder').html('选择省份/自治区');
                    $('#nusernameLayer').val('');
                }else {
                    // show_msg(res.info);
                    $('#submsgLayer').fadeIn(500);
                    $('#submsgLayer').html(res.info);
                    $('#submsgLayer').fadeOut(1000);
                }
            },
            error: function(res){
                return false;
            }
        })
    }

    $('#s_btnLayer').click(function(){
        var phone = $.trim($('#t_codeLayer').val()),
            yz_code = $.trim($('#smsCodeLayer').val());

        var userInfo = {
            mobile : phone,     //手机号
            code : yz_code     //验证码
        };
        if(!checkPhone()){
            return false;
        }
        if(!checkSmsCode()){
            return false;
        }
        if(!t_usrname()){
            return false;
        }
        mobile_submit(userInfo);

    })

    //非本区域隐藏
    $('body').click(function(e) {
        var target = $(e.target);
        if(!target.is('#provincesLayer *') && !target.is('#citysLayer *')) {
            $('#citysLayer').hide();
            $('#provincesLayer').hide();
        }
    });

})