zoukankan      html  css  js  c++  java
  • 小额绑卡

    $(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 );
    });

  • 相关阅读:
    Win32 程序开发入门:一个最简单的Win32程序
    DirectShow 进行视频预览和录制
    DirectShow 获取音视频输入设备列表
    (原)关于人民币找零钱的问题
    (转)The C10K problem翻译
    (原)kenel开机logo的制作
    (原)关于udp的socket发送数据耗时的问题探讨
    (转)x264的一些参数设置对编码效率的影响
    (原)关于获取ffmpeg解析rtsp流sdp中带有sps,pps的情况
    (转)java 层调用Jni(Ndk) 持久化c c++ 对象
  • 原文地址:https://www.cnblogs.com/sunhw360/p/4624111.html
Copyright © 2011-2022 走看看