<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>收银台</title>
    <link rel="stylesheet" href="/component/pear/css/pear.css" />
    <style>
        body {
            background: #f7f7f7;
        }

        .card {
            margin: 18px auto 18px;
            padding: 38px 16px 0px;
            background: #fff;
            -webkit-box-shadow: 0 3px 3px 0 hsla(0, 0%, 92.5%, .44);
            box-shadow: 0 3px 3px 0 hsla(0, 0%, 92.5%, .44);
            border-radius: 12px;
            text-align: center;
            padding-bottom: 38px;
        }

        .order {
            width: 340px;
            margin: 15px auto 21px;
            background: #fbfbfb;
            border-radius: 6px;
            line-height: 42px;
            text-align: left;
        }

        .order span {
            color: #999;
            font-size: 15px;
            margin-left: 14px;
        }

        .goods_name {
            font-weight: 500;
            font-size: 12px;
            color: #999;
            border-bottom: 1px solid #f5f5f5;
            padding-bottom: 20px;
        }

        .price {
            color: #386cfa;
            width: 100%;
            text-align: center;
            margin-top: 16px;
            margin-bottom: 8px;
        }

        .price>span:first-child {
            font-size: 28px;
        }

        .price>span:last-child {
            font-size: 17px;
        }

        .price span {
            font-weight: 700;
        }

        .qrcode>img {
            height: 200px;
        }

        .msg {
            margin-top: 12px;
        }

        .msg>p {
            color: red;
            font-weight: 700;
            line-height: 2em;
        }

        .msg>p:nth-child(1) {
            font-size: 17px;
        }

        .shanxinzha {
            margin-top: 32px;
            width: 100%;
            text-align: center;
        }

        .shanxinzha p {
            color: #999;
            font-size: 14px;
            font-weight: 400;
            margin-left: 5px;
        }

        .note {
            color: red;
            font-size: 22px;
        }
    </style>
</head>

<body>
    <div id="app" class="layui-container">
        <div class="layui-row">
            <div class="card" style="padding-bottom: 18px;padding-top: 15px;">
                <div style="text-align: center;">
                    <svg style="vertical-align: middle;" t="1610806307396" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="6171" width="26" height="26">
                        <path
                            d="M1024 199.18v410.38c0 110-89.54 199.18-200 199.18H200c-110.46 0-200-89.18-200-199.18V199.18C0 89.17 89.54 0 200 0h624c110.46 0 200 89.17 200 199.18z m-553.95 317v46.72q0.9 19.32 12 28.75t30.9 9.43q40.14 0 41.95-38.18v-47.58l86.6 0.45q11.73-0.9 18.49-8.76t7.67-19.54a33.48 33.48 0 0 0-7.67-19.32q-6.77-8.09-18.49-9h-86.6v-27.4l86.15-0.45q11.73-0.9 18.72-9a33.26 33.26 0 0 0 7.89-19.76q-0.9-11.23-7.67-18.42t-18.49-8.09h-66.3l69.91-113.2q9-11.68 9-24.71a50.37 50.37 0 0 0-4.28-15.27 24.48 24.48 0 0 0-7.22-9 27.29 27.29 0 0 0-9.92-4.49 74.75 74.75 0 0 0-12.4-1.8 43.43 43.43 0 0 0-19.4 7.19 54.51 54.51 0 0 0-14 13.48l-75.34 125.83L443 229.18A65.48 65.48 0 0 0 429 215a36.39 36.39 0 0 0-19.4-7.41q-18.49 2.25-25.26 10.11t-9 20.44a36.94 36.94 0 0 0 3.61 18.19 67.53 67.53 0 0 0 8.57 13.7l60.44 106H383q-12.18 0.9-18.72 8.09t-7.89 18.42q1.35 11.68 7.89 19.32t18.72 8.56l87.05 0.45v28.3H383q-12.18 0.9-18.72 8.09t-7.89 18.42a43.81 43.81 0 0 0 7.89 20.44q6.54 9.21 18.72 10.11h87.05z"
                            fill="#4375ff" p-id="6172"></path>
                        <path
                            d="M264.96 903.6m60.2 0l373.67 0q60.2 0 60.2 60.2l0 0q0 60.2-60.2 60.2l-373.67 0q-60.2 0-60.2-60.2l0 0q0-60.2 60.2-60.2Z"
                            fill="#4375ff" p-id="6173"></path>
                    </svg>
                    <img id="payType" style="vertical-align: middle;" src="" style="height:30px;">
                </div>
            </div>
        </div>
        <div class="layui-row">
            <div class="card">
                <div class="order"><span>商户订单号：<span id="order">
                            <?php echo htmlentities($out_trade_no); ?>
                        </span></span></div>
                <div class="goods_name"><span>商品名称：<span id="goods_name">
                            <?php echo htmlentities($name); ?>
                        </span></span></div>
                <div class="price"><span id="money">
                        <?php echo htmlentities($really_price); ?>
                    </span><span>元</span></div>
                <div class="qrcode"><img id="qrcode" src="/static/img/loading.gif">
                </div>
                <div class="msg">
                    <p>请付款 <span class="note">
                            <?php echo htmlentities($really_price); ?>
                        </span> 元，注意不能多付或少付</p>
                    <p>付款后，请等待 5 秒查看</p>
                    <p id="divTime"></p>
                </div>
                <div class="shanxinzha">
                    <p id="payTypeText"></p>
                </div>

            </div>
        </div>
    </div>
    <script src="/component/layui/layui.js"></script>
    <script src="/static/js/awesome-qr.min.js"></script>
    <script>
        const payCode = '<?php echo htmlentities($payUrl); ?>';
        const codeType = '<?php echo htmlentities($code_type); ?>';
        const payType = '<?php echo htmlentities($type); ?>';
        const order = '<?php echo htmlentities($order_id); ?>';
        const QR = AwesomeQR.AwesomeQR;
        (async () => {
            // 支付类型
            const payTpeyImg = document.getElementById('payType');
            const payTypeText = document.getElementById('payTypeText');
            if (payType === 'wxpay') {
                payTpeyImg.src = '/static/img/weixin.jpg';
                payTypeText.innerText = '请使用微信扫码支付'
            } else if (payType === 'alipay') {
                payTpeyImg.src = '/static/img/alipay.jpg';
                payTypeText.innerText = '请使用支付宝扫码支付'
            }
            // 生成二维码
            if (codeType == 0) {
                document.getElementById('qrcode').src = await getQrcode(payCode, QR);
            } else {
                document.getElementById('qrcode').src = payCode;
            }
            // 订单过期时间
            let passtime = 0;
            // 订单状态查询
            let orderTimer = 0;
            const queryOrder = async (url) => {
                if (orderTimer) { clearTimeout(orderTimer); }
                const res = await fetch(url);
                const jsonData = await res.json();
                orderTimer = setTimeout(() => { queryOrder(url) }, 1000);
                if (jsonData.state === 1) {
                    clearTimeout(orderTimer);
                    layer.closeAll();
                    document.getElementById('divTime').innerHTML = '<small class="note">订单支付成功</small>';
                    document.getElementById('qrcode').src = '/static/img/pay_ok.png';// 输出支付成功提示图片
                    setTimeout(() => {
                        location.href = jsonData.return_url;
                    }, 1500);
                }
                passtime = jsonData.passtime;
                if (passtime <= 0) {
                    clearTimeout(orderTimer);
                }
                timer(passtime);
            }
            queryOrder(`/getOrderState/${order}`);
        })();
        /* <?php if ($patt == 0 && $passtime > 0) { ?> */
        // 验证支付结果
        const id = '<?php echo htmlentities($id);?>';
        const reVali = (step) => {
            setTimeout(() => {
                layer.confirm('是否已支付？', { icon: 3, title: '提示', closeBtn: 0 },
                    (index) => {
                        (async () => {
                            const res = await validatePayResult(id, 1);
                            if (res) { reVali(8000) }
                        })()
                        layer.close(index);
                    }, (index) => {
                        reVali(5000);
                        layer.close(index);
                    })
            }, step);
        }
        reVali(10000);
        // 验证支付结果
        async function validatePayResult(id, patt) {
            const lay = layer.load(2);
            let data = { id: id, patt: patt };
            const res1 = await fetch(`/validatePayResult`, { method: 'post', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(data) });
            const rec1_info = await res1.json();
            const info = await new Promise((resolve, reject) => {
                setTimeout(() => {
                    data.patt = 0;
                    fetch(`/validatePayResult`, { method: 'post', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(data) })
                        .then((res2) => { return res2.json() }).then((rec2_info) => {
                            if (rec2_info.code == 0) {
                                layer.close(lay);
                                layer.msg('验证失败，稍后重新验证！');
                                resolve(true);
                            } else {
                                layer.close(lay);
                                layer.msg(rec2_info.msg);
                                resolve(false);
                            }
                        });
                }, 5000);
            })
            return info;
        }
        /* <?php } ?> */
        // 生成二维码
        async function getQrcode(text, QR) {
            const qrcodeUrl = await new Promise((resolve) => {
                new QR({
                    text: text,
                    size: 500,
                }).draw().then((dataURL) => { resolve(dataURL); });
            })
            return qrcodeUrl;
        }
        // 倒计时
        function timer(passtime) {
            let minute = 0, second = 0; // 时间默认值       
            if (passtime > 0) {
                minute = Math.floor(passtime / 60);
                second = Math.floor(passtime) - (minute * 60);
            }
            if (passtime <= 0) {
                document.getElementById('divTime').innerHTML = '<small class="note">订单二维码已过期</small>';
                document.getElementById('qrcode').src = '/static/img/qrcode_timeout.png';// 输出过期二维码提示图片
            } else {
                document.getElementById('divTime').innerHTML = `二维码有效时间：<small class="note">${minute}</small>分<small class="note">${second}</small> 秒，失效勿付`;
            }
        }
    </script>
</body>

</html>