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>
    #qrcontainer {
        position: fixed;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        z-index: 5000;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(255, 255, 255, .8);
        text-align: center;
        transition: all 0.3s;
    }
    #qrcontainer.hidden{
        opacity: 0;
        visibility: hidden;
    }

    #qrcontainer .qframe {
        background-color: #ffffff;
        padding: 1rem;
        border-radius: 0.5rem;
        border: #6D8A88 1px solid;
        -webkit-box-shadow: 0px 0px 7px 3px rgba(0, 0, 0, 0.2);
        box-shadow: 0px 0px 7px 3px rgba(0, 0, 0, 0.2);
        position: relative;
    }
    #qrcontainer .qframe #refresh_qrcode{
        width: 256px;
        height: 256px;
        position: absolute;
        background-color: rgba(0, 0, 0, 0.5);
        left: 1rem;
        top: 1rem;
        color: #ffffff;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    #qrcontainer .qframe #refresh_qrcode.hidden{
        opacity: 0;
        visibility: hidden;
    }
    #qrcontainer .qframe #refresh_qrcode h3{
        font-weight: normal;
    }
    #qrcontainer .qframe #refresh_qrcode .refresh{
        display: block;
        background: #e4393c;
        width: 80px;
        height: 30px;
        margin: 0 auto;
        line-height: 30px;
        opacity: 1;
        z-index: 19;
        color: #fbfbfb;
        text-decoration: none;
        cursor: pointer;
    }
    #qrcontainer .qframe .info {
        padding: 1rem 0 0 0;
    }
</style>
<div id="qrcontainer" class="hidden">
    <div class="qframe">
        <div id="refresh_qrcode" class="hidden">
            <div>
                <h3>二维码已失效</h3>
                <div class="refresh" onclick="get_code()">刷新</div>
            </div>
        </div>
        <div id="qrcode"></div>
        <div class="info">请使用京东手机APP扫码</div>
    </div>
</div>

<script type="text/javascript">
    const QRCODE_URL = '<%=luci.dispatcher.build_url("admin", "services", "jd-dailybonus","qrcode")%>';
    const CHECK_LOGIN_URL = '<%=luci.dispatcher.build_url("admin", "services", "jd-dailybonus","check_login")%>';
    let ckid = 0;
    let config_index = document.querySelector(".cbi-section-node").getAttribute("id").split("-").pop();
    let ck_input_name ="cbid.jd-dailybonus."+config_index+".Cookies";
    let ck_input_container = document.getElementById("cbi-jd-dailybonus-"+config_index+"-Cookies");
    
    //初始化二维码
    try {
        qrcode = new QRCode(document.getElementById("qrcode"),
                {
                    text: "sample",
                    correctLevel: QRCode.CorrectLevel.L
                });
        ck_input_container.addEventListener('dblclick', function(e){
            let el_name = e.target.getAttribute("name");
            if (el_name == ck_input_name){
                ckid = e.target.getAttribute("id").split(".").pop();
                get_code();
            }
         });
    } catch (error) {
        alert("网络离线状态无法使用二维码获取Cookie，请刷新后重试！")
    }

    //获取二维码
    function get_code(){
        XHR.get(QRCODE_URL, null, (x,d) => {
            document.getElementById("qrcontainer").classList.remove("hidden");
            document.getElementById("refresh_qrcode").classList.add("hidden");
            qrcode.clear();
            qrcode.makeCode(d.qrcode_url);
            checkLogin(d.check_url);
        });
        return false;
    }

    function checkLogin(check_url){
        let cname = "cookie" + ckid
        XHR.poll(3, CHECK_LOGIN_URL, { check_url: check_url, id: cname }, (x, d) => {
            if (d.error == 0) {
                XHR.halt();
                XHR._q = [];
                document.getElementById("qrcontainer").classList.add("hidden");
                document.getElementById("refresh_qrcode").classList.add("hidden");
                let prefix_array = document.getElementsByClassName("cbi-input-text")[0].getAttribute("id").split(".")
                prefix_array.pop()
                let prefix = prefix_array.join(".")+".";
                document.getElementById(prefix+ckid).value = d.cookie
            } else if (d.error == 21 || d.error == 261) {
                XHR.halt();
                XHR._q = [];
                document.getElementById("refresh_qrcode").classList.remove("hidden");
            }
        });
    }

</script>
<%+cbi/valuefooter%>