如下图,为效果图
实现纲要
1,绑卡的时候通过卡号获取是什么银行的
2,通过银行卡的简码获取银行的logo
3,银行划分,依据银行匹配不同的背景色彩
实现过程
1,绑卡的时候通过卡号获取是什么银行的
1,下载 npm install bankcardinfo;
2,实例化:var BIN = require('bankcardinfo');
3:调用它提供的办法来执行(第一个参数就是卡号,第二个参数是回调函数,其中蕴含报错信息和胜利后获取到的数据):
BIN.getBankBin("6222005865412565805",(err,data)=>{ if(!err){ console.log("///",data) } })
返回后果:
2,通过银行卡的简码获取银行的logo
第一步的后果能够获取到bankCode
下载了银行logo图标之后,能够上传到你们的服务器上,通过bankCode.png 就能够拿到银行logo了
银行logo地址:
链接: https://pan.baidu.com/s/1BYt-... 明码: 7dpi
3,银行划分,依据银行匹配不同的背景色彩
辛苦UI大佬把银行分为了四大类,
//依据银行卡的bank_sim判断展现什么色彩/*js代码*/bankColor(bankCode) { let arr1 = ["ARCU","ASCB","BANKWF","BHB","BJBANK","BJRCB","BOC","BOCD","BOD","BODD","BOJZ","BOP","bankNo","BOQH","CDB","CDCB","CDRCB","CZZB","CSRCB","CSCB","CRCBANK","CQBANK","CMB","CITIC","DLB","DRCBCL","DYCCB","DZBANK","FDB","FSCB","H3CB","GZB","GYCB","GDRCC","GCB","HBC","HKBEA","HNRCC","HRXJB","HSBANK","HURCB","JLBANK","JJBANK","JINCHB","ICBC","HZCCB","HXBANK","JSB","JSRCU","KLB","KORLABANK","KSRB","LSBANK","NXBANK","NJCB","MTBANK","LSCCB","LSBC","NXRCU","NYNB","ORBANK","QDCCB","SDRCU","SRBANK","SPABANK","SJBANK","TRCB","WHRCB","WJRCB","WRCB","ZJKCCB","ZGCCB","ZBCB","YXCCB","YQCCB","XYBANK","XXBANK","XLBANK","ZJTLCB","ZZBANK"], arr2 = ["ABC","BOSZ","GZRCU","GSRCU","HANABANK","JRCB","JXBANK","NBYZ","PSBC","SCRCU","YNRCC","ZJNK","ZYCBANK"], arr3 = ["BGB","BSB","CEB","CABANK","DAQONGB","GRCB","JHBANK","JZBANK","NBBANK","QLBANK","SZSBK","TACB","WZCB","ZRCBANK"], arr4 = ["BOCY","OHAIB","BOYK","CBKF","CCB","CCQTGB","CGNB","CIB","COMM","CMBC","EGBANK","FJHXBC","FXCB","GLBANK","GDB","HDBANK","HKB","HSBK","JNBANK","HZCB","JSBANK","LANGFB","NCB","LZYH","LYBANK","SDEB","SHBANK","TCRCB","TCCB","SXCB","SRCB","SPDB","SHRCB","URMQCCB","WHCCB","XABANK","XCYH","XTB"]; if(arr1.includes(bankCode)) { return 1; } else if(arr2.includes(bankCode)) { return 2; } else if(arr3.includes(bankCode)) { return 3; } else if(arr4.includes(bankCode)) { return 4; } else { return 5; }},/*css代码*/.card_item_color1 { background: linear-gradient(133deg, #ff6971 0%, #ff444a 100%);}.card_item_color2 { background: linear-gradient(133deg, #4eca6d 0%, #3caa56 100%);}.card_item_color3 { background: linear-gradient(133deg, #fdd000 0%, #fdb400 100%);}.card_item_color4 { background: linear-gradient(133deg, #71a7ff 0%, #386eff 100%);}
最初一步就是本人整合啦