<!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>
    <title>采美365网-中国美业全方位线上交易服务互动平台，做美业，上采美</title>
    <template th:replace="components/head-link"></template>
    <link th:href="@{/css/pay/caimei-pay.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 clear" id="payContainer" :class="isRequest ? 'active' : ''">
    <div class="container">
        <div class="pay-content clear" v-if="!isErrorShow">
            <div class="pay-title">
                <div class="title-left"><p><span id="userName">{{userName}}</span><span class="color">(请在倒计时时间内使用企业网银完成本次支付)</span></p></div>
                <div class="title-right">
                    <div class="time">
                        <span id="downHour">{{downHour}}</span>
                        <span id="downMinute">{{downMinute}}</span>
                        <span id="downSecond">{{downSecond}}</span>
                    </div>
                </div>
            </div>
            <div class="pay-goods">
                <div class="good-top">
                    <div class="good-top-inner">
                        <div class="bot-right">
                            <div class="bot-num"><span>运费：</span><span class="p" id="freight">{{freight}}</span></div>
                            <div class="bot-num"><span>经理折扣：</span><span class="p" id="discountFee">￥{{discountFee | NumFormat}}</span></div>
                            <div class="bot-num"><span>余额抵扣：</span><span class="p" id="balancePayFee">￥{{balancePayFee | NumFormat}}</span></div>
                            <div class="bot-num"><span>合计：</span><span class="red" id="payTotalFee">￥{{payTotalFee | NumFormat}}</span></div>
                        </div>
                        <div class="bot-left" id="goodSlideToggle"@click="slideToggleContent">
                            <i class="icon-down" :class="isSiled ? 'roter' : '' "></i>
                            <p id="iconText">{{isSiled ? '点击箭头收起订单商品' :'点击箭头展开订单商品'}}</p>
                        </div>
                    </div>
                </div>
                <div class="good-main" v-if="isSiled">
                    <div class="list-title">
                        <div class="t-li"><p>序号</p></div>
                        <div class="t-li"><p>商品图片</p></div>
                        <div class="t-li"><p>商品名称</p></div>
                        <div class="t-li"><p>单价</p></div>
                        <div class="t-li"><p>数量</p></div>
                        <div class="t-li"><p>总价</p></div>
                    </div>
                    <div class="list-container" id="goodsContainer">
                        <div class="list-main" v-for="(item, index) in orderProductList" :key="index" :class="{'active':index%2 != 1}">
                            <div class="t-li"><p>{{index+1}}</p></div>
                            <div class="t-li"><img :src="item.productImage" :alt="item.name"></div>
                            <div class="t-li"><p>{{item.name}}</p></div>
                            <div class="t-li"><p>￥{{item.price | NumFormat}}</p></div>
                            <div class="t-li"><p>{{item.num}}</p></div>
                            <div class="t-li"><p>￥{{item.totalFee | NumFormat}}</p></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="pay-ment">
                <div class="pay-message">
                    <div class="message-num"><span>本次支付金额：</span><span class="red" id="payableAmount">￥{{payableAmount | NumFormat}}</span></div>
                    <div class="message-num"><span>剩余支付金额：</span><span class="red" id="payment">￥{{payment | NumFormat}}</span></div>
                    <div class="message-num"><span>已支付：</span><span class="red" id="receiptAmount">￥{{receiptAmount | NumFormat}}</span></div>
                </div>
                <div class="pay-record">
                    <div class="record-title">支付记录</div>
                    <div class="record-content clear" id="discernReceipt">
                        <div class="record-li none" v-if="discernReceiptList.length== 0">暂无支付记录</div>
                        <div class="record-li" v-for="(item, index) in discernReceiptList" :key="index" v-else>
                            <div class="record-tb">￥{{item.receiptAmount | NumFormat}}</div>
                            <div class="record-tb">{{payTypeText(item.payType)}}</div>
                            <div class="record-tb">{{item.receiptDate}}</div>
                            <div class="record-tb"></div>
                            <div class="record-tb"></div>
                            <div class="record-tb"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="pay-bank">
                <div class="bank-title">请选择以下一家银行进行付款</div>
                <div class="bank-list" id="bankContent">
                    <a href="javascript:void(0);" v-for="(item, index) in bankData" :key="index" :class="{ active: tabIndex === index }"  @click="changeTab(index,item)">
                        <img :src="item.imgUrl" :alt="item.bankName">
                    </a>
                </div>
            </div>
        </div>
    </div>
    <div class="pay-button-main">
        <div class="inner">
            <div class="pay-button">
                <a href="javascript:void(0);" id="paySubmit" @click="PaySubmitFn" :class="isSubMitStatus ? 'disabled' : ''">立即支付</a>
            </div>
        </div>
    </div>
    <div class="pay-error clear" v-else>
        <div class="icon-error" id="iconError" :class="iconErrorClass"></div>
        <div class="error-msg" id="errorMsg">{{iconErrorText}}</div>
        <div class="error-msgnone">{{iconErrorMsgnone}}</div>
    </div>
    <div class="pay-alert-content" v-if="isPayAlert">
        <div class="pay-alert">
            <div class="title"><p>确认提示</p><i class="icon-close" @click.stop="hidePayAlert"></i></div>
            <div class="content">
                <h1>请在您新打开的页面上完成付款</h1>
                <p>完成付款后请点击下面的按钮</p>
            </div>
            <div class="button" id="payButton"><a href="javascript:void(0);" @click="RefreshBody">已完成支付</a></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-pay.js(v=${version})}"></script>
</body>
</html>
