增加支付路由

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

@@ -0,0 +1,491 @@
+.pay-container {
+  width: 100%;
+  min-height: 550px;
+  position: relative;
+  margin-bottom: 20px;
+  opacity: 0;
+}
+.pay-container.active{
+    opacity: 1;
+}
+.pay-content{
+    width: 1200px;
+    margin: 0 auto;
+    height: auto;
+    margin-top: 20px;
+
+}
+.pay-title{
+    width: 100%;
+    height: 64px;
+    padding: 12px 20px;
+    float: left;
+    background: #ffffff;
+    margin-bottom: 20px;
+}
+.pay-title .title-left{
+    float: left;
+}
+.pay-title .title-left p{
+    font-size: 24px;
+    line-height: 40px;
+    color: #333333;
+}
+.pay-title .title-left #userName{
+    font-size: 24px;
+    color: #333333;
+}
+.pay-title .title-left span{
+    font-size: 16px;
+    line-height: 40px;
+    color: #666666;
+}
+.pay-title .title-left span.color{
+    color: #e15616;
+}
+.pay-title .title-right{
+    float: right;
+    height: 40px;
+}
+.pay-title .title-right .time{
+    width: 172px;
+    height: 40px;
+    padding-left: 62px;
+    background: url("/web/order/img/icon-time.png")no-repeat;
+    background-size: cover;
+}
+.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-goods .good-top{
+    width: 100%;
+    padding: 0 20px;
+    float: left;
+}
+.pay-goods .good-top .good-top-inner{
+    width: 1160px;
+    float: left;
+    border-bottom: 1px solid #F7F7F7;
+}
+.pay-goods .good-top .bot-left{
+    float: right;
+    height: 24px;
+    line-height: 24px;
+    font-size: 12px;
+    padding: 16px 0 15px 0;
+    color: #999999;
+    cursor: pointer;
+}
+.pay-goods .good-top .bot-left .icon-down{
+    width: 24px;
+    height: 24px;
+    display: block;
+    background: url("/web/order/img/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: 55px;
+}
+.pay-goods .good-top .bot-right .bot-num{
+    float: left;
+    line-height: 55px;
+    margin-right: 30px;
+}
+.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{
+    width: 100%;
+    height: auto;
+    float: left;
+    background: #ffffff;
+}
+.pay-goods .good-main{
+    width: 100%;
+    height: auto;
+    float: left;
+}
+.pay-goods .good-main .list-title{
+    width: 100%;
+    height: 40px;
+    padding: 0 20px;
+    float: left;
+}
+.pay-goods .good-main .list-title .t-li{
+    font-size: 14px;
+    color: #333333;
+    line-height: 44px;
+    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: 15%;
+}
+.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: 20%;
+}
+.pay-goods .good-main .list-container{
+    width: 100%;
+    height: auto;
+    background: #ffffff;
+    padding: 10px 20px;
+    float: left;
+    border-bottom: 1px solid #F7F7F7;
+    opacity: 1;
+}
+.pay-goods .good-main .list-container.active{
+    height: 0;
+    opacity: 0;
+}
+.pay-goods .good-main .list-container .list-main{
+    width: 100%;
+    height: 48px;
+    float: left;
+}
+.pay-goods .good-main .list-container .list-main.active{
+    background-color: #F7F7F7;
+}
+.pay-goods .good-main .list-container .list-main .t-li{
+    font-size: 14px;
+    color: #333333;
+    line-height: 48px;
+    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: 15%;
+}
+.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: 20%;
+}
+.pay-goods .good-main .list-container .list-main .t-li img{
+    width: 30px;
+    height: 30px;
+    border-radius: 5px;
+    background-color: #f7f7f7;
+    margin-top: 9px;
+}
+.pay-ment{
+    width: 100%;
+    height: auto;
+    float: left;
+    margin-top: 20px;
+}
+.pay-ment .pay-message{
+    width: 100%;
+    height: 48px;
+    line-height: 48px;
+    float: left;
+    background: #FFFFFF;
+    padding: 0 20px;
+    margin-bottom: 20px;
+}
+.pay-ment .pay-message .message-num{
+    float: left;
+    margin-right: 80px;
+    font-size: 14px;
+    color: #333333;
+}
+.pay-ment .pay-message .message-num .red{
+    color: #FF2A2A;
+}
+.pay-ment .pay-record{
+    width: 100%;
+    height: auto;
+    float: left;
+    padding: 0 20px 20px 20px;
+    background: #FFFFFF;
+}
+.pay-ment .pay-record .record-title{
+    width: 100%;
+    line-height: 44px;
+    font-size: 18px;
+    color: #333333;
+    text-align: left;
+}
+.pay-ment .pay-record .record-content{
+    width: 100%;
+    height: auto;
+    padding: 8px 20px;
+    background: #F7F7F7;
+    border: 5px;
+}
+.pay-ment .pay-record .record-content .record-li{
+    width: 100%;
+    height: 30px;
+    float: left;
+}
+.pay-ment .pay-record .record-content .record-li.none{
+    font-size: 14px;
+    color: #999999;
+    text-align: left;
+    line-height: 30px;
+}
+.pay-ment .pay-record .record-content .record-li .record-tb{
+    width: 20%;
+    height: 30px;
+    float: left;
+    font-size: 14px;
+    color: #333333;
+    text-align: left;
+    line-height: 30px;
+}
+.pay-ment .pay-record .record-content .record-li .record-tb:last-child{
+    text-align: right;
+    color: #999999;
+}
+.pay-bank{
+    width: 100%;
+    height: auto;
+    padding: 0 0 8px 0;
+    background: #FFFFFF;
+    margin-top: 20px;
+    float: left;
+}
+.pay-bank .bank-title{
+    width: 100%;
+    line-height: 54px;
+    font-size: 18px;
+    color: #333333;
+    float: left;
+    padding-left: 20px;
+}
+.pay-bank .bank-list{
+    width: 100%;
+    height: auto;
+    padding-left: 8px;
+}
+.pay-bank .bank-list a{
+    width: 144px;
+    height: 48px;
+    display: block;
+    float: left;
+    margin: 12px;
+    border: 2px 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: 34px;
+    height: 28px;
+    position: absolute;
+    bottom: -2px;
+    right: -2px;
+    background: url("/web/order/img/iconbank-active@2x.png") no-repeat;
+    background-size: cover;
+}
+.pay-button{
+    width: 100%;
+    height: 44px;
+    padding: 0 20px;
+    margin: 20px 0;
+    float: left;
+}
+.pay-button a{
+    width: 208px;
+    height: 44px;
+    display: block;
+    background:linear-gradient(135deg,rgba(242,143,49,1) 0%,rgba(225,86,22,1) 100%);
+    border-radius: 5px;
+    font-size: 14px;
+    line-height: 44px;
+    text-align: center;
+    color: #FFF6D9;
+    float: right;
+}
+.pay-error{
+    width: 1200px;
+    margin: 0 auto;
+    height: 594px;
+    margin-top: 20px;
+    background: #FFFFFF;
+}
+.pay-error .icon-error{
+    width: 248px;
+    height: 200px;
+    margin: 0 auto;
+    margin-top: 134px;
+}
+.pay-error .icon-error.again{
+    background: url("/web/order/img/icon-error--1.png") no-repeat;
+    background-size:contain ;
+}
+.pay-error .icon-error.offline{
+    background: url("/web/order/img/icon-error--2.png") no-repeat;
+    background-size:contain ;
+}
+.pay-error .icon-error.fail{
+    background: url("/web/order/img/icon-error--3.png") no-repeat;
+    background-size:contain ;
+}
+.pay-error .icon-error.paid{
+    background: url("/web/order/img/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: 5px;
+    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;
+    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: 24px;
+    height: 24px;
+    display: block;
+    position: absolute;
+    right:12px;
+    top: 12px;
+    background: url("/web/login/img/icon-close.png")no-repeat;
+    background-size: cover;
+    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;
+}
+.pay-alert-content .pay-alert .button a{
+    width: 90px;
+    height: 32px;
+    display: block;
+    background: #E15616;
+    border-radius: 2px;
+    font-size: 14px;
+    text-align: center;
+    line-height: 32px;
+    color: #FFFFFF;
+    float: right;
+}
+

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

@@ -0,0 +1,539 @@
+input::-webkit-inner-spin-button {
+	-webkit-appearance: none;
+}
+input::-webkit-outer-spin-button {
+	-webkit-appearance: none;
+}
+.page-title {
+	width: 1190px;
+	height: 90px;
+	margin: 0 auto;
+	line-height: 1;
+}
+.page-title .page-name {
+	float: left;
+	display: block;
+	height: 30px;
+	padding: 30px 0;
+	color: #333;
+	font-size: 30px;
+}
+
+.progress {
+	float: right;
+	width: 448px;
+	padding-top: 32px;
+}
+.progress-bar {
+	width: 368px;
+	height: 12px;
+	margin: 0 40px;
+}
+.progress .step-1 {
+	background: url(/public/3.0/img/order/progress_1.png) no-repeat center center;
+}
+.progress .step-2 {
+	background: url(/public/3.0/img/order/progress_2.png) no-repeat center center;
+}
+.progress .step-3 {
+	background: url(/public/3.0/img/order/progress_3.png) no-repeat center center;
+}
+.progress .progress-txt {
+	padding: 5px 0;
+	font-size: 12px;
+	font-family: Arial, "鐎瑰缍�;
+}
+.progress-txt .item {
+	float: left;
+	width: 92px;
+	text-align: center;
+}
+.progress-txt .item.middle {
+	width: 264px;
+}
+
+.progress-txt .item.current {
+	color: #E15616;
+}
+.pay-container {
+  width: 100%;
+  position: relative;
+  margin-bottom: 20px;
+  opacity: 0;
+}
+.pay-container.active{
+    opacity: 1;
+}
+.pay-content{
+    width: 1200px;
+    margin: 0 auto;
+    height: auto;
+}
+.pay-title{
+    width: 100%;
+    height: auto;
+    padding: 15px 20px;
+    float: left;
+    background: #ffffff;
+    margin-bottom: 7px;
+}
+.pay-title .title-money{
+	width: 100%;
+	height: 36px;
+	float: left;
+	margin: 7px 0;
+	line-height: 36px;
+}
+.pay-title .title-money.big{
+    height: 88px;
+    line-height: 88px;
+}
+.pay-title .title-money p{
+	font-size: 16px;
+	color: #333333;
+	float: left;
+	margin-right: 80px;
+}
+.pay-title .title-money p.pay-money-big{
+    font-size: 30px;
+}
+.pay-title .title-money .red{
+	color: #FF2A2A;
+}
+.pay-title .pay-input{
+	width: 100%;
+	height: 36px;
+	float: left;
+	line-height: 36px;
+}
+.pay-title .pay-input p{
+	font-size: 16px;
+	color: #333333;
+	float: left;
+}
+.pay-title .pay-input .input-text{
+	font-size: 18px;
+	color: #333333;
+}
+.pay-title .pay-input .input-text span{
+	font-size: 14px;
+}
+.pay-title .pay-input .input{
+	width: 215px;
+	height: 34px;
+	display: inline-block;
+	font-size: 14px;
+	line-height: 34px;
+	padding: 0 10px;
+	border: 1px solid #EBEBEB;
+	border-radius: 5px;
+}
+.pay-ment{
+    width: 100%;
+    height: auto;
+    float: left;
+    background: #FFFFFF;
+    margin-top: 7px;
+}
+.pay-ment .pay-record{
+    width: 100%;
+    height: auto;
+    float: left;
+    background: #FFFFFF;
+    padding: 10px 0;
+}
+.pay-ment .pay-record .record-title{
+    width: 100%;
+    padding: 0 20px;
+    background: #FFFFFF;
+    line-height: 44px;
+    font-size: 20px;
+    color: #333333;
+    text-align: left;
+}
+.pay-ment .pay-record .record-content{
+    width: 1160px;
+    height: auto;
+    padding: 8px 650px 8px 20px;
+    margin: 0 auto;
+    background: #F7F7F7;
+    border-radius: 5px;
+}
+.pay-ment .pay-record .record-content .record-li{
+    width: 100%;
+    height: 30px;
+    float: left;
+}
+.pay-ment .pay-record .record-content .record-li.none{
+    font-size: 14px;
+    color: #333333;
+    text-align: left;
+    line-height: 30px;
+}
+.pay-ment .pay-record .record-content .record-li .record-tb{
+    width: 33.33%;
+    height: 30px;
+    float: left;
+    font-size: 14px;
+    color: #333333;
+    text-align: left;
+    line-height: 30px;
+}
+.pay-ment .pay-record .record-content .record-li .record-tb:last-child{
+    text-align: right;
+    color: #999999;
+}
+.pay-method{
+ 	width: 100%;
+    height: auto;
+    float: left;
+    background: #FFFFFF;
+    margin-top: 20px;
+}
+.pay-method .method-title{
+	width: 100%;
+    padding: 0 20px;
+    background: #FFFFFF;
+    line-height: 44px;
+    font-size: 20px;
+    color: #333333;
+    text-align: left;
+    border-bottom: 1px solid #F7F7F7;
+}
+.pay-method .pay-method-tab{
+	width: 100%;
+	height: 42px;
+	float: left;
+	border-bottom: 2px solid #E15616;
+}
+.pay-method .pay-method-tab .item{
+	width: 110px;
+	height: 42px;
+	display: block;
+	float: left;
+	text-align: center;
+	line-height: 42px;
+	font-size: 14px;
+	color: #333333;
+}
+.pay-method .pay-method-tab .item.active{
+	background: #E15616;
+	color: #FFFFFF;
+}
+.pay-method .method-content{
+	width: 100%;
+	height: auto;
+	padding: 20px 0;
+	float: left;
+}
+.pay-method .method-content .payment-title{
+    font-size: 14px;
+    line-height: 30px;
+    color: #FF2A2A;
+    text-align: left;
+    padding-left: 20px;
+}
+.pay-method .method-content .payment{
+	width: 100%;
+	height: auto;
+}
+.pay-bank{
+    width: 100%;
+    height: auto;
+    padding: 0 0 8px 0;
+    background: #FFFFFF;
+    float: left;
+}
+.pay-bank .bank-list{
+    width: 100%;
+    height: auto;
+    padding-left: 8px;
+}
+.pay-bank .bank-list .bank-text{
+	line-height: 22px;
+	height: 22px;
+	font-size: 16px;
+	color: #333333;
+	padding-left: 20px;
+	margin: 6px 0;
+}
+.pay-bank .bank-list .bank-text span{
+	color: #999999;
+}
+.pay-bank .bank-list .bank-a{
+    width: 124px;
+    height: 44px;
+    display: block;
+    float: left;
+    margin: 12px;
+    border: 2px solid #FFFFFF;
+    position: relative;
+}
+.pay-bank .bank-list .bank-b{
+    width: 124px;
+    height: 44px;;
+    display: block;
+    float: left;
+    margin: 12px;
+    border: 2px 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: 34px;
+    height: 28px;
+    position: absolute;
+    bottom: -2px;
+    right: -2px;
+    background: url("/web/order/img/iconbank-active@2x.png") no-repeat;
+    background-size: cover;
+}
+.pay-link{
+    width: 100%;
+    height: 32px;
+    padding: 0 20px;
+    float: left;
+}
+.pay-link p{
+    float: left;
+    font-size: 14px;
+    line-height: 32px;
+    color: #666;
+    text-align: left;
+}
+.pay-link a{
+    width: 112px;
+    height: 30px;
+    border: 1px solid #999;
+    display: block;
+    text-align: center;
+    float: left;
+    font-size: 12px;
+    line-height: 30px;
+    border-radius: 20px;
+    color: #333;
+    margin-left: 16px;
+}
+.pay-link .inviteCode{
+    width: 112px;
+    height: 30px;
+    border: 1px solid #999;
+    text-align: center;
+    float: left;
+    font-size: 12px;
+    line-height: 30px;
+    border-radius: 2px;
+    color: #333;
+    margin: 0 5px;
+}
+.pay-button{
+    width: 100%;
+    height: 44px;
+    padding: 0 20px;
+    margin: 20px 0;
+    float: left;
+}
+.pay-button a{
+    width: 208px;
+    height: 44px;
+    display: block;
+    background:linear-gradient(135deg,rgba(242,143,49,1) 0%,rgba(225,86,22,1) 100%);
+    border-radius: 5px;
+    font-size: 14px;
+    line-height: 44px;
+    text-align: center;
+    color: #FFF6D9;
+    float: right;
+}
+.pay-error{
+    width: 1200px;
+    margin: 0 auto;
+    height: 594px;
+    margin-top: 20px;
+    display: none;
+    background: #FFFFFF;
+}
+.pay-error .icon-error{
+    width: 248px;
+    height: 200px;
+    margin: 0 auto;
+    margin-top: 134px;
+}
+.pay-error .icon-error.again{
+    background: url("/web/order/img/icon-error--1.png") no-repeat;
+    background-size:contain ;
+}
+.pay-error .icon-error.offline{
+    background: url("/web/order/img/icon-error--2.png") no-repeat;
+    background-size:contain ;
+}
+.pay-error .icon-error.fail{
+    background: url("/web/order/img/icon-error--3.png") no-repeat;
+    background-size:contain ;
+}
+.pay-error .icon-error.paid{
+    background: url("/web/order/img/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;
+    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: 24px;
+    height: 24px;
+    display: block;
+    position: absolute;
+    right:12px;
+    top: 12px;
+    background: url("/web/login/img/icon-close.png")no-repeat;
+    background-size: cover;
+    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;
+}
+.pay-alert-content .pay-alert .button a{
+    width: 90px;
+    height: 32px;
+    display: block;
+    background: #E15616;
+    border-radius: 2px;
+    font-size: 14px;
+    text-align: center;
+    line-height: 32px;
+    color: #FFFFFF;
+    float: right;
+}
+.payment-transfer{
+    width: 100%;
+    height: auto;
+    padding: 0 24px;
+}
+.payment-transfer .payment-transfer-main{
+    width: 100%;
+    height: auto;
+}
+.payment-transfer .payment-transfer-main .label{
+    width: 100%;
+    height: 38px;
+    line-height: 38px;
+    font-size: 13px;
+    color: #333;
+}
+.payment-transfer .payment-transfer-main .label .label-title{
+    color: #999999;
+}
+.payment-transfer .payment-transfer-main .label .label-t{
+    color: #666;
+}
+.payment-transfer .payment-transfer-main .label .text{
+    color: #333;
+    float: left;
+    width: 25%;
+}
+.payment-transfer .payment-transfer-main .label .text-p{
+    color: #333;
+    float: left;
+}
+.payment-transfer .payment-transfer-main .label .text-p input{
+    border: none;
+    background-color: #FFF;
+    width: 60px;
+    font-size: 14px;
+    color: #333;
+}
+.payment-transfer .payment-transfer-main .label .text-p .copy{
+    display: block;
+    width:42px;
+    height:18px;
+    background:linear-gradient(34deg,rgba(255,41,41,1) 0%,rgba(255,109,27,1) 100%);
+    opacity:1;
+    border-radius:3px;
+    float: left;
+    line-height: 18px;
+    font-size: 12px;
+    margin-top: 10px;
+    margin-left: 5px;
+    color: #FFF;
+    text-align: center;
+}
+.payment-transfer .payment-transfer-main .label .label-c{
+    color: #E15616;
+}

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

@@ -0,0 +1,247 @@
+.pay-container {
+  width: 100%;
+  min-height: 583px;
+  position: relative;
+  margin-bottom: 20px;
+  opacity: 0;
+}
+.pay-container.active{
+    opacity: 1;
+}
+.pay-content{
+    width: 1200px;
+    margin: 0 auto;
+    height: 583px;
+    margin-top: 20px;
+    background: #FFFFFF;
+    padding-top: 108px;
+}
+.pay-content.weixin{
+    border: 2px solid #7AD237;
+}
+.pay-content.ali{
+    border: 2px solid #3D8FFB;
+}
+.pay-codecontent{
+    width: 1200px;
+    height: auto;
+    float: left;
+    padding:  0 255px;
+}
+.pay-codecontent .pay-amount{
+    width: 278px;
+    height: 100%;
+    float: left;
+}
+.pay-codecontent .pay-amount .pay-amount-text{
+    width: 100%;
+    height: auto;
+    float: left;
+    margin-bottom: 40px;
+}
+.pay-codecontent .pay-amount .pay-amount-text p{
+    font-size: 16px;
+    text-align: left;
+    color: #333;
+    line-height: 34px;
+}
+.pay-codecontent .pay-amount .pay-amount-text p span{
+    margin-left: 5px;
+}
+.pay-codecontent .pay-amount .pay-amount-icon{
+    width: 278px;
+    height: 205px;
+    float: left;
+}
+.pay-codecontent .pay-amount .pay-amount-icon img{
+    width: 100%;
+    height: 100%;
+    display: block;
+}
+.pay-codecontent .pay-codemain{
+    width: 300px;
+    height: auto;
+    float: right;
+    position: relative;
+}
+.pay-codecontent .pay-codemain .code-title{
+    width: 100%;
+    height: 34px;
+    line-height: 34px;
+    font-size: 16px;
+    color: #333333;
+    margin-bottom: 20px;
+    text-align: center;
+}
+.pay-codecontent .pay-codemain .code-title span{
+    color: #E15616;
+}
+.pay-codecontent .pay-codemain .pay-qrCode{
+    width: 220px;
+    height: 220px;
+    position: relative;
+    margin: 0 auto;
+    padding: 8px;
+    border: 2px solid #ebebeb;
+}
+.pay-codecontent .pay-codemain .pay-qrCode.weixin{
+    border-color:#7AD237 ;
+}
+.pay-codecontent .pay-codemain .pay-qrCode.ali{
+    border-color:#26A1EE ;
+}
+.pay-codecontent .pay-codemain .pay-qrCode i{
+    width: 48px;
+    height: 48px;
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    margin: auto;
+}
+.pay-codecontent .pay-codemain .pay-qrCode .icon-alipay{
+    background: url("/web/order/img/icon-ali@2x.png")no-repeat;
+    background-size: contain;
+}
+.pay-codecontent .pay-codemain .pay-qrCode .icon-wechat{
+    background: url("/web/order/img/icon-wechatpay@2x.png")no-repeat;
+    background-size: contain;
+}
+.pay-codecontent .pay-codemain .code-footer{
+    width: 100%;
+    height: 33px;
+    line-height: 33px;
+    font-size: 14px;
+    color: #333333;
+    text-align: center;
+    margin-top: 10px;
+}
+.pay-codecontent .pay-codemain .code-footer .code-img{
+    width: 84px;
+    height: 28px;
+    display: block;
+    margin: 0 auto;
+}
+.pay-alert-content{
+    width: 100%;
+    height: 100%;
+    position: fixed;
+    top: 0;
+    left: 0;
+    background: rgba(0,0,0,0.3);
+    z-index: 9999;
+    display: none;
+}
+.pay-alert-content .pay-alert{
+    width: 340px;
+    height: 208px;
+    padding:0 14px 14px 14px;
+    background: #FFFFFF;
+    border-radius: 5px;
+    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;
+    font-size: 18px;
+    line-height: 48px;
+    text-align: center;
+    color: #333333;
+    float: left;
+    position: relative;
+    border-bottom: 1px solid #EBEBEB;
+}
+.pay-alert-content .pay-alert .title .icon-close{
+    width: 24px;
+    height: 24px;
+    display: block;
+    position: absolute;
+    right:0;
+    top: 12px;
+    background: url("/web/login/img/icon-close.png")no-repeat;
+    background-size: cover;
+    cursor: pointer;
+}
+.pay-alert-content .pay-alert .content{
+    margin: 30px 0;
+    width: 100%;
+    height: auto;
+    line-height: 24px;
+    float: left;
+}
+.pay-alert-content .pay-alert .content h1{
+    text-align: center;
+    font-size: 18px;
+    color: #333333;
+    font-weight: normal;
+}
+.pay-alert-content .pay-alert .content p{
+    text-align: center;
+    font-size: 14px;
+    color: #333333;
+    font-weight: normal;
+}
+.pay-alert-content .pay-alert .button{
+    width: 100%;
+    height: 32px;
+    float: left;
+}
+.pay-alert-content .pay-alert .button a{
+    width: 148px;
+    height: 32px;
+    display: block;
+    background: #E15616;
+    border-radius: 5px;
+    font-size: 14px;
+    text-align: center;
+    line-height: 32px;
+    color: #FFFFFF;
+    margin: 0 auto;
+}
+.pay-codemain .model{
+    position: absolute;
+    width: 220px;
+    height: 220px;
+    top: 54px;
+    left: 40px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: rgba(255,255,255,1);
+    color: #999;
+    z-index: 99999;
+    border: 1px solid #EBEBEB;
+}
+.pay-codemain .model .refresh{
+  width: 21px;
+  height: 21px;
+  display: block;
+  margin: 0 auto;
+  margin-bottom: 3px;
+}
+.pay-codemain .model  .refresh-div{
+  width: 100px;
+  height: auto;
+  display: block;
+}
+.pay-codemain .model  .refresh-div p{
+  text-align: center;
+  font-size: 14px;
+  line-height: 20px;
+}
+/*微信二维码样式*/
+iframe{width:202px !important;height: 260px !important}
+.impowerBox .qrcode {width: 200px !important;}
+.impowerBox .title {display: none;}
+.impowerBox .info {width: 200px;}
+.impowerBox .status_icon {display: none;}
+.impowerBox .status {text-align: center;display: none;}
+.impowerBox .qrcode{margin-top: 0;}

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

@@ -0,0 +1,533 @@
+.xf-logo{
+    width: 60px;
+    height: 60px;
+    margin-top: 10px;
+    margin-right: 20px;
+}
+.xf-logo img{
+    width: 60px;
+    height: 60px;
+    display: block;
+}
+.pay-container {
+  width: 100%;
+  min-height: 550px;
+  position: relative;
+  margin-bottom: 20px;
+  opacity: 0;
+}
+.pay-container.active{
+    opacity: 1;
+}
+.pay-content{
+    width: 1200px;
+    margin: 0 auto;
+    height: auto;
+    margin-top: 20px;
+
+}
+.pay-title{
+    width: 100%;
+    height: 64px;
+    padding: 12px 20px;
+    float: left;
+    background: #ffffff;
+    margin-bottom: 20px;
+}
+.pay-title .title-left{
+    float: left;
+}
+.pay-title .title-left p{
+    font-size: 24px;
+    line-height: 40px;
+    color: #333333;
+}
+.pay-title .title-left #userName{
+    font-size: 24px;
+    color: #333333;
+}
+.pay-title .title-left span{
+    font-size: 16px;
+    line-height: 40px;
+    color: #666666;
+}
+.pay-title .title-left span.color{
+    color: #e15616;
+}
+.pay-title .title-right{
+    float: right;
+    height: 40px;
+}
+.pay-title .title-right .time{
+    width: 172px;
+    height: 40px;
+    padding-left: 62px;
+    background: url("/web/order/img/icon-time@2x.png")no-repeat;
+    background-size: cover;
+}
+.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-goods .good-top{
+    width: 100%;
+    padding: 0 20px;
+    float: left;
+}
+.pay-goods .good-top .good-top-inner{
+    width: 1160px;
+    float: left;
+    border-bottom: 1px solid #F7F7F7;
+}
+.pay-goods .good-top .bot-left{
+    float: right;
+    height: 24px;
+    line-height: 24px;
+    font-size: 12px;
+    padding: 16px 0 15px 0;
+    color: #999999;
+    cursor: pointer;
+}
+.pay-goods .good-top .bot-left .icon-down{
+    width: 24px;
+    height: 24px;
+    display: block;
+    background: url("/web/order/img/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: 55px;
+}
+.pay-goods .good-top .bot-right .bot-num{
+    float: left;
+    line-height: 55px;
+    margin: 0 15px;
+}
+.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{
+    width: 100%;
+    height: auto;
+    float: left;
+    background: #ffffff;
+}
+.pay-goods .good-main{
+    width: 100%;
+    height: auto;
+    float: left;
+}
+.pay-goods .good-main .list-title{
+    width: 100%;
+    height: 40px;
+    padding: 0 20px;
+    float: left;
+}
+.pay-goods .good-main .list-title .t-li{
+    font-size: 14px;
+    color: #333333;
+    line-height: 44px;
+    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: 15%;
+}
+.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: 20%;
+}
+.pay-goods .good-main .list-container{
+    width: 100%;
+    height: auto;
+    background: #ffffff;
+    padding: 10px 20px;
+    float: left;
+    border-bottom: 1px solid #F7F7F7;
+    opacity: 1;
+}
+.pay-goods .good-main .list-container.active{
+    height: 0;
+    opacity: 0;
+}
+.pay-goods .good-main .list-container .list-main{
+    width: 100%;
+    height: 48px;
+    margin: 10px 0;
+    float: left;
+}
+.pay-goods .good-main .list-container .list-main.active{
+    background-color: #F7F7F7;
+}
+.pay-goods .good-main .list-container .list-main .t-li{
+    font-size: 14px;
+    color: #333333;
+    line-height: 48px;
+    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%;
+    line-height: 24px;
+    text-align: justify;
+    text-overflow:ellipsis;
+    display: -webkit-box;
+    word-break: break-all;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    overflow: hidden;
+}
+.pay-goods .good-main .list-container .list-main .t-li:nth-child(4){
+    width: 15%;
+}
+.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: 20%;
+}
+.pay-goods .good-main .list-container .list-main .t-li img{
+    width: 30px;
+    height: 30px;
+    border-radius: 5px;
+    background-color: #f7f7f7;
+    margin-top: 9px;
+}
+.pay-ment{
+    width: 100%;
+    height: auto;
+    float: left;
+    margin-top: 20px;
+}
+.pay-ment .pay-message{
+    width: 100%;
+    height: 48px;
+    line-height: 48px;
+    float: left;
+    background: #FFFFFF;
+    padding: 0 20px;
+    margin-bottom: 20px;
+}
+.pay-ment .pay-message .message-num{
+    float: left;
+    margin-right: 80px;
+    font-size: 14px;
+    color: #333333;
+}
+.pay-ment .pay-message .message-num .red{
+    color: #FF2A2A;
+}
+.pay-ment .pay-record{
+    width: 100%;
+    height: auto;
+    float: left;
+    padding: 0 20px 20px 20px;
+    background: #FFFFFF;
+}
+.pay-ment .pay-record .record-title{
+    width: 100%;
+    line-height: 44px;
+    font-size: 18px;
+    color: #333333;
+    text-align: left;
+}
+.pay-ment .pay-record .record-content{
+    width: 100%;
+    height: auto;
+    padding: 8px 20px;
+    background: #F7F7F7;
+    border: 5px;
+}
+.pay-ment .pay-record .record-content .record-li{
+    width: 100%;
+    height: 30px;
+    float: left;
+}
+.pay-ment .pay-record .record-content .record-li.none{
+    font-size: 14px;
+    color: #999999;
+    text-align: left;
+    line-height: 30px;
+}
+.pay-ment .pay-record .record-content .record-li .record-tb{
+    width: 20%;
+    height: 30px;
+    float: left;
+    font-size: 14px;
+    color: #333333;
+    text-align: left;
+    line-height: 30px;
+}
+.pay-ment .pay-record .record-content .record-li .record-tb:last-child{
+    text-align: right;
+    color: #999999;
+}
+.pay-bank{
+    width: 100%;
+    height: auto;
+    padding: 0 0 8px 0;
+    background: #FFFFFF;
+    margin-top: 20px;
+    float: left;
+}
+.pay-bank .bank-title{
+    width: 100%;
+    line-height: 54px;
+    font-size: 18px;
+    color: #333333;
+    float: left;
+    padding-left: 20px;
+}
+.pay-bank .bank-list{
+    width: 100%;
+    height: auto;
+    padding-left: 8px;
+}
+.pay-bank .bank-list a{
+    width: 144px;
+    height: 48px;
+    display: block;
+    float: left;
+    margin: 12px;
+    border: 2px 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: 34px;
+    height: 28px;
+    position: absolute;
+    bottom: -2px;
+    right: -2px;
+    background: url("/web/order/img/iconbank-active@2x.png") no-repeat;
+    background-size: cover;
+}
+.pay-button{
+    width: 100%;
+    height: 44px;
+    padding: 0 20px;
+    margin: 20px 0;
+    float: left;
+}
+.pay-button a{
+    width: 208px;
+    height: 44px;
+    display: block;
+    background:rgba(170,132,32,1);
+    border-radius: 5px;
+    font-size: 14px;
+    line-height: 44px;
+    text-align: center;
+    color: #FFF6D9;
+    float: right;
+}
+.pay-error{
+    width: 1200px;
+    margin: 0 auto;
+    height: 746px;
+    margin-top: 20px;
+    background: #FFFFFF;
+}
+.pay-error .icon-error{
+    width: 248px;
+    height: 200px;
+    margin: 0 auto;
+    margin-top: 134px;
+}
+.pay-error .icon-error.again{
+    background: url("/web/order/img/icon-xferror-1.png") no-repeat;
+    background-size:contain ;
+}
+.pay-error .icon-error.offline{
+    background: url("/web/order/img/icon-xferror-2.png") no-repeat;
+    background-size:contain ;
+}
+.pay-error .icon-error.fail{
+    background: url("/web/order/img/icon-xferror-3.png") no-repeat;
+    background-size:contain ;
+}
+.pay-error .icon-error.paid{
+    background: url("/web/order/img/icon-xferror-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: 5px;
+    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;
+    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: 24px;
+    height: 24px;
+    display: block;
+    position: absolute;
+    right:12px;
+    top: 12px;
+    background: url("/web/login/img/icon-close.png")no-repeat;
+    background-size: cover;
+    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;
+}
+.pay-alert-content .pay-alert .button a{
+    width: 90px;
+    height: 32px;
+    display: block;
+    background: #E15616;
+    border-radius: 2px;
+    font-size: 14px;
+    text-align: center;
+    line-height: 32px;
+    color: #FFFFFF;
+    float: right;
+}
+.footer-stars {
+    width: 100%;
+    height: 70px;
+    padding: 15px 0;
+    background-color: #FFFFFF;
+}
+.footer-stars .stars-inner{
+    width: 1200px;
+    margin: 0 auto;
+}
+.footer-stars .innermain{
+    width: 210px;
+    margin: 0 auto;
+}
+.footer-stars .innermain .icon{
+    width: 40px;
+    height: 40px;
+    float: left;
+}
+.footer-stars .innermain .icon img{
+    width: 100%;
+    height: 100%;
+    display: block;
+}
+.footer-stars .innermain .text{
+    font-size: 16px;
+    line-height: 40px;
+    margin-left: 5px;
+    float: left;
+}

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

@@ -0,0 +1,111 @@
+.pay-container{
+    margin-top: 20px;
+    opacity: 0;
+}
+.pay-container.active{
+    opacity: 1;
+}
+.page-title {
+    width: 1190px;
+    height: 90px;
+    margin: 0 auto;
+    line-height: 1;
+}
+.page-title .page-name {
+    float: left;
+    display: block;
+    height: 30px;
+    padding: 30px 0;
+    color: #333;
+    font-size: 30px;
+}
+
+.progress {
+    float: right;
+    width: 448px;
+    padding-top: 32px;
+}
+.progress-bar {
+    width: 368px;
+    height: 12px;
+    margin: 0 40px;
+}
+.progress .step-1 {
+    background: url(/public/3.0/img/order/progress_1.png) no-repeat center center;
+}
+.progress .step-2 {
+    background: url(/public/3.0/img/order/progress_2.png) no-repeat center center;
+}
+.progress .step-3 {
+    background: url(/public/3.0/img/order/progress_3.png) no-repeat center center;
+}
+.progress .progress-txt {
+    padding: 5px 0;
+    font-size: 12px;
+    font-family: Arial, "鐎瑰缍�;
+}
+.progress-txt .item {
+    float: left;
+    width: 92px;
+    text-align: center;
+}
+.progress-txt .item.middle {
+    width: 264px;
+}
+
+.progress-txt .item.current {
+    color: #E15616;
+}
+.pay-content{
+    width: 1200px;
+    margin: 0 auto;
+    margin-bottom: 20px;
+    height: 477px;
+    padding: 50px 0;
+    background-color: #FFFFFF;
+    display: flex;
+    flex-direction: column;
+}
+.pay-content .success-icon{
+    display: flex;
+    justify-content: center;
+}
+.pay-content .success-icon .icon{
+    width: 200px;
+    height: 200px;
+    background-size: contain;
+}
+.pay-content .success-icon .icon.icon-success{
+    background: url("/web/order/img/icon-success.png")no-repeat;
+}
+.pay-content .success-icon .icon.icon-error{
+    background: url("/web/order/img/icon-error.png")no-repeat;
+}
+.pay-content .success-text{
+    display: flex;
+    justify-content: center;
+}
+.pay-content .success-text .tx1{
+    line-height: 60px;
+    font-size: 30px;
+    color: #FF2A2A;
+    text-align: center;
+    font-weight: 600;
+}
+.pay-content .success-text .tx2{
+    line-height: 40px;
+    font-size: 16px;
+    color: #333;
+    text-align: center;
+}
+.pay-content .success-text .tx2 span{
+    color: #FF2A2A;
+
+}
+.pay-content .success-text .tx2 a{
+    color: #e15616;
+    margin-left: 10px;
+}
+.pay-content .success-text .tx2 a:hover{
+    text-decoration: underline;
+}

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

@@ -0,0 +1,81 @@
+.pay-container{
+    width: 100%;
+    height: 100%;
+    padding: .6rem .34rem;
+    opacity: 0;
+}
+.pay-container.active{
+    opacity: 1;
+}
+.pay-amount{
+    width: 100%;
+    height: auto;
+    position: relative;
+}
+.pay-amount .icon{
+    width: 2.6rem;
+    height: 2.58rem;
+    margin: 0 auto;
+}
+.pay-amount .icon img{
+    width: 100%;
+    height: 100%;
+    display: block;
+}
+.pay-amount  .pay-money{
+    width: 100%;
+    height: auto;
+    display: flex;
+    flex-direction: column;
+}
+.pay-amount  .pay-money .label{
+    flex: 1;
+    font-size: .28rem;
+    line-height: .6rem;
+    text-align: center;
+    color: #666;
+}
+.pay-amount  .pay-money  .mount{
+    flex: 1;
+    font-size: .38rem;
+    line-height: 1rem;
+    text-align: center;
+    color: #333;
+    font-weight: 600;
+}
+.pay-amount  .pay-money  .mount span{
+    font-size: .3rem;
+    font-weight: normal;
+}
+.pay-button{
+    width: 100%;
+    height: .88rem;
+    margin-top: 1rem;
+}
+.pay-button .btn{
+    width: 100%;
+    height: .88rem;
+    background: #09BB07;
+    line-height: .88rem;
+    text-align: center;
+    font-size: .30rem;
+    color: #FFF;
+    border-radius: .14rem;
+}
+.pay-logo{
+    width: 100%;
+    height: 1.30rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: fixed;
+    bottom: .6rem;
+    left: 0;
+}
+.pay-logo .logo{
+    line-height: 1.3rem;
+    font-size: .3rem;
+    text-align: center;
+    padding-left: 1.5rem;
+    background: url("/web/order/img/logo@2x.png")no-repeat left top;
+}

src/main/resources/static/css/user-center/setting/upgrade.css

@@ -0,0 +1,58 @@
+@charset "utf-8";
+li{list-style:none}
+/**
+ * PC端
+ */
+@media screen and (min-width:768px){
+    footer .footTop{display:none;}
+    .container {width: 100%;height: auto;padding:0 236px;box-sizing: border-box;background-color: #FFFFFF;}
+    .container .title {height: 42px;font-size: 28px;line-height: 42px;font-weight: normal;color: #22272e;padding: 20px 0;text-align: center;}
+    .container .title-tips{margin-bottom: 32px;width: 100%;height: 48px;background-image: linear-gradient(270deg,rgba(255,255,255,0.1) 0%,rgba(255,86,11,0.1) 51%,rgba(255,255,255,0.1) 100%);}
+    .container .title-tips p{width: 100%;height: 48px;font-family: Microsoft YaHei;font-size: 14px;font-weight: normal;font-stretch: normal;line-height: 48px;letter-spacing: 1px;color: #e15616;text-align: center;}
+    .container .registerClub{min-height: 900px;}
+    .subLine{margin-top: 20px;float: left;}
+    .subLine .btn-upgrade {cursor: pointer;display: block;width: 232px;height: 50px;line-height: 50px;background-color: #e15616;border-radius: 2px;text-align: center;font-size: 18px;color: #FFF;float: left;margin-right: 15px;}
+    .subLine .btn-upgrade.none{border: 1px solid #E15616;background-color: #ffe6dc;box-shadow: 0px 3px 6px 0px rgba(249, 75, 75, 0.17);color: #e15616;}
+    .subLine .btn-upgrade.disabled{background-color: #999999;}
+    .formLine{width: 100%;float: left;}
+    .formLine .form-upload{width: 128px;height: auto;float: left;margin-right: 20px;}
+    .formLine .formLine-file{width: 128px;height: 90px;position: relative;}
+    .formLine .form-upload-tips{width: 20px;height: 90px;float: left;position: relative;}
+    .formLine .form-upload-tips .icon{width: 20px;height: 20px;float: left;background: url("/img/base/icon.png") no-repeat;display: block;margin-top: 40px;}
+    .formLine .form-upload-tips .icon-wen{background-position: -84px -144px;cursor: pointer;}
+    .formLine .form-upload-tips .wen-tips{width: 182px;height: 46px;line-height: 46px;text-align: center;color: #FFF;font-size: 14px; background-color: #1890f9;box-shadow: 0px 3px 6px 0px rgba(24, 144, 249, 0.17); position: absolute;bottom: -24px;left: -2px;border-radius: 3px;display: none;}
+    .formLine .form-upload-tips .wen-tips:before{content: ''; width: 0px;height: 0px;border-width: 8px;border-style: solid;border-color: transparent transparent #1890f9 transparent;position: absolute;top: -15px;left: 5px;}
+    .formLine .form-upload-tips:hover .wen-tips{display: block;}
+    .formLine .file{width: 128px;height: 90px;opacity: 0;position: absolute;top: 0;left: 0;z-index: 999;cursor: pointer;}
+    .formLine .formLine-file .icon{width: 128px;height: 90px;display: block;}
+    .formLine .formLine-file .file-biss{background: url("/img/account/icon-bisse.png") no-repeat;}
+    .formLine .formLine-file .file-door{background: url("/img/account/icon-door.png") no-repeat;}
+    .formLine .formLine-file .file-zizhi{background: url("/img/account/icon-zizhi.png") no-repeat;}
+    .formLine .form-upload-image{width: 128px;height: 90px;position: relative;}
+    .formLine .form-upload-image .upload-img{width: 128px;height: 90px;display: block;}
+    .formLine .form-upload-image .icon{width: 16px;height: 16px;display: block;position: absolute;right: 0;top: 0;cursor: pointer;}
+    .formLine .form-upload-image .icon:before{width: 16px;height: 16px;background-position: -116px -140px;}
+    .formLine .business{height:auto;position:relative}
+    .formLine .business input[type="text"] {width: 324px;display: block;float: left;margin-right: 15px;}
+    .formLine .business a {display: block;float: left; width: 92px;height: 32px;line-height: 34px;font-size: 14px;color: #e15616;background-color: #ffe6dc;border-radius: 2px;border: solid 1px #e15616;text-align: center;}
+
+
+
+
+
+
+
+
+
+
+}
+
+/**
+* 移动端
+*/
+@media screen and (max-width:768px){
+body{width:100%;height:100%;background:#FFF url(/img/account/register.png) no-repeat center bottom;background-size:100% auto;background-attachment: fixed;}
+footer{display:none}
+
+
+}

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

@@ -0,0 +1,254 @@
+/**
+ *Created by ZHJY on 2020/7/14.
+ */
+var payContainer = new Vue({
+    el:"#payContainer",
+    data: {
+        payInfo:{
+            PAY_BANK_NUM:'ICBC_B2B',//银行网管信息
+            PAY_CODE:'',//链接状态
+            PAY_ORDERID:'',//主订单ID
+            PAY_UNPAIDAMOUNT:0,//本次支付金额
+            PAY_TIME:''//链接失效时间
+        },
+        bankData:[
+            {imgUrl:'/web/order/img/iconbank-01@2x.png',bankName:'中国工商银行',bankNum:'ICBC_B2B'},
+            {imgUrl:'/web/order/img/iconbank-02@2x.png',bankName:'招商银行',bankNum:'CMBCHINA_B2B'},
+            {imgUrl:'/web/order/img/iconbank-03@2x.png',bankName:'中国建设银行',bankNum:'CCB_B2B'},
+            {imgUrl:'/web/order/img/iconbank-04@2x.png',bankName:'交通银行',bankNum:'BOCO_B2B'},
+            {imgUrl:'/web/order/img/iconbank-05@2x.png',bankName:'兴业银行',bankNum:'CIB_B2B'},
+            {imgUrl:'/web/order/img/iconbank-06@2x.png',bankName:'中国民生银行',bankNum:'CMBC_B2B'},
+            {imgUrl:'/web/order/img/iconbank-07@2x.png',bankName:'中国广发银行',bankNum:'CEB_B2B'},
+            {imgUrl:'/web/order/img/iconbank-08@2x.png',bankName:'中国银行',bankNum:'BOC_B2B'},
+            {imgUrl:'/web/order/img/iconbank-09@2x.png',bankName:'平安银行',bankNum:'SZPA_B2B'},
+            {imgUrl:'/web/order/img/iconbank-10@2x.png',bankName:'中信银行',bankNum:'ECITIC_B2B'},
+            {imgUrl:'/web/order/img/iconbank-11@2x.png',bankName:'浦发银行',bankNum:'SPDB_B2B'},
+            {imgUrl:'/web/order/img/iconbank-12@2x.png',bankName:'华夏银行',bankNum:'HXB_B2B'},
+            {imgUrl:'/web/order/img/iconbank-13@2x.png',bankName:'北京银行',bankNum:'BCCB_B2B'},
+            {imgUrl:'/web/order/img/iconbank-14@2x.png',bankName:'中国农业银行',bankNum:'ABC_B2B'},
+            {imgUrl:'/web/order/img/iconbank-15@2x.png',bankName:'中国邮政储蓄银行',bankNum:'PSBC_B2B'},
+            {imgUrl:'/web/order/img/iconbank-16@2x.png',bankName:'徽商银行',bankNum:'HSB_B2B'},
+            {imgUrl:'/web/order/img/iconbank-17@2x.png',bankName:'青岛银行',bankNum:'QDYH_B2B'},
+            {imgUrl:'/web/order/img/iconbank-18@2x.png',bankName:'浙商银行',bankNum:'CZ_B2B'},
+            {imgUrl:'/web/order/img/iconbank-19@2x.png',bankName:'齐鲁银行',bankNum:'QLYH_B2B'},
+        ],
+        userName :'',
+        goodList:'',
+        freight :'',       //运费
+        discountFee:'',//经理折扣
+        balancePayFee:'',//余额抵扣
+        payTotalFee: '',   //合计
+        payableAmount:'',//本次支付金额
+        payment:'', //剩余支付金额
+        receiptAmount:'',//已支付金额
+        discernReceipt:'',//支付记录
+        discernReceiptList:[],//支付记录列表
+        orderProductList:[],//商品列表
+        paySuccessCounter:0,
+        tabIndex:0,
+        downHour:'00',//倒计时
+        downMinute:'00',//倒计分
+        downSecond:'00',//倒计秒
+        isSiled:false,
+        mbOrderId:'',
+        isRequest:false,
+        isPayAlert:false,
+        isErrorShow:false,
+        iconErrorClass:'',
+        iconErrorText:'',
+        iconErrorMsgnone:''
+
+    },
+    filters: {
+        NumFormat(value) {
+            if(!value) return '0.00';
+            var intPart = Number(value) - Number(value)%1; //获取整数部分（这里是windy93的方法）
+            var intPartFormat = intPart.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,'); //将整数部分逢三一断
+            var floatPart = ".00"; //预定义小数部分
+            var value2Array = value.toString().split(".");
+            if(value2Array.length == 2) {  //=2表示数据有小数位
+                floatPart = value2Array[1].toString(); //拿到小数部分
+                if(floatPart.length == 1) { //补0,实际上用不着
+                    return intPartFormat + "." + floatPart + '0';
+                } else {
+                    return intPartFormat + "." + floatPart;
+                }
+            } else {
+                return intPartFormat + floatPart;
+            }
+        }
+    },
+    methods: {
+        infoPayOrderCheckoutCounter:function(){
+            var _this = this;
+            PayApi.PayOrderCheckoutCounter({orderId:_this.payInfo.PAY_ORDERID},function(response){
+                if(response.code == 0){
+                    var data = response.data;
+                    _this.discernReceiptList = data.discernReceipt;
+                    _this.orderProductList = data.orderProductList;
+                    _this.userName =  data.userName;
+                    _this.freight =  _this.freightText(data.order.freight);
+                    _this.discountFee =  data.order.discountFee;
+                    _this.balancePayFee =  data.order.balancePayFee;
+                    _this.payTotalFee =  data.order.payTotalFee;
+                    _this.receiptAmount=  data.order.receiptAmount;
+                    _this.payableAmount =  _this.payInfo.PAY_UNPAIDAMOUNT;
+                    if(data.order.status == '7'){
+                        _this.payment = _this.toFixedFn(_this.payTotalFee - _this.payableAmount);
+                    }else{
+                        _this.payment = _this.toFixedFn(_this.payTotalFee - _this.receiptAmount - _this.payableAmount);
+                    }
+                    _this.paySuccessCounter = data.order.paySuccessCounter;
+                    _this.isRequest = true;
+                }else{
+                    layer.msg(response.msg, {icon: 7});
+                }
+            })
+        },
+        PaySubmitFn:function(){
+            var _this = this;
+            if(_this.payInfo.PAY_BANK_NUM == ''){
+                layer.msg('请选择银行！');
+                return;
+            }
+            var params = {
+                    payWay:'UNIONPAY',
+                    payAmount: _this.payInfo.PAY_UNPAIDAMOUNT*100,
+                    bankCode:_this.payInfo.PAY_BANK_NUM,
+                    returnUrl:'https://www.caimei365.com/',
+                    orderId:_this.payInfo.PAY_ORDERID
+                };
+            _this.PayOrderPcMallPay(params);
+        },
+        PayOrderPcMallPay:function(params){//网银支付请求
+            var _this = this;
+            PayApi.PayOrderPcMallPay(params,function(response){
+                if(response.code == 0){
+                    _this.isPayAlert = true;
+                    _this.mbOrderId = response.data.data.mbOrderId;
+                    window.open(response.data.data.payUrl);
+                }else{
+                    layer.msg(response.msg, {icon: 7});
+                }
+            })
+        },
+        RefreshBody:function(){
+            var _this = this;
+            _this.isPayAlert = false;
+            PayApi.PayOrderFindOrderStatus({mbOrderId:_this.mbOrderId},function(response){
+                _this.isPayAlert = false;
+                var data = response.data.data;
+                if(data.status === '1'){
+                    window.location.href = '/web/order/view/pay/caimei-success.jsp?pageType=wechat&type=success&payAmount='+ _this.payInfo.PAY_UNPAIDAMOUNT;
+                }else{
+                    window.location.href = '/web/order/view/pay/caimei-success.jsp?pageType=wechat&type=error&payAmount='+ _this.payInfo.PAY_UNPAIDAMOUNT;
+                }
+            });
+        },
+        changeTab:function(index,item){
+            this.tabIndex = index;
+            this.payInfo.PAY_BANK_NUM = item.bankNum;
+        },
+        slideToggleContent:function(){
+            this.isSiled = !this.isSiled;
+            console.log(this.isSiled);
+        },
+        countTime:function(value){//支付链接倒计时
+            var _this = this;
+            //获取当前时间
+            var date = new Date();
+            var now = date.getTime();
+            //设置截止时间
+            var endDate = new Date(value);
+            var end = endDate.getTime();
+            //时间差
+            var differTime = end - now;
+            //定义变量,h,m,s保存倒计时的时间
+            var h, m, s;
+            if (differTime >= 0) {
+                h = Math.floor(differTime / 1000 / 60 / 60);
+                m = Math.floor(differTime / 1000 / 60 % 60);
+                s = Math.floor(differTime / 1000 % 60);
+                _this.downHour = h < 10 ? ("0" + h) : h;
+                _this.downMinute = m < 10 ? ("0" + m) : m;
+                _this.downSecond = s < 10 ? ("0" + s) : s;
+                //递归调用函数所以是延时器不是定时器
+                setTimeout(function () {
+                    _this.countTime(value)
+                }, 1000);
+            } else {
+                _this.downHour = '00';
+                _this.downMinute = '00';
+                _this.downSecond = '00';
+            }
+        },
+        freightText:function (type) {//处理邮费显示
+            var text ="";
+            if(type > 0){
+                text = '￥'+type.toFixed(2);
+            }else if(type == -1){
+                text = '到付';
+            }else{
+                text = '包邮';
+            }
+            return text
+        },
+        payTypeText:function(state){//处理支付记录文字
+            var stateText = '',
+                stateTextObject={
+                    12:'企业网银',
+                    13:'微信支付',
+                    14:'支付宝',
+                    15:'微信支付',
+                    16:'余额抵扣',
+                };
+            Object.keys(stateTextObject).forEach(function(key) {
+                if(key == state){
+                    stateText = stateTextObject[key]
+                }
+            });
+            return stateText;
+        },
+        toFixedFn:function(text){
+            return Number(text).toFixed(2);
+        },
+    },
+    mounted: function () {
+        var _this = this;
+        _this.payInfo.PAY_CODE = _util.getUrlParam('code');
+        _this.payInfo.PAY_ORDERID = _util.getUrlParam('orderId');
+        _this.payInfo.PAY_UNPAIDAMOUNT = Number(_util.getUrlParam('unpaidAmount'));
+        _this.payInfo.PAY_TIME = decodeURI(_util.getUrlParam('time'));
+        if(_this.payInfo.PAY_CODE==0){
+            setTimeout(function () {  //支付倒计时
+                _this.countTime(_this.payInfo.PAY_TIME)
+            }, 1000);
+            _this.infoPayOrderCheckoutCounter();
+        }else{
+            _this.isErrorShow = true;
+            _this.isRequest = true;
+            switch (_this.payInfo.PAY_CODE) {
+                case '-1':
+                    _this.iconErrorClass = 'again';
+                    _this.iconErrorText = '链接已更新，请联系业务人员获取最新链接再进行支付';
+                    _this.iconErrorMsgnone = '';
+                    break;
+                case '-2':
+                    _this.iconErrorClass = 'offline';
+                    _this.iconErrorText = '订单已通过线下转账方式付款';
+                    _this.iconErrorMsgnone = '不能再使用企业网银支付';
+                    break;
+                case '-3':
+                    _this.iconErrorClass = 'fail';
+                    _this.iconErrorText = '链接超过24小时未完成支付，已失效';
+                    _this.iconErrorMsgnone = '请重新生成支付链接，继续支付';
+                    break;
+                case '5':
+                    _this.iconErrorClass = 'paid';
+                    _this.iconErrorText = '款项已支付完成，无需重复支付';
+                    _this.iconErrorMsgnone = '';
+                    break;
+            }
+        }
+    }
+});

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

@@ -0,0 +1,471 @@
+/**
+ *Created by ZHJY on 2020/7/14.
+ */
+var payContainer = new Vue({
+    el:"#payContainer",
+    data: {
+        payInfo:{
+            PAY_BANK_NUM: 'ALIPAY', //支付类型
+            PAY_ORDERID: '',  //订单ID
+            PAY_UNPAIDAMOUNT: '', //待支付金额
+            PAY_PAYAMOUNT: 0,//本次支付金额
+            PAY_MOBILE_URL: '',//二维码生成链接
+            PAY_DATA:{}       //支付数据
+        },
+        bankData:[
+            {imgUrl:'/web/order/img/iconbank-01@2x.png',bankName:'中国工商银行',bankNum:'ICBC_B2B'},
+            {imgUrl:'/web/order/img/iconbank-02@2x.png',bankName:'招商银行',bankNum:'CMBCHINA_B2B'},
+            {imgUrl:'/web/order/img/iconbank-03@2x.png',bankName:'中国建设银行',bankNum:'CCB_B2B'},
+            {imgUrl:'/web/order/img/iconbank-04@2x.png',bankName:'交通银行',bankNum:'BOCO_B2B'},
+            {imgUrl:'/web/order/img/iconbank-05@2x.png',bankName:'兴业银行',bankNum:'CIB_B2B'},
+            {imgUrl:'/web/order/img/iconbank-06@2x.png',bankName:'中国民生银行',bankNum:'CMBC_B2B'},
+            {imgUrl:'/web/order/img/iconbank-07@2x.png',bankName:'中国广发银行',bankNum:'CEB_B2B'},
+            {imgUrl:'/web/order/img/iconbank-08@2x.png',bankName:'中国银行',bankNum:'BOC_B2B'},
+            {imgUrl:'/web/order/img/iconbank-09@2x.png',bankName:'平安银行',bankNum:'SZPA_B2B'},
+            {imgUrl:'/web/order/img/iconbank-10@2x.png',bankName:'中信银行',bankNum:'ECITIC_B2B'},
+            {imgUrl:'/web/order/img/iconbank-11@2x.png',bankName:'浦发银行',bankNum:'SPDB_B2B'},
+            {imgUrl:'/web/order/img/iconbank-12@2x.png',bankName:'华夏银行',bankNum:'HXB_B2B'},
+            {imgUrl:'/web/order/img/iconbank-13@2x.png',bankName:'北京银行',bankNum:'BCCB_B2B'},
+            {imgUrl:'/web/order/img/iconbank-14@2x.png',bankName:'中国农业银行',bankNum:'ABC_B2B'},
+            {imgUrl:'/web/order/img/iconbank-15@2x.png',bankName:'中国邮政储蓄银行',bankNum:'PSBC_B2B'},
+            {imgUrl:'/web/order/img/iconbank-16@2x.png',bankName:'徽商银行',bankNum:'HSB_B2B'},
+            {imgUrl:'/web/order/img/iconbank-17@2x.png',bankName:'青岛银行',bankNum:'QDYH_B2B'},
+            {imgUrl:'/web/order/img/iconbank-18@2x.png',bankName:'浙商银行',bankNum:'CZ_B2B'},
+            {imgUrl:'/web/order/img/iconbank-19@2x.png',bankName:'齐鲁银行',bankNum:'QLYH_B2B'},
+        ],
+        methodTab:['线上支付','转账支付'],
+        mobileData:[
+            {imgUrl:'/web/order/img/iconbank-ali@2x.png',bankName:'支付宝支付',bankNum:'ALIPAY'},
+            {imgUrl:'/web/order/img/iconbank-wx@2x.png',bankName:'微信支付',bankNum:'WEIXIN'},
+            {imgUrl:'/web/order/img/iconbank-bank@2x.png',bankName:'网银支付',bankNum:'ICBC_B2B'},
+
+        ],
+        pageType:'',//页面跳转类型
+        paidAmount:'',//订单待付金额
+        payableAmount:'',//应付金额
+        receiptAmount:'',//已支付金额
+        balanceAmount:'',//应付剩余金额
+        payAmount:'',//本次支付金额
+        paymentIimit:50000,
+        paymentIimitText:'',
+        discernReceiptList:[],//支付记录列表
+        tabIndex:0,//支付方式 0 移动支付 1网银支付 2线下转账
+        mbOrderId:'',//支付订单ID
+        mobileTabIndex:0,
+        bankTabIndex:0,
+        isRequest:false,
+        isPayAlert:false,
+        paySuccessCounter:'',
+        bankPayLink_url:'',
+        orderIdentificationId:'',//订单标识
+        receiptStatus:'',
+        invoiceStatus:false,
+        isReceiptStatus:false,
+        onlinePayFlag:'',
+        payStatusText:'使用微信和企业网银支付全部金额后，供应商会在24小时后发货（周末、节假日顺延）。若着急发货，可以选择使用线下转账进行付款。',
+        productID:''//发布商品的ID
+    },
+    filters: {
+        NumFormat(value) {
+            if(!value) return '0.00';
+            var intPart = Number(value) - Number(value)%1; //获取整数部分（这里是windy93的方法）
+            var intPartFormat = intPart.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,'); //将整数部分逢三一断
+            var floatPart = ".00"; //预定义小数部分
+            var value2Array = value.toString().split(".");
+            if(value2Array.length == 2) {  //=2表示数据有小数位
+                floatPart = value2Array[1].toString(); //拿到小数部分
+                if(floatPart.length == 1) { //补0,实际上用不着
+                    return intPartFormat + "." + floatPart + '0';
+                } else {
+                    return intPartFormat + "." + floatPart;
+                }
+            } else {
+                return intPartFormat + floatPart;
+            }
+        }
+    },
+    methods: {
+        infoPayOrderCheckoutCounter:function(){//初始化订单数据
+            var _this = this;
+            PayApi.PayOrderCheckoutCounter({orderId:_this.payInfo.PAY_ORDERID},function(response){
+                if(response.code == 0){
+                    // console.log(response);
+                    var data = response.data; //金额初始化
+                    _this.payInfo.PAY_UNPAIDAMOUNT = (data.order.payableAmount - data.order.receiptAmount).toFixed(2);
+                    _this.payInfo.PAY_PAYAMOUNT = (data.order.payableAmount-data.order.receiptAmount).toFixed(2);
+                    _this.discernReceiptList = data.discernReceipt;
+                    _this.paidAmount =  (data.order.payableAmount-data.order.receiptAmount).toFixed(2);
+                    _this.receiptAmount =  data.order.receiptAmount;
+                    _this.payableAmount=  data.order.payableAmount;
+                    _this.balanceAmount =  ( _this.payableAmount - _this.receiptAmount).toFixed(2) - _this.payInfo.PAY_PAYAMOUNT;
+                    _this.payAmount =  (_this.payableAmount - _this.receiptAmount).toFixed(2);//本次支付金额
+                    _this.paySuccessCounter = data.order.paySuccessCounter;
+                    _this.receiptStatus =  data.order.receiptStatus;
+                    _this.invoiceStatus = data.order.invoiceStatus;
+                    _this.onlinePayFlag = data.order.onlinePayFlag;
+                    if(_this.receiptAmount>0){
+                        _this.payStatusText = '使用微信和企业网银支付全部金额后，供应商会在24小时后发货（周末、节假日顺延）。';
+                        _this.isReceiptStatus = false;
+                    }else{
+                        _this.payStatusText = '使用微信和企业网银支付全部金额后，供应商会在24小时后发货（周末、节假日顺延）。若着急发货，可以选择使用线下转账进行付款。';
+                _this.isReceiptStatus = true;
+            }
+            _this.isRequest = true;
+        }else{
+            layer.msg(response.msg, {icon: 7});
+}
+            })
+        },
+        PayMobileSubmitFn:function(){//点击移动支付方式
+            var _this = this;
+            if(_this.invoiceStatus){
+                _this.layerConfirm();
+            }else{
+                if(_this.payInfo.PAY_BANK_NUM == ''){
+                    layer.msg('请选择支付方式！');
+                    return;
+                }
+                if(_this.payAmount == ''){
+                    layer.msg('请输入本次支付金额');
+                    return;
+                }
+                if(_this.payAmount == 0){
+                    layer.msg('本次支付金额不能为0');
+                    return;
+                }
+                if(_this.payAmount*100 < 2){
+                    layer.msg('本次支付金额必须大于￥0.02');
+                    return;
+                }
+                if(_this.payAmount > _this.paymentIimit){
+                    switch (_this.payInfo.PAY_BANK_NUM) {
+                        case 'WEIXIN':
+                            _this.paymentIimitText = '本次支付金额已超出微信支付限额，请输入小于5万的金额进行支付';
+                            break;
+                        case 'ALIPAY':
+                            _this.paymentIimitText = '本次支付金额已超出支付宝限额，请输入小于5万的金额进行支付';
+                            break;
+                    }
+                    layer.confirm(_this.paymentIimitText, {
+                        title:"提示",
+                        btn: ['知道了'], //按钮
+                    }, function () {
+                        layer.closeAll();
+                    }, function () {
+
+                    });
+                    return;
+                }
+                if(_this.payInfo.PAY_BANK_NUM == "WEIXIN"){
+                    if(_this.pageType === '1'){
+                        _this.payInfo.PAY_DATA = {//二手
+                            type:_this.payInfo.PAY_BANK_NUM,
+                            productId:_this.productID,
+                            amount:_this.payAmount,
+                            url:_this.payInfo.PAY_MOBILE_URL
+                        };
+                        _util.setStorageItem('PAY_DATA',JSON.stringify(_this.payInfo.PAY_DATA));
+                        window.open("/web/order/view/pay/caimei-paymobile.jsp?pageType=1");
+                        _this.isPayAlert = true;
+                    }else{
+                        _this.payInfo.PAY_DATA = {//正常订单
+                            type:_this.payInfo.PAY_BANK_NUM,
+                            orderid:_this.payInfo.PAY_ORDERID,
+                            amount:_this.payAmount,
+                            url:_this.payInfo.PAY_MOBILE_URL
+                        };
+                        _util.setStorageItem('PAY_DATA',JSON.stringify(_this.payInfo.PAY_DATA));
+                        window.open("/web/order/view/pay/caimei-paymobile.jsp");
+                        _this.isPayAlert = true;
+                    }
+                }else{
+                    if(_this.pageType === '1'){
+                        var params = {//二手
+                            payWay:_this.payInfo.PAY_BANK_NUM,
+                            returnUrl:'https://www.caimei365.com/',
+                            productId:_this.productID,
+                        };
+                        _this.PayOrdersecondHandPay(params,_this.payInfo.PAY_BANK_NUM);
+                    }else{
+                        var params = {//正常订单
+                                payWay:_this.payInfo.PAY_BANK_NUM,
+                                payAmount:parseInt(_this.payAmount*100),
+                                returnUrl:'https://www.caimei365.com/',
+                                orderId:_this.payInfo.PAY_ORDERID
+                        };
+                        _this.PayOrderPcMallPay(params,_this.payInfo.PAY_BANK_NUM);
+                    }
+                }
+            }
+        },
+        PaySubmitFn:function(){//点击网银支付方式
+            var _this = this;
+            if(_this.invoiceStatus){
+                _this.layerConfirm();
+            }else{
+                if(_this.payInfo.PAY_BANK_NUM == ''){
+                    layer.msg('请选择银行！');
+                    return;
+                }
+                if(_this.payAmount <= 10){
+                    layer.msg('企业网银支付的金额必须大于￥10.00');
+                    return;
+                }
+                if(_this.pageType === '1'){
+                    var params = {//二手
+                            payWay:'UNIONPAY',
+                            payAmount: parseInt(_this.payAmount*100),
+                            bankCode:_this.payInfo.PAY_BANK_NUM,
+                            returnUrl:'https://www.caimei365.com/',
+                            productId:_this.productID,
+                    };
+                    _this.PayOrdersecondHandPay(params,_this.payInfo.PAY_BANK_NUM);
+                }else{
+                    var params = {//正常订单
+                            payWay:'UNIONPAY',
+                            payAmount: parseInt(_this.payAmount*100),
+                            bankCode:_this.payInfo.PAY_BANK_NUM,
+                            returnUrl:'https://www.caimei365.com/',
+                            orderId:_this.payInfo.PAY_ORDERID
+                    };
+                    _this.PayOrderPcMallPay(params,_this.payInfo.PAY_BANK_NUM);
+                }
+            }
+        },
+        PayOrderPcMallPay:function(params,type){//网银&&支付宝生成支付地址
+            var _this = this;
+            PayApi.PayOrderPcMallPay(params,function(response){
+                if(response.code == 0){
+                    _this.isPayAlert = true;
+                    _this.mbOrderId = response.data.data.mbOrderId;
+                    if(type == 'ALIPAY'){
+                        _this.payInfo.PAY_MOBILE_URL = response.data.data.payUrl;
+                        _this.payInfo.PAY_DATA = {
+                            mbOrderId:_this.mbOrderId,
+                            type:_this.payInfo.PAY_BANK_NUM,
+                            orderid:_this.payInfo.PAY_ORDERID,
+                            amount:_this.payAmount,
+                            url:_this.payInfo.PAY_MOBILE_URL
+                        };
+                        _util.setStorageItem('PAY_DATA',JSON.stringify(_this.payInfo.PAY_DATA));
+                        window.open("/web/order/view/pay/caimei-paymobile.jsp?pageType=1");
+                    }else{
+                        window.open(response.data.data.payUrl);
+                    }
+                }else{
+                    layer.msg(response.msg, {icon: 7});
+                }
+            })
+        },
+        PayOrdersecondHandPay:function(params,type){//二手支付请求
+            var _this = this;
+            PayApi.PayOrdersecondHandPay(params,function(response){
+                if(response.code == 0){
+                    _this.isPayAlert = true;
+                    _this.mbOrderId = response.data.data.mbOrderId;
+                    if(type == 'ALIPAY'){
+                        _this.payInfo.PAY_MOBILE_URL = response.data.data.payUrl;
+                        if(_this.pageType === '1'){
+                            _this.payInfo.PAY_DATA = {
+                                mbOrderId:_this.mbOrderId,
+                                type:_this.payInfo.PAY_BANK_NUM,
+                                productId:_this.productID,
+                                amount:_this.payAmount,
+                                url:_this.payInfo.PAY_MOBILE_URL
+                            };
+                            _util.setStorageItem('PAY_DATA',JSON.stringify(_this.payInfo.PAY_DATA));
+                            window.open("/web/order/view/pay/caimei-paymobile.jsp?pageType=1");
+                        }else{
+                            _this.payInfo.PAY_DATA = {
+                                mbOrderId:_this.mbOrderId,
+                                type:_this.payInfo.PAY_BANK_NUM,
+                                orderid:_this.payInfo.PAY_ORDERID,
+                                amount:_this.payAmount,
+                                url:_this.payInfo.PAY_MOBILE_URL
+                            };
+                            _util.setStorageItem('PAY_DATA',JSON.stringify(_this.payInfo.PAY_DATA));
+                            window.open("/web/order/view/pay/caimei-paymobile.jsp");
+                        }
+                    }else{
+                        window.open(response.data.data.payUrl);
+                    }
+                }else{
+                    layer.msg(response.msg, {icon: 7});
+                }
+            })
+        },
+        changePayAmount:function(event){//输入支付金额控制
+            var _this = this;
+            var value = event.target.value;
+            if(value == "" || value <0 ){//判断是否等于0 或者为空
+                _this.payAmount = '';
+                _this.payInfo.PAY_PAYAMOUNT = _this.payInfo.PAY_UNPAIDAMOUNT;
+                _this.balanceAmount = _this.toFixedFn(_this.payInfo.PAY_UNPAIDAMOUNT);
+                return;
+            }else if(Number(value) > _this.payInfo.PAY_UNPAIDAMOUNT){//判断大于应付金额
+                _this.payAmount = _this.payInfo.PAY_UNPAIDAMOUNT;
+                _this.payInfo.PAY_PAYAMOUNT =  _this.payAmount;
+                _this.balanceAmount = _this.toFixedFn(_this.payInfo.PAY_UNPAIDAMOUNT-_this.payInfo.PAY_PAYAMOUNT);
+            }else{
+                _this.payAmount = value;
+                _this.payInfo.PAY_PAYAMOUNT = _this.payAmount;
+                _this.balanceAmount = _this.toFixedFn(_this.payInfo.PAY_UNPAIDAMOUNT-_this.payInfo.PAY_PAYAMOUNT);
+            }
+        },
+        changePayAmountBlur:function(event){//失去焦点设置金额
+            var _this = this;
+            _this.payAmount = _this.toFixedFn(event.target.value);
+            _this.payInfo.PAY_PAYAMOUNT = _this.payAmount;
+        },
+        changeTab:function(index,item){//选择支付方式切换
+            this.tabIndex = index;
+            switch (this.tabIndex) {
+                case 0:
+                    this.payInfo.PAY_BANK_NUM = 'ALIPAY';
+                    break;
+                case 1:
+                    this.payInfo.PAY_BANK_NUM = '';
+                    break;
+            }
+        },
+        checkMobilePay:function(index,item){//选择移动支付方式
+            this.mobileTabIndex = index;
+            this.payInfo.PAY_BANK_NUM = item.bankNum;
+            if( this.mobileTabIndex==2){
+
+            }
+        },
+        checkBankPay:function(index,item){//选择网银支付方式-选择银行
+            this.bankTabIndex = index;
+            this.payInfo.PAY_BANK_NUM = item.bankNum;
+        },
+        copyLinkPaySubmitFn:function(){//复制网银支付链接
+            var _this = this;
+            if(_this.invoiceStatus){
+                _this.layerConfirm();
+            }else{
+                if(_this.payAmount == ''){
+                    layer.msg('请输入本次支付金额');
+                    return;
+                }
+                if(_this.payAmount == 0){
+                    layer.msg('本次支付金额不能为0');
+                    return;
+                }
+                if(_this.payAmount <= 10){
+                    layer.msg('企业网银支付的金额必须大于￥10.00');
+                    return;
+                }
+                PayApi.PayOrderPayLink({unpaidAmount:_this.payAmount,orderId:_this.payInfo.PAY_ORDERID},function(response){
+                    _this.bankPayLink_url = response.data;
+                    var oInput = document.createElement("textarea");
+                    oInput.value = _this.bankPayLink_url;
+                    document.body.appendChild(oInput);
+                    oInput.select(); // 选择对象
+                    document.execCommand("Copy"); // 执行浏览器复制命令
+                    document.body.removeChild(oInput);
+                    layer.msg('复制成功');
+                })
+            }
+        },
+        copyOrderBtnSubmitFn:function(){//复制订单标识
+            var _this = this;
+            var oInput = document.createElement("textarea");
+            oInput.value = _this.orderIdentificationId;
+            document.body.appendChild(oInput);
+            oInput.select(); // 选择对象
+            document.execCommand("Copy"); // 执行浏览器复制命令
+            document.body.removeChild(oInput);
+            layer.msg('复制成功');
+        },
+        hidePayAlert:function(){//隐藏已支付弹窗
+            var _this = this;
+            _this.isPayAlert = false;
+        },
+        RefreshBody:function(){//刷新页面
+            var _this = this;
+            if(_this.payInfo.PAY_BANK_NUM == 'WEIXIN'){
+                PayApi.PayOrderPayWhetherSuccess({orderId: _this.payInfo.PAY_ORDERID, paySuccessCounter:_this.paySuccessCounter},function(response){
+                    _this.isPayAlert = false;
+                    if(response.code === 0){
+                        _this.windowLocationHref('success');
+                    }else{
+                        _this.windowLocationHref('error');
+                    }
+                });
+            }else{
+                PayApi.PayOrderFindOrderStatus({mbOrderId:_this.mbOrderId},function(response){
+                    _this.isPayAlert = false;
+                    var data = response.data.data;
+                    if(data.status === '1'){
+                        _this.windowLocationHref('success');
+                    }else{
+                        _this.windowLocationHref('error');
+                    }
+                });
+            }
+        },
+        windowLocationHref:function(state){
+            var _this = this;
+            if( _this.pageType === '1'){
+                window.location.href = '/web/order/view/pay/caimei-success.jsp?pageType=second&type='+state+'&payAmount='+_this.payAmount;
+            }else{
+                window.location.href = '/web/order/view/pay/caimei-success.jsp?pageType=www&type='+state+'&payAmount='+_this.payAmount;
+            }
+        },
+        payTypeText:function(state){//处理支付记录文字
+            var stateText = '',
+                stateTextObject={
+                    12:'企业网银',
+                    13:'微信支付',
+                    14:'支付宝',
+                    15:'微信支付',
+                    16:'余额抵扣',
+                };
+            Object.keys(stateTextObject).forEach(function(key) {
+                if(key == state){
+                    stateText = stateTextObject[key]
+                }
+            });
+            return stateText;
+        },
+        toFixedFn:function(text){//处理小数点后两位数
+            return Number(text).toFixed(2);
+        },
+        layerConfirm:function(){
+            layer.confirm('本次交易暂不支持线上支付开票,请使用线下转账的方式付款', {
+                title:"提示",
+                btn: ['知道了'], //按钮
+            }, function () {
+                layer.closeAll();
+                _this.payStatusText = '使用微信和企业网银支付全部金额后，供应商会在24小时后发货（周末、节假日顺延）。若着急发货，可以选择使用线下转账进行付款。';
+                _this.isReceiptStatus = true;
+            }, function () {
+
+            });
+        },
+    },
+    mounted: function () {
+        var _this = this;
+        _this.pageType = _util.getUrlParam('pageType');
+        if( _this.pageType === '1'){//二手
+            _this.productID = _util.getUrlParam('productID');
+            _this.payAmount = _this.toFixedFn(100);
+            _this.isRequest = true;
+            _this.payStatusText = '';
+        }else{
+             var HrefType = _util.getUrlParam('type');
+            if(HrefType == 'payfirm'){
+                _this.payInfo.PAY_ORDERID =  _util.getUrlParam('orderID');
+                _this.orderIdentificationId = '#'+_this.payInfo.PAY_ORDERID+'#';
+            }else{
+                var data =JSON.parse(localStorage.getItem("confirmOrderInfo"));
+                _this.payInfo.PAY_ORDERID = data.data.orderID;
+                _this.orderIdentificationId = '#'+_this.payInfo.PAY_ORDERID+'#';
+            }
+            _this.infoPayOrderCheckoutCounter();//正常订单初始化
+        }
+
+
+    }
+});

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

@@ -0,0 +1,208 @@
+/**
+ *Created by ZHJY on 2020/7/14.
+ */
+var payContainer = new Vue({
+    el:"#payContainer",
+    data: {
+        payInfo:{
+            PAY_TYPE:'',//支付类型 WEIXIN 微信支付  ALIPAY 支付宝支付
+            PAY_ORDERID:'', //订单ID
+            PAY_PAYAMOUNT:0,
+            PAY_UNPAIDAMOUNT:0,//本次支付金额
+            PAY_MOBILE_URL:'',//URL
+        },
+        orderNo:'',//订单编号
+        payableAmount:'',//应付金额
+        receiptAmount:'',//已支付金额
+        balanceAmount:'',//应付剩余金额
+        payAmount:'',//本次支付金额
+        discernReceiptList:[],//支付记录列表
+        tabIndex:0,//支付方式 0 移动支付 1网银支付 2线下转账
+        paySuccessCounter:'',
+        mobileTabIndex:0,
+        bankTabIndex:0,
+        isRequest:false,
+        isRefresh:false,
+        maxtime:300,
+        pageType:'',//页面跳转类型
+        productID:''//商品ID
+    },
+    filters: {
+        NumFormat(value) {
+            if(!value) return '0.00';
+            var intPart = Number(value) - Number(value)%1; //获取整数部分（这里是windy93的方法）
+            var intPartFormat = intPart.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,'); //将整数部分逢三一断
+            var floatPart = ".00"; //预定义小数部分
+            var value2Array = value.toString().split(".");
+            if(value2Array.length == 2) {  //=2表示数据有小数位
+                floatPart = value2Array[1].toString(); //拿到小数部分
+                if(floatPart.length == 1) { //补0,实际上用不着
+                    return intPartFormat + "." + floatPart + '0';
+                } else {
+                    return intPartFormat + "." + floatPart;
+                }
+            } else {
+                return intPartFormat + floatPart;
+            }
+        }
+    },
+    methods: {
+        infoPayOrderCheckoutCounter:function(){//初始化订单数据
+            var _this = this;
+            if( _this.pageType === '1'){
+                layer.load(0,{shade: [0.1,'#000000']}); //0.1透明度的白色背景
+                setTimeout(function(){
+                    _this.isRequest = true;
+                    switch (_this.payInfo.PAY_TYPE) {
+                        case 'WEIXIN':
+                            _this.getWrchatQrcodeShow();
+                            break;
+                        case 'ALIPAY':
+                            _this.getAliPayQrcodeInfo();
+                            break;
+                    }
+                    layer.closeAll('loading');
+                },2000);
+            }else{
+                PayApi.PayOrderCheckoutCounter({orderId:_this.payInfo.PAY_ORDERID},function(response){
+                    if(response.code == 0){
+                        // console.log(response);
+                        var data = response.data;
+                        _this.orderNo = data.order.orderNo;
+                        _this.paySuccessCounter = data.order.paySuccessCounter;
+                        _this.payInfo.PAY_PAYAMOUNT = data.order.payableAmount-data.order.receiptAmount;
+                        _this.isRequest = true;
+                        switch (_this.payInfo.PAY_TYPE) {
+                            case 'WEIXIN':
+                                _this.getWrchatQrcodeShow();
+                                break;
+                            case 'ALIPAY':
+                                _this.getAliPayQrcodeInfo();
+                                break;
+                        }
+
+                    }else{
+                        layer.msg(response.msg, {icon: 7});
+                    }
+                })
+            }
+        },
+        getAliPayQrcodeInfo:function(){//生成支付宝二维码
+            var _this = this;
+            var qrcode = new QRCode(document.getElementById("ali_pay_container"), {
+                render: "canvas", //也可以替换为table
+                text: _this.payInfo.PAY_MOBILE_URL,
+                width: 200,
+                height: 200,
+                colorDark : "#000000",
+                colorLight : "#ffffff",
+                correctLevel : QRCode.CorrectLevel.H
+            });
+            var timeClock = setInterval(function(){
+                    _this.maxtime--;
+                    if (_this.maxtime == 0) {
+                        clearInterval(timeClock);
+                        _this.isRefresh = true;
+                    }
+            },1000);
+            _this.setTimerAliPay();
+        },
+        getWrchatQrcodeShow:function(){//生成微信二维码
+            var _this = this;
+            if( _this.pageType === '1'){
+                var orderInfo = {//二手微信二维码参数
+                        pageType:1,
+                        productId:_this.productID,
+                        payAmount:_this.payAmount
+                };
+            }else{
+                var orderInfo = {//普通订单微信二维码参数
+                        pageType:0,
+                        orderID:_this.payInfo.PAY_ORDERID,
+                        payAmount:_this.payAmount
+                };
+            }
+            _this.payInfo.PAY_MOBILE_URL = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxea43a0f9ebce9e66&redirect_uri=https://www.caimei365.com/web/order/view/pay/caimei-wechatpay.jsp&response_type=code&scope=snsapi_base&state="+JSON.stringify(orderInfo)+"#wechat_redirect";
+            var qrcode = new QRCode(document.getElementById("wx_pay_container"), {
+                render: "canvas", //也可以替换为table
+                text: _this.payInfo.PAY_MOBILE_URL,
+                width: 200,
+                height: 200,
+                colorDark : "#000000",
+                colorLight : "#ffffff",
+                correctLevel : QRCode.CorrectLevel.H
+            });
+            var timeClock = setInterval(function(){
+                _this.maxtime--;
+                if (_this.maxtime == 0) {
+                    clearInterval(timeClock);
+                    _this.isRefresh = true;
+                }
+            },1000);
+            _this.setTimerWechatPay();
+        },
+        setTimerWechatPay:function () {//定时任务查询微信支付结果
+            var _this = this;
+            var timer;
+            PayApi.PayOrderPayWhetherSuccess({orderId: _this.payInfo.PAY_ORDERID, paySuccessCounter:_this.paySuccessCounter},function(response){
+                // console.log(response);
+                if(response.code === 0){
+                    clearTimeout(timer); //清理定时任务
+                    layer.msg('支付成功', {icon: 1});
+                    setTimeout(function(){
+                        window.location.href = '/index.html';
+                    },3000);
+                }else{
+                    timer = setTimeout(() => {
+                        _this.setTimerWechatPay()
+                    }, 1000*10);
+                }
+            });
+        },
+        setTimerAliPay:function () {//定时任务查询支付宝支付结果
+            var _this = this;
+            var timer;
+            PayApi.PayOrderFindOrderStatus({mbOrderId:_this.mbOrderId},function(response){
+                var data = response.data.data;
+                if(data.status === '1'){
+                    clearTimeout(timer); //清理定时任务
+                    layer.msg('支付成功', {icon: 1});
+                    setTimeout(function(){
+                        window.location.href = '/index.html';
+                    },3000);
+                }else{
+                    timer = setTimeout(() => {
+                        _this.setTimerAliPay()
+                    }, 1000*10);
+                }
+            });
+        },
+        hidePayAlert:function(){//隐藏已支付弹窗
+            var _this = this;
+            _this.isPayAlert = false;
+        },
+        toFixedFn:function(text){//处理小数点后两位数
+            return Number(text).toFixed(2);
+        },
+    },
+    mounted: function () {
+        var _this = this;
+        var payData = _util.getStorageItem('PAY_DATA');
+        _this.pageType = _util.getUrlParam('pageType');
+        if( _this.pageType === '1'){
+            _this.payInfo.PAY_TYPE = payData.type;
+            _this.productID = payData.productId;
+            _this.payInfo.PAY_MOBILE_URL = payData.url;
+            _this.mbOrderId = payData.mbOrderId;
+            _this.payAmount = _this.payableAmount = payData.amount;
+        }else{
+            _this.payInfo.PAY_TYPE = payData.type;
+            _this.payInfo.PAY_ORDERID = payData.orderid;
+            _this.payInfo.PAY_UNPAIDAMOUNT = payData.amount;
+            _this.payInfo.PAY_MOBILE_URL = payData.url;
+            _this.mbOrderId = payData.mbOrderId;
+            _this.payAmount =_this.payableAmount = _this.payInfo.PAY_UNPAIDAMOUNT;
+        }
+        _this.infoPayOrderCheckoutCounter();
+    }
+});

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

@@ -0,0 +1,92 @@
+/**
+ *Created by ZHJY on 2020/7/14.
+ */
+var payContainer = new Vue({
+    el:"#payContainer",
+    data: {
+        type:'',
+        pageType:'',//页面类型
+        payAmount:0,//本次支付金额
+        isRequest:false,
+        isSuccess:true,
+        paySuccessCounter:'',
+        maxtime:10,
+        linkText:'立即跳转',
+        openLink:'/myaccount/orderlist--1-1.html',
+        isSuccessText:''
+    },
+    filters: {
+        NumFormat(value) {
+            if(!value) return '0.00';
+            var intPart = Number(value) - Number(value)%1; //获取整数部分（这里是windy93的方法）
+            var intPartFormat = intPart.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,'); //将整数部分逢三一断
+            var floatPart = ".00"; //预定义小数部分
+            var value2Array = value.toString().split(".");
+            if(value2Array.length == 2) {  //=2表示数据有小数位
+                floatPart = value2Array[1].toString(); //拿到小数部分
+                if(floatPart.length == 1) { //补0,实际上用不着
+                    return intPartFormat + "." + floatPart + '0';
+                } else {
+                    return intPartFormat + "." + floatPart;
+                }
+            } else {
+                return intPartFormat + floatPart;
+            }
+        }
+    },
+    methods: {
+        infoRequestBody:function(){//初始化支付状态信息
+            var _this = this;
+            if( _this.type == 'success'){
+                _this.isSuccess = true;
+                if(_this.pageType == 'second'){
+                    _this.isSuccessText ='支付成功，商品会在1-2个工作日内进行审核';
+                }else{
+                    _this.isSuccessText ='支付成功';
+                }
+            }else{
+                _this.isSuccessText ='支付失败';
+                _this.isSuccess = false;
+            }
+            //处理根据类型做跳转
+            switch (_this.pageType) {
+                case 'www':
+                    _this.linkText = '订单列表';
+                    _this.openLink = '/myaccount/orderlist--1-1.html';
+                    break;
+                case 'second':
+                    if(_this.isSuccess){
+                        _this.linkText = '二手商品页面';
+                        _this.openLink = '/html/secondHand/secondList.jsp';
+                    }else{
+                        _this.linkText = '发布商品页面';
+                        _this.openLink = '/html/maintenance/view/secondtransactions.jsp';
+                    }
+                    break;
+                default:
+                    _this.linkText = '回到首页';
+                    _this.openLink = '/index.html';
+            }
+            _this.isRequest = true;
+            var timeClock = setInterval(function(){
+                _this.maxtime--;
+                if (_this.maxtime == 0) {
+                    window.location.href = _this.openLink;
+                    clearInterval(timeClock);
+                    _this.maxtime = 10;
+                    _this.isRefresh = true;
+                }
+            },1000);
+        },
+        toFixedFn:function(text){//处理小数点后两位数
+            return Number(text).toFixed(2);
+        }
+    },
+    mounted: function () {
+        var _this = this;
+        _this.pageType = _util.getUrlParam('pageType');
+        _this.type = _util.getUrlParam('type');
+        _this.payAmount = _util.getUrlParam('payAmount');
+        _this.infoRequestBody();
+    }
+});

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

@@ -0,0 +1,138 @@
+/**
+ *Created by ZHJY on 2020/7/14.
+ */
+var payContainer = new Vue({
+    el:"#payContainer",
+    data: {
+        orderID:'',
+        pageType:'',//页面跳转类型 1为二手 0为订单
+        payAmount:0,//本次支付金额
+        wechatcode:'',//微信code
+        state:0,//随机数
+        isRequest:false,
+        productId:'',//二手商品ID
+    },
+    computed: {
+
+    },
+    methods: {
+        infoPayOrderCheckoutCounter:function(){//初始化订单数据
+            var _this = this;
+            _this.wechatcode = _util.getUrlParam('code');
+            _this.state = JSON.parse(decodeURIComponent(_util.getUrlParam('state')));
+            _this.payAmount = _this.state.payAmount;
+            _this.pageType = _this.state.pageType;
+            _this.isRequest = true;
+            if( _this.pageType == 1){
+                _this.productId = _this.state.productId;
+            }else{
+                _this.orderID = _this.state.orderID;
+            }
+        },
+        WxPaySubmit:function(){
+            var _this = this;
+            if(_this.pageType == 1){
+                _this.WxRequestsecondHandPay();
+            }else{
+                _this.WxRequestPaymentFn();
+            }
+        },
+        WxRequestsecondHandPay:function(){
+            var params = {
+                payWay:'WEIXIN',
+                code:_this.wechatcode,
+                state:_this.rand(1000,9999),
+                productId:_this.productId,
+                returnUrl:'https://www.caimei365.com/',
+            };
+            PayApi.PayOrdersecondHandPay(params,function(response){
+                if(response.code == 0){
+                    let PayInfo = JSON.parse(response.data.data.payInfo);
+                    if (typeof WeixinJSBridge == "undefined"){
+                        if( document.addEventListener ){
+                            document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
+                        }else if (document.attachEvent){
+                            document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
+                            document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
+                        }
+                    }else{
+                        _this.onBridgeReady(PayInfo);
+                    }
+                }else{
+                    layer.msg("支付链接已失效,请重新扫码支付");
+                    setTimeout(function(){
+                        WeixinJSBridge.call('closeWindow');
+                    },3000);
+                }
+            });
+        },
+        WxRequestPaymentFn:function(){
+            var _this = this;
+            var params={
+                    payAmount:_this.payAmount*100,
+                    payWay:"WEIXIN",
+                    code:_this.wechatcode,
+                    state:_this.rand(1000,9999),
+                    orderId:_this.orderID,
+                    returnUrl:'https://www.caimei365.com/',
+            };
+            PayApi.PayOrderMiniWxPay(params,function(response){
+                if(response.code == 0){
+                    let PayInfo = JSON.parse(response.data.data.payInfo);
+                    if (typeof WeixinJSBridge == "undefined"){
+                        if( document.addEventListener ){
+                            document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
+                        }else if (document.attachEvent){
+                            document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
+                            document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
+                        }
+                    }else{
+                        _this.onBridgeReady(PayInfo);
+                    }
+                }else{
+                    layer.msg("支付链接已失效,请重新扫码支付");
+                    setTimeout(function(){
+                        WeixinJSBridge.call('closeWindow');
+                    },3000);
+                }
+            })
+        },
+        onBridgeReady:function(data){
+            console.log('支付验证签名',data);
+            WeixinJSBridge.invoke('getBrandWCPayRequest', {
+                        "appId":data.appId,     //公众号名称，由商户传入
+                        "timeStamp":data.timeStamp,//时间戳，自1970年以来的秒数
+                        "nonceStr":data.nonceStr, //随机串
+                        "package":data.package,
+                        "signType":data.signType,        //微信签名方式：
+                        "paySign":data.paySign,  //微信签名
+                    },
+                function(res) {
+                    if(res.err_msg == "get_brand_wcpay_request:ok"){
+                        layer.msg('支付成功');
+                        window.open("https://www.caimei365.com/");
+                    }else if(res.err_msg == "get_brand_wcpay_request:cancel"){
+                        layer.msg("用户取消支付,请重新扫码支付");
+                        setTimeout(function(){
+                            WeixinJSBridge.call('closeWindow');
+                        },3000);
+                    }else{
+                        layer.msg("支付失败,请重新扫码支付");
+                        setTimeout(function(){
+                            WeixinJSBridge.call('closeWindow');
+                        },3000);
+                    }
+            });
+        },
+        rand:function (min,max) {//随机数
+            return Math.floor(Math.random()*(max-min))+min;
+        },
+        toFixedFn:function(text){//处理小数点后两位数
+            return Number(text).toFixed(2);
+        },
+    },
+    mounted: function () {
+        var _this = this;
+        _this.infoPayOrderCheckoutCounter();
+    }
+});

src/main/resources/static/js/shopping/confirm.js

@@ -439,7 +439,8 @@ var shoppingConfirm = new Vue({
                     productInfo.push({
                         productId:item.productId,
                         productNum:item.number,
-                        presentNum:0
+                        presentNum:0,
+                        productType:item.productType
                     })
                 });
                 return {shopId:el.id,note:el.note?el.note:'',productInfo:productInfo}

src/main/resources/static/js/user-center/setting/upgrade.js

@@ -0,0 +1,314 @@
+jqMultipleShow("click", ".navList", ".tab", ".con");
+var upgradePage = new Vue({
+    el: "#upgradePage",
+    data: {
+        isRequset:true,
+        loginLoading: false,
+        clubUpgradeUser: {
+            userID:'',
+            clubID:'',
+            contractEmail1:'',
+            name:'',
+            sname:'',
+            socialCreditCode:'',
+            mainpro:[],
+            businessLicenseImage:'',
+            headpic:'',
+            medicalPracticeLicenseImg:'',
+            firstClubType:'',
+            secondClubType:0,
+            department:'',
+            provinceID :'',
+            cityID : '',
+            townID : '',
+        },
+        userMainPros:[],
+        formData:new FormData(),
+        mentuzCampNullList:[
+            {value:'1',name:'整形'},
+            {value:'2',name:'轻医美'},
+            {value:'3',name:'皮肤科'},
+        ],
+        medicaCampNullList: [
+            {name:'美容'},
+            {name:'美体'},
+            {name:'美发'},
+            {name:'皮肤管理'},
+            {name:'光电'},
+            {name:'综合类'},
+            {name:'中医养生'},
+            {name:'spa'},
+        ],
+        mainPros: ['产品','仪器','服务','整形'],
+        mainProEdit: '',
+        ProvinceList:[],
+        cityArray:[],
+        townArray:[],
+        addressfrom: {
+            province: '',//省id
+            city: '',
+            town: ''
+        },
+        rule:{
+            name: '^[a-zA-Z\\u4e00-\\u9fa5]{2,}$',
+            phone: '^\\d{6,12}$',
+            code: '^\\d{6}$',
+            license: '^[a-zA-Z0-9_]{18}$',
+            email: '^(([^<>()\\[\\]\\\\.,;:\\s@&quot;]+(\\.[^<>()\\[\\]\\\\.,;:\\s@&quot;]+)*)|(&quot;.+&quot;))@((\\[[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}])|(([a-zA-Z\\-0-9]+\\.)+[a-zA-Z]{2,}))$',
+            password: "^[^\\u4e00-\\u9fa5]{8,16}$"
+        }
+    },
+    computed: {
+
+    },
+    methods: {
+        infoInformationData:function(){//机构资料初始化
+            var _self = this;
+            UserApi.GetApplicationData({userID:_self.clubUpgradeUser.userID},function (response) {
+                if(response.code == 0){
+                    var data = response.data;
+                    _self.isRequset = false;
+                    _self.clubUpgradeUser = data.club;
+                    _self.userIdentity = data.user.userIdentity;
+                    _self.addressfrom.clubID = data.user.clubID;
+                    _self.addressfrom.userID = data.user.userID;
+                    _self.addressfrom.contractEmail1 = data.user.contractEmail1;
+                    _self.addressfrom.provinceID = data.club.provinceID;
+                    _self.addressfrom.cityID = data.club.cityID;
+                    _self.addressfrom.townID= data.club.townID;
+                    console.log(_self.addressfrom.townID);
+
+                    _self.userMainPros = _self.setNewMainpro(data.club.mainpro);
+                    console.log(_self.userMainPros);
+                    _self.GetProvinceFn();
+                    _self.GetCtiyFn();
+                    _self.GetTownFn();
+                }else{
+                    CAIMEI.Alert(response.msg,'确定',false);
+                }
+            })
+        },
+        SubComfirUpgradeFn:function() {//升级会员机构
+            var _self = this;
+            var pass = verifyForm();
+            if (_self.loginLoading) { return false; }
+            this.$nextTick(function() {
+                if (!pass) {return false;}
+                _self.clubUpgradeUser.mainpro = _self.userMainPros.join("/");
+            var  params= {
+                    userID:_self.clubUpgradeUser.userID,
+                    clubID:_self.clubUpgradeUser.clubID,				//会所ID
+                    name:_self.clubUpgradeUser.name,
+                    linkMan1:_self.clubUpgradeUser.linkMan1,
+                    sname:_self.clubUpgradeUser.sname,
+                    contractEmail1:_self.clubUpgradeUser.contractEmail1,
+                    provinceID:_self.clubUpgradeUser.provinceID,
+                    cityID:_self.clubUpgradeUser.cityID,
+                    townID:_self.clubUpgradeUser.townID,
+                    address:_self.clubUpgradeUser.address,
+                    socialCreditCode:_self.clubUpgradeUser.socialCreditCode,
+                    businessLicenseImage:_self.clubUpgradeUser.businessLicenseImage,
+                    headpic:_self.clubUpgradeUser.headpic,
+                    firstClubType:_self.clubUpgradeUser.firstClubType, //机构类型分类 医美:0和生美:1
+                    secondClubType:_self.clubUpgradeUser.secondClubType,	//机构类型二级分类 诊所:1,门诊:2,医院:3
+                    department:_self.clubUpgradeUser.department,				//科室
+                    medicalPracticeLicenseImg:_self.clubUpgradeUser.medicalPracticeLicenseImg,//资质图片
+                    mainpro:_self.clubUpgradeUser.mainpro,
+                };
+                _self.loginLoading = true;
+                UserApi.ClubUpgrade(params,function (response) {
+                    if(response.code === 0){
+                        CAIMEI.Alert('您的升级申请已提交审核','确定',true,function () {
+                            _self.clubLoginIndex();
+                            _self.loginLoading = false;
+                        });
+                    } else {
+                        CAIMEI.Alert(response.msg,'确定',false);
+                        _self.loginLoading = false;
+                    }
+                });
+            });
+        },
+        clubLoginIndex:function(){// 跳过升级直接去个人中心
+            window.location.href = '/user/dashboard.html';
+        },
+        setNewMainpro:function(arr){//回显处理主营内容
+            var newArr = [];
+            console.log(arr);
+            arr.split('/').forEach(function(item){
+                newArr.push(item);
+            });
+            return newArr
+        },
+        mainProAdd: function(){
+            var _self = this;
+            if (_self.mainProEdit.length>0) {
+                if (_self.mainPros.indexOf(_self.mainProEdit)<0){
+                    var obj = {name:_self.mainProEdit};
+                    if(_self.clubUpgradeUser.firstClubType === '0'){
+                        if(_self.checkedArray(_self.mainProEdit,_self.mentuzCampNullList)){
+                            CAIMEI.dialog('主营内容已存在!',false);
+                        }else {
+                            _self.mentuzCampNullList.push(obj);
+                        }
+                    }else{
+                        if(_self.checkedArray(_self.mainProEdit,_self.medicaCampNullList)){
+                            CAIMEI.dialog('主营内容已存在!',false);
+                        }else {
+                            _self.medicaCampNullList.push(obj);
+                        }
+                    }
+                }
+            }
+        },
+        checkedArray:function(content,arr){//判断主营内容是否已存在
+            for(var i in arr){
+                if(arr[i].name == content){
+                    return true;
+                }
+            }
+            return false;
+        },
+        blurHandle: function(event) { // 失去焦点校验
+            var el = event.currentTarget;
+            verifyHandle(el);
+        },
+        uploadBusinessLicenseImageFn: function(event){//上传营业执照
+            var _this = this;
+            var inputDOM = _this.$refs.businessLicenseImage;
+            var file = inputDOM.files;
+            _this.formData.append('file', file[0]);
+            PublicApi.uploadimg(_this.formData,function(response){
+                _this.clubUpgradeUser.businessLicenseImage = response.data;
+                event.target.value = '';
+            });
+        },
+        uploadMentuzImageFn: function(event){//上传营业执照
+            var _this = this;
+            var inputDOM = _this.$refs.businessMentuImage;
+            var file = inputDOM.files;
+            _this.formData.append('file', file[0]);
+            PublicApi.uploadimg(_this.formData,function(response){
+                _this.clubUpgradeUser.headpic = response.data;
+                event.target.value = '';
+            });
+        },
+        uploadMedicaImageFn: function(event){//上传资质证书
+            var _this = this;
+            var inputDOM = _this.$refs.businessMedicaImage;
+            var file = inputDOM.files;
+            _this.formData.append('file', file[0]);
+            PublicApi.uploadimg(_this.formData,function(response){
+                _this.clubUpgradeUser.medicalPracticeLicenseImg = response.data;
+                event.target.value = '';
+            });
+        },
+        deleteBusinessImage:function(){//清楚营业执照图片
+            this.clubUpgradeUser.businessLicenseImage = '';
+        },
+        deleteMentuzImage:function(){//清楚门头照图片
+            this.clubUpgradeUser.headpic = '';
+        },
+        deleteMedicalImage:function(){//清楚资质照图片
+            this.clubUpgradeUser.medicalPracticeLicenseImg = '';
+        },
+        GetProvinceFn: function(){//获取全部省份
+            var _this = this;
+            PublicApi.GetProvince({},function(response){
+                if(response.code == 0){
+                    _this.ProvinceList =response.data;
+                }else{
+                    CAIMEI.Alert(response.msg,'确定',false);
+                }
+            })
+        },
+        GetProvinceFn: function(){//获取全部省份
+            var _self = this;
+            PublicApi.GetProvince({},function(response){
+                if(response.code == 0){
+                    _self.ProvinceList =response.data;
+                }else{
+                    CAIMEI.Alert(response.msg,'确定',false);
+                }
+            })
+        },
+        ChangeProvince:function () {//选择省份
+            var _self = this;
+            _self.addressfrom.provinceID = event.target.value;
+            _self.clubUpgradeUser.provinceID = event.target.value;
+            if(_self.addressfrom.provinceID==''){//省为请选择时市区初始化
+                _self.cityArray=[];
+                _self.townArray=[];
+                _self.clubUpgradeUser.townID=''
+            }else {
+                _self.GetCtiyFn();
+            }
+        },
+        ChangeGetcity:function(event){//加载市
+            var _self = this;
+            _self.addressfrom.cityID = event.target.value;
+            _self.clubUpgradeUser.cityID = event.target.value;
+            if(_self.addressfrom.cityID==''){
+                _self.townArray=[];
+            }else {
+                _self.GetTownFn();
+            }
+        },
+        ChangeGetcTown:function(event){//选择地区
+            var _self = this;
+            _self.clubUpgradeUser.townID = event.target.value;
+        },
+        GetProvinceFn: function(){//获取全部省份
+            var _self = this;
+            PublicApi.GetProvince({},function(response){
+                if(response.code == 0){
+                    _self.ProvinceList =response.data;
+                }else{
+                    CAIMEI.Alert(response.msg,'确定',false);
+                }
+            })
+        },
+        GetCtiyFn: function(){//获取市
+            var _self = this;
+            PublicApi.GetCity({ provinceId: _self.addressfrom.provinceID },function(response){
+                if(response.code == 0 ){
+                    _self.cityArray = response.data;
+                }else{
+                    CAIMEI.Alert(response.msg,'确定',false);
+                }
+            })
+        },
+        GetTownFn: function(){//获取区
+            var _self = this;
+            PublicApi.GetTown({ cityId: _self.addressfrom.cityID },function(response){
+                if(response.code == 0 ){
+                    _self.townArray = response.data;
+                }else{
+                    CAIMEI.Alert(response.msg,'确定',false);
+                }
+            })
+        },
+        showViewerImageFn:function(){//预览营业执照图片
+            var viewer = new Viewer(document.getElementById('businessLicenseImage'));
+        },
+        showViewerImageFn1:function(){//预览门头照图片
+            var viewer = new Viewer(document.getElementById('uploadMentuzImage'));
+        },
+        showViewerImageFn2:function(){//预览资质图片
+            var viewer = new Viewer(document.getElementById('medicalPracticeLicenseImg'));
+        },
+    },
+    created: function () {
+
+    },
+    mounted: function () {
+        var _self = this;
+        if(globalUserData){
+            _self.clubUpgradeUser.userID = globalUserData.userId;
+            _self.clubUpgradeUser.clubID = globalUserData.clubId;
+            _self.infoInformationData();
+        }
+        $('.navLayout').find('.navList').removeClass("on").find('.con').hide().find('a').removeClass("on");
+        $('.navLayout').find('.navList').eq(1).addClass("on").find('.con').show().find('a').eq(0).addClass("on");
+    }
+});

src/main/resources/templates/account/register-club.html

@@ -102,7 +102,7 @@
                     <p><em>*</em>机构名称：</p>
                     <input type="text" v-model.trim="clubUpgradeUser.name" placeholder="请与营业执照的注册名称保持一致" :rule="rule.name" maxlength="30" @blur="blurHandle($event)" needverify>
                     <i class="checked icon mIcon"></i>
-                    <span class="errTips icon mIcon" tips="请输入正确的联系人姓名"></span>
+                    <span class="errTips icon mIcon" tips="请输入机构名称"></span>
                 </div>
                 <div class="formLine">
                     <p>机构简称：</p>

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

@@ -0,0 +1,147 @@
+<%@ 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-pay.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"><img src="/web/login/img/index_logo.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="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>
+<%@ include file="/web/login/view/out_footer.jsp" %>
+<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>

src/main/resources/templates/pay/caimei-paycash.jsp

@@ -0,0 +1,167 @@
+<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %>
+<%
+    String path = request.getContextPath();
+    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
+%>
+<%@ 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>
+    <%--<base href="<%=basePath%>">--%>
+    <title>采美365网-中国美业全方位线上交易服务互动平台，做美业，上采美</title>
+    <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">
+    <meta http-equiv="keywords" content="采美平台业务包括采美采购商城，采美正品联盟，美业供应链合作，美业平台综合运营，三方项目服务合作，美业信息咨询服务，美业二手市场，医美直播，品牌招商等。其中采购商城包括热门小气泡仪器、皮肤检测，水光仪器，中胚层治疗仪器，激光仪器，射频仪器，超声仪器，微针射频仪器，脱毛仪器、红蓝光，身体塑形溶脂仪器等。产品包括：医美术后修复产品，高端SPA产品，高端院线产品，医美家居护理产品，玻尿酸，动能素，精纯液，填充针剂，线材，消耗品等。">
+    <meta http-equiv="description"
+          content="采美365网，生美医美正品采购服务平台，国内第一家美容行业的B2B平台，具有一，二，三类医疗器械销售资质和进出口资质。聚集全球100多个优质供应商资源，包括医疗、非医疗美容产品和仪器设备，能够一站式满足医疗美容机构、生活美容机构、新兴皮肤管理中心等多样化采购需求。同时提供供应链合作，整合上下游资源，为美容产业的持续前进和发展提出新的解决方案。">
+    <link rel="shortcut icon" href="/public/3.0/img/favicon.ico"
+          type="image/x-icon">
+    <link rel="stylesheet" href="/public/3.0/css/common/common.css">
+    <link rel="stylesheet" href="/web/login/css/register.css">
+    <link rel="stylesheet" href="/web/order/css/caimei-paycash.css?version=<%=Math.random()%>">
+    <script src="/public/3.0/js/lib/jquery-1.9.1.min.js"></script>
+    <script src="/public/3.0/js/lib/juicer-min.js"></script>
+    <script src="/web/common/js/tools.js"></script>
+    <script src="/public/3.0/js/common/common.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>
+</head>
+<body class="home">
+<!-- .header -->
+<%@ include file="/common/Newnav.jsp" %>
+<input type="text" hidden value="${TransactionTypeID}" id="getOrderID">
+<div class="pay-container clearfix" id="payContainer" :class="isRequest ? 'active' : ''">
+    <div class="page-title">
+        <div class="page-name">收银台</div>
+        <div class="progress" v-if="pageType != '1'">
+            <div class="progress-bar step-3"></div>
+            <div class="progress-txt">
+                <div class="item">我的进货单</div>
+                <div class="item middle">核对订单信息</div>
+                <div class="item current">成功提交订单</div>
+            </div>
+        </div>
+    </div>
+    <div class="pay-content clearfix" >
+        <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">
+                    <p>待付金额：<span class="red" id="paidAmount">￥{{paidAmount | NumFormat}}</span></p>
+                    <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 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>
+                </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 class="pay-button" v-if="mobileTabIndex === 2">
+                        <a href="javascript:void(0);" id="paySubmit" @click="PaySubmitFn">立即支付</a>
+                    </div>
+                    <div class="pay-button" v-else>
+                        <a href="javascript:void(0);" id="payMobileSubmit" @click="PayMobileSubmitFn">立即支付</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 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>
+<%@ include file="/web/login/view/out_footer.jsp" %>
+<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-paycash.js?version=<%=Math.random()%>"></script>
+</body>
+</html>

src/main/resources/templates/pay/caimei-paymobile.jsp

@@ -0,0 +1,128 @@
+<%@ 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多个优质供应商资源，包括医疗、非医疗美容产品和仪器设备，能够一站式满足医疗美容机构、生活美容机构、新兴皮肤管理中心等多样化采购需求。同时提供供应链合作，整合上下游资源，为美容产业的持续前进和发展提出新的解决方案。">
+    <title>采美365网-中国美业全方位线上交易服务互动平台，做美业，上采美</title>
+    <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">
+    <link rel="stylesheet" href="/web/order/css/caimei-paymobile.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>
+</head>
+<body>
+<div class="head-wrap">
+    <div class="head clearfix">
+        <div class="fl logo-to-index"><img src="/web/login/img/index_logo.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 weixin clearfix" id="payContainer" :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="/web/order/img/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="/web/order/img/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="/web/order/img/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="/web/order/img/icon-alipay@2x.png" alt="">
+                    <p>打开手机支付宝，扫一扫进行付款</p>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+<div class="pay-alert-content">
+    <div class="pay-alert">
+        <div class="title">
+            <p>确认提示</p>
+            <i class="icon-close"></i>
+        </div>
+        <div class="content">
+            <h1>请在您新打开的页面上完成付款</h1>
+            <p>完成付款后请点击下面的按钮</p>
+        </div>
+        <div class="button" id="payButton">
+            <a href="javascript:void(0);">已完成支付</a>
+        </div>
+    </div>
+</div>
+<%@ include file="/web/login/view/out_footer.jsp" %>
+<div class="cm-modal"></div>
+<script src="https://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>
+<script src="/web/common/js/lib/qrcode.min.js"></script>
+<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-paymobile.js?version=<%=Math.random()%>"></script>
+
+</body>
+</html>

src/main/resources/templates/pay/caimei-starspay.jsp

@@ -0,0 +1,154 @@
+<%@ 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>

src/main/resources/templates/pay/caimei-success.jsp

@@ -0,0 +1,63 @@
+<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %>
+<%@ page import="com.caimei.utils.SysConfig" %>
+<%
+    String path = request.getContextPath();
+    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
+%>
+<%@ 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>
+    <title>采美365网-中国美业全方位线上交易服务互动平台，做美业，上采美</title>
+    <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">
+    <meta http-equiv="keywords" content="采美平台业务包括采美采购商城，采美正品联盟，美业供应链合作，美业平台综合运营，三方项目服务合作，美业信息咨询服务，美业二手市场，医美直播，品牌招商等。其中采购商城包括热门小气泡仪器、皮肤检测，水光仪器，中胚层治疗仪器，激光仪器，射频仪器，超声仪器，微针射频仪器，脱毛仪器、红蓝光，身体塑形溶脂仪器等。产品包括：医美术后修复产品，高端SPA产品，高端院线产品，医美家居护理产品，玻尿酸，动能素，精纯液，填充针剂，线材，消耗品等。">
+    <meta http-equiv="description"
+          content="采美365网，生美医美正品采购服务平台，国内第一家美容行业的B2B平台，具有一，二，三类医疗器械销售资质和进出口资质。聚集全球100多个优质供应商资源，包括医疗、非医疗美容产品和仪器设备，能够一站式满足医疗美容机构、生活美容机构、新兴皮肤管理中心等多样化采购需求。同时提供供应链合作，整合上下游资源，为美容产业的持续前进和发展提出新的解决方案。">
+    <link rel="shortcut icon" href="/public/3.0/img/favicon.ico"
+          type="image/x-icon">
+    <link rel="stylesheet" href="/public/3.0/css/common/common.css">
+    <link rel="stylesheet" href="/web/login/css/register.css">
+    <link rel="stylesheet" href="/web/order/css/caimei-success.css?version=<%=Math.random()%>">
+    <script src="/public/3.0/js/lib/jquery-1.9.1.min.js"></script>
+    <script src="/public/3.0/js/lib/juicer-min.js"></script>
+    <script src="/web/common/js/tools.js"></script>
+    <script src="/public/3.0/js/common/common.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>
+</head>
+<body class="home">
+<div class="head-wrap">
+    <div class="head clearfix">
+        <div class="fl logo-to-index"><img src="/web/login/img/index_logo.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">
+            <div class="success-icon">
+                <div class="icon" :class="isSuccess ? 'icon-success' : 'icon-error'"></div>
+            </div>
+            <div class="success-text"><p class="tx1">{{isSuccessText}}</p></div>
+            <div class="success-text"><p class="tx2">付款金额: <span>￥{{payAmount | NumFormat}}</span> </p></div>
+            <div class="success-text"><p class="tx2"><span>{{maxtime}}s</span>后自动跳转到{{linkText}}<a :href="openLink">立即跳转</a></p></div>
+    </div>
+</div>
+<%@ include file="/web/login/view/out_footer.jsp" %>
+<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-success.js?version=<%=Math.random()%>"></script>
+</body>
+</html>

src/main/resources/templates/pay/caimei-wechatpay.jsp

@@ -0,0 +1,60 @@
+<%@ 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 name="viewport" id="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+    <meta http-equiv="keywords" content="采美平台业务包括采美采购商城，采美正品联盟，美业供应链合作，美业平台综合运营，三方项目服务合作，美业信息咨询服务，美业二手市场，医美直播，品牌招商等。其中采购商城包括热门小气泡仪器、皮肤检测，水光仪器，中胚层治疗仪器，激光仪器，射频仪器，超声仪器，微针射频仪器，脱毛仪器、红蓝光，身体塑形溶脂仪器等。产品包括：医美术后修复产品，高端SPA产品，高端院线产品，医美家居护理产品，玻尿酸，动能素，精纯液，填充针剂，线材，消耗品等。">
+    <meta http-equiv="description" content="采美365网，生美医美正品采购服务平台，国内第一家美容行业的B2B平台，具有一，二，三类医疗器械销售资质和进出口资质。聚集全球100多个优质供应商资源，包括医疗、非医疗美容产品和仪器设备，能够一站式满足医疗美容机构、生活美容机构、新兴皮肤管理中心等多样化采购需求。同时提供供应链合作，整合上下游资源，为美容产业的持续前进和发展提出新的解决方案。">
+    <title>订单支付</title>
+    <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/order/css/caimei-wechatpay.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="/web/common/js/lib/viewport-sitting.js?version=<%=Math.random()%>"></script>
+    <script src="/public/3.0/js/lib/vue2.6.11.js"></script>
+</head>
+<body>
+<input id="oldApi" value='${oldApi}' hidden>
+<input id="newApi" value='${newApi}' hidden>
+<div class="pay-container  clearfix" id="payContainer" :class="isRequest? 'active' : ''">
+    <div class="pay-amount">
+        <div class="icon"><img src="/web/order/img/icon-paybg@2x.png" alt=""></div>
+        <div class="pay-money">
+            <div class="label">付款金额</div>
+            <div class="mount"><span>￥</span>{{payAmount}}</div>
+        </div>
+    </div>
+    <div class="pay-button"><div class="btn" @click="WxPaySubmit">立即支付</div></div>
+    <div class="pay-logo">
+        <div class="logo">采美365网</div>
+    </div>
+</div>
+<script src="https://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>
+<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-wechatpay.js?version=<%=Math.random()%>"></script>
+
+</body>
+</html>

src/main/resources/templates/user-center/dashboard.html

@@ -34,7 +34,7 @@
                                 <img v-else :src="userInfo.image == null ? '' : userInfo.image" alt="">
                             </div>
                             <div class="account">
-                                <div class="name"><span>{{userInfo.name}}</span><a href="/" v-if="userInfo.userIdentity === 4">去升级会员机构</a></div>
+                                <div class="name"><span>{{userInfo.name}}</span><a href="/user/setting/upgrade.html" v-if="userInfo.userIdentity === 4">去升级会员机构</a></div>
                                 <div class="msg"><span>资料完整度:<em class="red">{{degree}}</em></span><a href="/user/setting/information.html">立即完善</a></div>
                             </div>
                         </div>

src/main/resources/templates/user-center/setting/information.html

@@ -27,7 +27,7 @@
                 <div v-if="isRequset" class="loading">
                     <img src="/img/base/loading.gif">
                 </div>
-                <div class="container clear">
+                <div class="container clear" v-else>
                     <form>
                         <div class="title">注册信息</div>
                         <div class="formLine">
@@ -45,7 +45,7 @@
                                 <p><em>*</em>机构名称：</p>
                                 <input type="text" v-model.trim="clubUpgradeUser.name" placeholder="请与营业执照的注册名称保持一致" :rule="rule.name" maxlength="30" @blur="blurHandle($event)" needverify>
                                 <i class="checked icon mIcon"></i>
-                                <span class="errTips icon mIcon" tips="请输入正确的联系人姓名"></span>
+                                <span class="errTips icon mIcon" tips="请输入机构名称"></span>
                             </div>
                             <div class="formLine">
                                 <p><em>*</em>邮箱：</p>

src/main/resources/templates/user-center/setting/upgrade.html

@@ -0,0 +1,185 @@
+<!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/base/form.css(v=${version})}" rel="stylesheet" type="text/css">
+    <link th:href="@{/css/base/center.css(v=${version})}" rel="stylesheet" type="text/css">
+    <link th:href="@{/css/user-center/setting/upgrade.css(v=${version})}" rel="stylesheet" type="text/css">
+</head>
+<body>
+<!-- 引用头部 -->
+<template th:replace="components/header"></template>
+<!-- 升级机构 -->
+<div id="upgradePage" v-cloak>
+    <div class="navLayout" th:object="${pageInfo}">
+        <div class="crumbs">
+            <span>机构管理中心</span>
+            <span>&gt;</span>
+            <span>机构升级</span>
+        </div>
+        <div class="wrap clear">
+            <!--左侧面包屑-->
+            <template th:replace="user-center/components/tableft"></template>
+            <div class="right">
+                <!--loading-->
+                <div v-if="isRequset" class="loading">
+                    <img src="/img/base/loading.gif">
+                </div>
+                <div class="container clear" v-else>
+                    <div class="title">升级会员机构</div>
+                    <div class="title-tips"><p>补充以下详细信息即可升级为会员机构，享受更多更好的服务</p></div>
+                    <div class="registerClub clear">
+                        <form>
+                            <div class="formLine">
+                                <p><em>*</em>邮箱：</p>
+                                <input type="text" v-model.trim="clubUpgradeUser.contractEmail1" placeholder="请输入邮箱地址" :rule="rule.email" maxlength="50" @blur="blurHandle($event)" needverify>
+                                <i class="checked icon mIcon"></i>
+                                <span class="errTips icon mIcon" tips="请输入正确的邮箱地址"></span>
+                            </div>
+                            <div class="formLine">
+                                <p><em>*</em>机构名称：</p>
+                                <input type="text" v-model.trim="clubUpgradeUser.name" placeholder="请与营业执照的注册名称保持一致" :rule="rule.name" maxlength="50" @blur="blurHandle($event)" needverify>
+                                <i class="checked icon mIcon"></i>
+                                <span class="errTips icon mIcon" tips="请输入机构名称"></span>
+                            </div>
+                            <div class="formLine">
+                                <p>机构简称：</p>
+                                <input type="text" v-model.trim="clubUpgradeUser.sname" placeholder="请输入机构简称" :rule="rule.name" maxlength="50" needverify>
+                            </div>
+                            <div class="formLine">
+                                <p><em>*</em>联系地址：</p>
+                                <div class="address">
+                                    <select name="provinceID" id="cProvince" @change="ChangeProvince" v-model="addressfrom.provinceID">
+                                        <option value="" >请选择</option>
+                                        <option v-for="(item ,index) in ProvinceList" :key="index" :value='item.provinceID' >{{item.name}}</option>
+                                    </select>
+                                    <select name="cityID" id="cCity" @change="ChangeGetcity($event)" v-model="addressfrom.cityID">
+                                        <option value="" >请选择</option>
+                                        <option v-for="(item ,index) in cityArray" :key="index" :value="item.cityID" >{{item.name}}</option>
+                                    </select>
+                                    <select name="townID" id="cTown" @change="ChangeGetcTown($event)" v-model="addressfrom.townID">
+                                        <option value="" >请选择</option>
+                                        <option v-for="(item ,index) in townArray" :key="index" :value="item.townID"  >{{item.name}}</option>
+                                    </select>
+                                    <textarea placeholder="建议您如实填写详细地址，例如：街道名称，门牌号码，楼层和房间号等信息"  v-model="clubUpgradeUser.address"></textarea>
+                                </div>
+                                <i class="checked icon mIcon"></i>
+                                <span class="errTips icon mIcon" tips="请输入正确的联系地址"></span>
+                            </div>
+                            <div class="formLine">
+                                <p>营业执照：</p>
+                                <input type="text" v-model.trim="clubUpgradeUser.socialCreditCode" placeholder="请输入统一社会信用代码" maxlength="20">
+                            </div>
+                            <div class="formLine clear">
+                                <div class="form-upload">
+                                    <p><em>*</em>营业执照图片：</p>
+                                    <div class="form-upload-image" v-if="clubUpgradeUser.businessLicenseImage!=''">
+                                        <img class="upload-img" :src="clubUpgradeUser.businessLicenseImage" alt="" id="businessLicenseImage" @click="showViewerImageFn()">
+                                        <i class="icon mIcon" @click="deleteBusinessImage()"></i>
+                                    </div>
+                                    <div class="formLine-file" v-else>
+                                        <input ref="businessLicenseImage" class="file" type="file" accept="image/png,image/jpeg,image/gif,image/jpg"  @change="uploadBusinessLicenseImageFn">
+                                        <i class="icon mIcon file-biss"></i>
+                                    </div>
+                                    <span class="errTips icon mIcon"></span>
+                                </div>
+                                <div class="form-upload-tips">
+                                    <i class="icon mIcon icon-wen"></i>
+                                    <div class="wen-tips">点击图片可放大图片</div>
+                                </div>
+                            </div>
+                            <div class="formLine clear">
+                                <div class="form-upload">
+                                    <p>门头照：</p>
+                                    <div class="form-upload-image" v-if="clubUpgradeUser.headpic!=''">
+                                        <img class="upload-img" :src="clubUpgradeUser.headpic" alt="" id="uploadMentuzImage" @click="showViewerImageFn1()">
+                                        <i class="icon mIcon" @click="deleteMentuzImage()"></i>
+                                    </div>
+                                    <div class="formLine-file" v-else>
+                                        <input ref="businessMentuImage" class="file" type="file" accept="image/png,image/jpeg,image/gif,image/jpg"  @change="uploadMentuzImageFn">
+                                        <i class="icon mIcon file-door"></i>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="formLine">
+                                <p><em>*</em>机构类型：</p>
+                                <label class="diyBox"><input type="radio" name="firstShopType" v-model="clubUpgradeUser.firstClubType" value="1" ><i class="icon mIcon">医美</i></label>
+                                <label class="diyBox"><input type="radio" name="firstShopType" v-model="clubUpgradeUser.firstClubType" value="2" checked><i class="icon mIcon">生美</i></label>
+                                <span class="errTips icon mIcon" tips="请选择公司类型"></span>
+                            </div>
+                            <div v-show="clubUpgradeUser.firstClubType == 1" class="formLine">
+                                <label class="diyBox second"><input type="radio" name="secondClubType" v-model="clubUpgradeUser.secondClubType" value="1" checked><i class="icon mIcon">诊所</i></label>
+                                <label class="diyBox second"><input type="radio" name="secondClubType" v-model="clubUpgradeUser.secondClubType" value="2" ><i class="icon mIcon">门诊</i></label>
+                                <label class="diyBox second"><input type="radio" name="secondClubType" v-model="clubUpgradeUser.secondClubType" value="3" ><i class="icon mIcon">医院</i></label>
+                                <span class="errTips icon mIcon" tips="请选择公司类型"></span>
+                            </div>
+                            <div v-show="clubUpgradeUser.firstClubType == 1" class="formLine">
+                                <div class="form-upload">
+                                    <p>资质：</p>
+                                    <div class="form-upload-image" v-if="clubUpgradeUser.medicalPracticeLicenseImg!=''">
+                                        <img class="upload-img" :src="clubUpgradeUser.medicalPracticeLicenseImg" alt="" id="medicalPracticeLicenseImg" @click="showViewerImageFn2()">
+                                        <i class="icon mIcon" @click="deleteMedicalImage()"></i>
+                                    </div>
+                                    <div class="formLine-file" v-else>
+                                        <input ref="businessMedicaImage" class="file" type="file"  accept="image/png,image/jpeg,image/gif,image/jpg" @change="uploadMedicaImageFn">
+                                        <i class="icon mIcon file-zizhi"></i>
+                                    </div>
+                                    <span class="errTips icon mIcon"></span>
+                                </div>
+                                <div class="form-upload-tips">
+                                    <i class="icon icon-wen"></i>
+                                    <div class="wen-tips">点击图片可放大图片</div>
+                                </div>
+                            </div>
+                            <div v-if="clubUpgradeUser.secondClubType == 2 || clubUpgradeUser.secondClubType == 3" class="formLine">
+                                <p>科室：</p>
+                                <input type="text" v-model.trim="clubUpgradeUser.department" placeholder="请填写您所经营的科室,用逗号隔开.(至少三个)" maxlength="50">
+                            </div>
+                            <div class="formLine clear" v-if="clubUpgradeUser.firstClubType == 1">
+                                <p><em>*</em>主营内容：</p>
+                                <p class="business clear">
+                                    <label v-for="pro in medicaCampNullList" class="diyBox second" >
+                                        <input type="checkbox" name="secondClubType" v-model="userMainPros" :value="pro.name" >
+                                        <i class="icon mIcon">{{pro.name}}</i>
+                                    </label>
+                                </p>
+                                <p class="business">
+                                    <input type="text" placeholder="请输入其他自定义品项目" v-model.trim="mainProEdit">
+                                    <a href="javascript:void(0);" @click="mainProAdd()">确认添加</a>
+                                </p>
+                                <span class="errTips icon mIcon" tips="请选择或添加主营产品"></span>
+                            </div>
+                            <div class="formLine clear" v-if="clubUpgradeUser.firstClubType == 2">
+                                <p><em>*</em>主营内容：</p>
+                                <p class="business clear">
+                                    <label v-for="pro in mentuzCampNullList" class="diyBox second">
+                                        <input type="checkbox" name="secondClubType" v-model="userMainPros" :value="pro.name" >
+                                        <i class="icon mIcon">{{pro.name}}</i>
+                                    </label>
+                                </p>
+                                <p class="business">
+                                    <input type="text" placeholder="请输入其他自定义品项目" v-model.trim="mainProEdit">
+                                    <a href="javascript:void(0);" @click="mainProAdd()">确认添加</a>
+                                </p>
+                                <span class="errTips icon mIcon" tips="请选择或添加主营产品"></span>
+                            </div>
+                            <div class="subLine">
+                                <button class="btn" type="button" @click="SubComfirUpgradeFn()">确认升级并提交审核</button>
+                            </div>
+                        </form>
+                    </div>
+                </div>
+            </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/user.service.js(v=${version})}"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/user-center/setting/upgrade.js(v=${version})}"></script>
+</body>
+</html>