关于前端:网页绑定银行卡支付样式总结

如下图，为效果图

实现纲要
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%);
}

最初一步就是本人整合啦