<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <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" type="text/css" th:href="@{'/resources/css/weui.css'}"/>
    <link rel="stylesheet" type="text/css" th:href="@{'/resources/css/weuix.css'}"/>
    <script src="https://www.shouyinbei.net/resources/js/alipayjsapi.min3.1.1.js"></script>
    <script th:src="@{'/resources/js/jquery.min.js'}"></script>
    <script th:src="@{'/resources/js/zepto.weui.js'}"></script>
    <title>缴费通</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        html,body{
            width:100%;
            height:100%;
            margin:0 auto;
            padding:0px;
            background-color:#F5F6F8;
            color: #000000;
        }
        .header{
            font-size: 0.8rem;
            font-weight: 400;
            text-align: center;
            height: 1.8rem;
            vertical-align:middle;
            line-height:1.8rem;  /*line-height must be equal to height*/
            color: #fff;
            background: -webkit-linear-gradient(left, #47A8FC , #4C8BF8); /* Safari 5.1 - 6.0 */
            background: -o-linear-gradient(right, #47A8FC, #4C8BF8); /* Opera 11.1 - 12.0 */
            background: -moz-linear-gradient(right, #47A8FC, #4C8BF8); /* Firefox 3.6 - 15 */
            background: linear-gradient(to right, #47A8FC , #4C8BF8); /* 标准的语法 */
        }
        .tr-amt{
            background: #fff;
            text-align: center;
            line-height: 1.6rem;
            padding: 1.5rem 0 .5rem 0;
        }
        .text{
            font-size: 0.8rem;
            font-weight: bold;
        }
        .amt-info{
            display: flex;
            justify-content: center;
            align-items: end;
        }
        .rmb-icon{
            height: 20px;
            padding: 10px 0 0 0;
        }
        .amt{
            font-size: 1.2rem;
            font-weight: bold;
        }
        .pay-success{
            width: 3.555rem;
        }
        .tr-item{
            background: #fff;
            margin-top: 10px;
            font-size: 0.7rem;
        }
        .item-info{
            display: flex;
            justify-content: space-between;
            padding: 10px 20px;
        }
        .item-label{
            color: #a5a2a2;
        }
        .br{
            border-top: 1px solid #ededed;
            margin: 0 20px;
        }
        .item-copy{
            margin-left: -50px;
            padding: 2px 5px;
            background: #47A8FC;
            color: #fff;
            border-radius: 3px;
            font-size: 13px;
        }
    </style>
</head>
<body>
<div class="body">
    <div class="header">
        缴费通支付
    </div>
    <div class="tr-amt">
        <img class="pay-success" th:src="@{'/resources/images/jft-success-icon.png'}">
        <div class="text">支付成功</div>
        <div class="amt-info">
            <img class="rmb-icon" th:src="@{'/resources/images/jft-rmb-icon.png'}">
            <div class="amt" th:text="${amount}"></div>
        </div>
    </div>
    <div class="tr-item">
        <div class="item-info">
            <div class="item-label">收款商家</div>
            <div class="item-text" th:text="${merchantName}"></div>
        </div>
        <div class="item-info">
            <div class="item-label">项目名称</div>
            <div class="item-text" th:text="${pName}"></div>
        </div>
    </div>

    <div class="tr-item">
        <div class="item-input item-info">
            <div class="item-label">交易类型</div>
            <div class="item-text" th:text="${payTypeDesc}"></div>
        </div>
        <div class="br"></div>
        <div class="item-input item-info">
            <div class="item-label">订单号</div>
            <div class="item-text" th:text="${orderNumber}"></div>
<!--            <span class="item-copy" th:data-order="${orderNumber}" onclick="copyNumber(this)">复制</span>-->
            <span class="item-copy" data-order="123123123" onclick="copyNumber(this)">复制</span>
        </div>
        <div class="br"></div>
        <div class="item-input item-info">
            <div class="item-label">时间</div>
            <div class="item-text" th:text="${date}"></div>
        </div>
    </div>
</div>
<input type="hidden" id="tk" th:value="${tk}">
</body>
<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>
<script>
    function copyNumber(obj){
        let value = $(obj).attr("data-order");
        let input = document.querySelector('.copy-input') || document.createElement('input');
        input.setAttribute("readonly","readonly");
        input.className = "copy-input";
        input.value = value;
        input.style = `position: fixed;top: -100%;`
        document.body.append(input)
        input.select();
        document.execCommand("copy");
        $.toast("内容已复制","text");
    }
</script>
</html>