小额绑卡
$(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; width: 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 );
});
