支付功能ing...

时间 2019-12-04
标签支付功能 ing 繁體版
原文原文链接
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #zfCard a.hover {
            color: red;
        }

        #zfCont>div {
            display: none;
        }

        #zfCont>div.show {
            display: block;
        }

        #fs1 a.red {
            color: red;
        }

        .CAPION {
            transition: all .4s;
            opacity: 0;
            color: red;
        }
    </style>
</head>

<body>


    <div class="zf">
        <div id="zfCard">
            <a class="hover" id="zf1">储蓄卡</a>
            <a id="zf2">微信扫码支付</a>
            <a id="zf3">支付宝帐号</a>
        </div>
        <div id="zfCont">
            <div class="show" id="fs1">
                <a value="ZSYH">招商银行</a>
                <a value="PFYH">浦发银行</a>
                <a value="NYXH">农业银行</a>
                <a value="GFYH">广发银行</a>
            </div>
            <div id="fs2">
                <input id="qrCodeMes" type="hidden" value="http://www.runoob.com" style="width:80%" />
                <div id="qrcode"></div>
            </div>
            <div id="fs3">33333</div>
        </div>
    </div>
    <a id="verify">确认</a>

    <div class="CAPION" id="CAPION">请先选择银行</div>
    <script src="http://jiaoyu.60design.cn:8081/pZ/js/jquery.1.8.3min.js"></script>
    <script src="http://www.xuefu.com/byxf/g-js/qrcode.min.js"></script>
    <script>
        // 兼容dom2事件
        eventUntil = {
            readyEvent: function (fn) {
                if (fn == null) {
                    fn = document;
                }
                var oldonload = window.onload;
                if (typeof window.onload != 'function') {
                    window.onload = fn;
                } else {
                    window.onload = function () {
                        oldonload();
                        fn();
                    };
                }
            },
            addEvent: function (element, type, handler) {
                if (element.addEventListener) {
                    element.addEventListener(type, handler, true);
                } else if (element.attachEvent) {
                    element.attachEvent('on' + type, function () {
                        handler.call(element);
                    });
                } else {
                    element['on' + type] = handler;
                }
            },
            // 取消事件的默认行为
            preventDefault: function (event) {
                if (event.preventDefault) {
                    event.preventDefault();// 标准w3c
                } else {
                    event.returnValue = false;// IE
                }
            },
            // 获取事件目标
            getTarget: function (event) {
                // 标准W3C 和 IE
                return event.target || event.srcElement;
            },
            // 获取event对象的引用，取到事件的全部信息，确保随时能使用event；
            getEvent: function (e) {
                var ev = e || window.event;
                if (!ev) {
                    var c = this.getEvent.caller;
                    while (c) {
                        ev = c.arguments[0];
                        if (ev && Event == ev.constructor) {
                            break;
                        }
                        c = c.caller;
                    }
                }
                return ev;
            }
        };
        //   支付
        var PATTERN = {
            VERIFY: document.getElementById('verify'), //确认支付按钮
            CAPION: document.getElementById('CAPION'),//获得未选卡提示
            zfCardTit: document.getElementById('zfCard').getElementsByTagName('a'),//获得支付选项卡tit
            zfCont: document.getElementById('zfCont').getElementsByTagName('div'),//支付选项卡内容
            bankList: document.getElementById('fs1').getElementsByTagName('a'),//银行卡列表
            qrcode: document.getElementById('qrcode'),//获取二维码
            qrCodeMes: document.getElementById("qrCodeMes"),//获取二维码编码值
            hrefTime: 500,//跳转提示时间
            capionTime: 1200,//未选卡提示时间
            cardHover: function () { 
                // 为银行卡添加当前hover
                var _this = this;
                for (var i = 0; i < this.bankList.length; i++) {
                    this.bankList[i].onclick = function () {
                        for (var i = 0; i < _this.bankList.length; i++) {
                            _this.bankList[i].className = '';
                        }
                        this.className = 'red';
                    }
                    this.bankList[i].setAttribute('title', this.bankList[i].innerText);//为银行卡添加title
                }
            },
            tabCard: function () {
                // 点击tab切换
                var _this = this;
                for (var i = 0; i < this.zfCardTit.length; i++) {
                    this.zfCardTit[i].index = i;
                    eventUntil.addEvent(this.zfCardTit[i], 'click', CardHovers);
                    function CardHovers() {
                        for (var i = 0; i < _this.bankList.length; i++) {
                            _this.bankList[i].className = '';//点击每一个选项卡清空银行卡hover
                        }
                        for (var i = 0; i < _this.zfCardTit.length; i++) {
                            _this.zfCardTit[i].className = '';
                            _this.zfCont[i].className = '';
                        }
                        this.className = 'hover';
                        _this.zfCont[this.index].className = 'show';

                        this.id === "zf2" ? (_this.VERIFY.style.opacity = '0') : (_this.VERIFY.style.opacity = '1')//点击支付宝和微信支付时隐藏确认支付按钮
                    }
                }
            },
            //银行卡支付----点击判断支付跳转
            zfHref: function () {
                var _this = this;
                eventUntil.addEvent(this.VERIFY, 'click', payJump);//调用事件监听
                function payJump() {
                    if (_this.zfCardTit[0].className === "hover") {
                        for (var i = 0; i < _this.bankList.length; i++) {
                            if (_this.bankList[0].className === "red" ||
                                _this.bankList[1].className === "red" ||
                                _this.bankList[2].className === "red" ||
                                _this.bankList[3].className === "red") {
                                var curRed = $('.red');//获得选中的当前银行卡
                                zfCardVal = curRed.attr('value');
                                _this.VERIFY.innerHTML = '正在跳往' + curRed.text() + '支付...';
                                setTimeout(function () {//即将跳转到第三方接口
                                    window.location.href = 'http://www.xuefu.com/pay/pay_type/CXK/defaultbank/' + zfCardVal;
                                }, _this.hrefTime);
                                capionOpacity();//调用隐藏选卡提示
                            } else if (_this.bankList[i].className != "red") {
                                _this.CAPION.style.opacity = "1";//提示选择卡
                                setTimeout(function () {
                                    capionOpacity();
                                }, _this.capionTime);
                                break;
                            } else {
                                _this.VERIFY.innerHTML = "确认";
                                capionOpacity();
                            }
                        }
                    }
                    function capionOpacity() { _this.CAPION.style.opacity = "0"; }//隐藏选卡提示
                }
                eventUntil.preventDefault(this.VERIFY);//阻止支付按钮默认跳转
            },
            //微信支付
            weChatPay: function () {
                //动态根据input的value值生成动态微信二维码
                var qrcode = new QRCode(this.qrcode, {
                    width: 100,
                    height: 100
                });
                //   function makeCode() {
                //     qrcode.makeCode(qrCodeMes.value);//将value转化为二维码生成img
                // }
                // makeCode();
                // 向后端发送请求获得动态二维码
                wxQrcode();
                function wxQrcode() {
                    $.ajax({
                        url: 'r',
                        type: 'POST',
                        data: {
                            qrCodeMes: qrCodeMes.value //将vlue值传到后台，请求反馈
                        },
                        dataType: 'json',
                        success: function (data) {
                            if (data.status == 'SUCCESS') {
                                qrcode.makeCode(data.content);
                            } else {
                                setTimeout(wxQrcode,2000);
                            }
                        },
                        error : function () {
                            setTimeout(wxQrcode,2000);
                        }
                    });
                    // 自动设置微信二维码一小时一刷新
                    setInterval(wxQrcode,60*10000);
                }
            }
        }
        PATTERN.cardHover();
        PATTERN.tabCard();
        PATTERN.zfHref();
        PATTERN.weChatPay();  //扫微信二维码支付

    </script>
</body>

</html>
复制代码