lede/package/lean/luci-app-jd-dailybonus/luasrc/view/jd-dailybonus/cookie_tools.htm

<%+cbi/valueheader%>
<script src="https://cdn.jsdelivr.net/npm/qrcode_js@1.0.0/qrcode.min.js"></script>
<style>
    #mask-box {
        width: 100%;
        height: 100%;
        z-index: 1000;
        display: flex;
        position: absolute;
        text-align: center;
        background: rgba(255, 255, 255, .8);
    }
    #mask-box #code-box {
        width: 288px;
        height: 315px;
        border: 1px solid #585858;
        padding: 15px;
        position: absolute;
        box-shadow: 0px 0px 7px 3px rgb(0 0 0 / 20%);
        background: #fff url('/luci-static/resources/icons/loading.gif') no-repeat center center;
        border-radius: 4px;
    }
    #mask-box #code-box img {
        margin-top: 5px;
    }
    #mask-box #close-link {
        float: right;
        width: 32px;
        height: 32px;
        margin: -32px;
        cursor: pointer;
        overflow: hidden;
        background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHhtbDpzcGFjZT0icHJlc2VydmUiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiB5PSIwIiB4PSIwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGlkPSLlnJblsaRfMSIgdmVyc2lvbj0iMS4xIiB3aWR0aD0iNDdweCIgaGVpZ2h0PSI0N3B4IiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgc3R5bGU9IndpZHRoOjEwMCU7aGVpZ2h0OjEwMCU7YmFja2dyb3VuZC1zaXplOmluaXRpYWw7YmFja2dyb3VuZC1yZXBlYXQteTppbml0aWFsO2JhY2tncm91bmQtcmVwZWF0LXg6aW5pdGlhbDtiYWNrZ3JvdW5kLXBvc2l0aW9uLXk6aW5pdGlhbDtiYWNrZ3JvdW5kLXBvc2l0aW9uLXg6aW5pdGlhbDtiYWNrZ3JvdW5kLW9yaWdpbjppbml0aWFsO2JhY2tncm91bmQtY29sb3I6aW5pdGlhbDtiYWNrZ3JvdW5kLWNsaXA6aW5pdGlhbDtiYWNrZ3JvdW5kLWF0dGFjaG1lbnQ6aW5pdGlhbDthbmltYXRpb24tcGxheS1zdGF0ZTpwYXVzZWQiID48ZyBjbGFzcz0ibGRsLXNjYWxlIiBzdHlsZT0idHJhbnNmb3JtLW9yaWdpbjo1MCUgNTAlO3RyYW5zZm9ybTpyb3RhdGUoMGRlZykgc2NhbGUoMC44LCAwLjgpO2FuaW1hdGlvbi1wbGF5LXN0YXRlOnBhdXNlZCIgPjxjaXJjbGUgZmlsbD0iIzMzMyIgcj0iNDAiIGN5PSI1MCIgY3g9IjUwIiBzdHlsZT0iZmlsbDpyZ2IoODksIDg5LCA4OSk7YW5pbWF0aW9uLXBsYXktc3RhdGU6cGF1c2VkIiA+PC9jaXJjbGU+CjxnIHN0eWxlPSJhbmltYXRpb24tcGxheS1zdGF0ZTpwYXVzZWQiID48cGF0aCBkPSJNMjUuMyA0NWg0OS41djEwSDI1LjN6IiBmaWxsPSIjZTE1YjY0IiB0cmFuc2Zvcm09InJvdGF0ZSgtNDQuOTk2IDQ5Ljk5NyA0OS45OTcpIiBzdHlsZT0iZmlsbDpyZ2IoMjU1LCAyNTUsIDI1NSk7YW5pbWF0aW9uLXBsYXktc3RhdGU6cGF1c2VkIiA+PC9wYXRoPjwvZz4KPGcgc3R5bGU9ImFuaW1hdGlvbi1wbGF5LXN0YXRlOnBhdXNlZCIgPjxwYXRoIGQ9Ik00NSAyNS4zaDEwdjQ5LjVINDV6IiBmaWxsPSIjZTE1YjY0IiB0cmFuc2Zvcm09InJvdGF0ZSgtNDUuMDAxIDUwIDUwKSIgc3R5bGU9ImZpbGw6cmdiKDI1NSwgMjU1LCAyNTUpO2FuaW1hdGlvbi1wbGF5LXN0YXRlOnBhdXNlZCIgPjwvcGF0aD48L2c+CjxtZXRhZGF0YSB4bWxuczpkPSJodHRwczovL2xvYWRpbmcuaW8vc3RvY2svIiBzdHlsZT0iYW5pbWF0aW9uLXBsYXktc3RhdGU6cGF1c2VkIiA+PGQ6bmFtZSBzdHlsZT0iYW5pbWF0aW9uLXBsYXktc3RhdGU6cGF1c2VkIiA+Y2xvc2U8L2Q6bmFtZT4KPGQ6dGFncyBzdHlsZT0iYW5pbWF0aW9uLXBsYXktc3RhdGU6cGF1c2VkIiA+Y2xvc2UscmVqZWN0LG9mZixkaXNhYmxlLHJlbW92ZSxkZWxldGUsY2FuY2VsLGRyb3AsY29sbGFwc2U8L2Q6dGFncz4KPGQ6bGljZW5zZSBzdHlsZT0iYW5pbWF0aW9uLXBsYXktc3RhdGU6cGF1c2VkIiA+Ynk8L2Q6bGljZW5zZT4KPGQ6c2x1ZyBzdHlsZT0iYW5pbWF0aW9uLXBsYXktc3RhdGU6cGF1c2VkIiA+bmVmM2Q0PC9kOnNsdWc+PC9tZXRhZGF0YT48L2c+PCEtLSBnZW5lcmF0ZWQgYnkgaHR0cHM6Ly9sb2FkaW5nLmlvLyAtLT48L3N2Zz4=') no-repeat center center;
    }
    #mask-box #load-link {
        color: #fbfbfb;
        left: 0;
        right: 0;
        margin: 0 10px;
        bottom: 115px;
        cursor: pointer; 
        display: block;
        position: absolute;
        background: #e4393c;
        line-height: 48px;
        text-decoration: none;
    }
    div[id$="-html"] {
        display: none;
    }
    div[data-prefix$="Cookies"] {
        position: relative;
    }
</style>

<script type="text/javascript">
(function( window, document, undefined ) {
    // 选取 DOM 元素
    var selector, section = document.querySelector("[data-prefix$='Cookies']");

    // 遮罩容器
    var mask = document.createElement('div');
    mask.id = 'mask-box';

    // 二维码容器
    var code = document.createElement('div');
    code.id = 'code-box';
    code.innerHTML = "请使用 “手机京东” 进行扫码认证";

    // 刷新按钮
    var load = document.createElement('a');
    load.id = 'load-link';
    load.innerHTML = "刷新";

    // 创建二维码
    var make = new QRCode( code, { correctLevel: QRCode.CorrectLevel.L });

    // 关闭按钮
    var link = document.createElement('a');
    link.id = 'close-link';
    link.addEventListener('click', ( e ) => {
        XHR.halt();
        XHR._q = [];
        mask.remove();
        return false;
    });

    // 二维码层居中
    var center = function() {
        if ( selector.offsetTop <= 320 ) {
            code.style.top = selector.offsetTop + selector.offsetHeight + "px";
        } else {
            code.style.top = selector.offsetTop - code.offsetHeight + "px";
        }
        code.style.left = ( selector.offsetWidth - code.offsetWidth ) / 2 + "px";
    };

    // 获取二维码
    var feedback = function() {
        // 获取通信数据
        XHR.get( '<%=luci.dispatcher.build_url("admin", "services", "jd-dailybonus","qrcode")%>', null, ( x, d ) => {
            if ( x.status != 200 ) {
                alert('获取二维码失败!');
                return false;
            }
            // 移除刷新
            load.remove();
            // 创建二维码
            make.clear();
            make.makeCode( d.qrcode_url );
            // 元素居中
            center();

            // 监听扫码反馈
            XHR.poll( 3, '<%=luci.dispatcher.build_url("admin", "services", "jd-dailybonus","check_login")%>', { check_url: d.check_url }, ( x, d ) => {
                if ( d.error == 0 ) {
                    // 清除线程
                    XHR.halt();
                    XHR._q = [];
                    // 回写 Cookie 数据
                    mask.remove();
                    selector.value = d.cookie;
                } else if ( d.error == 21 || d.error == 261 ) {
                    // 清除线程
                    XHR.halt();
                    XHR._q = [];
                    // 插入容器
                    if ( !document.contains( load ) ) {
                        // 插入按钮
                        load.addEventListener('click', feedback );
                        code.prepend( load );
                    }
                }
            });
        });
    };

    // 鼠标事件
    var event = function( e ) {
        // 区分单击、双击事件
        if ( e.target.tagName == "INPUT" && e.type == "dblclick" ) {
            selector = e.target;
        } else if ( e.target.tagName == "IMG" && e.type == "click" && /add/ig.test( e.target.src ) ) {
            selector = section.getElementsByTagName("INPUT");
            selector = selector.item( selector.length - 1 );
        } else {
            return false;
        }
        // 插入容器
        if ( !document.contains( mask ) ) {
            section.prepend( mask );
            mask.prepend( code );
            code.prepend( link );
            center();
        }
        // 获取及监听扫码事件
        feedback();
    };

    // 绑定事件
    section.addEventListener( 'click', event );
    section.addEventListener( 'dblclick', event );
})( window, document );
</script>
<%+cbi/valuefooter%>