<!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-paycash.css(v=${version})}" rel="stylesheet" type="text/css">
</head>
<body>
<!-- 引用头部 -->
<template th:replace="components/header"></template>
<div class="pay-container clear" id="payContainer" :class="isRequest ? 'active' : ''">
    <div class="wrap">
        <div class="pageTitle">
            <div class="step">
                <span class="on">我的购物车</span>
                <label class="line on"></label>
                <span class="on">核对订单信息</span>
                <label class="line"></label>
                <span class="on">成功提交订单</span>
            </div>
            <h1>收银台</h1>
        </div>
    </div>
    <div class="container">
        <div class="pay-content clear" >
            <template v-if="pageType === '1'">
                <div class="pay-title">
                    <div class="title-money big">
                        <p class="pay-money-big">付款金额：<span class="red">￥{{payAmount | NumFormat}}</span></p>
                    </div>
                </div>
            </template>
            <template v-else>
                <div class="pay-title">
                    <div class="title-money big">
                        <p class="pay-money-big">待付金额：<span class="red" id="paidAmount">￥{{paidAmount | NumFormat}}</span></p>
                    </div>
                    <div class="title-money">
                        <p>应付总额：<span id="payableAmount">￥{{payableAmount | NumFormat}}</span></p>
                        <p>已付金额：<span id="receiptAmount">￥{{receiptAmount | NumFormat}}</span></p>
                    </div>
                    <div class="pay-input">
                        <p>本次支付：</p>
                        <p class="input-text">
                            <span>￥</span>
                            <input class="input" id="payAmount" v-model="payAmount" type="number" placeholder="输入金额不能大于待付金额" maxlength="10" @input="changePayAmount" @blur="changePayAmountBlur">
                        </p>
                    </div>
                    <div class="title-money">
                        <p>应付剩余：<span class="red" id="balanceAmount">￥{{balanceAmount | NumFormat}}</span></p>
                    </div>
                </div>
            </template>
            <div class="pay-ment"  v-if="pageType != '1'">
                <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>
                    </div>
                </div>
            </div>
            <div class="pay-method">
                <div class="method-title">选择支付方式</div>
                <div class="pay-method-tab">
                    <a class="item" href="javascript:void(0);" @click="changeTab(0)" :class ="{ active: tabIndex === 0 }">线上支付</a>
                    <a class="item" href="javascript:void(0);" @click="changeTab(1)" :class ="{ active: tabIndex === 1 }" v-if="isReceiptStatus">转账支付</a>
                </div>
                <div class="method-content">
                    <div class="payment" id="mobilePayment" v-if="tabIndex === 0">
                        <div class="payment-title">{{payStatusText}}</div>
                        <div class="pay-bank">
                            <div class="bank-list" id="mobileContent">
                                <a href="javascript:void(0);" class="bank-a" v-for="(item, index) in mobileData" :key="index" @click="checkMobilePay(index,item)" :class="{ active: mobileTabIndex === index }">
                                    <img :src="item.imgUrl" :alt="item.bankName">
                                </a>
                            </div>
                        </div>
                        <div class="pay-bank"  v-if="mobileTabIndex === 2">
                            <div class="bank-list" id="bankContent">
                                <a href="javascript:void(0);" class="bank-b" v-for="(item, index) in bankData" :key="index" :class="{ active: bankTabIndex === index }"  @click="checkBankPay(index,item)">
                                    <img :src="item.imgUrl" :alt="item.bankName">
                                </a>
                            </div>
                        </div>
                        <div class="pay-link" v-if="mobileTabIndex === 2 && pageType != '1'">
                            <p>若您在公司的职位无法直接使用企业网银付款，请点击右侧“复制支付链接”按钮，将该链接发送给公司财务人员进行企业网银付款</p>
                            <a href="javascript:void(0);" id="copyLink" @click="copyLinkPaySubmitFn">复制支付链接</a>
                        </div>
                    </div>
                    <div class="payment" id="offlinePayment" v-if="tabIndex === 1">
                        <div class="payment-transfer">
                            <div class="payment-transfer-main" id="paymentTransferMain">
                                <div class="label"><P class="label-title">除了线上支付，您还可以通过直接转账的方式付款</P></div>
                                <div class="label"><P class="label-t">转账信息</P></div>
                                <div class="label">
                                    <P class="text">开户行：中信银行（深圳泰然支行）</P>
                                    <P class="text">银行卡号：6217 6803 0362 0897</P>
                                    <P class="text">户名：周仁声</P>
                                </div>
                                <div class="label">
                                    <P class="text-p">订单标识：{{orderIdentificationId}}</P>
                                    <P class="text-p"><a href="javascript: void(0);" class="copy" @click="copyOrderBtnSubmitFn">复制</a></P>
                                </div>
                                <div class="label"><P class="label-t">特别注意</P></div>
                                <div class="label"><P class="label-c">请在转账备注中填写上述订单标识，方便财务快速审核，提高发货速度</P></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="pay-button-main">
        <div class="inner">
            <div class="pay-button" v-if="mobileTabIndex === 2">
                <a href="javascript:void(0);" id="paySubmit" @click="PaySubmitFn" :class="isSubMitStatus ? 'disabled' : ''">立即支付</a>
            </div>
            <div class="pay-button" v-else>
                <a href="javascript:void(0);" id="payMobileSubmit" @click="PayMobileSubmitFn" :class="isSubMitStatus ? 'disabled' : ''">立即支付</a>
            </div>
        </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="RefreshBody"></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 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="@{/js/pay/caimei-paycash.js(v=${version})}"></script>
</body>
</html>
