<!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">
    <!--    <link rel="stylesheet" href="https://act.weixin.qq.com/static/cdn/css/wepayui/0.1.1/wepayui.min.css">-->
    <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;
        }
        .payinfo{
            display: block;
            position: absolute;
            bottom: 0;
            height: 13rem;
            width: 100%;
            overflow: hidden;
            transition: .4s;
        }
        table{
            width:100%;
            height: 91%;
            bottom: 0;
            background-color:white;
        }
        table tr{
            height: 25%;
        }
        table tr td{
            text-align:center;
            width:24.9999999%;
            border-right:1px solid #D9D9D9;
            border-bottom:1px solid #D9D9D9;
        }
        table tr td:active{
            background-color:#ECECEC;
        }
        .keybord-return,.keybord-stop{
            width:30px;
            height:30px;
            margin:0px auto;
            color:white;
        }
        .keybord-return{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAMAAACahl6sAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAALpQTFRFAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAqyRq8wAAAD10Uk5TAAM/gJ+efz5Q2ddPAouKAZZ8nP0vrfcLN03+GcxYu9gSGkCBndobPbe8+QonMuCH7xOIW0fNtCwra4NgHN+ehK8AAAABYktHRACIBR1IAAAACXBIWXMAAABIAAAASABGyWs+AAAB4UlEQVR42u3c51LCQBiF4Y2IgDQVRcWCvffe9v5vS2FGhSH5kTLzney8zxWcd3ZD+BXnAAAAAAAAAAAAgFSiucp8daEWWe/Iq97wY4tN6yW5tNr+T6drvSa77pKfsGw9J7PWymSH761aDyqmw/s160XZTN+rkf669aYsZs7jx4b1qII6/Kb1qvRm79VIzXpWarHn4Qdb1ruK6fDb1rvSir9X3u9YD0sp4Tz8bst6WTEdwz3rZekk3avGvvUyOuiwR4cWOrTQoYUOLXRooUMLHVro0EKHFjq00KGFDi10aKFDCx1a6NBChxY6tNChhQ4tdIhpx3cMy9ZRD6QjaoTR4Q7CeD6cOwzjPJyrhnEezh3FhByfWK/KoBLK1TqNfdhLeCbRMJCfX9cM5IXoXCeUkqQ/jeV7TijRQ4keSvRQoocSPZTooUQPJXoo0UOJHkr0UKKHEj2U6KFEDyV6KNFDiR5K9FCihxI9lOgJpySUD04ml5yV7jPlSberfN8tTjiTc+tdRZVcXFrvSi/+dl1Zz8og9kyurVcVVVK6b2KPzd6uG+tJGc2cya31ooJK7u6tB2U2dbt65Xsf/ms9DH47+o/WY/J5eh5nDF5erZfk9vb+Ufn8sl4BAAAAAAAAAAAAY9/5YLt8mhkMlgAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAyMC0wNy0wNFQxNTowMjo0OSswODowMMIgQKAAAAAldEVYdGRhdGU6bW9kaWZ5ADIwMjAtMDctMDRUMTU6MDI6NDkrMDg6MDCzffgcAAAAR3RFWHRzdmc6YmFzZS11cmkAZmlsZTovLy9ob21lL2FkbWluL2ljb24tZm9udC90bXAvaWNvbl91ZmVhaXVpd2lrZy9iYWNrLnN2Z4Ft+LMAAAAASUVORK5CYII=); background-size:100% 90%; }
        .keybord-stop{background-image:url(data:image/png;base64,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); background-size:100% 100%;}
        .pay{
            color:#ffffff;
            font-size:120%;
            background-color:#df6051;
        }
        .pay:active{
            /*background-color: #df6051;*/
            background-color: rgba(223,96,81,0.7);
        }
        .shouyin{
            text-align: center;
            color: #9b9b9b;
            font-size: 13px;
            margin-bottom: 10px;
        }
        .logo{
            background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAD70lEQVRoQ9VaTYgURxT+Xm8w7PQs6CFgXDCXEAKeFHKLRKMo6HoSc0qmqlfxICSn/KCXmIMuiZ4UBEG3q+aokItKiGSTDZ5CIHtK9LAXhRVJDoZs9ywR7CfVuzPMzM5sV/X0MNt92Z7q9773vu2qej/VhIKuSIgDBO8AgEkCTybApLlfg1/ygCUGLSH9m8xVtZ4rwjQNAhLXgikQjgE8BWCHI9ZTgO6Cccevh3cddVvizgT4zJnqSqMRMFMA8O68hjv1aIGIw/FKJaRr1yIXTGsCkZTbx5iChJNpEL3tYsRalnnRI2/2JXFYVeqZjZ4VgVjK95hRJ+BdG9BBZRh4RISar9TvWViZBFZq0/sTSn7OAhrGc4+9D8frs79shL0hgUiIgECzw3DOFpPB01Wtw37yfQlEQnxJoG9tDQ1TjsFfVbX+rpeNngRiIU4CdGOYTrlj8ylf65vdeusIxEIcTffnTXnxlK/1vXbXOgiYrZKYHwBD2iYH/qfwIhPtbd9iOwisiOBsAr44sJ0hAnigc+M6nGmaaBEwEbYRxQtDC1JFkWJerFT93c2I3SLQkPJTZlwpys4wcYjwWUWpq8ZGi0Asgj9cchsC5l8yfi3C0THCBwzss8eiBV+He1oEIiEOEehHewAgYXwzUVfnXXT6yS7X5HmP8LULFoMPV7W+n76BhhCXGPS5C8Bo34CZOny5ovUXKYFYyMcAdroScJHPknWbQinaE1+rt6jxyfT77CUPsgx0BY/5ilb7XXSyZGMh/wewJUuuw4/E20uxCC4CfNZJkXC8otT3LjpZsrGUF8A4lyXX+ZxmDAENcM1F0dcqMw13wUun8cen38TYi6duelSnhpA/MWCKcdvrpq/VKVthF7lYSJODHbXVIWCOIiEfulRaDD5YVEeh29HVJgHfsSWQVm6RkP8RMGGr9IKwbZtS/7bLLwfBG+b3RBj+M8j4cym3bmE8t/WFgWVnAuDkiF+v/9DhqAlESH4bdLwh5Qlm3HIl4DSFDDgRPqooddvctxstatyBwKM8i7iJ/+faza4ug0WNZ/JIF3GebdQgJ4Q0kHmMDbsGWV4MhkP1XIHMOGViwbKU+4ogMKHUfCwkZ5Fd/5xmcqUSm4UAmVQijYI5krlN8AZWk7l0J8mRTo+aQEc6naegGTWBjoJmdRq5lZSjJdBVUq4FJKei/jWPdr0ehn+57xzrNUwq4iX8ty1Wz6I+R1vlfkJo9WdsjfeSI8Z1At6xwujXVjHKpW5sGQKlby2uLuYSN3ebc7DU7fUmiVIfcLSRKO8RU5NEqQ/5WmuizMesrelU5oPu9ghZ2k8NeoX5Un7s0S9fGdXnNq8Aors/k02FsxcAAAAASUVORK5CYII=);background-size:100% 100%;
            width: 2.1875rem;
            height: 2.1875rem;
        }
        .icon{
            background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAC7UlEQVRYR72WTWgTURDH/7ObJi1YENFT4kVtD/YgSMFaaOrbpfYgeElaURA8CIKKIAhCQYyCIAiC0KLgodBDwUqhiODB8N42RfFQEYoVBUGRCiKioPUjNbsjK4mk2ySbTTe+687O7/dm3hehiSOXy+20bXuEiAQzTwkhznpx1Cx+ET4FoKuMMSaEOF3ObIpAFfhfruM4l0zTzJQkmiIwNze3y7btKWbuXFNyoh/RaHRzb2/vT/db6AKWZd1h5tsAlgHcBZDwSHxLJBJbOjo68qELSCkniegwgC8A9gPYQETTzLypJNG0FkgpJ4joaNlsX2qadpCIttm2PQOglZlvGoZxMvRFqJQaB3DM229mzsVisaF8Pr8XwCHDMI6Evg2VUm6/j1fbzkR0Lx6PD5d6HqqAUuoWgBM+Z8n07OzscCaTcSrFNbwLlFKjAE75wGfa29uHu7u7f1etUCMnoWVZN5j5jM+/9wEMCSF+1YoLXAEp5XUiWnOmeyAPVlZWhgYHB7/7TTCQgFLqGoBzPkkftrW1pXt6er76wQMdREqpqwDO1ywnkdR1Pd3X1+ceRHWNuiogpbxCRCO1Mrp7nohSQohPdZGLQb4CUsrLRHTBJ+kjAGkhxIcg8JotyGazndFoNOLeap473ct44jhO2jTN90HhNQUsy3JX+pKmaYs1JOYLhUJqYGDgXSPwmgJKqSwAk5kPRCKRtxUknmmalurv73/TKLyqQPFFs1hK7DjOnpaWluWSBBEtMLO74F6vB15VQCl1EcC/Z5MbGIlEtjNza/GlkzIM49V64VUFpJRPiWi3F1AoFDbGYrF4Mpl8EQa8ooC3/EXQvOM4E5qmjQsh3KdWaGPNOVBefiKatG17zDTNx6ERPYkqCTwHMCqEcO/6po9VAm75w+xvPfarBJRS7hN6Rz0/BonRdf1jtYl5BThI4iCxuq53VZL4bwIAtgohlrzSlRbhviAzqydW1/XPyWRyoVKs73VcD2A9MX8AVWwjMF0q1kMAAAAASUVORK5CYII=);background-size:100% 100%;
            width: .9375rem;
            height: .9375rem;
        }
        .body{
            padding: 2rem 1rem;
        }
        .store-info{
            display: flex;
            align-items: center;
        }
        .name{
            margin-left: .5rem;
        }
        .main-amt{
            height: 3rem;
            padding: 1.2rem 0 0 0;
        }
        .amt-content {
            display: flex;
            background: #fff;
            padding: .5rem 1rem;
            border-radius: 4px;
            height: 2.5rem;
            font-size: 1.125rem;
        }
        .input-label {
            flex: 1;
            line-height: 2.5rem;
        }
        .input-box {
            line-height: 2.5rem;
            font-size: 1.5625rem;
            color: #777;
        }
        .gb {
            display: inline-block;
            width: 2px;
            height: 1.875rem;
            margin-top: -6px;
            background: #df6051;
            vertical-align: middle;
            animation: gb 1.3s infinite;
        }
        .money-input {
            font-weight: bold;
            color: #df6051;
        }
        @keyframes gb {
            from {
                opacity: 1;
            } to {
                  opacity: 0;
              }
        }
        .remark-info{
            display: flex;
            align-items: center;
            font-size: 13px;
            color: #9e9e9e;
        }
        .set-remark{
            margin-left: 5px;
        }
        .main-title{
            display: flex;
            justify-content: space-between;
        }

        .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;
        }
        .dialog{
            z-index: 8888;
            height: 13rem;
            width: 100%;
            position: absolute;
            display: none;
        }
        .dialog-content{
            background: #fff;
            height: 11rem;
            border-radius: 10px;
            padding: 10px 20px;
            margin: 0 auto;
            width: 60%;
        }
        .btns{
            padding: 0 0 0 5%;
        }
        .btn-cancel{
            width: 45%;
            height: 1.8rem;
            border-radius: 20px;
            border: none;
        }
        .btn-submit{
            width: 45%;
            height: 1.8rem;
            border-radius: 20px;
            border: none;
            background-color: #df6051;
            color: #fff;
        }
        .remark-text{
            border: 1px solid #e4e0e0;
            height: 6rem;
            width: 100%;
        }
        .remark-body{
            margin-top: 15px;
        }
        .loading{
            z-index: 10000;
            position: absolute;
            width: 100%;
            display: none;
            margin: 40px 0;
        }
        .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;
        }
        .dialog-confirm{
            height:5rem;
        }
        .dialog-body{
            text-align: center;
            padding: 10px 0;
            font-size: 17px;
        }
        .confirm-btn-div{
            height: 1.5rem;
            margin-top: 10px;
        }
        .confirm-btn{
            height: 100%;
            border-radius: 20px;
            border: none;
        }
    </style>
</head>
<body>
<div class="body">
    <div class="main-title">
        <div class="store-info">
            <div class="logo"></div>
            <div class="name" th:text="测试门店"></div>
        </div>
        <div class="remark-info">
            <div class="icon"></div>
            <div class="set-remark" onclick="showRemarkDialog()">设置备注</div>
        </div>
    </div>
    <div class="main-amt">
        <div class="amt-content" onclick="showInput()">
            <div class="input-label">金额</div>
            <div class="input-box">￥ <span class="money-input" name="comsumeMoney" id="comsumeMoney"></span> <span class="gb"></span></div>
        </div>
    </div>

</div>
<div class="payinfo" id="payinfo">
    <div class="shouyin" onclick="showInput()">
        <p>收&nbsp;银&nbsp;就&nbsp;用&nbsp;收&nbsp;银&nbsp;呗</p>
    </div>
    <table cellspacing="0" cellpadding="0" id="table1">
        <tr>
            <td class="paynum" onclick="inputAmt(1)">1</td>
            <td class="paynum" onclick="inputAmt(2)">2</td>
            <td class="paynum" onclick="inputAmt(3)">3</td>
            <td id="pay-return" onclick="inputAmt('del')"><div class="keybord-return"></div></td>
        </tr>
        <tr>
            <td class="paynum" onclick="inputAmt(4)">4</td>
            <td class="paynum" onclick="inputAmt(5)">5</td>
            <td class="paynum" onclick="inputAmt(6)">6</td>
            <td rowspan="3" class="pay" id="pay">支付</td>
        </tr>
        <tr>
            <td class="paynum" onclick="inputAmt(7)">7</td>
            <td class="paynum" onclick="inputAmt(8)">8</td>
            <td class="paynum" onclick="inputAmt(9)">9</td>
        </tr>
        <tr>
            <td id="pay-stop" onclick="hideInput()"><div class="keybord-stop"></div></td>
            <td id="pay-zero" onclick="inputAmt(0)">0</td>
            <td id="pay-float" onclick="inputAmt('.')">.</td>
        </tr>
    </table>
</div>
<div id='shade' class="shade"></div>

<div class="dialog" id="dialogConfirm">
    <div class="dialog-content dialog-confirm">
        <div class="remark-body">
            <div class="dialog-body">确认支付吗？</div>
        </div>
        <div class="btns confirm-btn-div">
            <button class="btn-cancel confirm-btn" onclick="confirmDialog('none','cancel')">取消</button>
            <button class="btn-submit confirm-btn" onclick="confirmDialog('none','submit')">确定</button>
        </div>
    </div>
</div>

<div class="dialog" id="dialog">
    <div class="dialog-content">
        <div class="label">设置备注</div>
        <div class="remark-body">
            <textarea id="remark" class="remark-text"></textarea>
        </div>
        <div class="btns">
            <button class="btn-cancel" onclick="hideRemarkDialog('cancel')">取消</button>
            <button class="btn-submit" onclick="hideRemarkDialog('submit')">确定</button>
        </div>
    </div>
</div>

<div class="loading" id="loading">
    <div class="loading-body">
        <div class="loading-icon">
        </div>
        <div class="loading-msg">
            支付中...
        </div>
    </div>
</div>
</body>
<script>
    function inputAmt(o){
        var dom = document.getElementById('comsumeMoney');
        var txt = dom.innerText;
        if(!txt){
            if(o === 'del' || o === '.'){
                return;
            }
        }
        if(o === '.' && txt.indexOf(".") > 0){
            return;
        }
        if(o === 'del'){
            txt = txt.slice(0,-1);
            dom.innerText = txt
            return;
        }
        if(txt.indexOf(".") > 0 ){
            var v = txt.split(".")[1];
            if(v && v.length > 1){
                return;
            }
        }else{
            if(txt.indexOf("0") == 0 && o !== '.'){
                return;
            }
        }
        txt = txt === "" ? o : txt + "" + o;
        let max = 99999;
        if(parseFloat(txt) > max){
            return;
        }
        dom.innerText = txt;
    }
    function hideInput(){
        var dom = document.getElementById('payinfo');
        dom.style.height = '20px'
    }
    function showInput(){
        var dom = document.getElementById('payinfo');
        dom.style.height = '13rem'
    }
    function showRemarkDialog(){
        var shape = document.getElementById('shade');
        var dialog = document.getElementById('dialog');
        shape.style.display = 'block';
        dialog.style.display = 'block';
    }

    function hideRemarkDialog(t){
        var shape = document.getElementById('shade');
        var dialog = document.getElementById('dialog');
        shape.style.display = 'none';
        dialog.style.display = 'none';
        if(t === 'cancel'){
            document.getElementById('remark').value = "";
        }
    }

    function confirmDialog(type,op){
        var shape = document.getElementById('shade');
        var dialogConfirm = document.getElementById('dialogConfirm');
        shape.style.display = type;
        dialogConfirm.style.display = type;
        if(op && op == "submit"){
            tradePayTest();
        }
        if(op && op == "cancel"){
            tradePayCancelTest();
        }

    }
    document.getElementById("pay").onclick = ()=>{
        let comsumeMoney = document.getElementById('comsumeMoney').innerText;
        if(comsumeMoney == undefined || comsumeMoney == '' || comsumeMoney == null){
            return;
        }
        confirmDialog("block");
    }

    function showLoading(type){
        var shape = document.getElementById('shade');
        var loading = document.getElementById('loading');
        shape.style.display = type;
        loading.style.display = type;
    }
    function tradePayTest(){
        confirmDialog("none");
        showLoading('block');
        let comsumeMoney = document.getElementById('comsumeMoney').innerText;
        let params = "comsumeMoney="+comsumeMoney;
        var url = "/wap/merchant/tradePayTest";
        var xhr = new XMLHttpRequest();//创建请求对象
        xhr.open("POST", url, true);//链接服务器
        xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4) {//请求已完成，且响应已就绪
                showLoading('none');
                if (xhr.status === 200) {//请求成功
                    var resultStr = xhr.responseText//获取结果
                    var resultObj = JSON.parse(resultStr);//解析数据
                    if (resultObj.code == 200) {
                        alert(resultObj.data);
                        setTimeout(function (){
                            window.location = '/wap/merchant/jumpUrlTest';
                        },2000)
                    } else {
                        alert(resultObj.message);
                    }
                }
                else {
                    alert("错误码 : " + xhr.status);
                }
            }
        }
        xhr.send(params);//发送请求
    }
    function tradePayCancelTest() {
        let comsumeMoney = document.getElementById('comsumeMoney').innerText;
        var url = "/wap/merchant/cancelPayTest/"+comsumeMoney;
        var xhr = new XMLHttpRequest();//创建请求对象
        xhr.open("GET", url, true);//链接服务器
        xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4) {//请求已完成，且响应已就绪
                if (xhr.status === 200) {//请求成功
                    var resultStr = xhr.responseText//获取结果
                    var resultObj = JSON.parse(resultStr);//解析数据
                    if (resultObj.code == 200) {
                        alert(resultObj.data);
                    } else {
                        alert(resultObj.message);
                    }
                }
                else {
                    alert("错误码 : " + xhr.status);
                }
            }
        }
        xhr.send();//发送请求
    }
</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 = 20 * (clientWidth / 320) + 'px';//其中“20”根据你设置的html的font-size属性值做适当的变化
            };

        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window);
</script>
</html>