<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">
    <meta content="email=no" name="format-detection">
    <script src="https://www.shouyinbei.net/resources/js/alipayjsapi.min3.1.1.js"></script>
    <title>向商户付款</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        html,body{
            width:100%;
            height:100%;
            margin:0 auto;
            padding:0px;
            background-color:#EFEFF4;
        }
        .main{
            margin: 0 .6rem;
            background-color: #fff;
            padding: 0 .8rem;
            min-height: 20rem;
            border-radius: 0 0 .2rem .2rem;
            padding: .8rem;
        }
        .div-item{
            display: flex;
            justify-content: space-between;
            line-height: 3rem;
        }
        .item-label{
            color: #989898;
            font-size: .8rem;
        }
        .item-hr{
            border-bottom: 1px solid #e8e6e6;
        }
        .div-item-body{
            text-align: center;
            line-height: 2rem;
            padding: 1.5rem 0;
        }
        .item-amt{
            font-size: 32px;
        }
        .item-icon-item{
            font-size: 20px;
        }
        .item-content{
            height: 17rem;
        }
        .btn{
            text-align: center;
        }
        .pay-btn{
            height: 2.3rem;
            width: 80%;
            border: none;
            border-radius: 5px;
            background-color: #ff2d4b;
            color: #fff;
        }
        .div-item-time{
            text-align: center;
        }
        .item-label-name{
            color: #666;
        }
        .times-item{
            background-color: #ff2d4b;
            padding: 0 4px;
            color: #fff;
            border-radius:4px;
        }
        .pay-btn:active{
            background: #ff2d4b;
            opacity: 0.5;
        }
        .disabled{
            background-color: #ff2d4b61;
        }
        .shade{
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,.1);
            z-index: 1002;
            overflow: auto;
        }
        .loading{
            z-index: 10000;
            position: absolute;
            width: 100%;
            display: none;
            margin: 40px 0;
            top: 30%;
        }
        .loading-body{
            width: 30%;
            text-align: center;
            margin: 0 auto;
            padding: .4rem 0;
            background-color: #fff;
            border-radius: 4px;
        }
        .loading-icon{
            background-image: url(data:image/gif;base64,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);background-size:100% 100%;
            height: 30px;
            width: 30px;
            margin: 10px auto;
        }
    </style>
</head>
<body>
<div class="body">
    <div class="main">
        <div class="item-content">
            <div class="div-item">
                <label class="item-label">商户</label>
                <div class="item-name" th:text="${storeName}"></div>
            </div>
            <div class="item-hr"></div>
            <div class="div-item">
                <label class="item-label">订单总额</label>
                <div class="item-name">￥<span th:text="${payAmt}"></span></div>
            </div>
            <div class="div-item-body">
                <label class="item-label">您需要支付</label>
                <div class="item-name item-amt"><span class="item-icon-item">￥</span><span th:text="${payAmt}"></span></div>
            </div>
            <div class="div-item-time">
                <div class="times">
                    <input type="hidden" id="overtime">
                    <label class="item-label-name">支付剩余</label>
                    <span class="times-item minute" id="minute" th:text="${min}"></span> :
                    <span class="times-item second" id="second" th:text="${sec}"></span>
                </div>
            </div>
        </div>
        <div class="btn">
            <button class="pay-btn" onclick="pay()">立即支付</button>
        </div>
    </div>
    <div id='shade' class="shade"></div>

    <div class="loading" id="loading">
        <div class="loading-body">
            <div class="loading-icon">
            </div>
            <div class="loading-msg">
                支付中...
            </div>
        </div>
    </div>

    <input type="hidden" id="tk" th:value="${tk}">
    <input type="hidden" id="userId" th:value="${userId}">
    <input type="hidden" id="payWay" th:value="${payWay}">
</div>
</body>
<script src="/wap/resources/js/jquery.min.js"></script>
<script type="text/javascript">
    (function (doc, win) {
        var docEl = doc.documentElement,
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
            recalc = function () {
                var clientWidth = docEl.clientWidth;
                if (!clientWidth) return;
                docEl.style.fontSize = 16 * (clientWidth / 320) + 'px';//其中“20”根据你设置的html的font-size属性值做适当的变化
            };

        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window);
</script>
<script>
    let index = setInterval("countDown()",1000);
    // tradePay();
    let countDown = function (){
        let minute = $("#minute").html();
        let second = $("#second").html();
        if(minute == "00" && second == "00"){
            clearInterval(index);
            disablePay();
        }else{
            if(second == "00"){
                second = 59;
                minute = parseInt(minute) - 1;
                if(minute < 10){
                    minute = "0" + minute;
                }
            }else if(parseInt(second) <= 10){
                second = "0"+(parseInt(second) - 1);
            }else{
                second = parseInt(second) - 1;
            }
            $("#minute").html(minute);
            $("#second").html(second);
        }
    }
    function disablePay(){
        $(".pay-btn").addClass("disabled").removeAttr("onclick").attr("disabled",true);
    }
    let pay = function (){
        tradePay();
    }
    function tradePay(){
        let tk = $("#tk").val();
        let userId = $("#userId").val();
        let payWay = $("#payWay").val();

        $("#shade").show();
        $("#loading").show();
        $.ajax({
            url : '/wap/merchant/tradePay',
            data : {
                "tk" : tk,
                "payWay" : payWay,
                "userId" : userId
            },
            dataType : "json",
            type : "post",
            success : function(res) {
                $("#shade").hide();
                $("#loading").hide();
                if (res.code == 200) {
                    var rdata = res.data;
                    if("WXZF" == payWay){
                        WeixinJSBridge.invoke('getBrandWCPayRequest', {
                            // 商品名称
                            "appId" : rdata.payAppId,
                            "timeStamp" : rdata.payTimeStamp,
                            "nonceStr" : rdata.paynonceStr,
                            "package" : rdata.payPackage,
                            "signType" : rdata.paySignType,
                            "paySign" : rdata.paySign,
                        }, function(res) {
                            if (res.err_msg == "get_brand_wcpay_request:ok" || res.err_msg == "stopMonitoringBeacons:ok") {
                                //成功之后跳转地址
                                window.location = '/wap/merchant/jumpUrl?orderNumber='+rdata.orderNumber;
                            } else {
                                cancelPay(rdata.orderNumber);
                                alert("支付失败");
                            }
                        })
                    }else if("ZFBZF" == payWay){
                        var reg=/^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/)(([A-Za-z0-9-~]+).)+([A-Za-z0-9-~\/])+$/;
                        if(reg.test(rdata.source)){
                            window.location = rdata.source;
                        }else{
                            ap.tradePay({
                                tradeNO : rdata.source
                            }, function(res) {
                                if (res.resultCode == '9000') {
                                    window.location = '/wap/merchant/jumpUrl?orderNumber='+rdata.orderNumber;//订单支付成功
                                } else if (res.resultCode == '8000') {
                                } else if (res.resultCode == '4000') {
                                    cancelPay(rdata.orderNumber);
                                    ap.alert("订单支付失败");
                                } else if (res.resultCode == '6001' || res.resultCode == '99') {
                                    cancelPay(rdata.orderNumber);
                                } else if (res.resultCode == '6002') {
                                    cancelPay(rdata.orderNumber);
                                    ap.alert("网络连接出错");
                                }
                            });
                        }
                    }else{
                        window.location = rdata.redirectUrl;
                    }
                } else {
                    alert(res.message);
                }
            }
        })
    }

    function cancelPay(m) {
        var url =  "/wap/merchant/cancelPay/"+m;
        $.get(url, (res)=>{
            console.log(res);
        })
    }
</script>
</html>