网页绑定银行卡支付样式总结

如下图，为效果图

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

最后一步就是自己整合啦