小额绑卡

$(function(){
    //版本控制
    var revisionControl = false,
    //遮罩
    shadow = $('#shadow_win'),
    //是否支持地区
    isArea = '',
    //银行卡号INPUT
    bankNumberInput = $('#bank_number'),
    //开户银行INPUT
    bankNameInput = $('#bank_input'),
    //开户银行支行INPUT
    bankBranchInput = $('#bank_branch_input'),
    //开户行地区INPUT
    bankCityInput = $('#bank_city'),
    //选择开户银行
    chooseBankWrap = $('#choose_bank_wrap'),
    //选择开户支行
    chooseBankBranchWrap = $('#choose_bankBranch_wrap'),
    //选择开户行所在地
    chooseBankCityWrap = $('#choose_bankCity_wrap'),
    //下一步按钮
    nextBtn = $('#btn_next'),
    //修改银行卡按钮
    gobackBtn = $('#btn_goback'),
    //小额绑卡layout
    smallMoneyLayout = $('#small_money_layout'),
    //小额绑卡成功ID
    smallMoneySuccLayout = $('#small_money_succ'),
    //是否同意协议
    isChecked = true,
    //提交按钮
    submitBtn =$('#btn_submit'),
    //数据
    storeData = null,
    //银行卡号
    bankCodeNum = '',
    //开户银行
    $bankLayout = $('#bank_layout'),
    $bankInner = $('#bank_inner'),
    $bankCloseBtn = $('#bank_layout_close'),
    $chooseBankInput = $('#choose_bank_input'),
    //开户支行
    $bankBranchLayout = $('#bank_branch_layout'),
    $bankBranchInner = $('#bank_branch_inner'),
    $bankBranchCloseBtn = $('#bank_branch_close'),
    $chooseBankBranchInput = $('#choose_bankBranch_input'),
    //开户行编码
    $bankCode = '',
    //支行id
    $accountBankId = '',
    //省份变量
    $citUrl = '/area/getAllProvinceinfo',
    $citAjax = null,
    $citHtml = '',
    $citTpl = '',
    $citLayout = $('#city_layout'),
    $citInnerWrap = $('#city_inner'),
    $citCloseBtn = $('#city_layout_close'),
    //县市变量
    $couData = '',
    $couUrl = '',
    $couAjax = null,
    $couHtml = '',
    $couTpl = '',
    $couLayout = $('#county_layout'),
    $couInnerWrap = $('#county_inner'),
    $couGoBackBtn = $('a.go-city', $couLayout),
    $url = '',
    //省份名称
    $bankProvince = '',
    //省份编码
    $provinceCode = '',
    //城市名称
    $bankCity = '',
    //城市编码
    $cityCode = '',
    //省份加城市名称
    $bankProvinceCity = '',
    //获取银行名缓存数据
    $getBankNameData = null,
    //获取银行支行缓存数据
    $getBankBranchData = null,
    //获取银行开户地省份缓存数据
    $getBankCityData = null,
    //获取银行开户地县级市缓存数据
    $getBankCouData = null,
    //提示信息文案
    infoMap = {
        'phoneVerify' : '请输入手机验证码!',
        'chooseBank' : '请选择开户银行,不能为空!',
        'chooseBankBranch' : '请选择开户支行,不能为空!',
        'chooseCity' : '请选择开户所在地,不能为空!',
        'writeAmount' : '请填写收到的金额!'
    };
    //检测是否为空
    checkEmpty = function(self, info){
        if(  $( self ).val() == ''  ){
            MS.messShow( info );
            return false;
        }
        return true;
    },
    //检测是否为空
    checkHtmlEmpty = function(self, info){
        if(  $( self ).html() == ''  ){
            MS.messShow( info );
            return false;
        }
        return true;
    },
    //阻止事件默认行为和冒泡
    stopEvent = function(e){
        e.preventDefault();
        e.stopPropagation();
    },
    //遮罩
    shadowFun = function(){
        if ( !shadow.length ) {
            shadow = $( '<div id="shadow_win" style="opacity: .8; 100%;height:100%;position: fixed;top: 0;left: 0;" class="z-act-pop"></div>' );
            shadow.appendTo( 'body' );
        }else{
            shadow.show();
        }
    };
    if( !submitBtn.length ){ return; }
    //设置用户姓名
    $( '.you-name', small_money_layout ).html( MS.cookie.get( '_name' ) || MS.STORAGE.get( '_name' ) );
    //输入框显示修改
    $.each($('input'), function(){
        if( $(this).val() != '' ){
            $(this).prev().hide();
        }else{
            $(this).prev().show();
        }
    });
    $("input").focus(function(){
        $(this).prev().hide();
    }).blur(function(){
        if( $(this).val() != '' ){
            $(this).prev().hide();
        }else{
            $(this).prev().show();
        }
    });
    var userStatus = MS.getQueryStringArgs()["status"];
    if( userStatus ){
        $('section.layout', smallMoneyLayout).eq(0).hide();
        $('section.layout', smallMoneyLayout).eq(1).show();
    }
    //选择开户行
    var chooseBankWindow = function(e){
        stopEvent(e);
        var $getBankUrl = '';
        var $bankTpl = '';
        var $bankHtml = '';
        shadowFun();
        $bankLayout.removeClass('hidden');
        if( !$getBankNameData ){
            MS.request( $getBankUrl, {}, function(json){
                var ec = json.ec;
                var cd = json.cd;
                var temp = [];
                $getBankNameData = temp.concat( cd.show_bankCode_first, cd.show_bankCode_other );
                if( ec == "M00000" ){
                    $.each( $getBankNameData, function(index, item){
                        $bankTpl += '<a href="javascript:;" pubName="'+item.pubName+'" isArea="'+item.isArea+'">'+item.pubValue+'</a>';
                    } );
                    $bankHtml = $bankTpl;
                    $bankInner.html( $bankHtml );
                }else if( ec == 'M00003' ){
                    window.location.href = '/page/regist/login.jsp';
                }else{
                    MS.messShow( json.em );
                    $bankLayout.addClass('hidden');
                    if( shadow.length ){ shadow.hide(); }
                }
            });
        }
        $bankInner.delegate( 'a', 'click', function(ev){
            stopEvent(ev);
            //清除所有列表className
            for( var i = 0; i < $('a', $bankInner).length; i++ ){
                $('a', $bankInner)[i].className = '';
            }
            $( this ).toggleClass('current');
            //设置开户行编码
            $bankCode = $( this ).attr( 'pubName' );
            //设置是否支持地区
            isArea = $( this ).attr( 'isArea' );
            //隐藏遮罩和当前选择开户行浮层、设置选择开户行input属性值
            var setAttrValue = function( target ){
                bankNameInput.html( target.html() );
                bankNameInput.prev().hide();
                if( shadow.length ) { shadow.hide(); }
                $bankLayout.addClass('hidden');
            };
            if( isArea == 0 ){
                setAttrValue( $(this) );
                //显示选择支行input
                chooseBankBranchWrap.removeClass('hidden');
            }else{
                setAttrValue( $(this) );
            }
        });
        //生成拖动
        var $bankIscroll = null, $h = 32;
        $bankInner.css( 'height', $('#bank_inner a').length * $h + $h );
        $citIscroll = new IScroll( '#bank_wrap', {
            scrollbars: true,//有滚动条
            probeType: 2,
            fadeScrollbars: true,//滚动时显示滚动条,默认影藏,并且是淡出淡入效果
            bounce: true,//边界反弹
            mouseWheel: true, click: true,
            interactiveScrollbars: true,//滚动条可以拖动
            shrinkScrollbars: 'scale',// 当滚动边界之外的滚动条是由少量的收缩。'clip' or 'scale'.
            momentum: true// 允许有惯性滑动
        } );
        if( $bankCloseBtn.length ){
            $bankCloseBtn.on( 'click', function(ev){
                stopEvent(ev);
                $bankLayout.addClass('hidden');
                if( shadow.length ){ shadow.hide(); }
            } );
        }
    };
    //处理选择开户支行
    var chooseBankBranchWindow = function(e){
        stopEvent(e);
        var $getBankBranchUrl = '/bank/getBanksByBankId';
        var $bankBranchTpl = '';
        var $bankBranchHtml = '';
        shadowFun();
        $bankBranchLayout.removeClass('hidden');
        if( !$getBankBranchData ){
            MS.request( $getBankBranchUrl, { 'bankCode' : $bankCode }, function(json){
                var ec = json.ec;
                var cd = json.cd;
                if( ec == "M00000" ){
                    $.each( cd, function(index, item){
                        $bankBranchTpl += '<a href="javascript:;" bankid="'+item.bankId+'" >'+item.bankName+'</a>';
                    } );
                    $bankBranchHtml = $bankBranchTpl;
                    $bankBranchInner.html( $bankBranchHtml );
                }else if( ec == 'M00003' ){
                    window.location.href = '/page/regist/login.jsp';
                }else{
                    MS.messShow( json.em );
                    $bankBranchLayout.addClass('hidden');
                    if( shadow.length ){ shadow.hide(); }
                }
            } );
        }
        $bankBranchInner.delegate( 'a', 'click', function(ev){
            stopEvent(ev);
            //清除所有列表className
            for( var i = 0; i < $('a', $bankBranchInner).length; i++ ){
                $('a', $bankBranchInner)[i].className = '';
            }
            $( this ).toggleClass('current');
            //设置支行id
            $accountBankId = $( this ).attr( 'bankid' );
            //设置选择支行input属性值
            bankBranchInput.html( $( this ).html() );
            bankBranchInput.prev().hide();
            //隐藏遮罩
            if( shadow.length ) { shadow.hide(); }
            //隐藏选择开户支行当前浮层
            $bankBranchLayout.addClass('hidden');
        });
        //生成拖动
        var $bankBranchIscroll = null, $h = 32;
        $bankBranchInner.css( 'height', $('#bank_branch_inner a').length * $h + $h );
        $citIscroll = new IScroll( '#bank_branch_wrap', {
            scrollbars: true,//有滚动条
            probeType: 2,
            fadeScrollbars: true,//滚动时显示滚动条,默认影藏,并且是淡出淡入效果
            bounce: true,//边界反弹
            mouseWheel: true, click: true,
            interactiveScrollbars: true,//滚动条可以拖动
            shrinkScrollbars: 'scale',// 当滚动边界之外的滚动条是由少量的收缩。'clip' or 'scale'.
            momentum: true// 允许有惯性滑动
        } );
        if( $bankBranchCloseBtn.length ){
            $bankBranchCloseBtn.on( 'click', function(ev){
                stopEvent(ev);
                $bankBranchLayout.addClass('hidden');
                if( shadow.length ){ shadow.hide(); }
            } );
        }
    };
    //获取省份、城市
    var getCityCounty = function(){
        if( !$citLayout.length || !$couLayout.length ){ return; }

        if( !$getBankCityData ){
            $citAjax = MS.request( $citUrl, {}, function(json){
                var ec = json.ec;
                var cd = json.cd;
                if( ec == 'M00000' ){
                    $.each( cd, function(index, item){
                        $citTpl += '<a provinceCode="'+item.pifCode+'" href="javascript:;">'+item.pifName+'</a>';
                    });
                    $citHtml = $citTpl;
                    $citInnerWrap.html( $citHtml );
                }else if( ec == 'M00003' ){
                    window.location.href = '/page/regist/login.jsp';
                }
            } );
        }
        //处理点击开户行省份
        $citInnerWrap.delegate( 'a', 'click', function(e){
            stopEvent(e);
            //清除所有列表className
            for( var i = 0; i < $('a', $citInnerWrap).length; i++ ){
                $('a', $citInnerWrap)[i].className = '';
            }
            $( this ).toggleClass( 'current' );
            //省份名称
            $bankProvince = $( this ).html();
            //设置省份名称到chooseCity属性值
            bankCityInput.html( $bankProvince );
            bankCityInput.prev().hide();
            //隐藏省份
            $citLayout.addClass( 'hidden' );
            //显示县级市
            $couLayout.removeClass( 'hidden' );
            //省份编码
            $provinceCode = $( '#city_inner a.current' ).attr( 'provinceCode' );
            $couData = {
                'pcode' : $provinceCode
            };
            $couAjax = MS.request($couUrl, $couData, function(resp){
                var ec = resp.ec;
                var cd = resp.cd;
                $couTpl = '';
                if( ec == 'M00000' ){
                    $.each( cd, function(index, item){
                        $couTpl += '<a cityCode="'+item.citCode+'" href="javascript:;">'+item.citName+'</a>';
                    });
                }else if( ec == 'M00003' ){
                    window.location.href = '/page/regist/login.jsp';
                }else{
                    MS.messShow( json.em );
                    $couLayout.addClass('hidden');
                    if( shadow.length ){ shadow.hide(); }
                }
                $couHtml = $couTpl;
                $couInnerWrap.html($couHtml);
            });
            //处理点击开户行县级市
            $couInnerWrap.delegate( 'a', 'click', function(ev){
                stopEvent(ev);
                //清除所有列表className
                for( var i=0; i < $('a', $couInnerWrap).length; i++ ){
                    $('a', $couInnerWrap)[i].className = '';
                }
                $( this ).toggleClass( 'current' );
                //城市名称
                $bankCity = $( this ).html();
                //城市编码
                $cityCode = $( this ).attr( 'cityCode' );
                //省份加城市名称
                $bankProvinceCity = $bankProvince + $bankCity;
                //设置省份加城市名称到chooseCity属性值
                bankCityInput.html( $bankProvinceCity );
                //隐藏当前浮层
                $couLayout.addClass( 'hidden' );
                //隐藏遮罩浮层
                if( shadow.length ){ shadow.hide(); }
            } );
            //点击县城浮层头部返回按钮
            if( $couGoBackBtn.length ){
                $couGoBackBtn.on('click', function(evn){
                    stopEvent(evn);
                    //隐藏县城浮层
                    $couLayout.addClass('hidden');
                    //显示省份浮层
                    $citLayout.removeClass('hidden');
                });
            }
        } );
        //生成拖动
        var $citIscroll = null, $couIscroll = null, $h = 32;
        $('#city_inner').css( 'height', $('#city_inner a').length * $h + $h );
        $citIscroll = new IScroll( '#city_wrap', {
            scrollbars: true,//有滚动条
            probeType: 2,
            fadeScrollbars: true,//滚动时显示滚动条,默认影藏,并且是淡出淡入效果
            bounce: true,//边界反弹
            mouseWheel: true, click: true,
            interactiveScrollbars: true,//滚动条可以拖动
            shrinkScrollbars: 'scale',// 当滚动边界之外的滚动条是由少量的收缩。'clip' or 'scale'.
            momentum: true// 允许有惯性滑动
        } );
        $('#county_inner').css( 'height', $('#county_inner a').length * $h + $h );
        $couIscroll = new IScroll( '#county_wrap', {
            scrollbars: true,//有滚动条
            probeType: 2,
            fadeScrollbars: true,//滚动时显示滚动条,默认影藏,并且是淡出淡入效果
            bounce: true,//边界反弹
            mouseWheel: true, click: true,
            interactiveScrollbars: true,//滚动条可以拖动
            shrinkScrollbars: 'scale',// 当滚动边界之外的滚动条是由少量的收缩。'clip' or 'scale'.
            momentum: true// 允许有惯性滑动
        } );
    };
    getCityCounty();
    //处理选择城市和省份
    var chooseCityWindow = function(e){
        stopEvent(e);
        shadowFun();
        $citLayout.removeClass('hidden');
        //选择开户行所在地关闭按钮
        if( $citCloseBtn.length ){
            $citCloseBtn.on('click', function(ev){
                stopEvent(ev);
                $citLayout.addClass('hidden');
                if ( shadow.length ){ shadow.hide(); }
            });
        }
    };
    //下一步提交判断银行卡号信息是否完成
    var judgeBankInfo = function(e){
        stopEvent(e);
        bankCodeNum = bankNumberInput.val().replace(/s+/g,"");
        var $ajax = null;
        $url = ( revisionControl == false ) ? '/realnameBindbank/bindBank' : '/regist/bindBank';
        //判断应该走那个版本
        if( revisionControl == true ){
            $data = {
                'realName' : MS.cookie.get( '_name' ) || MS.STORAGE.get( '_name' ), //cookie 姓名信息
                'idNo' : MS.cookie.get( '_verify' ) || MS.STORAGE.get( '_verify' ), //cookie 身份证信息
                'isArea' : isArea, //是否支持地区
                'cardNo' : bankCodeNum, //银行卡号
                'bankCode' : $bankCode, //开户行编码
                'accountBankId' : $accountBankId , //支行id
                'bankProvince' : $bankProvince, //省份名称
                'provinceCode' : $provinceCode, //省份编码
                'bankCity' : $bankCity, //城市名称
                'cityCode' : $cityCode //城市编码
            };
            if( isArea == 0 ){
                if( checkHtmlEmpty( bankBranchInput, infoMap.chooseBankBranch ) ){
                    versionsA();
                }
            }else{
                versionsA();
            }
        }else{
            $data = {
                'realName' : MS.cookie.get( '_name' ) || MS.STORAGE.get( '_name' ), //cookie 姓名信息
                'idNo' : MS.cookie.get( '_verify' ) || MS.STORAGE.get( '_verify' ), //cookie 身份证信息
                'cardNo' : bankCodeNum //银行卡号
            };
            versionsB();
        }
        //绑卡a版
        function versionsA(){
            if( checkHtmlEmpty( bankNameInput, infoMap.chooseBank ) &&  checkHtmlEmpty( bankCityInput, infoMap.chooseCity ) && luhmCheck( bankCodeNum ) ){
                ajaxrequest();
            }
        }
        //绑卡b版
        function versionsB(){
            if( luhmCheck( bankCodeNum ) ){
                ajaxrequest();
            }
        }
        //异步请求
        function ajaxrequest(){
            $ajax = MS.request( $url, $data, function(json){
                var ec = json.ec;
                if( ec == 'M00000' ){
                    $('section.layout', smallMoneyLayout).eq(0).hide();
                    $('section.layout', smallMoneyLayout).eq(1).show();
                    $('#bankEndNum').html( $data.cardNo.substring($data.cardNo.length-4, $data.cardNo.length+1) );
                }else if( ec == 'M03020' ){
                    // 信息不全
                    shadowFun();
                    var $dialog = $( '#dialog_win' );
                    var $content = $( '<div class="dese">推荐您绑定民生银行,或其他国有、大型股份制银行的银行卡,更方便更快捷。</div><div class="dia-btn"><a class="left" id="dia_left_btn" href="javascript:;">修改银行卡</a><span>|</span><a href="javascript:;" class="right" id="dia_right_btn">继续原卡流程</a></div>' );
                    if( !$dialog.length ){
                        $dialog = $( '<div id="dialog_win" class="z-act"></div>' );
                        $content.appendTo( $dialog );
                        $dialog.appendTo( 'body' );
                    }else{
                        $dialog.show();
                    }
                    //去换卡
                    $('#dia_left_btn').on('click', function(even){
                        stopEvent(even);
                        if ( shadow.length ){ shadow.hide(); }
                        $dialog.hide();
                        bankNumberInput.focus();
                        revisionControl = false;
                        chooseBankWrap.addClass('hidden');
                        chooseBankCityWrap.addClass('hidden');
                    });
                    //保留卡
                    $('#dia_right_btn').on('click', function(even){
                        stopEvent(even);
                        if ( shadow.length ){ shadow.hide(); }
                        $dialog.hide();
                        chooseBankWrap.removeClass('hidden');
                        chooseBankCityWrap.removeClass('hidden');
                        revisionControl = true;
                    });
                }else{
                    //没成功跳到身份验证页面
                    MS.messShow( json.em, '/page/bindingcard/bind-verify.jsp' );
                }
            } );
        }
    };
    //点击同意协议处理
    if( !$("#agreement").prop("checked") ){
        submitBtn.addClass('no-submit');
    }else{
        submitBtn.removeClass('no-submit');
    }
    $('#agreement').on( 'click', function(){
        if( !$("#agreement").prop("checked") ){
            submitBtn.addClass('no-submit');
            isChecked = false;
        }else{
            submitBtn.removeClass('no-submit');
            isChecked = true;
        }
    } );
    //提交
    var submitFun = function(e){
        if( !$("#agreement").prop("checked") ){ return; }
        stopEvent(e);
        var sysMoneyNum = $('#sys_money_num'), setPayPass = $('#set_pay_pass');
        if( !sysMoneyNum.length || !setPayPass.length ){ return; }
        if( checkEmpty( sysMoneyNum, infoMap.writeAmount ) && checkPassword( setPayPass ) && isChecked == true ){
            var url = '/realnameBindbank/verifyAmountPaypwd';
            var data = {
                'amount' : sysMoneyNum.val(),
                'payPwd' : setPayPass.val()
            };
            MS.request( url, data, function(json){
                var _ec = json.ec;
                if( _ec == 'M00000' ){
                    smallMoneyLayout.addClass('hidden');
                    smallMoneySuccLayout.removeClass('hidden');
                }else if( _ec == 'M00003' ){
                    window.location.href = '/page/regist/login.jsp';
                }else if( _ec == 'M03008' ){
                    //绑卡成功单设置支付密码失败
                    MS.messShow( json.em, '/page/bindingcard/setpayPwd.jsp' );
                }else{
                    //没成功跳到身份验证页面
                    MS.messShow( json.em );
                }
            } );
        }
    };
    function keyUpFun(){
        var value = $( this ).val().replace(/s/g,'').replace(/(d{4})(?=d)/g,"$1 ");
        $( this ).val( value );
    }
    //分格银行卡号
    bankNumberInput.off( 'keyup', keyUpFun ).on( 'keyup', keyUpFun );
    //点击选择开户银行
    if( bankNameInput.prev('b.label-val') ){
        bankNameInput.prev('b.label-val').off( 'click', chooseBankWindow ).on( 'click', chooseBankWindow );
    }
    bankNameInput.off( 'click', chooseBankWindow ).on( 'click', chooseBankWindow );
    //点击选择开户支行
    if( bankBranchInput.prev('b.label-val') ){
        bankBranchInput.prev('b.label-val').off( 'click', chooseBankBranchWindow ).on( 'click', chooseBankBranchWindow );
    }
    bankBranchInput.off( 'click', chooseBankBranchWindow ).on( 'click', chooseBankBranchWindow );
    //点击选择开户行所在地
    if( bankCityInput.prev('b.label-val') ){
        bankCityInput.prev('b.label-val').off( 'click', chooseCityWindow ).on( 'click', chooseCityWindow );
    }
    bankCityInput.off( 'click', chooseCityWindow ).on( 'click', chooseCityWindow );
    //点击下一步按钮
    nextBtn.off( 'click', judgeBankInfo ).on( 'click', judgeBankInfo );
    //点击提交按钮
    submitBtn.off('click', submitFun ).on('click', submitFun );
});

原文地址:https://www.cnblogs.com/sunhw360/p/4624111.html