修改网银支付样式

src/main/resources/static/css/pay/caimei-pay.css

@@ -1,14 +1,14 @@
 /**
  * PC端
  */
-/*@media screen and (min-width:768px){*/
+@media screen and (min-width:768px){
     .inner{width: 1184px;margin: 0 auto;}
     .container{width: 100%;height: auto;}
     .head-wrap{width: 100%;height: 81px;float: left;background-color: #FFFFFF;margin-bottom: 26px;}
     .head-wrap .inner{width:1184px;height: 81px;margin: 0 auto;    background-color: #FFFFFF;}
-.head-wrap .logo{width:228px;height: 76px;float: left;}
-.head-wrap .logo a{width:228px;height: 76px;display: block;}
-.head-wrap .logo a img{width:228px;height: 76px;display: block;}
+    .head-wrap .logo{width:228px;height: 76px;float: left;}
+    .head-wrap .logo a{width:228px;height: 76px;display: block;}
+    .head-wrap .logo a img{width:228px;height: 76px;display: block;}
     .head-wrap .text{height: 81px;float: left;margin-left: 10px;line-height: 81px;font-size: 30px;color: #333333;}
     .pay-container {width: 100%;min-height: 550px;position: relative;margin-bottom:0;opacity: 0;}
     .pay-container.active{opacity: 1;}
@@ -117,36 +117,130 @@
     .pay-alert-content .pay-alert .button a{width: 90px;height: 32px;display: block;background: #FF5B00;border-radius: 2px;font-size: 14px;text-align: center;line-height: 32px;color: #FFFFFF;float: right;}
     .pay-button-main{margin-top:30px;width: 100%;height: 72px;box-sizing: border-box;padding: 11px 0;background-color: #FFFFFF;float: left;border-bottom: 1px solid #EBEBEB;}
     .pay-button-main .pay-button{width: 100%;height: 50px;float: left;}
-    .pay-button-main .pay-button a{width: 232px;height: 50px;display: block;background:linear-gradient(90deg, #FF9300 0%, #FF5B00 100%);border-radius: 26px;font-size: 14px;line-height: 50px;text-align: center;color: #FFF6D9;float: right;}
+    .pay-button-main .pay-button a{width: 232px;height: 50px;display: block;background:#007ACC;border-radius: 26px;font-size: 14px;line-height: 50px;text-align: center;color: #FFF6D9;float: right;}
     .pay-button-main .pay-button a.disabled{background: #EFEFEF;color:#999999;}
     .footTop{margin-top: 0;}
-
-/*}*/
+}
 
 /**
 * 移动端
 */
-/*@media screen and (max-width:768px){*/
-/*    .head-wrap{box-sizing:border-box;padding:0 3.2vw;height:15vw;line-height:15vw;background:#FFF;font-size:4.6vw}*/
-/*    .head-wrap .logo{height:15vw;float:left;margin-right:3vw}*/
-/*    .head-wrap .logo img{height:15vw}*/
-/*    .pay-title,.pay-goods{margin-top:2.6vw;background:#FFF;position:relative;padding:2.6vw 3.2vw;line-height:7vw}*/
-/*    .pay-title .title-left p span{display:block;color:#FF5B00;font-size:3.4vw}*/
-/*    .pay-title .title-left p span:first-child{color:#333;font-size:4.2vw}*/
-/*    .pay-title .title-right{text-align:right}*/
-/*    .pay-title .title-right .time{box-sizing:border-box;padding-right:2vw;display:inline-block;width:40vw;height:10vw;line-height:9vw;background:url(/img/pay/icon-time.png)no-repeat;background-size:100% 100%}*/
-/*    .pay-title .title-right .time span{display:inline-block;width:7vw;text-align:center;color:#FFF;vertical-align:middle}*/
-/*    .pay-goods .bot-num{display:inline-block;width: 49%;}*/
-/*    .pay-goods .bot-num span.red{color: #FF2A2A;}*/
-/*    .pay-goods .bot-left{text-align: right;color: #999999;line-height: 10vw;}*/
-/*    .pay-goods .bot-left p{display:inline-block;}*/
-/*    .pay-goods .bot-left .icon-down {display:inline-block;width: 4vw;height: 4vw;background: url(/img/pay/icon-bot.gif);background-size: 100% 100%;vertical-align: text-bottom;}*/
-/*    .pay-goods .list-title{display: none;}*/
-
-
-
-
+@media screen and (max-width:768px){
+    footer{display:none}
+    body{background: #F7F7F7;}
+    .head-wrap{width: 100%;height: 16vw;border: 1px solid #EBEBEB;box-sizing: border-box;padding: 2.4vw 0;background: #FFFFFF;}
+    .head-wrap .inner{width: 55vw;height: 11.2vw;margin: 0 auto;}
+    .head-wrap .logo{width:33.8vw;height: 11.2vw;float: left;}
+    .head-wrap .logo a{width:100%;height: 100%;display: block;}
+    .head-wrap .logo a img{width:100%;height: 100%;display: block;}
+    .head-wrap .text{height: 11.2vw;float: left;margin-left: 10px;line-height:11.2vw;font-size: 6vw;color: #333333;}
+    .pay-content{width: 100%;height: auto;box-sizing: border-box;padding: 2vw;}
+    .pay-title{width: 100%;height: auto;padding: 0 3vw;float: left;border-radius: 2vw; background: #ffffff;margin-bottom: 2vw;box-sizing: border-box;}
+    .pay-title .title-left{width: 100%;}
+    .pay-title .title-left p{font-size: 3.6vw;line-height: 10vw;color: #333333;}
+    .pay-title .title-left #userName{font-size: 3.8vw;color: #333333;font-weight: bold;}
+    .pay-title .title-left span{font-size: 3.8vw;line-height: 10vw;color: #666666;}
+    .pay-title .title-left span.color{color: #FF5B00;}
+    .pay-title .title-right{float: right;height: 40px;}
+    .pay-title .title-right .time{width: 172px;height: 40px;padding-left: 62px;background: url("/img/pay/icon-time.png")no-repeat;background-size: cover;box-sizing: border-box;}
+    .pay-title .title-right .time span{width: 24px;height: 24px;display: block;margin: 8px 5px;float: left;font-size: 16px;line-height: 24px;text-align: center;color: #FFFFFF;}
+    .pay-svip{margin-top:24px}
+    .pay-svip+.pay-method .method-title{background:#F5F5F5 !important}
+    .pay-svip .pay-svip-title{padding:0 0 16px 16px;font-size:16px;font-weight:400;color:#2D3036}
+    .pay-svip .content{border-radius: 3vw; display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;height:18vw;padding: 0 3vw;-webkit-box-sizing:border-box;box-sizing:border-box;background:url(/img/member/pc-cm-svip-bg-03.png) no-repeat center;background-size:cover;}
+    .pay-svip .pay-svip-detail{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}
+    .pay-svip .pay-svip-detail .tit{font-size:16px;font-weight:400;color:#4E4539;padding-bottom:4px}
+    .pay-svip .pay-svip-detail .pay-amount{margin-left:18px;font-size:28px;font-weight:bold;color:#4E4539}
+    .pay-svip .pay-svip-detail .pay-amount > span{font-size:12px;vertical-align:0}
+    .pay-svip .svip-indent{font-size:4vw;font-weight:bold;color:#4E4539}
+    .pay-goods .good-top{width: 100%;float: left;box-sizing: border-box;}
+    .pay-goods .good-top .good-top-inner{width: 100%;height:auto;padding: 0 2vw;float: left;border-bottom: 1px solid #F7F7F7;box-sizing: border-box;}
+    .pay-goods .good-top .bot-left{float: right;height: 24px;line-height: 24px;font-size: 12px;padding: 10px 0 10px 0;color: #999999;cursor: pointer;}
+    .pay-goods .good-top .bot-left .icon-down{width: 24px;height: 24px;display: block;background: url("/img/pay/icon-bot.gif");float: left;}
+    .pay-goods .good-top .bot-left .icon-down.roter{transform: rotate(180deg);}
+    .pay-goods .good-top .bot-left p{float: left;margin-left: 5px;}
+    .pay-goods .good-top .bot-right{float: left;height: 12vw;}
+    .pay-goods .good-top .bot-right .bot-num{float: left;line-height: 12vw;margin-right: 3vw;}
+    .pay-goods .good-top .bot-right .bot-num span{font-size: 14px;color: #333333;}
+    .pay-goods .good-top .bot-right .bot-num span.p{color: #333333;}
+    .pay-goods .good-top .bot-right .bot-num span.red{color: #FF2A2A;}
+    .pay-goods .good-top .ws-count-price{font-size: 24px;padding-top: 25px}
+    .pay-goods .good-top .ws-count-price span.red{color: #FF2A2A;font-weight: bold}
+    .pay-goods .good-top .ws-bot-right{padding: 20px 0;float: left}
+    .pay-goods .good-top .ws-bot-right .bot-num{float: left;margin-right: 30px;}
+    .pay-goods .good-top .good-top-inner{float: unset;height: auto}
+    .pay-goods{width: 100%;height: auto;float: left;background: #ffffff;border-radius: 2vw;overflow: hidden;}
+    .pay-goods .good-main{width: 100%;height: auto;float: left;}
+    .pay-goods .good-main .list-title{width: 100%;height: 10vw;padding: 0 2vw;float: left;box-sizing: border-box;}
+    .pay-goods .good-main .list-title .t-li{font-size: 3.4vw;color: #333333;line-height: 10vw;float: left;text-align: center;display: flex;align-items: center;flex-direction: column;}
+    .pay-goods .good-main .list-title .t-li:nth-child(1){width: 8%;}
+    .pay-goods .good-main .list-title .t-li:nth-child(2){width: 15%;}
+    .pay-goods .good-main .list-title .t-li:nth-child(3){width: 27%;}
+    .pay-goods .good-main .list-title .t-li:nth-child(4){width: 10%;}
+    .pay-goods .good-main .list-title .t-li:nth-child(5){width: 15%;}
+    .pay-goods .good-main .list-title .t-li:nth-child(6){width: 10%;}
+    .pay-goods .good-main .list-title .t-li:nth-child(7){width: 15%;}
 
+    .pay-goods .good-main .list-container{width: 100%;height: auto;background: #ffffff;padding: 1vw 2vw;float: left;border-bottom: 1px solid #F7F7F7;opacity: 1;box-sizing: border-box;}
+    .pay-goods .good-main .list-container.active{height: 0;opacity: 0;}
+    .pay-goods .good-main .list-container .list-main{width: 100%;height: 10vw;float: left;}
+    .pay-goods .good-main .list-container .list-main.active{background-color: #F7F7F7;border-radius: 8px;}
+    .pay-goods .good-main .list-container .list-main .t-li{position: relative; font-size: 3.2vw;color: #333333;line-height: 10vw;float: left;text-align: center;display: flex;align-items: center;flex-direction: column;}
+    .pay-goods .good-main .list-container .list-main .t-li:nth-child(1){width: 8%;}
+    .pay-goods .good-main .list-container .list-main .t-li:nth-child(2){width: 15%;}
+    .pay-goods .good-main .list-container .list-main .t-li:nth-child(3){width: 27%;text-align: justify;text-overflow:ellipsis;display: -webkit-box;word-break: break-all;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;}
+    .pay-goods .good-main .list-container .list-main .t-li:nth-child(4){width: 10%;text-align: justify;text-overflow: ellipsis;display: -webkit-box;word-break: break-all;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;}
+    .pay-goods .good-main .list-container .list-main .t-li:nth-child(5){width: 15%;}
+    .pay-goods .good-main .list-container .list-main .t-li:nth-child(6){width: 10%;}
+    .pay-goods .good-main .list-container .list-main .t-li:nth-child(7){width: 15%;}
+    .pay-goods .good-main .list-container .list-main .t-li img{width: 10vw;height: 10vw;border-radius: 2vw;background-color: #f7f7f7;margin-top: 0;}
+    .pay-goods .good-main .list-container .list-main .t-li .tag{display: block; position: absolute;z-index: 10;left: 50%;top: 33px;transform: translateX(-50%);width: 40px;font-size: 12px;background: #FF2A2A;color: #fff;line-height: 18px;text-align: center;border-radius: 0 0 4px 4px}
+    .pay-goods .good-main .ws-list-container .list-main {height: 60px !important;}
+    .pay-goods .good-main .ws-list-container .list-main .t-li img{width:40px;height: 40px;}
+    .pay-goods .good-main .list-total{text-align: right;font-size: 18px;padding: 20px 25px;float: right;margin-right: 60px}
+    .pay-goods .good-main .list-total span.red{color: #FF2A2A}
+    .pay-ment{width: 100%;height: auto;display: flex;flex-direction: column; margin-top: 2vw;float: left;}
+    .pay-ment .pay-message{width: 100%;height: auto;border-radius: 2vw;box-sizing: border-box;line-height: 10vw;background: #FFFFFF;padding: 2vw;margin-bottom: 2vw;display: flex;flex-direction: column;}
+    .pay-ment .pay-message .message-num{width:100%;font-size: 3.6vw;color: #333333;}
+    .pay-ment .pay-message .message-num .red{color: #FF2A2A;}
+    .pay-ment .pay-record{width: 100%;height: auto;border-radius: 2vw;float: left;padding:0 2vw 2vw 2vw;background: #FFFFFF;box-sizing: border-box;}
+    .pay-ment .pay-record .record-title{width: 100%;line-height: 10vw;font-size: 3.6vw;color: #333333;text-align: left;}
+    .pay-ment .pay-record .record-content{width: 100%;height: auto;border-radius: 2vw;padding: 0 2vw;background: #F7F7F7;box-sizing: border-box;}
+    .pay-ment .pay-record .record-content .record-li{width: 100%;height: 10vw;float: left;}
+    .pay-ment .pay-record .record-content .record-li.none{font-size: 3.6vw;color: #999999;text-align: left;line-height: 11vw;padding: 0 1vw;}
+    .pay-ment .pay-record .record-content .record-li .record-tb{width: 20%;height: 11vw;float: left;font-size: 4vw;color: #333333;text-align: left;line-height: 11vw;}
+    .pay-ment .pay-record .record-content .record-li .record-tb:last-child{text-align: right;color: #999999;}
+    .pay-bank{width: 100%;height: auto;box-sizing: border-box;padding: 2vw;border-radius: 2vw; background: #FFFFFF;float: left;margin-top: 2vw;}
+    .pay-bank .bank-title{width: 100%;line-height: 8vw;font-size: 4vw;color: #333333;float: left;box-sizing: border-box;}
+    .pay-bank .bank-title span.color{color: #FF5B00;font-size: 3.8vw;}
+    .pay-bank .bank-title span.big{font-size: 4.8vw;}
+    .pay-bank .bank-list{width: 100%;height: auto;float: left;display: flex;justify-content: flex-start;flex-wrap: wrap;margin-top: 4vw;}
+    .pay-bank .bank-list a{width: 26vw;height: 9vw;;display: flex;margin: 2vw;border: 1px solid #FFFFFF;position: relative;}
+    .pay-bank .bank-list a img{width: 100%;height: 100%;display: block;}
+    .pay-bank .bank-list a.active{border-color: #FF2A2A;}
+    .pay-bank .bank-list a.active:before{content: '';width: 20px;height: 20px;position: absolute;bottom: 0;right: -2px;background: url("/img/base/icon.png")-210px -252px no-repeat;}
+    .pay-error-content{width: 1184px;margin: 0 auto;height: 594px;background: #FFFFFF;}
+    .pay-error{width: 1184px;margin: 0 auto;height: 594px;background: #FFFFFF;float: left;margin-bottom: 20px;}
+    .pay-error .icon-error{width: 248px;height: 200px;margin: 0 auto;margin-top: 134px;}
+    .pay-error .icon-error.again{background: url("/img/pay/icon-error--1.png") no-repeat;background-size:contain ;}
+    .pay-error .icon-error.offline{background: url("/img/pay/icon-error--2.png") no-repeat;background-size:contain ;}
+    .pay-error .icon-error.fail{background: url("/img/pay/icon-error--3.png") no-repeat;background-size:contain ;}
+    .pay-error .icon-error.paid{background: url("/img/pay/icon-error-5.png") no-repeat;background-size:contain ;}
+    .pay-error .error-msg{font-size: 16px;color: #333333;text-align: center;line-height: 22px;margin-top: 10px;}
+    .pay-error .error-msgnone{font-size: 16px;color: #999999;text-align: center;line-height: 22px;margin-top: 10px;}
+    .pay-alert-content{width: 100%;height: 100%;position: fixed;top: 0;left: 0;background: rgba(0,0,0,0.3);z-index: 9999;}
+    .pay-alert-content .pay-alert{width: 340px;height: 208px;background: #FFFFFF;border-radius: 2px;position: absolute;top: 0;right: 0;left: 0;bottom: 0;margin: auto;z-index: 9998;}
+    .pay-alert-content .pay-alert .title{width: 100%;height: 48px;box-sizing: border-box;font-size: 14px;line-height: 48px;text-align: left;color: #333333;float: left;position: relative;border-bottom: 1px solid #EFEFEF;background-color: #F8F8F8;padding: 0 14px;}
+    .pay-alert-content .pay-alert .title .icon-close{width: 16px;height: 16px;display: block;position: absolute;right:12px;top: 12px;background: url("/img/base/icon.png")-319px 0 no-repeat;cursor: pointer;}
+    .pay-alert-content .pay-alert .content{margin: 30px 0;width: 100%;height: auto;line-height: 24px;float: left;padding: 0 14px;}
+    .pay-alert-content .pay-alert .content h1{text-align: left;font-size: 16px;color: #333333;font-weight: normal;}
+    .pay-alert-content .pay-alert .content p{text-align: left;font-size: 14px;color: #666666;font-weight: normal;}
+    .pay-alert-content .pay-alert .button{width: 100%;height: 32px;float: left;padding: 0 14px;box-sizing: border-box;}
+    .pay-alert-content .pay-alert .button a{width: 90px;height: 32px;display: block;background: #FF5B00;border-radius: 2px;font-size: 14px;text-align: center;line-height: 32px;color: #FFFFFF;float: right;}
+    .pay-button-main{width: 100%;height: auto;box-sizing: border-box;margin: 5vw 0;}
+    .pay-button-main .pay-button{width: 100%;height: 12vw;display: flex;justify-content: center;}
+    .pay-button-main .pay-button a{width: 50vw;height: 12vw;display: flex;background:#007ACC;border-radius: 6vw;font-size: 4vw;line-height: 12vw;justify-content: center; text-align: center;color: #FFF6D9;}
+    .pay-button-main .pay-button a.disabled{background: #EFEFEF;color:#999999;}
+}
 
-/*}*/
 

src/main/resources/static/js/pay/caimei-hlbpay.js

@@ -396,7 +396,7 @@ var payContainer = new Vue({
                 }
             }
             let params = {};
-            if(_self.pageType === 2){
+            if(_self.pageType === '2'){
                 params = {
                     unpaidAmount:_self.payAmount,
                     vipRecordId: _self.vipRecordId,

src/main/resources/templates/pay/caimei-pay.html

@@ -1,206 +1,207 @@
-<!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-pay.css(v=${version})}" rel="stylesheet" type="text/css">
-    <template th:replace="components/analysis"></template>
-</head>
-<body>
-<div class="head-wrap">
-    <div class="inner clear">
-        <div class="logo"><a href="/index.html"><img src="/img/base/logo.png" alt=""></a></div>
-        <div class="text">生美/医美采购服务平台</div>
-        <input type="hidden" th:value="${coreServer}" id="coreServer">
-        <input type="hidden" th:value="${agent}" id="userAgent">
-    </div>
-</div>
-<div class="pay-container clear" id="payContainer" :class="isRequest ? 'active' : ''">
-    <div class="container" v-if="!isErrorShow">
-        <div class="pay-content clear">
-            <div class="pay-title">
-                <div class="title-left"><p><span id="userName">{{ userName }}</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>
-            <!-- 维沙 -->
-<!--            <template v-if="organizeId === 3">-->
-<!--                <div class="pay-goods">-->
-<!--                    <div class="good-top">-->
-<!--                        <div class="good-top-inner ws">-->
-<!--                            <div class="ws-count-price"><span>支付总额：</span><span class="red">￥{{unpaidAmount | NumFormat}}</span></div>-->
-<!--                            <div>-->
-<!--                                <div class="ws-bot-right">-->
-<!--                                    <div class="bot-num"><span>订单号：</span><span class="p">{{orderNo}}</span></div>-->
-<!--                                    <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="red" id="payTotalFee">￥{{unpaidAmount | NumFormat}}</span></div>-->
-<!--                                    <div style="clear:both"></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 style="clear:both"></div>-->
-<!--                            </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 ws-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"><span class="tag" v-if="item.productType === 1 || item.productType === 2">赠品</span>-->
-<!--                                    <img :src="item.image" :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 class="list-total"> <span>合计：</span><span class="red">￥{{orderTotalFee | NumFormat}}</span></div>-->
-<!--                        <div style="clear: both"></div>-->
-<!--                    </div>-->
-<!--                </div>-->
-<!--            </template>-->
-            <!--购买会员-->
-            <template v-if="type === 2">
-                <div class="pay-svip">
-                    <div class="pay-svip-title">购买超级会员</div>
-                    <div class="content">
-                        <div class="pay-svip-detail">
-                            <div class="tit">支付金额</div>
-                            <div class="pay-amount"><span>￥</span>{{ unpaidAmount | NumFormat }}</div>
-                        </div>
-                        <div class="svip-indent">套餐{{ vipMonth }}个月</div>
-                    </div>
-                </div>
-            </template>
-            <!-- 采美 -->
-            <template v-else>
-                <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="eachDiscount">￥{{eachDiscount | NumFormat}}</span></div>
-                                <div class="bot-num"><span>合计：</span><span class="red" id="totalAmount">￥{{totalAmount | 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 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"><span class="tag" v-if="item.giftType === 1 || item.giftType === 2">赠品</span>
-                                    <img :src="item.image" :alt="item.name">
-                                </div>
-                                <div class="t-li"><p>{{item.name}}</p></div>
-                                <div class="t-li"><p>{{item.productUnit}}</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="payAmount">￥{{payAmount | NumFormat}}</span></div>
-                        <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="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="(record, index) in discernReceiptList" :key="index" v-else>
-                                <div class="record-tb">￥{{record.receiptAmount | NumFormat}}</div>
-                                <div class="record-tb">{{payTypeText(record)}}</div>
-                                <div class="record-tb">{{record.receiptDate}}</div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </template>
-            <div class="pay-bank">
-                <div class="bank-title">请选择以下一家银行进行付款<span class="color">(请在倒计时时间内使用<span class="big"> {{ payInfo.payLinkTypeText }} </span>完成本次支付)</span></div>
-                <div class="bank-list" id="bankContent" v-if="payInfo.payLinkType == 1">
-                    <a href="javascript:void(0);" class="bank-b mIcon" v-for="(item, index) in bankListB2BData" :key="index" :class="{ active: bankTabIndex === index }"  @click="checkBankPay(index,item)">
-                        <img :src="item.bankLogo" :alt="item.bankName">
-                    </a>
-                </div>
-                <div class="bank-list" id="bankContentC" v-if="payInfo.payLinkType == 2">
-                    <a href="javascript:void(0);" class="bank-b mIcon" v-for="(item, index) in bankListB2CData" :key="index" :class="{ active: bankTabIndex === index }"  @click="checkBankPay(index,item)">
-                        <img :src="item.bankLogo" :alt="item.bankName">
-                    </a>
-                </div>
-                <template>
-                    <div class="iframe" v-html="iframe" style="display: none;"></div>
-                </template>
-            </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>
-    <div class="pay-error-content" v-else>
-        <div class="pay-error clear">
-            <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>
-    <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/common/serviceapi/user.service.js(v=${version})}"></script>
-<script charset="utf-8" type="text/javascript" th:src="@{/js/pay/caimei-bank.js(v=${version})}"></script>
-<script charset="utf-8" type="text/javascript" th:src="@{/js/pay/mixin/hlb_payMixin.js(v=${version})}"></script>
-<script charset="utf-8" type="text/javascript" th:src="@{/js/pay/mixin/mh_payMixin.js(v=${version})}"></script>
-<script charset="utf-8" type="text/javascript" th:src="@{/js/pay/caimei-pay.js(v=${version})}"></script>
-</body>
-</html>
+<!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="pay/components/pay-link"></template>
+    <link th:href="@{/css/pay/caimei-pay.css(v=${version})}" rel="stylesheet" type="text/css">
+    <template th:replace="components/analysis"></template>
+</head>
+<body>
+<div class="head-wrap">
+    <div class="inner clear">
+        <div class="logo"><a href="/index.html"><img src="/img/base/logo.png" alt=""></a></div>
+        <div class="text">收银台</div>
+        <input type="hidden" th:value="${coreServer}" id="coreServer">
+        <input type="hidden" th:value="${agent}" id="userAgent">
+    </div>
+</div>
+<div class="pay-container clear" id="payContainer" :class="isRequest ? 'active' : ''">
+    <div class="container" v-if="!isErrorShow">
+        <div class="pay-content clear">
+            <div class="pay-title">
+                <div class="title-left"><p><span id="userName">{{ userName }}</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>
+            <!-- 维沙 -->
+<!--            <template v-if="organizeId === 3">-->
+<!--                <div class="pay-goods">-->
+<!--                    <div class="good-top">-->
+<!--                        <div class="good-top-inner ws">-->
+<!--                            <div class="ws-count-price"><span>支付总额：</span><span class="red">￥{{unpaidAmount | NumFormat}}</span></div>-->
+<!--                            <div>-->
+<!--                                <div class="ws-bot-right">-->
+<!--                                    <div class="bot-num"><span>订单号：</span><span class="p">{{orderNo}}</span></div>-->
+<!--                                    <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="red" id="payTotalFee">￥{{unpaidAmount | NumFormat}}</span></div>-->
+<!--                                    <div style="clear:both"></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 style="clear:both"></div>-->
+<!--                            </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 ws-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"><span class="tag" v-if="item.productType === 1 || item.productType === 2">赠品</span>-->
+<!--                                    <img :src="item.image" :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 class="list-total"> <span>合计：</span><span class="red">￥{{orderTotalFee | NumFormat}}</span></div>-->
+<!--                        <div style="clear: both"></div>-->
+<!--                    </div>-->
+<!--                </div>-->
+<!--            </template>-->
+            <!--购买会员-->
+            <template v-if="type === 2">
+                <div class="pay-svip">
+                    <div class="pay-svip-title">购买超级会员</div>
+                    <div class="content">
+                        <div class="pay-svip-detail">
+                            <div class="tit">支付金额</div>
+                            <div class="pay-amount"><span>￥</span>{{ unpaidAmount | NumFormat }}</div>
+                        </div>
+                        <div class="svip-indent">套餐{{ vipMonth }}个月</div>
+                    </div>
+                </div>
+            </template>
+            <!-- 采美 -->
+            <template v-else>
+                <div class="pay-goods clear">
+                    <div class="good-top">
+                        <div class="good-top-inner">
+                            <div class="bot-right">
+                                <div class="bot-num"><span>优惠：</span><span class="p" id="eachDiscount">￥{{eachDiscount | NumFormat}}</span></div>
+                                <div class="bot-num"><span>合计：</span><span class="red" id="totalAmount">￥{{totalAmount | 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 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"><span class="tag" v-if="item.giftType === 1 || item.giftType === 2">赠品</span>
+                                    <img :src="item.image" :alt="item.name">
+                                </div>
+                                <div class="t-li"><p>{{item.name}}</p></div>
+                                <div class="t-li"><p>{{item.productUnit}}</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="payAmount">￥{{payAmount | NumFormat}}</span></div>
+                        <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="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="(record, index) in discernReceiptList" :key="index" v-else>
+                                <div class="record-tb">￥{{record.receiptAmount | NumFormat}}</div>
+                                <div class="record-tb">{{payTypeText(record)}}</div>
+                                <div class="record-tb">{{record.receiptDate}}</div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </template>
+            <div class="pay-bank">
+                <div class="bank-title">请选择以下一家银行进行付款<span class="color">(请在倒计时时间内使用<span class="big"> {{ payInfo.payLinkTypeText }} </span>完成本次支付)</span></div>
+                <div class="bank-list" id="bankContent" v-if="payInfo.payLinkType == 1">
+                    <a href="javascript:void(0);" class="bank-b mIcon" v-for="(item, index) in bankListB2BData" :key="index" :class="{ active: bankTabIndex === index }"  @click="checkBankPay(index,item)">
+                        <img :src="item.bankLogo" :alt="item.bankName">
+                    </a>
+                </div>
+                <div class="bank-list" id="bankContentC" v-if="payInfo.payLinkType == 2">
+                    <a href="javascript:void(0);" class="bank-b mIcon" v-for="(item, index) in bankListB2CData" :key="index" :class="{ active: bankTabIndex === index }"  @click="checkBankPay(index,item)">
+                        <img :src="item.bankLogo" :alt="item.bankName">
+                    </a>
+                </div>
+                <template>
+                    <div class="iframe" v-html="iframe" style="display: none;"></div>
+                </template>
+            </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>
+    <div class="pay-error-content" v-else>
+        <div class="pay-error clear">
+            <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>
+    <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/common/serviceapi/user.service.js(v=${version})}"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/pay/caimei-bank.js(v=${version})}"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/pay/mixin/hlb_payMixin.js(v=${version})}"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/pay/mixin/mh_payMixin.js(v=${version})}"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/pay/caimei-pay.js(v=${version})}"></script>
+</body>
+</html>

src/main/resources/templates/pay/components/pay-link.html

@@ -1,13 +1,14 @@
-<meta charset="UTF-8">
-    <title>采美365网</title>
-    <meta name="viewport" content="width=device-width,account-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
-    <meta name="apple-mobile-web-app-capable" content="yes">
-    <meta name="apple-mobile-web-app-status-bar-style" content="black">
-    <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <link rel="shortcut icon" th:href="@{/favicon.png}" type="image/x-icon"/>
-    <link rel="bookmark" th:href="@{/favicon.png}" type="image/x-icon"/>
-    <link href="/lib/swiper.min.css" media="screen and (max-width:768px)" rel="stylesheet" type="text/css">
-    <link href="/lib/jquery-confirm.min.css" rel="stylesheet" type="text/css">
-    <link href="/lib/css/viewer.min.css" rel="stylesheet" type="text/css">
-    <link th:href="@{/css/base/init.css(v=${version})}" rel="stylesheet" type="text/css">
-    <link th:href="@{/css/base/base.pc.css(v=${version})}"  rel="stylesheet" type="text/css">
+<meta charset="UTF-8">
+    <title>采美365网</title>
+    <meta name="viewport" content="width=device-width,account-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <link rel="shortcut icon" th:href="@{/favicon.png}" type="image/x-icon"/>
+    <link rel="bookmark" th:href="@{/favicon.png}" type="image/x-icon"/>
+    <link href="/lib/swiper.min.css" media="screen and (max-width:768px)" rel="stylesheet" type="text/css">
+    <link href="/lib/jquery-confirm.min.css" rel="stylesheet" type="text/css">
+    <link href="/lib/css/viewer.min.css" rel="stylesheet" type="text/css">
+    <link th:href="@{/css/base/init.css(v=${version})}" rel="stylesheet" type="text/css">
+    <link th:href="@{/css/base/base.h5.css(v=${version})}" media="screen and (max-width:768px)" rel="stylesheet" type="text/css">
+    <link th:href="@{/css/base/base.pc.css(v=${version})}" media="screen and (min-width:768px)" rel="stylesheet" type="text/css">