<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="https://www.thymeleaf.org" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:schemaLocation="https://www.thymeleaf.org ">
<head>
    <template th:replace="pay/components/pay-link"></template>
    <link th:href="@{/css/pay/caimei-paymobile.css(v=${version})}" rel="stylesheet" type="text/css">
</head>
<body>
<div class="head-wrap">
    <div class="inner clear">
        <div class="logo"><a href="/index.html"><img src="/img/base/index_logo.png" alt=""></a></div>
        <div class="text">收银台</div>
        <input type="hidden" th:value="${spiServer}" id="spiServer">
        <input type="hidden" th:value="${agent}" id="userAgent">
    </div>
</div>
<div class="pay-container weixin clear" id="payContainer" >
<!--    <div v-if="loginLoading" class="loading" :style="{opacity: loginLoading ? '1' :'0'}">-->
<!--        <img src="/img/base/loading.gif">-->
<!--    </div>-->
    <div class="container" :class="isRequest ? 'active' : ''">
        <div class="pay-content weixin clearfix" v-if="payInfo.PAY_TYPE === 'WEIXIN'">
            <div class="pay-codecontent">
                <div class="pay-amount">
                    <div class="pay-amount-text">
                        <p>交易金额: <span>￥{{payAmount | NumFormat}}</span> </p>
                        <p>收款方: <span>深圳市采美信息技术有限公司</span> </p>
                        <p v-if="pageType!='1' ">订单号: <span>{{orderNo}}</span> </p>
                    </div>
                    <div class="pay-amount-icon"><img src="/img/pay/icon-pay@2x.png" alt=""></div>
                </div>
                <div class="pay-codemain" id="WEIXIN-CONTENT">
                    <div class="code-title"><p>扫码付款 <span class="payableAmount">￥{{payableAmount | NumFormat}}</span></p></div>
                    <div class="pay-qrCode weixin" id="wx_pay_container">
                        <i class="icon-wechat"></i>
                    </div>
                    <div class="model" v-if="isRefresh">
                        <div class="refresh-div">
                            <p>已失效,请重新发起支付</p>
                        </div>
                    </div>
                    <div class="code-footer">
                        <img class="code-img" src="/img/pay/icon-weixinpay@2x.png" alt="">
                        <p>打开手机微信，扫一扫进行付款</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="pay-content ali clearfix" v-if="payInfo.PAY_TYPE === 'ALIPAY'">
            <div class="pay-codecontent">
                <div class="pay-amount">
                    <div class="pay-amount-text">
                        <p>交易金额: <span>￥{{payAmount | NumFormat}}</span> </p>
                        <p>收款方: <span>深圳市采美信息技术有限公司</span> </p>
                        <p v-if="pageType!='1' ">订单号: <span>{{orderNo}}</span> </p>
                    </div>
                    <div class="pay-amount-icon"><img src="/img/pay/icon-pay@2x.png" alt=""></div>
                </div>
                <div class="pay-codemain " id="ALIPAY-CONTENT">
                    <div class="code-title"><p>扫码付款 <span class="payableAmount">￥{{payableAmount | NumFormat}}</span></p></div>
                    <div class="pay-qrCode ali" id="ali_pay_container">
                        <i class="icon-alipay"></i>
                    </div>
                    <div class="model" v-if="isRefresh">
                        <div class="refresh-div">
                            <p>已失效,请重新发起支付</p>
                        </div>
                    </div>
                    <div class="code-footer">
                        <img class="code-img" src="/img/pay/icon-alipay@2x.png" alt="">
                        <p>打开手机支付宝，扫一扫进行付款</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 引入底部 -->
<template th:replace="components/footer"></template>
<template th:replace="components/foot-link"></template>
<script src="https://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>
<script charset="utf-8" type="text/javascript" th:src="@{/js/common/serviceapi/pay.service.js(v=${version})}"></script>
<script charset="utf-8" type="text/javascript" th:src="@{/lib/qrcode.min.js(v=${version})}"></script>
<script charset="utf-8" type="text/javascript" th:src="@{/js/pay/caimei-paymobile.js(v=${version})}"></script>

</body>
</html>
