<!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;
        }
        .shade{
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,.1);
            z-index: 998;
            overflow: auto;
        }
        .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;
        }
        .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.7rem;
            font-weight: bold;
        }
        .amt-info{
            display: flex;
            justify-content: center;
            align-items: end;
        }
        .rmb-icon{
            height: 20px;
            padding: 10px 0 5px 0;
        }
        .amt{
            font-size: 1.2rem;
            font-weight: bold;
        }
        .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;
        }
        .red{
            color: red;
        }
        .br{
            border-top: 1px solid #ededed;
            margin: 0 20px;
        }
        .jft-input{
            border: 0;
            text-align: right;
            outline:medium;
            font-size:16px
        }
        .item-warming{
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: .575rem;
            margin-top: 20px;
            color: red;
        }
        .footer{
            width: 100%;
            position: fixed;
            bottom: 30px;
            text-align: center;
        }
        .cancel-btn{
            padding: 10px 30px;
            border: 1px solid #d9d9d9;
            border-radius: 20px;
            background: #fff;
            margin-right: 30px;
            font-size: .6rem;
        }
        .l-success-btn{
            padding: 10px 30px;
            border: 1px solid #d9d9d9;
            border-radius: 20px;
            background-color: rgba(64, 142, 249, 1);
            color: #fff;
            font-size: .6rem;
        }
        .j-success-btn{
            padding: 8px 30px;
            border: 1px solid #d9d9d9;
            border-radius: 20px;
            background-color: rgba(64, 142, 249, 1);
            color: #fff;
            font-size: .6rem;
        }
        .dialog{
            z-index: 999;
            height: 13rem;
            width: 100%;
            position: absolute;
            top: 25%;
            display: none;
            font-size: 0.70rem;
        }
        .dialog-content{
            background: #fff;
            height: 14rem;
            border-radius: 5px;
            margin: 0 auto;
            width: 70%;
        }
        .dialog-body{
            padding: 10px 20px 0px 20px;
        }
        .dialog-item{
            margin: 10px 0 20px 0;
        }
        .dialog-input{
            border: 0;
            border-bottom: 1px solid #efefef;
            outline: medium;
            width: 100%;
            font-size: 16px;
        }
        .dialog-item-input{
            margin-top: 10px;
        }
        .dialog-br:hover{
            width: 100%;
        }
        .dialog-br{
            display: block;
            border-top: 2px solid #03A6FF;
            width: 0%;
        }
        input:focus + .dialog-br {
            width: 100%;
            transition: all 0.4s
        }
        .dialog-btns{
            position: absolute;
            bottom: -10px;
            justify-content: center;
            margin-left: 3%;
        }
        .dialog-warming{
            font-size: .675rem;
            display: flex;
            justify-content: center;
            align-items: center;
            color: red;
        }
        .dialog-cancel-btn{
            padding: 8px 30px;
            border: 1px solid #d9d9d9;
            border-radius: 20px;
            background: #fff;
            font-size: .6rem;
        }
        button{
            outline:medium;
        }
        input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
            font-size:16px;
        }
        input:-moz-placeholder, textarea:-moz-placeholder {
            font-size:16px;
        }
        input::-moz-placeholder, textarea::-moz-placeholder {
            font-size:16px;
        }
        input:-ms-input-placeholder, textarea:-ms-input-placeholder {
            font-size:16px;
        }
    </style>
</head>
<body>
<div class="body">
    <div class="header">
        缴费通支付
    </div>
    <div class="tr-amt">
        <img th:src="@{'/resources/images/jft-wallet-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-each" th:each="payment,index:${paymentList}">
            <div class="item-input item-info">
                <div class="item-label"><span th:text="${payment.name}"></span> <span class="red">*</span></div>
                <div class="item-input">
                    <input th:type="${payment.code == 'phone' ? 'number' : 'text'}" class="jft-input" th:name="${payment.code}" th:msg="${payment.name}" th:id="${payment.code}" th:placeholder="${'请输入'+payment.name}">
                </div>
            </div>
            <div class="br" th:if="${index.count != index.size}"></div>
        </div>
    </div>
    <div class="item-warming">
        <img class="tips-icon" th:src="@{'/resources/images/jft-tips-icon.png'}">
        <div class="warming-text">请谨慎核对收款单信息，风险自行承担</div>
    </div>
    <div class="footer">
        <div class="footer-btns">
            <button class="l-success-btn" style="padding: 10px 100px" id="subPay" onclick="subPay()">立即支付</button>
        </div>
    </div>
</div>

<div class="dialog" id="dialog">
    <div class="dialog-header"></div>
    <div class="dialog-content">
        <div class="header">收款方信息</div>
        <div class="dialog-body">
            <div class="dialog-item">
                <div class="dialog-item-name">姓名</div>
                <div class="dialog-item-input">
                    <input type="text" class="dialog-input" name="name" id="cName" autofocus th:placeholder="${cpName}">
                    <span class="dialog-br"></span>
                </div>
            </div>
            <div class="dialog-item">
                <div class="dialog-item-name">手机号</div>
                <div class="dialog-item-input">
                    <input type="number" class="dialog-input" name="phone" id="cPhone" autofocus th:placeholder="${cpPhone}">
                    <span class="dialog-br"></span>
                </div>
            </div>
        </div>
        <div class="dialog-warming">
            <img class="tips-icon" th:src="@{'/resources/images/jft-tips-icon.png'}">
            <div class="warming-text">如遇诈骗，请立即报警</div>
        </div>
        <div class="dialog-btns">
            <button class="dialog-cancel-btn" onclick="hideDialog()">取消支付</button>
            <button class="j-success-btn" onclick="submitPay()">继续支付</button>
        </div>
    </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}">
</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 type="text/javascript">
    var winHeight = $(window).height();  //获取当前页面高度
    let city = "";
    let province = "";
    $(window).resize(function () {
        var thisHeight = $(this).height();
        if (winHeight - thisHeight > 140) {
            //键盘弹出
            $('.footer').css('position', 'static');
        } else {
            //键盘收起
            $('.footer').css({'position': 'fixed', 'bottom': '30'});
        }
    })
    function getLocation(){
        AlipayJSBridge.call('getCurrentLocation', { bizType: '$s',requestType:1}, function(result) {
            if (result.error) {
                AlipayJSBridge.call('alert', {
                    title: '提示',
                    message: "请允许位置信息授权后支付",
                    button: '确定'
                }, function(e) {
                });
                return;
            }else{
                city = result.city;
                province = result.province;
                subTowPay();
            }
        });
    }
    function subPay(){
        if(!city){
            getLocation()
        }else{
            subTowPay();
        }
    }
    function subTowPay(){
        let flag = false;
        let msg = "";
        $(".item-each").find("input").each(function (k,v){
            if(!$(v).val()){
                flag = true;
                msg = $(v).attr("msg");
            }
        })
        if(flag){
            return $.toast(msg+"不能为空","text");
        }
        showDialog();
    }

    function showDialog(){
        $("#shade").show();
        $("#dialog").show();
    }
    function hideDialog(){
        $("#shade").hide();
        $("#dialog").hide();
    }
    function submitPay(){
        $vaData = {};
        $(".item-each").find("input").each(function (k,v){
            $vaData[$(v).attr("name")] = $(v).val();
        })
        let cName = $("#cName").val();
        let cPhone = $("#cPhone").val();
        if(!cName){
            return $.toast("收款方姓名不能为空！","text");
        }
        $vaData["cName"] = cName;
        if(!cPhone){
            return $.toast("收款方手机号不能为空！","text");
        }
        $vaData["cPhone"] = cPhone;
        $vaData["tk"] = $("#tk").val();
        $vaData["payUserId"] = $("#userId").val();
        $vaData["city"] = city;
        $vaData["province"] = province;
        hideDialog();
        $.showLoading("支付中...");
        let url = "/wap/jft/tradePay";
        $.ajax({
            url:url,
            data:$vaData,
            type:"post",
            success:function (res){
                $.hideLoading();
                if(res.code == 400){
                    return $.toast(res.message,"text");
                }
                let rdata = res.data;
                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/jft/jump?orderNumber='+rdata.orderNumber; //订单支付成功
                        } else if (res.resultCode == '8000') {
                        } else if (res.resultCode == '4000') {
                            ap.alert("订单支付失败");
                        } else if (res.resultCode == '6001' || res.resultCode == '99') {
                        } else if (res.resultCode == '6002') {
                            ap.alert("网络连接出错");
                        }
                    });
                }
            }
        })
    }
</script>
</html>