manyi/static/app/js/wallet.js

var WalletTool = {
    initBankEdit: function (role) {
        $('body').append(`
<div class="main">
    <h5 class="padding-10 margin-0 top-tip-style">注意：提现仅支持个人银行卡，不支持对公账户</h5>
    <div class="mui-content  ">
        <div class="mui-input-group">
            <div class="mui-input-row">
                <label>持卡人</label>
                <input type="text" id="name" maxlength="20" placeholder="请填写" class="mui-text-right">
            </div>
            <div class="mui-input-row">
                <label>卡号</label>
                <input type="text" id="bankId" placeholder="请填写" class="mui-text-right"
                       maxlength="24">
            </div>
            <div class="mui-input-row">
                <label>银行</label>
                <input type="text" id="bankName" maxlength="32" class="mui-text-right">
            </div>
            <div class="mui-input-row">
                <label>类型</label>
                <input type="text" id="cardType" value="借记卡" class="mui-text-right noClick" readonly>
            </div>
            <div class="mui-input-row">
                <label>支行</label>
                <input type="text" id="subBankName" maxlength="32" class="mui-text-right">
            </div>
        </div>

        <div class="custom-subt mui-text-center">
            <a class="c-primary" id="showBankList">
                支持哪些银行？
            </a>
        </div>
    </div>
</div>
<div class="subt">
    <input class="mui-btn-block" type="button" value="保存" id="save">
</div>
<div class="help-tip mui-hidden">
    <div class="help-card ">
        <div class="help-bd">
            <h4>支持的银行</h4>

            <div class="bank-info-list clearfix">
                <div class="bank-info">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#bicon-gongshangyinhang"></use>
                    </svg>
                    <span class="bank-name">中国工商银行</span>
                </div>

                <div class="bank-info">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#bicon-nongyeyinhang"></use>
                    </svg>
                    <span class="bank-name">中国农业银行</span>
                </div>
                <div class="bank-info">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#bicon-zhongguoyinhang"></use>
                    </svg>
                    <span class="bank-name">中国银行</span>
                </div>
                <div class="bank-info">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#bicon-jiansheyinhang"></use>
                    </svg>
                    <span class="bank-name">中国建设银行</span>
                </div>

                <div class="bank-info">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#bicon-zhaoshangyinhang"></use>
                    </svg>
                    <span class="bank-name">招商银行</span>
                </div>

                <div class="bank-info">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#bicon-youchuyinhang"></use>
                    </svg>
                    <span class="bank-name">中国邮政储蓄银行</span>
                </div>
                <div class="bank-info">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#bicon-jiaotongyinhang"></use>
                    </svg>
                    <span class="bank-name">交通银行</span>
                </div>

                <div class="bank-info">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#bicon-pufayinhang"></use>
                    </svg>
                    <span class="bank-name">浦发银行</span>
                </div>
                <div class="bank-info">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#bicon-minshengyinhang"></use>
                    </svg>
                    <span class="bank-name">中国民生银行</span>
                </div>
                <div class="bank-info">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#bicon-xingyeyinhang"></use>
                    </svg>
                    <span class="bank-name">兴业银行</span>
                </div>
                <div class="bank-info">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#bicon-pinganyinhang"></use>
                    </svg>
                    <span class="bank-name">平安银行</span>
                </div>
                <div class="bank-info">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#bicon-zhongxinyinhang"></use>
                    </svg>
                    <span class="bank-name">中信银行</span>
                </div>
                <div class="bank-info">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#bicon-huaxiayinhang"></use>
                    </svg>
                    <span class="bank-name">华夏银行</span>
                </div>
                <div class="bank-info">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#bicon-guangfayinhang"></use>
                    </svg>
                    <span class="bank-name">广发银行</span>
                </div>
                <div class="bank-info">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#bicon-guangdayinhang"></use>
                    </svg>
                    <span class="bank-name">中国光大银行</span>
                </div>
                <div class="bank-info">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#bicon-beijingyinhang"></use>
                    </svg>
                    <span class="bank-name">北京银行</span>
                </div>
                <div class="bank-info">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#bicon-ningboyinhang"></use>
                    </svg>
                    <span class="bank-name">宁波银行</span>
                </div>
                
                <div class="bank-info">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#bicon-shanghaiyinhang"></use>
                    </svg>
                    <span class="bank-name">上海银行</span>
                </div>
                
                <div class="bank-info">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#bicon-nanjingyinhang"></use>
                    </svg>
                    <span class="bank-name">南京银行</span>
                </div>
                
                <div class="bank-info">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#bicon-yinhang"></use>
                    </svg>
                    <span class="bank-name">长子县融汇村镇银行</span>
                </div>
                
                <div class="bank-info">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#bicon-changsha"></use>
                    </svg>
                    <span class="bank-name">长沙银行</span>
                </div>
                
                <div class="bank-info">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#bicon-zhejiangtailongshangyeyinhang"></use>
                    </svg>
                    <span class="bank-name">浙江泰隆商业银行</span>
                </div>
                
                <div class="bank-info">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#bicon-zhongyuanyinhang"></use>
                    </svg>
                    <span class="bank-name">中原银行</span>
                </div>
                
                <div class="bank-info">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#bicon-qiyeyinhanglogo"></use>
                    </svg>
                    <span class="bank-name">企业银行</span>
                </div>
                
                <div class="bank-info">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#bicon-shundenongshangyinhang"></use>
                    </svg>
                    <span class="bank-name">顺德农商银行</span>
                </div>
                
                <div class="bank-info">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#bicon-hengshuiyinhang"></use>
                    </svg>
                    <span class="bank-name">衡水市商业银行</span>
                </div>
                
                <div class="bank-info">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#bicon-changzhiyinhanglogo"></use>
                    </svg>
                    <span class="bank-name">长治市商业银行</span>
                </div>
                
                <div class="bank-info">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#bicon-datongyinhanglogo"></use>
                    </svg>
                    <span class="bank-name">大同市商业银行</span>
                </div>
                
                <div class="bank-info">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#bicon-henanshengnongcunxinyongshelianheshe"></use>
                    </svg>
                    <span class="bank-name">河南省农村信用社</span>
                </div>
                
                <div class="bank-info">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#bicon-ningxiahuanghenongcunshangyeyinhang"></use>
                    </svg>
                    <span class="bank-name">宁夏黄河农村商业银行</span>
                </div>
                
                <div class="bank-info">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#bicon-shanxishengnongcunxinyongshe"></use>
                    </svg>
                    <span class="bank-name">山西省农村信用社</span>
                </div>
                
                <div class="bank-info">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#bicon-anhuishengnongcunxinyongshe"></use>
                    </svg>
                    <span class="bank-name">安徽省农村信用社</span>
                </div>
                
                <div class="bank-info">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#bicon-gansushengnongcunxinyongshelianheshe"></use>
                    </svg>
                    <span class="bank-name">甘肃省农村信用社</span>
                </div>
                
                <div class="bank-info">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#bicon-tianjinnongshangyinhang"></use>
                    </svg>
                    <span class="bank-name">天津农商银行</span>
                </div>
                
                <div class="bank-info">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#bicon-guangxizhuangzuzizhiqunongcunxinyongshelianheshe"></use>
                    </svg>
                    <span class="bank-name">广西壮族自治区农村信用社联合社</span>
                </div>
                
                <div class="bank-info">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#bicon-shanxishengnongcunxinyongshelianheshe"></use>
                    </svg>
                    <span class="bank-name">陕西省农信社</span>
                </div>
                
                <div class="bank-info">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#bicon-shenzhennongcunshangyeyinhang"></use>
                    </svg>
                    <span class="bank-name">深圳农村商业银行</span>
                </div>
                
                <div class="bank-info">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#bicon-yinzhouyinhang"></use>
                    </svg>
                    <span class="bank-name">宁波鄞州农商行</span>
                </div>
                
                <div class="bank-info">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#bicon-zhejiangshengnongcunxinyongshelianheshe"></use>
                    </svg>
                    <span class="bank-name">浙江省农村信用社联合社</span>
                </div>
                
                <div class="bank-info">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#bicon-jiangsushengnongcunxinyongshelianheshe"></use>
                    </svg>
                    <span class="bank-name">江苏省农村信用社联合社</span>
                </div>
                
                <div class="bank-info">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#bicon-jiangsuzijinnongcunshangyeyinhang"></use>
                    </svg>
                    <span class="bank-name">江苏紫金农村商业银行</span>
                </div>
                
                <div class="bank-info">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#bicon-yinhang"></use>
                    </svg>
                    <span class="bank-name">北京中关村银行</span>
                </div>
                
                <div class="bank-info">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#bicon-xingzhanyinhang"></use>
                    </svg>
                    <span class="bank-name">星展银行(中国)</span>
                </div>
                
                <div class="bank-info">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#bicon-zaozhuangyinhang"></use>
                    </svg>
                    <span class="bank-name">枣庄银行</span>
                </div>
                
                <div class="bank-info">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#bicon-haikoulianhenongshangyinhang"></use>
                    </svg>
                    <span class="bank-name">海口联合农商银行</span>
                </div>
                
                <div class="bank-info">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#bicon-nanyangshangyeyinhang"></use>
                    </svg>
                    <span class="bank-name">南洋商业银行</span>
                </div>
            </div>
        </div>
        <div class="help-close">我知道了</div>
    </div>
</div>`)

        $('#bankId')[0].addEventListener('input', function () {
            var value = $("#bankId").val().replace(/\s/g, '').replace(/(\d{4})(?=\d)/g, "$1 ");
            $("#bankId").val(value);
        });
        $('#bankId').change(function () {
            var value = $("#bankId").val().replace(/ /g, "");
            if (value.length >= 14) {
                var url = "/common/getCardBankNameType";
                var data = {
                    "cardNo": value
                };
                sendRequest(url, "GET", data, function (res) {
                    if (res.result == 1) {
                        if (res.para) {
                            $("#bankName").val(res.para.bankName);
                            $("#cardType").val(res.para.cardType);
                        }
                        $("#cardType").addClass("noClick");
                    } else if (res.result == -1) {
                        mui.toast(res.description);
                        $("#cardType").removeClass("noClick");
                    } else {
                        mui.toast(res.description);
                        $("#cardType").removeClass("noClick");
                    }

                });
            }
        });

        $(".help-close").click(function () {
            $(".help-tip").addClass("mui-hidden");
        })

        $("#showBankList").click(function () {
            showBankList()
        })
        $("#save").click(function () {
            save()
        })

        var cardTypePicker;
        mui.ready(function () {
            cardTypePicker = new mui.PopPicker();
            //地址类型
            cardTypePicker.setData([{
                value: '储蓄卡',
                text: '储蓄卡'
            }, {
                value: '信用卡',
                text: '信用卡'
            }]);

            var bankType = document.getElementById('cardType');

            function handler(event) {
                cardTypePicker.show(function (items) {
                    bankType.value = (items[0] || {}).text;
                });
            }

            bankType.addEventListener('tap', handler, false);
        });

        var saveFlag = false;

        function save() {
            var name = $("#name").val();
            var bankId = $("#bankId").val().replace(/ /g, "");
            var bankName = $("#bankName").val();
            var cardType = $("#cardType").val();
            var subBankName = $("#subBankName").val();
            if (!name) {
                mui.toast("请填写持卡人名称");
                return;
            }
            if (!bankId) {
                mui.toast("请填写卡号");
                return;
            }

            if (!bankName) {
                mui.toast("请填写银行名称");
                return;
            }

            var bankNameCheck = false;
            for (var key in  window.BANK_STYLE_MAP) {
                if (key === bankName) {
                    bankNameCheck = true;
                }
            }

            if (!bankNameCheck) {
                mui.toast("仅支持下列银行");
                showBankList()
                return;
            }

            if (!cardType) {
                mui.toast("请选择银行卡类型");
                return;
            }
            if (!subBankName) {
                mui.toast("请填写支行名称，填写错误将可能导致提现失败");
                return;
            }

            if (!saveFlag) {
                saveFlag = true;
                var url = "/" + role + "/saveWalletBank";
                var data = {
                    "name": name,
                    "bankId": bankId,
                    "bankName": bankName,
                    "cardType": cardType,
                    "subBankName": subBankName,
                };
                sendRequest(url, "POST", data, function (res) {
                    if (res.result == 1) {
                        var url = "wallet-bank.html";
                        goPage(url);
                    } else {
                        saveFlag = false;
                        mui.toast(res.description);
                    }
                });
            }
        }

        //展示银行列表
        function showBankList() {
            $(".help-tip").removeClass("mui-hidden");
        }

    }
}