<%@ page import="com.caimei.utils.SysConfig" %><%--
  Created by IntelliJ IDEA.
  User: 828
  Date: 2018/5/10
  Time: 10:01
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="s" uri="/struts-tags" %>
<%
    request.setAttribute("oldApi", SysConfig.getStringConfig("caimei.api.old"));
    request.setAttribute("newApi", SysConfig.getStringConfig("caimei.api.new"));
%>
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta http-equiv="keywords" content="采美平台业务包括采美采购商城，采美正品联盟，美业供应链合作，美业平台综合运营，三方项目服务合作，美业信息咨询服务，美业二手市场，医美直播，品牌招商等。其中采购商城包括热门小气泡仪器、皮肤检测，水光仪器，中胚层治疗仪器，激光仪器，射频仪器，超声仪器，微针射频仪器，脱毛仪器、红蓝光，身体塑形溶脂仪器等。产品包括：医美术后修复产品，高端SPA产品，高端院线产品，医美家居护理产品，玻尿酸，动能素，精纯液，填充针剂，线材，消耗品等。">
    <meta http-equiv="description" content="采美365网，生美医美正品采购服务平台，国内第一家美容行业的B2B平台，具有一，二，三类医疗器械销售资质和进出口资质。聚集全球100多个优质供应商资源，包括医疗、非医疗美容产品和仪器设备，能够一站式满足医疗美容机构、生活美容机构、新兴皮肤管理中心等多样化采购需求。同时提供供应链合作，整合上下游资源，为美容产业的持续前进和发展提出新的解决方案。">
    <link rel="shortcut icon" href="/web/common/img/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="/web/common/css/reset.css">
    <link rel="stylesheet" href="/web/login/css/register.css?version=<%=Math.random()%>">
    <link rel="stylesheet" href="/web/order/css/caimei-starspay.css?version=<%=Math.random()%>">
    <script src="/web/common/js/tools.js"></script>
    <script src="/public/3.0/js/lib/layer/layer.min.js"></script>
    <script src="/web/common/js/common.js?version=<%=Math.random()%>"></script>
    <script src="/public/3.0/js/lib/vue2.6.11.js"></script>
    <title>采美365网-中国美业全方位线上交易服务互动平台，做美业，上采美</title>
</head>
<body>
<div class="head-wrap">
    <div class="head clearfix">
        <div class="fl logo-to-index xf-logo"><img src="/web/order/img/xf-logo@2x.png" alt=""></div>
        <div class="fl main-thing">星范采购商城</div>
        <input id="oldApi" value='${oldApi}' type="hidden">
        <input id="newApi" value='${newApi}' type="hidden">
    </div>
</div>
<div class="pay-container clearfix" id="payContainer" :class="isRequest ? 'active' : ''">
    <div class="pay-content clearfix" 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 clearfix" 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 clearfix" 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 class="pay-button"><a href="javascript:void(0);" id="paySubmit" @click="PaySubmitFn">立即支付</a></div>
    </div>
    <div class="pay-error clearfix" 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="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>
<div class="footer-stars">
    <div class="stars-inner">
        <div class="innermain">
            <div class="icon"><img src="/web/login/img/index_logo.png" alt=""></div>
            <div class="text"><p>采美365提供技术支持</p></div>
        </div>
    </div>
</div>
<script src="/web/common/js/ajax.service.js?version=<%=Math.random()%>"></script>
<script src="/web/common/js/api/user.service.js?version=<%=Math.random()%>"></script>
<script src="/web/common/js/api/utils.service.js?version=<%=Math.random()%>"></script>
<script src="/web/common/js/api/pay.service.js?version=<%=Math.random()%>"></script>
<script src="/web/order/js/caimei-pay.js?version=<%=Math.random()%>"></script>

</body>
</html>
