支付功能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>
複製代碼
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。