快捷支付

src/main/resources/static/css/base/base.h5.css

@@ -8,8 +8,8 @@
 #container,.footMain{width:100%;overflow:hidden;}
 .pcOnly,.jqSelect .pc,.baseHeadCenter .headCart,.baseHeadCenter .hotKey,.baseTopNav_nav{display:none!important;}
 .baseHeadTop .wrap ul>li,.baseHeadTop .header_top_left{display:none;}
-.mIcon:before{content:'';display:inline-block;font-size:0;background:url(/img/base/icon_m.png) no-repeat;background-size:100vw auto;transition:all .5s}
-.H5-icon:before{content:'';display:inline-block;font-size:0;background:url(/img/base/H5-icon.png) no-repeat;background-size:100vw auto;transition:all .5s}
+.mIcon:before{content:'';display:inline-block;font-size:0;background:url(/img/base/icon_m.png) no-repeat;background-size:100vw auto;}
+.H5-icon:before{content:'';display:inline-block;font-size:0;background:url(/img/base/H5-icon.png) no-repeat;background-size:100vw auto;}
 .icon.shop,.icon.heart{vertical-align:middle;display:inline-block;height:5.5vw;line-height:5.5vw}
 .icon.shop:before{width:7.5vw;height:6vw;background-position:-91vw -.5vw}
 .icon.heart:before{width:5.5vw;height:5.5vw;background-position:0 -17vw}

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

@@ -57,7 +57,7 @@ input::-webkit-outer-spin-button {
     .pay-coupontitle{line-height: 72px;font-size: 24px;width: 100%;box-sizing: border-box;padding: 0 16px;font-weight: bold;}
     .pay-coupon{width: 100%;height: 118px;box-sizing: border-box;padding: 16px;background: #FFFFFF;}
     .pay-coupon .pay-coupon-title{width: 100%;line-height: 24px;font-size: 18px;color: #333333;margin-bottom: 16px;}
-    .pay-coupon .pay-coupon-title span{color: #E15621;}
+    .pay-coupon .pay-coupon-title span{color: #FF5B00;}
     .pay-coupon .pay-coupon-content{font-size: 24px;color: #333333;line-height: 32px;}
     .pay-coupon .pay-coupon-content span{color: #F94B4B;font-weight: bold;}
     .pay-ment{width: 100%;height: auto;float: left;background: #FFFFFF;margin-top: 7px;box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.07);}
@@ -69,13 +69,22 @@ input::-webkit-outer-spin-button {
     .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{box-sizing:border-box;width: 100%;padding: 0 20px;background: #FFFFFF;line-height: 44px;font-size: 16px;color: #333333;text-align: left;border-bottom: 1px solid #F7F7F7;}
-    .pay-method .pay-method-tab{width: 100%;height: 42px;float: left;border-bottom: 1px solid #FF5B00;}
-    .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: #FF5B00;color: #FFFFFF;}
-    .pay-method .method-content{width: 100%;height: auto;padding: 20px 0;float: left;box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.07);}
-    .pay-method .method-content .payment-title{font-size: 14px;line-height: 30px;color: #FF2A2A;text-align: left;padding-left: 20px;}
+    .pay-method .method-title{box-sizing:border-box;width: 100%;padding: 0 20px;background: #FFFFFF;line-height: 44px;font-size: 16px;color: #333333;text-align: left;}
+    .pay-method .method-title span{font-size: 14px;line-height: 30px;color: #FF5B00;text-align: left;padding-left: 20px;}
+    .pay-method .method-content{width: 100%;height: auto;padding: 0 0 20px 0;float: left;box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.07);}
     .pay-method .method-content .payment{width: 100%;height: auto;}
+    .payment-check-bank{width: 100%;height: auto;padding: 16px;box-sizing: border-box;}
+    .payment-check-bank .check-bank-cell{width: 100%;height: 64px;box-sizing: border-box;border: 1px solid #D4D9E1;display: block;float: left;margin-bottom: 16px;padding: 12px 16px; }
+    .payment-check-bank .check-bank-cell .cell-icon{ width: 24px;height: 100%;float: left;box-sizing: border-box;padding: 8px 0;}
+    .payment-check-bank .check-bank-cell .cell-icon .icon{ width:24px;height:24px; }
+    .payment-check-bank .check-bank-cell .cell-icon .icon:before{width:24px ;height:24px;background-position: -311px -596px;}
+    .payment-check-bank .check-bank-cell.current .icon:before{ background-position: -277px -596px;}
+    .payment-check-bank .check-bank-cell .cell-main{ float: left;height: 100%;margin-left: 20px; }
+    .payment-check-bank .check-bank-cell .cell-main .logo{ width: 40px;height: 40px;float: left;margin-right: 10px; }
+    .payment-check-bank .check-bank-cell .cell-main .logo img{ width: 40px;height: 40px;display: block; }
+    .payment-check-bank .check-bank-cell .cell-main .name{ line-height: 40px;font-size: 16px;color: #333333;float: left; }
+    .payment-check-bank .check-bank-cell.current{ border-color: #FF5B00; }
+
     .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;}
@@ -89,6 +98,14 @@ input::-webkit-outer-spin-button {
     .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 #FF5B00;background-color: #ffe6dc; display: block;text-align: center;float: left;font-size: 12px;line-height: 30px;border-radius: 20px;color: #FF5B00;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;}
+    .payment-add{width: 100%;height: 44px;box-sizing: border-box;padding: 0 20px;float: left;}
+    .payment-add-btn{width: 168px;height: 44px;box-sizing: border-box;cursor: pointer; border-radius: 2px;float: left;border: 1px solid #B8BFCA;display: flex;align-items: center;justify-content: center;flex-direction: column;}
+    .payment-add-btn .icon{width:24px ;height:24px;display: inline-block;float: left;margin-right: 10px;}
+    .payment-add-btn .icon:before{width:24px ;height:24px;background-position: -254px -652px;}
+    .payment-add-btn span{display: inline-block;line-height: 24px;font-size: 12px;color: #333;}
+    .payment-add-btn:hover{background: #FF5B00;border-color: #FF5B00;}
+    .payment-add-btn:hover span{color: #FFFFFF;}
+    .payment-add-btn:hover .icon:before{background-position: -290px -652px;}
     .pay-error{width: 1184px;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("/img/pay/icon-error--1.png") no-repeat;background-size:contain ;}
@@ -101,11 +118,18 @@ input::-webkit-outer-spin-button {
     .pay-alert-content .pay-alert{width: 340px;height: 208px;background: #FFFFFF;border-radius: 2px;position: absolute;top: 0;right: 0;left: 0;bottom: 0;margin: auto;z-index: 9998;}
     .pay-alert-content .pay-alert .title{width: 100%;height: 48px;box-sizing: border-box;font-size: 14px;line-height: 48px;text-align: left;color: #333333;float: left;position: relative;border-bottom: 1px solid #EFEFEF;background-color: #F8F8F8;padding: 0 14px;}
     .pay-alert-content .pay-alert .title .icon-close{width: 16px;height: 16px;display: block;position: absolute;right:12px;top: 12px;background: url("/img/base/icon.png")-319px 0 no-repeat;cursor: pointer;}
-    .pay-alert-content .pay-alert .content{margin: 30px 0;width: 100%;height: auto;line-height: 24px;float: left;padding: 0 14px;}
-    .pay-alert-content .pay-alert .content h1{text-align: left;font-size: 16px;color: #333333;font-weight: normal;}
-    .pay-alert-content .pay-alert .content p{text-align: left;font-size: 14px;color: #666666;font-weight: normal;}
-    .pay-alert-content .pay-alert .button{width: 100%;height: 32px;float: left;padding: 0 14px;box-sizing: border-box;}
-    .pay-alert-content .pay-alert .button a{width: 90px;height: 32px;display: block;background: #FF5B00;border-radius: 2px;font-size: 14px;text-align: center;line-height: 32px;color: #FFFFFF;float: right;}
+    .pay-alert-content .pay-alert .content{margin: 20px 0 0 0;width: 100%;height: auto;line-height: 24px;float: left;padding: 0 14px;box-sizing: border-box;}
+    .pay-alert-content .pay-alert .content h1{text-align: left;font-size: 14px;color: #333333;font-weight: normal;}
+    .pay-alert-content .pay-alert .content p{text-align: left;font-size: 12px;color: #666666;font-weight: normal;}
+    .pay-alert-content .pay-alert .button{width: 100%;height: 32px;float: left;padding: 0 14px;box-sizing: border-box;margin-top: 15px;}
+    .pay-alert-content .pay-alert .button a{width: 100px;height: 32px;display: block;background: #FF5B00;border-radius: 2px;font-size: 14px;text-align: center;line-height: 32px;color: #FFFFFF;float: right;}
+    /*快捷支付获取短信验证码弹窗*/
+    .pay-alert-content .pay-alert .content-form{ width: 100%;height: 32px; }
+    .pay-alert-content .pay-alert .content-form .input{ width: 190px;height: 32px;float: left; box-sizing: border-box;border: 1px solid #B8BFCA;border-radius: 2px;padding: 0 10px;line-height: 30px;font-size: 14px;color: #333333;}
+    .pay-alert-content .pay-alert .content-form .code-btn{ width: 100px;height: 32px;box-sizing: border-box;display: block;float: left;margin-left: 16px;line-height: 32px;font-size: 14px;color: #FF5B00;text-align: center; border: 1px solid #FF5B00;}
+    .pay-alert-content .pay-alert .content-form .code-btn.disabled{ border-color: #9AA5B5;color: #9AA5B5; }
+    .pay-alert-content .pay-alert .content-error{ width: 100%;height: 22px;float: left;line-height: 22px;text-align: left;font-size: 12px;color: #FF0000; }
+
     /*大额银联转账弹窗*/
     .pay-alert-content .pay-big-alert{width: 460px;height: 386px;background: #FFFFFF;border-radius: 2px;position: absolute;top: 0;right: 0;left: 0;bottom: 0;margin: auto;z-index: 9998;}
     .pay-alert-content .pay-big-alert .title{width: 100%;height: 48px;box-sizing: border-box;font-size: 14px;line-height: 48px;text-align: left;color: #333333;float: left;position: relative;border-bottom: 1px solid #EFEFEF;background-color: #FFFFFF;padding: 0 14px;}
@@ -125,6 +149,48 @@ input::-webkit-outer-spin-button {
     .pay-button-main .pay-button a.disabled{background: #EFEFEF;color:#999999;}
     .footTop{margin-top: 0;}
     .jconfirm .jconfirm-box div.jconfirm-closeIcon{display: none !important;}
+
+    /*快捷支付弹窗*/
+    .model-cards-popup{width:100%;height:100%;position:fixed;top:0;left:0;background-color:rgba(0,0,0,.4);z-index: 99999;}
+    .model-cards-popup .model-content{width:710px;height:480px;padding: 16px 32px; position:absolute;top:0;left:0;right:0;bottom:0;background-color:#FFFFFF;margin:auto;border-radius:2px;box-sizing:border-box}
+    .model-content .title{width: 100%;height: 27px;box-sizing: border-box;float: left;position: relative;margin-bottom: 24px;}
+    .model-content .title .icon-close{width: 16px;height: 16px;display: block;position: absolute;right:0;top: 0;background: url("/img/base/icon.png")-315px 0 no-repeat;cursor: pointer;}
+    .model-content .title .title-tabs{width: 100%;height: 27px;float: left;}
+    .model-content .title .title-tabs a{width: 100px;height: 27px;float: left;margin-right: 64px;display: block;font-size: 16px;line-height: 24px;text-align: center;box-sizing: border-box;border-bottom: 3px solid #FFFFFF;color: #333333;}
+    .model-content .title .title-tabs a.current{ font-weight: bold;border-color: #FF5B00;}
+    .model-content .content{ width:100%;height:300px;box-sizing:border-box;float:left;overflow:hidden;overflow-y:auto }
+    .model-content .content .list{width: 142px;height: 46px;display: block;margin:0 16px 16px 0;float: left;border: 1px solid #FFFFFF;position: relative;border-radius: 2px;}
+    .model-content .content .list img{width: 100%;height: 100%;display: block;}
+    .model-content .content .list.current{border-color: #FF2A2A;}
+    .model-content .content .list.current:before{content: '';width: 20px;height: 20px;position: absolute;bottom: 0;right: -2px;background: url("/img/base/icon.png")-210px -252px no-repeat;}
+    .model-content .button{width: 100%;height: 34px;float: left;margin-top: 24px;}
+    .model-content .button .button-btn{display: block;width: 232px;height: 50px;margin: 0 auto;box-sizing: border-box;border: 1px solid #FF5B00;background: #FF5B00;line-height: 50px;text-align: center;font-size: 14px;color: #FFFFFF;}
+    .model-content .button .button-btn.disabled{border: 1px solid #B8BFCA;background: #B8BFCA;color: #FFFFFF;}
+    .model-content .content .content-labe{width: 100%;height: 38px;line-height: 38px;float: left;font-size: 14px;color: #333333;}
+    .model-content .content .content-labe.sen{margin-bottom: 10px;}
+    .model-content .content .content-labe p{float: left;}
+    .model-content .content .content-labe img{width: 120px;height: 38px;display: block;margin: 0 10px 0 10px;float: left;border-radius: 2px;}
+    .model-content .content .content-labe .form-type{float: left; height:100%; box-sizing: border-box;padding:10px 11px;}
+    .model-content .content .content-labe .form-type .form-radio {height: 18px;margin-right: 40px;line-height: 18px;box-sizing: border-box;float: left;cursor: pointer;}
+    .model-content .content .content-labe .form-type .form-radio input{box-sizing: border-box;width: 100%;height: 16px;line-height: 18px;text-indent: 1.2em;background-color: #FFF;border: 1px solid #b8bfca;border-radius: 2px;display: none;}
+    .model-content .content .content-labe .form-type .form-radio .icon{display: block;font-style: normal;cursor: pointer;width: 18px;height: 18px;position: relative;overflow: hidden;float: left;}
+    .model-content .content .content-labe .form-type .form-radio span{font-size: 14px;color: #666666;font-weight: normal;margin-left: 5px;}
+    .model-content .content .content-labe .form-type .form-radio input:checked + i:before{ background-position: -277px -596px; }
+    .model-content .content .content-labe .form-type .form-radio .icon:before{position: absolute;left: 0;bottom: 0;width:18px ;height:18px;background-position: -311px -596px;}
+    .model-content .content .content-labe .form-label{width:  92px;height: 32px;float: left;line-height: 32px;text-align: right;font-size: 14px;color: #666666;}
+    .model-content .content .content-label{width: 100%;height:32px;float: left;line-height: 32px;text-align: left;font-size: 14px;color: #1890F9;padding-left: 44px;box-sizing: border-box;}
+    .model-content .content .content-form{width: 100%;height: 32px;float: left;margin-bottom: 10px;}
+    .model-content .content .content-form.none{margin-bottom: 0;}
+    .model-content .content .content-form .form-label{width: 70px;height: 32px;float: left;line-height: 32px;text-align: right;font-size: 14px;color: #666666;}
+    .model-content .content .content-form .form-label.sen{width: 92px;}
+    .model-content .content .content-form .form-label span{color: #F94B4B;}
+    .model-content .content .content-form .form-input{width: 500px;height: 32px;float: left;margin-left:10px;color: #F94B4B;box-sizing: border-box;padding: 0 13px;border:1px solid #B8BFCA;}
+    .model-content .content .content-form .form-input input{width: 100%;height:30px;float: left;line-height: 30px;font-size: 14px;color: #333333;border: none;font-style: normal;}
+    .model-content .content .content-form .form-input.code{ width: 350px; }
+    .model-content .content .content-form .form-btn{width: 140px;height: 32px;float: left;margin-left: 20px;}
+    .model-content .content .content-form .form-btn a{display: block;width: 130px;height: 32px;box-sizing: border-box;background: #FF5B00;line-height: 32px;text-align: center;font-size: 14px;color: #FFFFFF;border-radius: 2px;}
+    .model-content .content .content-form .form-btn a.disabled{background: #B8BFCA;color: #FFFFFF;}
+    .model-content .content .content-form .form-text{ line-height: 32px; font-size: 14px;color: #333333; }
 }
 
 
@@ -152,6 +218,7 @@ input::-webkit-outer-spin-button {
     .pageTitle h1,h2.title{color:#2D3036;font-size:3.7vw;font-weight:bold;height:10vw;line-height:10vw;padding:0 3.3vw}
     .pageTitle h1 span{font-size:3.1vw;font-weight:normal;color:#627386;margin-left:2vw}
     .pay-title,.pay-ment,.pay-method{width:100%;box-sizing:border-box;padding:3.2vw;background:#FFF;color:#9aa5b5;font-size:3.4vw;margin-bottom:1.2vw;line-height:7vw}
+    .pay-method .method-title span{font-size: 3.4vw;line-height: 7vw;color: #FF5B00;text-align: left;}
     .pay-title p span{color:#22272e}
     .pay-title .title-money.big{font-size:4.6vw;color:#22272e}
     .pay-title .title-money.big span{color:#FF2A2A;font-weight:bold;line-height:10vw}
@@ -167,12 +234,26 @@ input::-webkit-outer-spin-button {
     .pay-svip .pay-svip-detail .pay-amount > span{font-size:2.4vw;vertical-align:0}
     .pay-svip .svip-indent{padding-top:8vw;font-size:2.8vw;font-weight:bold;color:#4E4539}
     .record-title,.method-title{font-size:3.7vw;color:#22272e;line-height:8vw}
-    .pay-method-tab{padding-top:1.5vw;border-bottom:1px solid #EBEBEB;color:#22272e}
-    .pay-method-tab .item{display:block;box-sizing:border-box;height:9vw;line-height:9vw;padding:0 5vw;border:1px solid transparent;font-size:3.4vw;margin-bottom:-1px}
-    .pay-method-tab .item.active{color:#E15621;border-color:#EBEBEB;border-bottom-color:#FFF;background:#FFF}
-    .payment{border:1px solid #EBEBEB;border-top:none;padding:2.6vw}
+    .payment{border-top:none;padding:2.6vw 0;}
     .record-li{margin-top:3vw}
-    .pay-bank .bank-list{text-align:center;margin-top:3vw}
+    .payment-check-bank{width: 100%;height: auto;box-sizing: border-box;float: left;}
+    .payment-check-bank .check-bank-cell{width: 100%;height: 11.7vw;box-sizing: border-box;border: 1px solid #D4D9E1;display: block;float: left;margin-bottom: 2.4vw;padding: 2.4vw; }
+    .payment-check-bank .check-bank-cell .cell-icon{ width: 4vw;height: 100%;float: left;box-sizing: border-box;}
+    .payment-check-bank .check-bank-cell .cell-icon .icon{ width:4vw;height:4vw; }
+    .payment-check-bank .check-bank-cell .cell-icon .icon:before{width:4vw ;height:4vw;background-position: -18.2vw -93.7vw;}
+    .payment-check-bank .check-bank-cell.current .icon:before{ background-position: -10.1vw -93.7vw;}
+    .payment-check-bank .check-bank-cell .cell-main{ float: left;height: 100%;margin-left: 4vw; }
+    .payment-check-bank .check-bank-cell .cell-main .logo{ width: 6.4vw;height: 6.4vw;float: left;margin-right: 2vw; }
+    .payment-check-bank .check-bank-cell .cell-main .logo img{ width: 6.4vw;height: 6.4vw;display: block; }
+    .payment-check-bank .check-bank-cell .cell-main .name{ line-height: 6.4vw;font-size: 3.4vw;color: #333333;float: left; }
+    .payment-check-bank .check-bank-cell.current{ border-color: #FF5B00; }
+    .payment-add{width: 100%;height: 11.7vw;box-sizing: border-box;float: left;margin-top: 4vw;}
+    .payment-add-btn{width: 45.6vw;height: 11.7vw;margin: 0 auto; box-sizing: border-box;cursor: pointer; border-radius: 2px;margin: 0 auto; border: 1px solid #B8BFCA;display: flex;align-items: center;justify-content: center;flex-direction: column;}
+    .payment-add-btn .icon{width:4vw ;height:4vw;display: inline-block;float: left;margin-right: 10px;}
+    .payment-add-btn .icon:before{width:4vw ;height:4vw;background-position: -25.6vw -93.0vw}
+    .payment-add-btn span{display: inline-block;line-height: 4vw;font-size: 3.4vw;color: #333;}
+    .pay-bank{width: 100%;float: left;height: auto;}
+    .pay-bank .bank-list{width: 100%;height: 11.7vw;text-align:center;margin-bottom:2vw;background: #F7F7F7;}
     .pay-bank .bank-list .bank-a,.pay-bank .bank-list .bank-b{display:block;border:1px solid #FFFFFF;position:relative;border-radius:2px}
     .pay-bank .bank-list .bank-a:before,.pay-bank .bank-list .bank-b:before{position:absolute;right:0;bottom:0;display:none;width:6vw;height:6vw;background-position:-75vw -7.8vw}
     .pay-bank .bank-list .bank-a.active,.pay-bank .bank-list .bank-b.active{border:1px solid #FF5B00}
@@ -181,8 +262,9 @@ input::-webkit-outer-spin-button {
     .pay-bank .bank-list .bank-a img{height:100%}
     .pay-bank .bank-list .bank-b{box-sizing:border-box;width:28vw;height:9.7vw;margin:0 1vw 1vw 0;overflow:hidden}
     .pay-bank .bank-list .bank-b img{height:100%;width:100%}
-    .pay-link p{font-size:3.1vw;color:#FF5B00}
-    .pay-link a{display: block;width: 100%;height: 11.2vw;line-height: 11.2vw;font-size: 3.7vw;text-align: center;border-radius: 2px;border: 1px solid #FF5B00;margin: 0 auto 2.6vw auto;color: #FFF;background: #FF5B00;}
+    .pay-link{width: 100%;float: left;height: auto;margin-top: 3vw;}
+    .pay-link p{font-size:3.1vw;color:#FF5B00;text-align: center;}
+    .pay-link a{display: block;width: 45.6vw;height: 11.2vw;line-height: 11.2vw;font-size: 3.7vw;text-align: center;border-radius: 2px;border: 1px solid #FF5B00;margin: 0 auto 2.6vw auto;color: #FFF;background: #FF5B00;}
     .payment-transfer,.payment-title{color:#22272e}
     .payment-transfer .label>p{font-size:3.4vw;color:#22272e;line-height:5vw;padding:1.6vw 0}
     .payment-transfer .label .label-title{font-size:3.1vw;color:#FF5B00}
@@ -191,6 +273,58 @@ input::-webkit-outer-spin-button {
     .payment-transfer .label>p .red{color:#FF5B00}
     .payment-transfer .copy{display:inline-block;height:6.4vw;line-height:6.4vw;padding:0 3vw;background-image:linear-gradient(214deg,#ff2929 0%,#ff6d1b 100%);border-radius:2px;color:#FFF;margin-left:2vw}
     .pay-button a{display:block;width:93.4vw;height:11.2vw;line-height:11.2vw;font-size:3.7vw;text-align:center;border-radius:2px;border:1px solid #FF5B00;margin:0 auto 2.6vw auto;color:#FFF;background:#FF5B00}
-    .pay-alert-content{display: none;}
     .jconfirm .jconfirm-box div.jconfirm-closeIcon{display: none !important;}
+    /*  快捷支付弹窗  */
+    .model-cards-popup{width:100%;height:100%;position:fixed;top:0;left:0;background-color:rgba(0,0,0,.4);z-index: 99999;}
+    .model-cards-popup .model-content{width:100%;height:150vw;padding: 3.2vw 6vw; position:absolute;left:0;bottom:0;background-color:#FFFFFF;border-radius:2px;box-sizing:border-box}
+    .model-content .title{width: 100%;height: 8vw;box-sizing: border-box;float: left;position: relative;margin-bottom: 6vw;}
+    .model-content .title .icon-close{width: 16px;height: 16px;display: block;position: absolute;right:0;top: 0;background: url("/img/base/icon.png")-315px 0 no-repeat;cursor: pointer;}
+    .model-content .title .title-tabs{width: 100%;height: 8vw;float: left;box-sizing: border-box;padding: 0 10vw}
+    .model-content .title .title-tabs a{width: 100px;height: 8vw;float: left;margin: 0 4vw;display: block;font-size: 3.4vw;line-height: 7.8vw;text-align: center;box-sizing: border-box;border-bottom: 3px solid #FFFFFF;color: #333333;}
+    .model-content .title .title-tabs a.current{ font-weight: bold;border-color: #FF5B00;}
+    .model-content .content{ width:100%;height:110vw;box-sizing:border-box;float:left;overflow:hidden;overflow-y:auto }
+    .model-content .content .list{width: 25.2vw;height: 8vw;display: block;margin:0 3.5vw 3vw 0;float: left;border: 1px solid #FFFFFF;position: relative;border-radius: 2px;}
+    .model-content .content .list img{width: 100%;height: 100%;display: block;}
+    .model-content .content .list.current{border-color: #FF2A2A;}
+    .model-content .content .list.current:before{content: '';width: 20px;height: 20px;position: absolute;bottom: 0;right: -2px;background: url("/img/base/icon.png")-210px -252px no-repeat;}
+    .model-content .button{width: 100%;height: 11vw;float: left;margin-top: 4.8vw;}
+    .model-content .button .button-btn{display: block;width: 30vw;height: 11vw;margin: 0 auto;box-sizing: border-box;border: 1px solid #FF5B00;background: #FF5B00;line-height: 11vw;text-align: center;font-size: 14px;color: #FFFFFF;}
+    .model-content .button .button-btn.disabled{border: 1px solid #B8BFCA;background: #B8BFCA;color: #FFFFFF;}
+    .model-content .content .content-labe{width: 100%;height: 8vw;line-height: 8vw;float: left;font-size: 3.4vw;color: #333333;font-weight: bold;}
+    .model-content .content .content-labe.sen{margin-top: 3vw;}
+    .model-content .content .content-labe p{float: left;}
+    .model-content .content .content-labe img{width: 25.2vw;height: 8vw;display: block;margin-left: 4vw;float: left;border-radius: 2px;}
+    .model-content .content .content-labe .form-type{float: left; height:100%; box-sizing: border-box;padding:2vw 0;margin-left: 3vw;}
+    .model-content .content .content-labe .form-type .form-radio {height:4vw;margin-right: 2vw;line-height: 4vw;box-sizing: border-box;float: left;cursor: pointer;}
+    .model-content .content .content-labe .form-type .form-radio input{box-sizing: border-box;width: 100%;height: 4vw;line-height: 4vw;text-indent: 1.2em;background-color: #FFF;border: 1px solid #b8bfca;border-radius: 2px;display: none;}
+    .model-content .content .content-labe .form-type .form-radio .icon{display: block;font-style: normal;cursor: pointer;width: 4vw;height: 4vw;position: relative;overflow: hidden;float: left;}
+    .model-content .content .content-labe .form-type .form-radio span{font-size: 14px;color: #666666;font-weight: normal;margin-left: 5px;}
+    .model-content .content .content-labe .form-type .form-radio input:checked + i:before{ background-position: -10.1vw -93.7vw; }
+    .model-content .content .content-labe .form-type .form-radio .mIcon:before{position: absolute;left: 0;bottom: 0;width:4vw ;height:4vw;background-position: -18.2vw -93.7vw;}
+    .model-content .content .content-label{width: 100%;height:6vw;float: left;line-height: 6vw;text-align: left;font-size: 3.4vw;color: #1890F9;box-sizing: border-box;}
+    .model-content .content .content-form{width: 100%;height: auto;float: left;margin-bottom: 2vw;}
+    .model-content .content .content-form .form-label{width: 100%;height: 6vw;float: left;line-height: 6vw;text-align: left;font-size: 3.4vw;color: #666666;font-weight: bold;}
+    .model-content .content .content-form .form-label span{color: #F94B4B;}
+    .model-content .content .content-form .form-input{width: 100%;height: 10vw;float: left;color: #F94B4B;box-sizing: border-box;padding: 0 3vw;border:1px solid #B8BFCA;}
+    .model-content .content .content-form .form-input input{width: 100%;height:9vw;float: left;line-height: 9vw;font-size: 3.4vw;color: #333333;border: none;font-style: normal;}
+    .model-content .content .content-form .form-input.code{ width: 54.8vw; }
+    .model-content .content .content-form .form-btn{width: 26vw;height: 10vw;float: left;margin-left: 20px;}
+    .model-content .content .content-form .form-btn a{display: block;width: 100%;height: 10vw;box-sizing: border-box;background: #FF5B00;line-height: 10vw;text-align: center;font-size: 3.4vw;color: #FFFFFF;}
+    .model-content .content .content-form .form-btn a.disabled{background: #B8BFCA;color: #FFFFFF;}
+    .model-content .content .content-form .form-text{ line-height: 8vw; font-size: 3.4vw;color: #333333;width: 100%;float: left; }
+    /* 快捷支付短信弹窗 */
+    .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: 100%;height: 100vw;background: #FFFFFF;position: fixed;left: 0;bottom: 0;z-index: 9998;}
+    .pay-alert-content .pay-alert .title{width: 100%;height: 48px;box-sizing: border-box;font-size: 14px;line-height: 48px;text-align: left;color: #333333;float: left;position: relative;border-bottom: 1px solid #EFEFEF;background-color: #F8F8F8;padding: 0 14px;}
+    .pay-alert-content .pay-alert .title .icon-close{width: 16px;height: 16px;display: block;position: absolute;right:12px;top: 12px;background: url("/img/base/icon.png")-315px 0 no-repeat;cursor: pointer;}
+    .pay-alert-content .pay-alert .content{margin: 4vw 0;width: 100%;height: auto;float: left;padding: 0 6vw;box-sizing: border-box;}
+    .pay-alert-content .pay-alert .content h1{text-align: left;font-size: 3.4vw;color: #333333;font-weight: normal;line-height: 6vw;}
+    .pay-alert-content .pay-alert .content p{text-align: left;font-size: 3.2vw;color: #666666;font-weight: normal;}
+    .pay-alert-content .pay-alert .button{width: 100%;height: 11vw;float: left;box-sizing: border-box;margin-top: 20vw;}
+    .pay-alert-content .pay-alert .button a{width: 30.2vw;height: 11vw;display: block;background: #FF5B00;font-size: 3.4vw;text-align: center;line-height: 11vw;color: #FFFFFF;margin: 0 auto;}
+    /*快捷支付获取短信验证码弹窗*/
+    .pay-alert-content .pay-alert .content-form{ width: 100%;height: 10vw;margin-top: 4vw; }
+    .pay-alert-content .pay-alert .content-form .input{ width: 54.6vw;height: 10vw; box-sizing: border-box;border: 1px solid #B8BFCA;border-radius: 2px;padding: 0 2vw;line-height: 10vw;font-size: 14px;color: #333333;float: left;}
+    .pay-alert-content .pay-alert .content-form .code-btn{ width: 27.4vw;height: 10vw;box-sizing: border-box;display: block;float: left;margin-left:4vw;line-height: 10vw;font-size: 14px;color: #FF5B00;text-align: center; border: 1px solid #FF5B00;float: left;}
+    .pay-alert-content .pay-alert .content-form .code-btn.disabled{ border-color: #9AA5B5;color: #9AA5B5; }
 }

src/main/resources/static/css/user-center/account/cards.css

@@ -10,22 +10,40 @@ li{list-style:none}
     .navLayout{min-height: 500px;}
     .cards-container{width: 100%;min-height: 500px;background-color: #FFFFFF;margin-top: 16px;box-sizing: border-box;padding: 24px 264px 24px 32px;}
     .cards-list{width: 312px;height: 112px;box-sizing: border-box;padding: 16px;border-radius: 4px;float: left;margin: 0 24px 24px 0;position: relative;}
+    .cards-list.ABC{background-image: linear-gradient(90deg, #19B8B2 0%, #009C96 100%);}
+    .cards-list.BCCB{background-image: linear-gradient(90deg, #4D8CD8 0%, #3C66C9 100%);}
+    .cards-list.BOC{background-image: linear-gradient(90deg, #FB6965 0%, #CE4343 100%);}
+    .cards-list.BOCO{background-image: linear-gradient(90deg, #7275BE 0%, #434492 100%);}
     .cards-list.CCB{background-image: linear-gradient(90deg, #4D8CD8 0%, #3C66C9 100%);}
+    .cards-list.CEB{background-image: linear-gradient(90deg, #B673CB 0%, #843C9A 100%);}
+    .cards-list.CGB{background-image: linear-gradient(90deg, #FB6965 0%, #CE4343 100%);}
+    .cards-list.CIB{background-image: linear-gradient(90deg, #457EBC 0%, #1B518A 100%);}
+    .cards-list.CMBC{background-image: linear-gradient(90deg, #3C9EC2 0%, #0584B4 100%);}
+    .cards-list.CMBCHINA{background-image: linear-gradient(90deg, #FB6965 0%, #CE4343 100%);}
+    .cards-list.ECITIC{background-image: linear-gradient(90deg, #ED796B 0%, #EF585E 100%);}
+    .cards-list.HXB{background-image: linear-gradient(90deg, #ED796B 0%, #EF585E 100%);}
     .cards-list.ICBC{background-image: linear-gradient(90deg, #ED796B 0%, #EF585E 100%);}
-    .cards-list.ABC{background-image: linear-gradient(90deg, #19B8B2 0%, #009C96 100%);}
+    .cards-list.PINGAN{background-image: linear-gradient(90deg, #F5A15A 0%, #E47F29 100%);}
+    .cards-list.POST{background-image: linear-gradient(90deg, #3EB97B 0%, #11874B 100%);}
+    .cards-list.SHB{background-image: linear-gradient(90deg, #6479C8 0%, #314693 100%);}
+    .cards-list.SPDB{background-image: linear-gradient(90deg, #4D8CD8 0%, #3C66C9 100%);}
     .cards-list .list-logo{width: 36px;height: 100%;float: left;}
     .cards-list .list-logo .logo{width: 36px;height: 36px;border-radius: 50%;padding: 6px;box-sizing: border-box;background-color: #ffffff;float: left;}
     .cards-list .list-logo .logo img{width: 24px;height: 24px;border-radius: 50%;display: block;}
     .cards-list-add{width: 312px;height: 112px;box-sizing: border-box;cursor: pointer; padding: 16px;border-radius: 4px;float: left;border: 1px dashed #B8BFCA;display: flex;align-items: center;justify-content: center;flex-direction: column;}
+    .cards-list-add .icon{width:24px ;height:24px;display: inline-block;float: left;margin-right: 10px;}
+    .cards-list-add .icon:before{width:24px ;height:24px;background-position: -236px -597px;}
+    .cards-list-add span{display: inline-block;line-height: 24px;font-size: 14px;color: #333;}
     .list-main{width: 228px;float: left;margin-left: 16px;}
     .list-main .list-main-name{width: 100%;height: 22px;line-height: 22px;font-size: 16px;color: #ffffff;}
     .list-main .list-main-tag{width: 100%;height: 20px;margin:4px 0 14px 0;}
     .list-main .list-main-tag .tag{display: inline-block;line-height: 20px;padding: 0 5px;border-radius: 2px;font-size: 12px;color: #ffffff;background: rgba(255, 255, 255, 0.2);float: left;}
     .list-main .list-main-code{width: 100%;height: 22px;line-height: 22px;font-size: 16px;color: #ffffff;}
     .list-btn{font-size: 14px;color: #ffffff;height: 22px;line-height: 22px;position: absolute;right: 16px;top: 16px;cursor: pointer;}
+    /*快捷支付弹窗*/
     .model-cards-popup{width:100%;height:100%;position:fixed;top:0;left:0;background-color:rgba(0,0,0,.4);z-index: 99999;}
     .model-cards-popup .model-content{width:710px;height:480px;padding: 16px 32px; position:absolute;top:0;left:0;right:0;bottom:0;background-color:#FFFFFF;margin:auto;border-radius:2px;box-sizing:border-box}
-    .model-content .title{width: 100%;height: 27px;box-sizing: border-box;float: left;position: relative;margin-bottom: 40px;}
+    .model-content .title{width: 100%;height: 27px;box-sizing: border-box;float: left;position: relative;margin-bottom: 24px;}
     .model-content .title .icon-close{width: 16px;height: 16px;display: block;position: absolute;right:0;top: 0;background: url("/img/base/icon.png")-315px 0 no-repeat;cursor: pointer;}
     .model-content .title .title-tabs{width: 100%;height: 27px;float: left;}
     .model-content .title .title-tabs a{width: 100px;height: 27px;float: left;margin-right: 64px;display: block;font-size: 16px;line-height: 24px;text-align: center;box-sizing: border-box;border-bottom: 3px solid #FFFFFF;color: #333333;}
@@ -35,30 +53,32 @@ li{list-style:none}
     .model-content .content .list img{width: 100%;height: 100%;display: block;}
     .model-content .content .list.current{border-color: #FF2A2A;}
     .model-content .content .list.current:before{content: '';width: 20px;height: 20px;position: absolute;bottom: 0;right: -2px;background: url("/img/base/icon.png")-210px -252px no-repeat;}
-    .model-content .button{width: 100%;height: 34px;float: left;margin-top: 24px;}
-    .model-content .button .button-btn{display: block;width: 100px;height: 34px;margin: 0 auto;box-sizing: border-box;border: 1px solid #FF5B00;background: #FF5B00;line-height: 34px;text-align: center;font-size: 14px;color: #FFFFFF;}
+    .model-content .button{width: 100%;height: 50px;float: left;margin-top: 0;}
+    .model-content .button .button-btn{display: block;width: 232px;height: 50px;margin: 0 auto;box-sizing: border-box;border: 1px solid #FF5B00;background: #FF5B00;line-height: 50px;text-align: center;font-size: 14px;color: #FFFFFF;}
     .model-content .button .button-btn.disabled{border: 1px solid #B8BFCA;background: #B8BFCA;color: #FFFFFF;}
-    .model-content .content .content-labe{width: 100%;height: 38px;line-height: 38px;float: left;font-size: 16px;color: #333333;font-weight: bold;}
+    .model-content .content .content-labe{width: 100%;height: 38px;line-height: 38px;float: left;font-size: 14px;color: #333333;}
+    .model-content .content .content-labe.sen{margin-bottom: 10px;}
     .model-content .content .content-labe p{float: left;}
-    .model-content .content .content-labe img{width: 120px;height: 38px;display: block;margin-left: 20px;float: left;border-radius: 2px;}
-    .model-content .content .content-labe .form-type{float: left; height:100%; box-sizing: border-box;padding:11px;margin-left: 30px;}
-    .model-content .content .content-labe .form-type .form-radio {height: 16px;margin-right: 40px;line-height: 16px;box-sizing: border-box;float: left;cursor: pointer;}
-    .model-content .content .content-labe .form-type .form-radio input{box-sizing: border-box;width: 100%;height: 16px;line-height: 16px;text-indent: 1.2em;background-color: #FFF;border: 1px solid #b8bfca;border-radius: 2px;display: none;}
-    .model-content .content .content-labe .form-type .form-radio .icon{display: block;font-style: normal;cursor: pointer;width: 16px;height: 16px;position: relative;overflow: hidden;float: left;}
+    .model-content .content .content-labe img{width: 120px;height: 38px;display: block;margin: 0 10px 0 10px;float: left;border-radius: 2px;}
+    .model-content .content .content-labe .form-type{float: left; height:100%; box-sizing: border-box;padding:10px 11px;}
+    .model-content .content .content-labe .form-type .form-radio {height: 18px;margin-right: 40px;line-height: 18px;box-sizing: border-box;float: left;cursor: pointer;}
+    .model-content .content .content-labe .form-type .form-radio input{box-sizing: border-box;width: 100%;height: 16px;line-height: 18px;text-indent: 1.2em;background-color: #FFF;border: 1px solid #b8bfca;border-radius: 2px;display: none;}
+    .model-content .content .content-labe .form-type .form-radio .icon{display: block;font-style: normal;cursor: pointer;width: 18px;height: 18px;position: relative;overflow: hidden;float: left;}
     .model-content .content .content-labe .form-type .form-radio span{font-size: 14px;color: #666666;font-weight: normal;margin-left: 5px;}
-    .model-content .content .content-labe .form-type .form-radio input:checked + i:before{ background-position: -210px -0px; }
-    .model-content .content .content-labe .form-type .form-radio .icon:before{position: absolute;left: 0;bottom: 0;width:16px ;height:16px;background-position: -236px -0px;}
+    .model-content .content .content-labe .form-type .form-radio input:checked + i:before{ background-position: -277px -596px; }
+    .model-content .content .content-labe .form-type .form-radio .icon:before{position: absolute;left: 0;bottom: 0;width:18px ;height:18px;background-position: -311px -596px;}
+    .model-content .content .content-labe .form-label{width:  92px;height: 32px;float: left;line-height: 32px;text-align: right;font-size: 14px;color: #666666;}
     .model-content .content .content-label{width: 100%;height:32px;float: left;line-height: 32px;text-align: left;font-size: 14px;color: #1890F9;padding-left: 44px;box-sizing: border-box;}
-    .model-content .content .content-form{width: 100%;height: 32px;float: left;margin-bottom: 24px;}
-    .model-content .content .content-form.none{margin-bottom: 10px;}
+    .model-content .content .content-form{width: 100%;height: 32px;float: left;margin-bottom: 10px;}
+    .model-content .content .content-form.none{margin-bottom: 0;}
     .model-content .content .content-form .form-label{width: 70px;height: 32px;float: left;line-height: 32px;text-align: right;font-size: 14px;color: #666666;}
     .model-content .content .content-form .form-label.sen{width: 92px;}
     .model-content .content .content-form .form-label span{color: #F94B4B;}
     .model-content .content .content-form .form-input{width: 500px;height: 32px;float: left;margin-left:10px;color: #F94B4B;box-sizing: border-box;padding: 0 13px;border:1px solid #B8BFCA;}
     .model-content .content .content-form .form-input input{width: 100%;height:30px;float: left;line-height: 30px;font-size: 14px;color: #333333;border: none;font-style: normal;}
     .model-content .content .content-form .form-input.code{ width: 350px; }
-    .model-content .content .content-form .form-btn{width: 110px;height: 32px;float: left;margin-left: 20px;}
-    .model-content .content .content-form .form-btn a{display: block;width: 100px;height: 32px;box-sizing: border-box;background: #FF5B00;line-height: 32px;text-align: center;font-size: 14px;color: #FFFFFF;}
+    .model-content .content .content-form .form-btn{width: 140px;height: 32px;float: left;margin-left: 20px;}
+    .model-content .content .content-form .form-btn a{display: block;width: 130px;height: 32px;box-sizing: border-box;background: #FF5B00;line-height: 32px;text-align: center;font-size: 14px;color: #FFFFFF;border-radius: 2px;}
     .model-content .content .content-form .form-btn a.disabled{background: #B8BFCA;color: #FFFFFF;}
     .model-content .content .content-form .form-text{ line-height: 32px; font-size: 14px;color: #333333; }
 
@@ -73,38 +93,76 @@ li{list-style:none}
 * 移动端
 */
 @media screen and (max-width:768px){
-    .beans-header{width:100%;height:28vw;box-sizing:border-box;padding:4vw 8vw;background:url("/img/account/icon-beans-bg.png")no-repeat;background-size: cover;}
-    .beans-header-l{float: left;line-height: 10vw;color: #FFFFFF;font-size:3.2vw;}
-    .beans-header-l span{display: inline-block;width: 100%;height: 10vw;float: left;}
-    .beans-header-l span.big{font-size: 7.2vw;font-weight: bold;}
-    .beans-header-r{float: right;line-height:20vw;}
-    .beans-header-r a{color: #FFFFFF;font-size: 3vw;}
-    .beans-header-r a .icon{width:4vw;height:4vw;display: block;float: right;margin-left: 1vw;}
-    .beans-header-r a .icon:before{width:4vw;height:4vw;background-position:-44.6vw -78.3vw;}
-    .beans-container{width: 100%;min-height: 50vw;background-color: #FFFFFF;margin-top:2vw;}
-    .beans-content-tabs{width: 100%;height: auto;box-sizing: border-box;padding:0 3.4vw;}
-    .beans-content-tabs .tabs-main{width: 100%;height:100%;border-bottom: 1px solid #e2e7ef;box-sizing: border-box;padding-top: 6.4vw;position: relative;float: left;}
-    .beans-content-tabs .time-template{width: 100%;height: 6.7vw;float: left;box-sizing: border-box;padding: 0 25vw;}
-    .beans-content-tabs .time-template .time-pre{width: 6.7vw;height: 6.7vw;float: left;display: block;}
-    .beans-content-tabs .time-template .time-pre .icon{width:6.7vw;height:6.7vw;display: block;}
-    .beans-content-tabs .time-template .time-pre .icon:before{width:6.7vw;height:6.7vw;background-position:-51.2vw -78.3vw}
-    .beans-content-tabs .time-template .time-text{width: 28.4vw;height: 6.7vw;float: left;line-height: 6.7vw;text-align: center;font-size: 3.4vw;color: #22272e;}
-    .beans-content-tabs .time-template .time-next{width: 6.7vw;height: 6.7vw;float: left;display: block;}
-    .beans-content-tabs .time-template .time-next .icon{width:6.7vw;height:6.7vw;display: block;}
-    .beans-content-tabs .time-template .time-next .icon:before{width:6.7vw;height:6.7vw;background-position:-60.4vw -78.3vw}
-    .beans-content-tabs .time-tabs{width:100%;height:9.6vw;float: left;margin-top: 3.6vw;}
-    .beans-content-tabs .time-tabs-cell{width: 33.3%;height: 100%;float: left;text-align: center;font-size: 4vw;color: #22272e;line-height: 9.6vw;display: block;}
-    .beans-content-tabs .time-tabs-cell.active{color: #FF5B00;font-weight: bold;}
-
-    .beans-content-list{width: 100%;height: auto;box-sizing: border-box;padding:3.4vw;float: left;}
-    .beans-content-list .beans-list-cell{width: 100%;height: 10.7vw;box-sizing: border-box;float: left;margin-bottom: 6.4vw;}
-    .beans-content-list .list-cell-left{width: 50%;height: 10.7vw;float: left;text-align: left;}
-    .beans-content-list p{width: 100%;height: 4.7vw;float: left;line-height:  4.7vw;font-size: 3.6vw;color: #22272e;margin-bottom: 2vw;}
-    .beans-content-list p.none{color: #627386;font-size: 3.2vw;line-height: 4.2vw;}
-    .beans-content-list p.blod{font-weight: bold;line-height: 4.2vw;}
-    .beans-content-list .list-cell-right{width: 50%;height:10.7vw;float: right;text-align: right;}
-    .empty{width: 100%;float: left;}
-    .empty img{width: 36vw;height: 36vw;}
-
+    body{background: #FFFFFF;}
+    .cards-container{width: 100%;min-height: 100vw;background-color: #FFFFFF;margin-top: 0;box-sizing: border-box;padding: 4.8vw;}
+    .cards-list{width: 100%;height:32.2vw;box-sizing: border-box;padding: 4vw;border-radius: 3.2vw;float: left;margin: 0 4.8vw 4.8vw 0;position: relative;}
+    .cards-list.ABC{background-image: linear-gradient(90deg, #19B8B2 0%, #009C96 100%);}
+    .cards-list.BCCB{background-image: linear-gradient(90deg, #4D8CD8 0%, #3C66C9 100%);}
+    .cards-list.BOC{background-image: linear-gradient(90deg, #FB6965 0%, #CE4343 100%);}
+    .cards-list.BOCO{background-image: linear-gradient(90deg, #7275BE 0%, #434492 100%);}
+    .cards-list.CCB{background-image: linear-gradient(90deg, #4D8CD8 0%, #3C66C9 100%);}
+    .cards-list.CEB{background-image: linear-gradient(90deg, #B673CB 0%, #843C9A 100%);}
+    .cards-list.CGB{background-image: linear-gradient(90deg, #FB6965 0%, #CE4343 100%);}
+    .cards-list.CIB{background-image: linear-gradient(90deg, #457EBC 0%, #1B518A 100%);}
+    .cards-list.CMBC{background-image: linear-gradient(90deg, #3C9EC2 0%, #0584B4 100%);}
+    .cards-list.CMBCHINA{background-image: linear-gradient(90deg, #FB6965 0%, #CE4343 100%);}
+    .cards-list.ECITIC{background-image: linear-gradient(90deg, #ED796B 0%, #EF585E 100%);}
+    .cards-list.HXB{background-image: linear-gradient(90deg, #ED796B 0%, #EF585E 100%);}
+    .cards-list.ICBC{background-image: linear-gradient(90deg, #ED796B 0%, #EF585E 100%);}
+    .cards-list.PINGAN{background-image: linear-gradient(90deg, #F5A15A 0%, #E47F29 100%);}
+    .cards-list.POST{background-image: linear-gradient(90deg, #3EB97B 0%, #11874B 100%);}
+    .cards-list.SHB{background-image: linear-gradient(90deg, #6479C8 0%, #314693 100%);}
+    .cards-list.SPDB{background-image: linear-gradient(90deg, #4D8CD8 0%, #3C66C9 100%);}
+    .cards-list .list-logo{width: 10.7vw;height: 100%;float: left;}
+    .cards-list .list-logo .logo{width: 10.7vw;height: 10.7vw;border-radius: 50%;padding: 1.2vw;box-sizing: border-box;background-color: #ffffff;float: left;}
+    .cards-list .list-logo .logo img{width: 8.3vw;height: 8.3vw;border-radius: 50%;display: block;}
+    .cards-list-add{width: 100%;height:32.2vw;box-sizing: border-box;cursor: pointer; padding: 4vw;border-radius: 3.2vw;float: left;border: 1px dashed #B8BFCA;display: flex;align-items: center;justify-content: center;flex-direction: column;}
+    .cards-list-add .icon{width:6.4vw ;height:6.4vw;display: inline-block;float: left;margin-right: 2vw;}
+    .cards-list-add .icon:before{width:6.4vw ;height:6.4vw;background-position:-0.5vw -93vw;}
+    .cards-list-add span{display: inline-block;line-height: 6.4vw;font-size: 3.4vw;color: #333;}
+    .list-main{width: 66.6vw;float: left;margin-left: 4.6vw;}
+    .list-main .list-main-name{width: 100%;height: 6vw;line-height: 6vw;font-size: 3.4vw;color: #ffffff;}
+    .list-main .list-main-tag{width: 100%;height: 6vw;margin:1vw 0 4vw 0;}
+    .list-main .list-main-tag .tag{display: inline-block;line-height: 6vw;padding: 0 1.5vw;border-radius: 2px;font-size: 3.2vw;color: #ffffff;background: rgba(255, 255, 255, 0.2);float: left;}
+    .list-main .list-main-code{width: 100%;height: 10vw;line-height: 10vw;font-size: 3.8vw;color: #ffffff;}
+    .list-btn{font-size: 3.4vw;color: #ffffff;height: 6vw;line-height: 6vw;position: absolute;right: 4vw;top: 4vw;cursor: pointer;}
+    .model-cards-popup{width:100%;height:100%;position:fixed;top:0;left:0;background-color:rgba(0,0,0,.4);z-index: 99999;}
+    .model-cards-popup .model-content{width:100%;height:150vw;padding: 3.2vw 6vw; position:absolute;left:0;bottom:0;background-color:#FFFFFF;border-radius:2px;box-sizing:border-box}
+    .model-content .title{width: 100%;height: 8vw;box-sizing: border-box;float: left;position: relative;margin-bottom: 6vw;}
+    .model-content .title .icon-close{width: 16px;height: 16px;display: block;position: absolute;right:0;top: 0;background: url("/img/base/icon.png")-315px 0 no-repeat;cursor: pointer;}
+    .model-content .title .title-tabs{width: 100%;height: 8vw;float: left;box-sizing: border-box;padding: 0 10vw}
+    .model-content .title .title-tabs a{width: 100px;height: 8vw;float: left;margin: 0 4vw;display: block;font-size: 3.4vw;line-height: 7.8vw;text-align: center;box-sizing: border-box;border-bottom: 3px solid #FFFFFF;color: #333333;}
+    .model-content .title .title-tabs a.current{ font-weight: bold;border-color: #FF5B00;}
+    .model-content .content{ width:100%;height:110vw;box-sizing:border-box;float:left;overflow:hidden;overflow-y:auto }
+    .model-content .content .list{width: 25.2vw;height: 8vw;display: block;margin:0 3.5vw 3vw 0;float: left;border: 1px solid #FFFFFF;position: relative;border-radius: 2px;}
+    .model-content .content .list img{width: 100%;height: 100%;display: block;}
+    .model-content .content .list.current{border-color: #FF2A2A;}
+    .model-content .content .list.current:before{content: '';width: 20px;height: 20px;position: absolute;bottom: 0;right: -2px;background: url("/img/base/icon.png")-210px -252px no-repeat;}
+    .model-content .button{width: 100%;height: 11vw;float: left;margin-top: 4.8vw;}
+    .model-content .button .button-btn{display: block;width: 30vw;height: 11vw;margin: 0 auto;box-sizing: border-box;border: 1px solid #FF5B00;background: #FF5B00;line-height: 11vw;text-align: center;font-size: 14px;color: #FFFFFF;}
+    .model-content .button .button-btn.disabled{border: 1px solid #B8BFCA;background: #B8BFCA;color: #FFFFFF;}
+    .model-content .content .content-labe{width: 100%;height: 8vw;line-height: 8vw;float: left;font-size: 3.4vw;color: #333333;font-weight: bold;}
+    .model-content .content .content-labe.sen{margin-top: 3vw;}
+    .model-content .content .content-labe p{float: left;}
+    .model-content .content .content-labe img{width: 25.2vw;height: 8vw;display: block;margin-left: 4vw;float: left;border-radius: 2px;}
+    .model-content .content .content-labe .form-type{float: left; height:100%; box-sizing: border-box;padding:2vw 0;margin-left: 3vw;}
+    .model-content .content .content-labe .form-type .form-radio {height:4vw;margin-right: 2vw;line-height: 4vw;box-sizing: border-box;float: left;cursor: pointer;}
+    .model-content .content .content-labe .form-type .form-radio input{box-sizing: border-box;width: 100%;height: 4vw;line-height: 4vw;text-indent: 1.2em;background-color: #FFF;border: 1px solid #b8bfca;border-radius: 2px;display: none;}
+    .model-content .content .content-labe .form-type .form-radio .icon{display: block;font-style: normal;cursor: pointer;width: 4vw;height: 4vw;position: relative;overflow: hidden;float: left;}
+    .model-content .content .content-labe .form-type .form-radio span{font-size: 14px;color: #666666;font-weight: normal;margin-left: 5px;}
+    .model-content .content .content-labe .form-type .form-radio input:checked + i:before{ background-position: -10.1vw -93.7vw; }
+    .model-content .content .content-labe .form-type .form-radio .icon:before{position: absolute;left: 0;bottom: 0;width:4vw ;height:4vw;background-position: -18.2vw -93.7vw;}
+    .model-content .content .content-label{width: 100%;height:6vw;float: left;line-height: 6vw;text-align: left;font-size: 3.4vw;color: #1890F9;box-sizing: border-box;}
+    .model-content .content .content-form{width: 100%;height: auto;float: left;margin-bottom: 2vw;}
+    .model-content .content .content-form .form-label{width: 100%;height: 6vw;float: left;line-height: 6vw;text-align: left;font-size: 3.4vw;color: #666666;font-weight: bold;}
+    .model-content .content .content-form .form-label span{color: #F94B4B;}
+    .model-content .content .content-form .form-input{width: 100%;height: 10vw;float: left;color: #F94B4B;box-sizing: border-box;padding: 0 3vw;border:1px solid #B8BFCA;}
+    .model-content .content .content-form .form-input input{width: 100%;height:9vw;float: left;line-height: 9vw;font-size: 3.4vw;color: #333333;border: none;font-style: normal;}
+    .model-content .content .content-form .form-input.code{ width: 54.8vw; }
+    .model-content .content .content-form .form-btn{width: 26vw;height: 10vw;float: left;margin-left: 20px;}
+    .model-content .content .content-form .form-btn a{display: block;width: 100%;height: 10vw;box-sizing: border-box;background: #FF5B00;line-height: 10vw;text-align: center;font-size: 3.4vw;color: #FFFFFF;}
+    .model-content .content .content-form .form-btn a.disabled{background: #B8BFCA;color: #FFFFFF;}
+    .model-content .content .content-form .form-text{ line-height: 8vw; font-size: 3.4vw;color: #333333;width: 100%;float: left; }
+    footer{display: none;}
 }
 

src/main/resources/static/js/common/serviceapi/pay.service.js

@@ -392,4 +392,88 @@ var PayApi = {
                 callback(res);
             });
         },
+        orderPayQuickBindCard: function(params, callback){ // 银行卡绑定信息提交
+            Http.AjaxService({
+                url:'/order/pay/quick/bind/card',
+                type:'POST',
+                data:params,
+                json:false,
+                isHost:true
+            })
+            .then(function(res){
+                callback(res);
+            });
+        },
+        orderPayQuickPay: function(params, callback){ // 银行卡绑定支付信息提交
+            Http.AjaxService({
+                url:'/order/pay/quick/pay',
+                type:'POST',
+                data:params,
+                json:false,
+                isHost:true
+            })
+            .then(function(res){
+                callback(res);
+            });
+        },
+        orderPayQuickBindCode: function(params, callback){ // 银行卡绑定支付信息校验
+            Http.AjaxService({
+                url:'/order/pay/quick/bind/code',
+                type:'GET',
+                data:params,
+                json:false,
+                isHost:true
+            })
+            .then(function(res){
+                callback(res);
+            });
+        },
+        orderPayUnboundCard: function(params, callback){ // 银行卡绑定解除绑定
+            Http.AjaxService({
+                url:'/order/pay/quick/unbound/card',
+                type:'GET',
+                data:params,
+                json:false,
+                isHost:true
+            })
+            .then(function(res){
+                callback(res);
+            });
+        },
+        userClubBanks: function(params, callback){ // 我的银行卡
+            Http.AjaxService({
+                url:'/user/club/banks',
+                type:'GET',
+                data:params,
+                json:false,
+                isHost:true
+            })
+            .then(function(res){
+                callback(res);
+            });
+        },
+        orderPayQuickUncodeInfos: function(params, callback){ // 免密银行信息
+            Http.AjaxService({
+                url:'/order/pay/quick/uncode/infos',
+                type:'GET',
+                data:params,
+                json:false,
+                isHost:true
+            })
+            .then(function(res){
+                callback(res);
+            });
+        },
+        orderPayQuickBankInfos: function(params, callback){ // 免密银行信息
+            Http.AjaxService({
+                url:'/order/pay/quick/bank/infos',
+                type:'GET',
+                data:params,
+                json:false,
+                isHost:true
+            })
+            .then(function(res){
+                callback(res);
+            });
+        },
 };

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

@@ -3,7 +3,7 @@
  */
 var payContainer = new Vue({
     el:"#payContainer",
-    mixins: [hlbPayMixin,cmSysVitaMixins],
+    mixins: [cardsMixns,hlbPayMixin,cmSysVitaMixins],
     data: {
         isSubMitStatus:false,
         payInfo:{
@@ -37,7 +37,6 @@ var payContainer = new Vue({
         paymentIimit:50000,
         paymentIimitText:'',
         discernReceiptList:[],//支付记录列表
-        tabIndex:0,//支付方式 0 移动支付 1网银支付 2线下转账
         mbOrderId:'',//支付订单ID
         bigPayInfo:{},// 银联转账信息
         BankUserType:1,
@@ -56,14 +55,15 @@ var payContainer = new Vue({
         weChatFlag: false, // 微信支付开关
         aliPayFlag: false, // 支付宝支付开关
         svipPayFlag: false, // 是否支付开通超级会员
-        payStatusText:'使用任何一种线上支付方式支付全部金额后，供应商会在24小时后发货（周末、节假日顺延）。若着急发货，可以选择使用线下转账进行付款。',
+        payStatusText:'支付全部金额后，供应商会在24小时后发货，周末、节假日顺延。',
         productID:'',//发布商品的ID
         comboInfo: null, //选中的svip套餐信息
         vipRecordId: undefined,
         couponRecordId:undefined,
         couponId:undefined,
         userId:0,
-        orderId:0
+        orderId:0,
+        list: [],// 快捷支付我的银行
     },
     filters: {
         NumFormat:function(value) {
@@ -149,6 +149,7 @@ var payContainer = new Vue({
             var _self = this;
             PayApi.PayGetBankCode({},function(response){
                 if(response.code == 0){
+                    _self.bankList = response.data.B2B;
                     _self.bankListB2BData = response.data.B2B;
                     _self.bankListB2CData = response.data.B2C;
                 }else{
@@ -231,42 +232,53 @@ var payContainer = new Vue({
                 }
             }
         },
-        PaySubmitFn:function(){//点击网银支付方式
-            var _self = this;
-            if(_self.isPaySwitch && _self.pageType === '2'){
+        PaySubmitFn(){//点击网银支付方式
+            if(this.isPaySwitch && this.pageType === '2'){
                 CAIMEI.dialog('支付系统遇到点小问题，请稍后重试', false);
                 return;
             }
-            if(_self.pageType === '3'){// 网银支付优惠券
-                if(_self.payInfo.payBankNum == ''){
+            if(this.pageType === '3'){// 网银支付优惠券
+                if(this.payInfo.payBankNum == ''){
                     CAIMEI.dialog('请选择银行！');
                     return;
                 }
-                _self.hlb_PayCouponUnionPayFn();
+                this.hlb_PayCouponUnionPayFn();
             }else{
-                if(_self.payInfo.payBankNum == ''){
+                if(this.payInfo.payBankNum == ''){
                     CAIMEI.dialog('请选择银行！');
                     return;
                 }
-                if(_self.payAmount <= 10){
+                if(this.payAmount <= 10){
                     CAIMEI.dialog('网银支付的金额必须大于￥10.00');
                     return;
                 }
-                if( _self.orderFlag == 1 && _self.mobileTabIndex === 2){
-                    if(_self.payAmount != _self.payableAmount){
+                if( this.orderFlag == 1 && this.mobileTabIndex === 2){
+                    if(this.payAmount != this.payableAmount){
                         CAIMEI.Alert('企业网银支付每次收取的手续费较高，建议一次性全额付款。','确定',false);
                         return;
                     }
                 }
-                if(_self.pageType === '1'){// 二手
-                    _self.hlb_PayOrdersecondUnion();
+                if(this.pageType === '1'){// 二手
+                    this.hlb_PayOrdersecondUnion();
                 } else if (_self.pageType === '2') { // 会员
-                    _self.hlb_PayVipPcMallPay();
+                    this.hlb_PayVipPcMallPay();
                 } else {// 正常订单
-                    _self.hlb_PayOrderPcMallPay();
+                    this.hlb_PayOrderPcMallPay();
                 }
             }
         },
+        handleQuickPay(){
+            //快捷支付
+            if(this.pageType === '1'){// 二手
+                this.orderPayQuickPay();
+            } else if (this.pageType === '2') { // 会员
+                this.orderPayQuickPay();
+            } else if (this.pageType === '3') { // 优惠券
+                this.orderPayQuickPay();
+            } else {// 正常订单
+                this.orderPayQuickPay();
+            }
+        },
         PayCouponMiniPayFn:function () {  // 移动支付购买优惠券
             var _self = this;
             if(_self.payInfo.payBankNum == "WEIXIN"){
@@ -310,21 +322,21 @@ var payContainer = new Vue({
             }
         },
         checkMobilePay:function(index,bankNum){//选择移动支付方式
-            var _self = this;
-            _self.mobileTabIndex = index;
-            _self.payInfo.payBankNum = bankNum;
+            this.current = '';
+            this.mobileTabIndex = index;
+            this.payInfo.payBankNum = bankNum;
             switch (index) {
                 case 2:// 企业网银
-                    _self.bankTabIndex = 0
-                    _self.payInfo.payType = '1';
-                    _self.payInfo.payUserType = 'B2B';
-                    _self.payInfo.payBankNum = _self.bankListB2BData[0].b2B;
+                    this.bankTabIndex = 0
+                    this.payInfo.payType = '1';
+                    this.payInfo.payUserType = 'B2B';
+                    this.payInfo.payBankNum = this.bankListB2BData[0].b2B;
                     break;
                 case 3:// 个人网银
-                    _self.bankTabIndex = 0
-                    _self.payInfo.payType = '2';
-                    _self.payInfo.payUserType = 'B2C';
-                    _self.payInfo.payBankNum = _self.bankListB2CData[0].b2C;
+                    this.bankTabIndex = 0
+                    this.payInfo.payType = '2';
+                    this.payInfo.payUserType = 'B2C';
+                    this.payInfo.payBankNum = this.bankListB2CData[0].b2C;
                     break;
             }
         },
@@ -457,29 +469,27 @@ var payContainer = new Vue({
                 window.location.href = '/pay/success.html?pageType=www&type='+state+'&payAmount='+_self.payAmount;
             }
         },
-        payTypeText:function(state){//处理支付记录文字
-            var stateText = '',
-                stateTextObject={
-                    12:'网银',
-                    13:'微信支付',
-                    14:'支付宝',
-                    15:'微信支付',
-                    16:'余额抵扣',
-                    20:'大额银联转账',
-                };
-            Object.keys(stateTextObject).forEach(function(key) {
-                if(key == state){
-                    stateText = stateTextObject[key]
-                }
-            });
-            return stateText;
+        payTypeText(record) {
+            //处理支付记录文字
+            const map = {
+                12: '企业网银',
+                13: '微信支付',
+                14: '支付宝',
+                15: '微信支付',
+                16: '余额抵扣',
+            }
+            if(record.payType === 28 || record.payType === 29 ){
+                return record.quickPayStr
+            }else{
+                return map[record.payType]
+            }
         },
         toFixedFn:function(text){//处理小数点后两位数
             return Number(text).toFixed(2);
         },
     },
     mounted: function () {
-        var _self = this;
+        const _self = this;
         // 判断当前支付是订单支付
         this.pageType = CAIMEI.getUrlParam('pageType');
         if (this.pageType === '1') {//二手
@@ -491,7 +501,8 @@ var payContainer = new Vue({
         } else if (this.pageType === '2') { // 支付会员
             this.svipPayFlag = true;
             this.orderFlag = 0;
-            this.vipRecordId = parseInt(CAIMEI.getUrlParam('vipRecordId'));
+            this.vipRecordId = this.params.vipRecordId = parseInt(CAIMEI.getUrlParam('vipRecordId'));
+            this.params.quickPayFlag = 2;
             this.PayOrderOnLineSwitch();
             // 从本地获取选中的svip套餐信息后删除本地信息
             this.comboInfo = JSON.parse(CAIMEI.Storage.getItem('comboInfo'));
@@ -500,18 +511,23 @@ var payContainer = new Vue({
             this.payAmount = this.toFixedFn(this.comboInfo.price);
             // 获取银行列表
             this.getBankList();
+            this.userClubBanks()
         } else if(this.pageType === '3') {// 支付优惠券
             this.orderFlag = 0;
-            this.couponId = parseInt(CAIMEI.getUrlParam('couponId'));
-            this.couponRecordId = parseInt(CAIMEI.getUrlParam('couponRecordId'));
+            this.couponId = this.params.couponId = parseInt(CAIMEI.getUrlParam('couponId'));
+            this.couponRecordId = this.params.couponRecordId = parseInt(CAIMEI.getUrlParam('couponRecordId'));
+            this.params.quickPayFlag = 4;
             this.initCouponDetail(this.couponId);
             this.PayOrderOnLineSwitch();
             this.getBankList();
+            this.userClubBanks()
         }else{
             this.orderFlag = 1;
-            this.payInfo.shopOrderId = CAIMEI.getUrlParam('shopOrderId');
+            this.payInfo.shopOrderId =  this.params.shopOrderId = CAIMEI.getUrlParam('shopOrderId');
+            this.params.quickPayFlag = 1;
             // 获取银行列表
             this.getBankList();
+            this.userClubBanks()
             //正常订单初始化
             this.infoPayOrderCheckoutCounter();
         }

src/main/resources/static/js/pay/mixin/cardsMixns.js

@@ -1,28 +1,43 @@
 // 快捷支付银行卡
+const defaultParams = {
+    userId: globalUserData.userId, //机构UserId
+    quickPayBankNumber: '', //快捷支付用户银行卡号/信用卡号
+    quickPayMobile: '', //快捷支付银行卡绑定手机号
+    quickPayBankExpireTime: '', //快捷支付信用卡过期时间,只包含年月，格式yy-MM
+    quickPayUserName: '', //快捷支付用户姓名
+    idCard: '', //身份证号
+    cvvCode: '' //信用卡安全码
+}
+const defaultCodeParams = {
+    orderId:'',
+    infoId:'',
+    bindCode:'',
+    flag:2,// 1绑卡 2 付款
+}
 var cardsMixns = function () {
     return {
         data() {
             return {
+                cardtype:'1',
                 maxLen:24,
-                isPopup:true,
-                tabsIndex:0,
+                isPopup:false,
+                current:'',
+                tabsIndex:1,
                 bankIndex:'',
                 isCardStep:0,
                 isHassCardStep:0,
                 isShowSupport:false,
                 checkedCards:{},
-                params: {
-                    name: '',
-                    cardNumber: '',
-                    cardtype:0,
-                    mobile:'',
-                    code:''
-                },
+                params: Object.assign({}, defaultParams),
+                codeParams:Object.assign({}, defaultCodeParams),
                 showCardNumber:'',
                 mobilCount:0,
                 mobileCodeText:'获取验证码',
                 mobilTime:null,
                 isMobileDisabled:false,
+                isPayCodeAlert:false,
+                errorMsg:'',
+                isErrorMsg:false
             }
         },
         filters: {
@@ -30,23 +45,46 @@ var cardsMixns = function () {
                 // 银行卡只显示最后四位数 ,隐藏信息用*代替
                 return  valus.replace(/^(\d{4})\d+(\d{4})$/,"$1****$2")
             },
+            bankNumeberFilter(value){
+                return value.substring(value.length-4,value.length)
+            }
         },
         computed: {
             disabled() {
                 return !(this.bankIndex === 0 || this.bankIndex > 0);
             },
             disabled1() {
-                return !(this.params.name && this.params.cardNumber.length > 18);
+                return !(this.params.quickPayUserName && this.params.quickPayBankNumber.length > 18);
             },
             disabled2() {
-                return this.params.cardNumber.length <= 12;
+                return this.params.quickPayBankNumber.length <= 12;
             },
             disabled3() {
-                return !(this.params.code && this.params.code.length === 6 );
+                if (this.cardtype === '1') {
+                    return !(
+                        this.params.quickPayUserName !== '' &&
+                        this.params.idCard !== '' &&
+                        this.params.quickPayMobile !== ''
+                    )
+                } else {
+                    return !(
+                        this.params.quickPayUserName !== '' &&
+                        this.params.idCard !== '' &&
+                        this.params.quickPayMobile !== '' &&
+                        this.params.quickPayBankExpireTime !== '' &&
+                        this.params.cvvCode !== ''
+                    )
+                }
+            },
+            disabled4() {
+                return !(this.codeParams.bindCode && this.codeParams.bindCode.length === 6 );
+            },
+            phoneNumbe() {
+                // 手机号仅显示前三位及后四位数字，隐藏信息用*代替
+                return this.params.quickPayMobile.substr(0, 3) + '****' + this.params.quickPayMobile.substring(7)
             },
         },
         methods: {
-
             handleCardStep(){
                 // 选择银行下一步
                 if(this.disabled){ return }
@@ -54,11 +92,19 @@ var cardsMixns = function () {
             },
             handleHassCardStep(){
                 // 选择银行下一步
-                if(this.disabled){ return }
+                if(this.disabled2){ return }
                 this.isHassCardStep = 1
             },
-            handleConfirm(){
-                //确认信息并跳转银行页面
+            handleGetBindCode(){
+                //获取短信验证码
+                const reg = /^1\d{10}$/;
+                if(this.isMobileDisabled){ return }
+                if(!reg.test(this.params.quickPayMobile)){
+                    CAIMEI.dialog('请输入正确的手机号');
+                    return
+                }
+                this.isPopup = false;
+                this.orderPayQuickPay();
             },
             handleTabsClick(index){
                 // 切换
@@ -67,7 +113,8 @@ var cardsMixns = function () {
             },
             handleShowPopup(){
                 //显示添加银行卡弹窗
-                this.getBankList();
+                this.orderPayQuickBankInfos();
+                this.handeleInitParams()
                 this.isPopup = true
             },
             hanldeChooseBanks(cards,index){
@@ -83,9 +130,128 @@ var cardsMixns = function () {
                 this.isCardStep = 0
                 this.isPopup = false
             },
+            handleCodeInput(e){
+                // 隐藏
+                this.isErrorMsg = false
+            },
             handleInput(e) {
-                this.params.cardNumber = e.target.value
                 this.showCardNumber = this.formatAccNo(e.target.value)
+                this.params.quickPayBankNumber = this.showCardNumber.split(/[\t\r\f\n\s]*/g).join('')
+            },
+            handleCloseCodeAlert(){
+                //关闭获取短信验证弹窗
+                this.isPayCodeAlert = false
+            },
+            handeleInitParams(){
+                // 初始化快捷支付信息
+                this.params = Object.assign({}, defaultParams);
+                this.codeParams= Object.assign({}, defaultCodeParams);
+                if (this.pageType === '2') { // 支付会员
+                    this.params.quickPayFlag = 2;
+                    this.params.vipRecordId = this.vipRecordId ;
+                } else if(this.pageType === '3') {// 支付优惠券
+                    this.params.source = 2;
+                    this.params.quickPayFlag = 4;
+                    this.params.couponId = this.couponId ;
+                    this.params.couponRecordId = this.couponRecordId ;
+                }else{ // 订单
+                    this.params.quickPayFlag = 1;
+                    this.params.shopOrderId = this.payInfo.shopOrderId
+                }
+            },
+            handleCheckQuickCards(index,cards){
+                this.mobileTabIndex = 4
+                this.current = index
+                this.params = {...this.params,...cards}
+            },
+            orderPayQuickPay() {
+                //绑卡支付
+                const _self = this;
+                this.params.payAmount = this.payAmount;
+                PayApi.orderPayQuickPay(this.params,function(response){
+                    if(response.code === 0){
+                        _self.codeParams = {..._self.codeParams ,...response.data};
+                        console.log('_self.codeParams',_self.codeParams)
+                        _self.handleCodeTime()
+                        setTimeout(() => {
+                            _self.isPayCodeAlert = true
+                        }, 500)
+                    }else{
+                        console.log('获取绑卡验证码失败')
+                    }
+                })
+            },
+            handleCodeTime() {
+                // 倒计时
+                const _self = this;
+                const TIME_COUNT = 60;
+                if (!_self.mobilTime) {
+                    _self.mobilCount = TIME_COUNT;
+                    _self.isMobileDisabled = true;
+                    _self.mobilTime = setInterval(function(){
+                        if (_self.mobilCount > 1 && _self.mobilCount <= TIME_COUNT) {
+                            _self.mobilCount--;
+                            _self.mobileCodeText = _self.mobilCount +'秒后重发';
+                        } else {
+                            _self.isMobileDisabled = false;
+                            clearInterval(_self.mobilTime);
+                            _self.mobilTime = null;
+                            _self.mobileCodeText = '获取验证码';
+                        }
+                    },1000)
+                }
+            },
+            handleConfirm(){
+                //校验并绑定
+                const _self = this;
+                if(this.disabled4){ return }
+                PayApi.orderPayQuickBindCode(this.codeParams,function(response){
+                    if(response.code === 0){
+                        CAIMEI.dialog('绑卡成功');
+                        setTimeout(() => {
+                            _self.isPopup = false;
+                        }, 2000)
+                    }else{
+                        console.log('绑卡失败')
+                    }
+                })
+            },
+            handleCheckQuickCode(){
+                // 校验并支付
+                const _self = this;
+                PayApi.orderPayQuickBindCode(this.codeParams,function(response){
+                    if(response.code === 0){
+                        _self.isPayCodeAlert = false
+                        _self.windowLocationHref('success');
+                    }else if(response.code === -2){
+                        _self.isErrorMsg = true
+                        _self.errorMsg = response.msg
+                    }else{
+                        _self.isPayCodeAlert = false
+                        CAIMEI.dialog(response.msg);
+                    }
+                })
+            },
+            orderPayQuickBankInfos:function () {// 获取网银支付银行列表
+                const _self = this;
+                PayApi.orderPayQuickBankInfos({},function(response){
+                    if(response.code === 0){
+                        _self.bankList = response.data;
+                    }else{
+                        console.log('获取网银支付银行列表异常')
+                    }
+                })
+            },
+            userClubBanks:function(){//查询银行卡列表
+                const _self = this;
+                PayApi.userClubBanks({ userId : this.params.userId  },function (response) {
+                    if(response.code === 0){
+                        _self.list = response.data;
+                        _self.isRequset = false;
+                    }else{
+                        CAIMEI.Alert(response.msg, '确定', false);
+                    }
+                })
             },
             formatAccNo(value) {
                 const newValue = value.replace(/([^0-9])/g, '') // 只允许输入数字
@@ -99,7 +265,7 @@ var cardsMixns = function () {
             getOriginValue() {
                 //获取input的原始值
                 return this.showCardNumber.split(' ').join('');
-            }
+            },
         }
     }
 }();

src/main/resources/static/js/pay/mixin/hlb_payMixin.js

@@ -3,7 +3,7 @@
 var hlbPayMixin = function () {// 合利宝支付渠道
 	return {
 		methods: {
-			hlb_PayOrderPcMallPay:function(){// 正常订单网银支付通道
+			hlb_PayOrderPcMallPay(){// 正常订单网银支付通道
 				var _this = this;
 				var params = {//正常订单
 					payType:'YL',
@@ -34,7 +34,7 @@ var hlbPayMixin = function () {// 合利宝支付渠道
 					}
 				})
 			},
-			hlb_PayOrderPcScanAliPay:function (){// 正常订单支付宝通道
+			hlb_PayOrderPcScanAliPay (){// 正常订单支付宝通道
 				var _this = this;
 				var params = {//正常订单
 					payType:'ZFBEWM',
@@ -70,7 +70,7 @@ var hlbPayMixin = function () {// 合利宝支付渠道
 					}
 				})
 			},
-			hlb_PayOrderMiniWxPay:function (){// 正常订单微信支付通道
+			hlb_PayOrderMiniWxPay (){// 正常订单微信支付通道
 				console.log('正常订单微信支付通道')
 				var _this = this;
 				if(!isPC){
@@ -93,7 +93,7 @@ var hlbPayMixin = function () {// 合利宝支付渠道
 					_this.isPayAlert = true;
 				}
 			},
-			hlb_PayCouponUnionPayFn:function () { // 网银支付购买优惠券
+			hlb_PayCouponUnionPayFn () { // 网银支付购买优惠券
 				console.log('网银支付购买优惠券');
 				var _this = this;
 				var params = {
@@ -124,7 +124,7 @@ var hlbPayMixin = function () {// 合利宝支付渠道
 					}
 				});
 			},
-			hlb_PayCouponMiniWxPay: function(){ // 微信支付优惠券
+			hlb_PayCouponMiniWxPay(){ // 微信支付优惠券
 				console.log('微信支付优惠券');
 				if (!isPC) {
 					var orderInfo = {//普通订单微信二维码参数
@@ -150,7 +150,7 @@ var hlbPayMixin = function () {// 合利宝支付渠道
 					this.isPayAlert = true;
 				}
 			},
-			hlb_PayCouponAliPay: function(){ // 支付宝支付优惠券
+			hlb_PayCouponAliPay(){ // 支付宝支付优惠券
 				var _this = this;
 				console.log('支付宝支付优惠券');
 				var params = {
@@ -187,7 +187,7 @@ var hlbPayMixin = function () {// 合利宝支付渠道
 					}
 				});
 			},
-			hlb_PayVipPcMallPay: function(){// 超级会员网银支付通道
+			hlb_PayVipPcMallPay(){// 超级会员网银支付通道
 				var _this = this;
 				var params = {
 					payType:'YL',
@@ -215,7 +215,7 @@ var hlbPayMixin = function () {// 合利宝支付渠道
 					}
 				});
 			},
-			hlb_PayVipScanAliPay: function(){ // 超级会员支付宝通道
+			hlb_PayVipScanAliPay(){ // 超级会员支付宝通道
 				var _this = this;
 				var params = {
 					payType:'ZFBEWM',
@@ -250,7 +250,7 @@ var hlbPayMixin = function () {// 合利宝支付渠道
 					}
 				});
 			},
-			hlb_PayVipMiniWxPay: function(){ // 超级会员微信支付通道
+			hlb_PayVipMiniWxPay(){ // 超级会员微信支付通道
 				var _this = this;
 				if (!isPC) {
 					var orderInfo = {//普通订单微信二维码参数
@@ -274,7 +274,7 @@ var hlbPayMixin = function () {// 合利宝支付渠道
 					_this.isPayAlert = true;
 				}
 			},
-			hlb_PayOrdersecondUnion:function (){// 二手发布网银支付通道
+			hlb_PayOrdersecondUnion (){// 二手发布网银支付通道
 				var _this = this;
 				var params = {//二手
 					payType:'YL',
@@ -302,7 +302,7 @@ var hlbPayMixin = function () {// 合利宝支付渠道
 					}
 				})
 			},
-			hlb_PayOrdersecondScanAliPay:function (){// 二手发布支付宝通道
+			hlb_PayOrdersecondScanAliPay (){// 二手发布支付宝通道
 				var _this = this;
 				var params = {//二手
 					payType:'ZFBEWM',
@@ -331,7 +331,7 @@ var hlbPayMixin = function () {// 合利宝支付渠道
 					}
 				})
 			},
-			hlb_PaySecondMiniWxPay:function (){// 二手发布微信支付通道
+			hlb_PaySecondMiniWxPay (){// 二手发布微信支付通道
 				var _this = this;
 				if(!isPC){// h5跳 H5支付页
 					var orderInfo = {//二手微信二维码参数
@@ -353,7 +353,7 @@ var hlbPayMixin = function () {// 合利宝支付渠道
 					_this.isPayAlert = true;
 				}
 			},
-			hlb_CopyLinkPaySubmitFn:function (params) {
+			hlb_CopyLinkPaySubmitFn (params) {
 				var _this = this;
 				console.log('合利宝支付链接');
 				PayApi.PayOrderPayLink(params,function(response){
@@ -367,7 +367,7 @@ var hlbPayMixin = function () {// 合利宝支付渠道
 						CAIMEI.dialog('复制成功');
 					}
 				)
-			}
+			},
 		}
 	};
 }();

src/main/resources/static/js/user-center/account/cards.js

@@ -6,80 +6,33 @@ var cardsPage = new Vue({
         isRequset:true,
         listQuery:{
             userId: 0,
-            year:'',
-            month:'',
-            type:0,
-            pageNum:1,
-            pageSize:10
         },
-        list: [
-            {
-                type: 1,
-                flag: 0,
-                B2B: 'CCB',
-                name: '建设银行',
-                code:'45454545454521212'
-            },
-            {
-                type: 1,
-                flag: 0,
-                B2B: 'ICBC',
-                name: '工商银行',
-                code:'45454545454521212'
-            },
-            {
-                type: 0,
-                flag: 0,
-                B2B: 'ABC',
-                name: '农业银行',
-                code:'45454545454521212'
-            }
-        ],
+        list: [],
         bankList:[],
         listRecord: 0,
         pageInput: '1'
     },
 
     methods: {
-        getBankList:function () {// 获取网银支付银行列表
-            var _self = this;
-            PayApi.PayGetBankCode({},function(response){
-                if(response.code == 0){
-                    _self.bankList = response.data.B2B;
-                }else{
-                    console.log('获取网银支付银行列表异常')
-                }
-            })
-        },
-        GetQueryBeansListData:function(){//查询订单列表
-            var _self = this;
-            UserApi.GetUserClubBeansList(_self.listQuery,function (response) {
-                if(response.code == 0){
-                    var data = response.data;
-                    var pageInfo = data.pageInfo;
-                    _self.userBeans = data.userBeans;
-                    if( pageInfo.list && pageInfo.list.length>0) {
-                        _self.beansList = [];
-                        _self.beansList = pageInfo.list;
-                        _self.listRecord = pageInfo.total;
-                    }else{
-                        _self.beansList = [];
-                        _self.beansList = pageInfo.list;
-                        _self.listRecord = pageInfo.total;
-                    }
+        GetUserClubBanks:function(){//查询银行卡列表
+            const _self = this;
+            PayApi.userClubBanks(this.listQuery,function (response) {
+                if(response.code === 0){
+                    _self.list = response.data;
                     _self.isRequset = false;
                 }else{
                     CAIMEI.Alert(response.msg, '确定', false);
                 }
             })
         },
-        handleUnbind(){
+        handleUnbind(card){
             //解绑
+            const _self = this;
             CAIMEI.Modal('解绑后此卡需要重新绑定才能继续使用','保持绑定','继续解绑',function () {
-                OrderApi.AffirmOrderOrder({orderId:orderId},function(response){
-                    if(response.code == 0){
-                        CAIMEI.dialog('确认成功',true,function () {
-                            _self.GetQueryOrderListData();
+                PayApi.orderPayUnboundCard({cardId:card.id},function(response){
+                    if(response.code === 0){
+                        CAIMEI.dialog('解绑成功',true,function () {
+                            _self.GetUserClubBanks();
                         });
                     }else{
                         CAIMEI.Alert(response.msg, '确定', false);
@@ -87,43 +40,11 @@ var cardsPage = new Vue({
                 })
             })
         },
-        handleLogo(value) {
-            const LogoMap = {
-                'CCB':'https://img2.baidu.com/it/u=4262210206,1883697020&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=501',
-                'ICBC':'https://www.weixinyunduan.com/ups/2016/01/309212/edf5a48e69afa569eb31a52fc36de450.jpg',
-                'ABC':'https://userfile.yksup.com/userdata/18039/img/brand-20170315232223_e0p18k.jpg'
-            }
-            return LogoMap[value]
-        },
-        handleClass(value) {
-            const styleMap = {
-                'CCB':'CCB',
-                'ICBC':'ICBC',
-                'ABC':'ABC'
-            }
-            return styleMap[value]
-        },
-        handleStyle(value) {
-            console.log('value',value)
-            const styleMap = {
-                'CCB':'linear-gradient(90deg, #4D8CD8 0%, #3C66C9 100%);',
-                'ICBC':'linear-gradient(90deg, #ED796B 0%, #EF585E 100%);',
-                'ABC':'linear-gradient(90deg, #19B8B2 0%, #009C96 100%);'
-            }
-            console.log('styleMap[value]',styleMap[value])
-            return styleMap[value]
-        },
     },
     mounted: function () {
-        var _self = this;
         if(globalUserData){
-            this.userId = globalUserData.userId;
-            this.listQuery.userId = this.userId;
-            var _Date = new Date();
-            this.listQuery.year = _Date.getFullYear();
-            this.listQuery.month = _Date.getMonth()+1;
-            this.GetQueryBeansListData();
-            this.getBankList();
+            this.listQuery.userId = globalUserData.userId;
+            this.GetUserClubBanks();
         }
     }
 });

src/main/resources/static/js/user-center/account/mixins/cardsMixns.js

@@ -0,0 +1,203 @@
+// 快捷支付银行卡
+const defaultParams = {
+    userId: globalUserData.userId, //机构UserId
+    quickPayBankNumber: '6217007200096308948', //快捷支付用户银行卡号/信用卡号
+    quickPayMobile: '13979770617', //快捷支付银行卡绑定手机号
+    quickPayBankExpireTime: '', //快捷支付信用卡过期时间,只包含年月，格式yy-MM
+    quickPayUserName: '郑景翼', //快捷支付用户姓名
+    idCard: '430527198906176613', //身份证号
+    cvvCode: '' //信用卡安全码
+}
+const defaultCodeParams = {
+    orderId:'',
+    infoId:'',
+    bindCode:'',
+    flag:1,// 1绑卡 2 付款
+}
+var cardsMixns = function () {
+    return {
+        data() {
+            return {
+                cardtype:1,
+                maxLen:24,
+                isPopup:false,
+                tabsIndex:1,
+                bankIndex:'',
+                isCardStep:0,
+                isHassCardStep:0,
+                isShowSupport:false,
+                checkedCards:{},
+                params: Object.assign({}, defaultParams),
+                codeParams:Object.assign({}, defaultCodeParams),
+                showCardNumber:'',
+                mobilCount:0,
+                mobileCodeText:'获取验证码',
+                mobilTime:null,
+                isMobileDisabled:false,
+            }
+        },
+        filters: {
+            cardsFormat(valus) {
+                // 银行卡只显示最后四位数 ,隐藏信息用*代替
+                return  valus.replace(/^(\d{4})\d+(\d{4})$/,"$1****$2")
+            },
+        },
+        computed: {
+            disabled() {
+                return !(this.bankIndex === 0 || this.bankIndex > 0);
+            },
+            disabled1() {
+                return !(this.params.quickPayUserName && this.params.quickPayBankNumber.length > 18);
+            },
+            disabled2() {
+                return this.params.quickPayBankNumber.length <= 12;
+            },
+            disabled3() {
+                return !(this.params.quickPayMobile.length >= 11)
+            },
+            disabled4() {
+                return !(this.codeParams.bindCode && this.codeParams.bindCode.length === 6 );
+            },
+        },
+        methods: {
+            handleCardStep(){
+                // 选择银行下一步
+                if(this.disabled){ return }
+                this.isCardStep = 1
+            },
+            handleHassCardStep(){
+                // 选择银行下一步
+                if(this.disabled2){ return }
+                this.isHassCardStep = 1
+            },
+            handleGetBindCode(){
+                //获取短信验证码
+                const reg = /^1\d{10}$/;
+                if(this.isMobileDisabled){ return }
+                if(!reg.test(this.params.quickPayMobile)){
+                    CAIMEI.dialog('请输入正确的手机号');
+                    return
+                }
+                this.orderPayQuickBindCard();
+            },
+            orderPayQuickBindCard() {
+                const _self = this;
+                //直接绑卡
+                PayApi.orderPayQuickBindCard(this.params,function(response){
+                    if(response.code === 0){
+                        _self.codeParams = {..._self.codeParams ,...response.data};
+                        console.log('_self.codeParams',_self.codeParams)
+                        const TIME_COUNT = 60;
+                        if (!_self.mobilTime) {
+                            _self.mobilCount = TIME_COUNT;
+                            _self.isMobileDisabled = true;
+                            _self.mobilTime = setInterval(function(){
+                                if (_self.mobilCount > 1 && _self.mobilCount <= TIME_COUNT) {
+                                    _self.mobilCount--;
+                                    _self.mobileCodeText = _self.mobilCount +'秒后重发';
+                                } else {
+                                    _self.isMobileDisabled = false;
+                                    clearInterval(_self.mobilTime);
+                                    _self.mobilTime = null;
+                                    _self.mobileCodeText = '获取验证码';
+                                }
+                            },1000)
+                        }
+                    }else{
+                        console.log('获取绑卡验证码失败')
+                    }
+                })
+            },
+            handleConfirm(){
+                const _self = this;
+                //校验并绑定
+                if(this.disabled4){ return }
+                PayApi.orderPayQuickBindCode(this.codeParams,function(response){
+                    if(response.code === 0){
+                        CAIMEI.dialog('绑卡成功');
+                        setTimeout(() => {
+                            _self.isPopup = false;
+                            _self.GetUserClubBanks();
+                        }, 2000)
+                    }else{
+                        console.log('绑卡失败')
+                    }
+                })
+            },
+            handleTabsClick(index){
+                // 切换
+                console.log('tabsIndex',index)
+                this.tabsIndex = index
+            },
+            handleShowPopup(){
+                //显示添加银行卡弹窗
+                this.orderPayQuickUncodeInfos();
+                this.params = Object.assign({}, defaultParams);
+                this.codeParams= Object.assign({}, defaultCodeParams);
+                this.isPopup = true
+            },
+            hanldeChooseBanks(cards,index){
+                //选择银行
+                this.bankIndex = index
+                this.checkedCards = cards
+                console.log('bank',cards)
+            },
+            handleCloseModel(){
+                //关闭窗口
+                this.tabsIndex = 0
+                this.bankIndex = ''
+                this.isCardStep = 0
+                this.isPopup = false
+            },
+            handleInput(e) {
+                this.showCardNumber = this.formatAccNo(e.target.value)
+                this.params.quickPayBankNumber = this.showCardNumber.split(/[\t\r\f\n\s]*/g).join('')
+            },
+            formatAccNo(value) {
+                const newValue = value.replace(/([^0-9])/g, '') // 只允许输入数字
+                const formatValue = newValue.replace(/(\d{4})(?=\d)/g, '$1 ') // 每4个数字后面加一个空格
+                const inputLen = this.getOriginValue().length
+                if (inputLen > this.maxLen) {
+                    return
+                }
+                return formatValue
+            },
+            getOriginValue() {
+                //获取input的原始值
+                return this.showCardNumber.split(' ').join('');
+            },
+            orderPayQuickUncodeInfos:function () {// 获取网银支付银行列表
+                var _self = this;
+                PayApi.orderPayQuickUncodeInfos({},function(response){
+                    if(response.code === 0){
+                        _self.bankList = response.data;
+                    }else{
+                        console.log('获取网银支付银行列表异常')
+                    }
+                })
+            },
+            handleClass(value) {
+                const styleMap = {
+                    'ABC':'ABC',
+                    'BCCB':'BCCB',
+                    'BOC':'BOC',
+                    'BOCO':'BOCO',
+                    'CCB':'CCB',
+                    'CEB':'CEB',
+                    'CGB':'CGB',
+                    'CIB':'CIB',
+                    'CMBC':'CMBC',
+                    'CMBCHINA':'CMBCHINA',
+                    'ECITIC':'ECITIC',
+                    'HXB':'HXB',
+                    'ICBC':'ICBC',
+                    'PINGAN':'PINGAN',
+                    'POST':'POST',
+                    'SHB':'SHB',
+                    'SPDB':'SPDB'
+                }
+                return styleMap[value]
+            }
+        }
+    }
+}();

src/main/resources/static/js/user-center/dashboard.js

@@ -21,6 +21,7 @@ var helpSuggestion = new Vue({
         bgImagePath:'',// 根据类型显示图片标记
         beanNumber:100,
         couponNum:0,// 优惠券数量
+        bankNum:0,// 银行卡数量
         beansType:1
     },
 
@@ -72,6 +73,7 @@ var helpSuggestion = new Vue({
                     _self.productList = data.homePageAdvertiseList;
                     _self.newsList = data.homePageInfoList;
                     _self.couponNum = data.couponNum;
+                    _self.bankNum = data.bankNum;
                     _self.isRequset = false;
                 }else{
                     CAIMEI.Alert(response.msg, '确定', false);

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

@@ -86,24 +86,29 @@
                     <div class="record-title">支付记录</div>
                     <div class="record-content clear" id="discernReceipt">
                         <div class="record-li none" v-if="discernReceiptList.length== 0">暂无支付记录</div>
-                        <div class="record-li" v-for="(item, index) in discernReceiptList" :key="index" v-else>
-                            <div class="record-tb">￥{{item.receiptAmount | NumFormat}}</div>
-                            <div class="record-tb">{{payTypeText(item.payType)}}</div>
-                            <div class="record-tb">{{item.receiptDate}}</div>
+                        <div class="record-li" v-for="(record, index) in discernReceiptList" :key="index" v-else>
+                            <div class="record-tb">￥{{record.receiptAmount | NumFormat}}</div>
+                            <div class="record-tb">{{payTypeText(record)}}</div>
+                            <div class="record-tb">{{record.receiptDate}}</div>
                         </div>
                     </div>
                 </div>
             </div>
             <div class="pay-method">
-                <div class="method-title">选择支付方式</div>
-                <div class="pay-method-tab mf">
-                    <a class="item" href="javascript:void(0);" @click="changeTab(0)" :class ="{ active: tabIndex === 0 }">线上支付</a>
-                </div>
-                <div class="method-content">
-                    <div class="payment" id="mobilePayment" v-if="tabIndex === 0">
-                        <template v-if="pageType !== '2' && pageType != '3'">
-                            <div class="payment-title">{{payStatusText}}</div>
-                        </template>
+                <div class="method-title">选择支付方式 <span v-if="pageType !== '2' && pageType != '3'">({{payStatusText}})</span></div>
+                <div class="method-content clear">
+                    <div class="payment clear" id="mobilePayment">
+                        <div class="payment-check-bank">
+                            <a href="javascript:void(0);" class="check-bank-cell" v-for="(cards, index) in list" :key="index" :class="{ current: current === index }"  @click="handleCheckQuickCards(index,cards)">
+                                <div class="cell-icon">
+                                    <i class="icon mIcon"></i>
+                                </div>
+                                <div class="cell-main">
+                                    <div class="logo"><img :src="'/img/pay/icon_'+ cards.bankCode+'_@2x.png'" /></div>
+                                    <div class="name"><p>{{ cards.bankName }}({{ cards.quickPayBankNumber | bankNumeberFilter }} )</p></div>
+                                </div>
+                            </a>
+                        </div>
                         <div class="pay-bank">
                             <div class="bank-list" id="mobileContent">
                                 <a v-if="showAliPayMode" href="javascript:void(0);" class="bank-a mIcon" @click="checkMobilePay(0,'ALIPAY')" :class="{ active: mobileTabIndex === 0 }">
@@ -140,6 +145,11 @@
                                 </a>
                             </div>
                         </div>
+                        <div class="payment-add">
+                            <a class="payment-add-btn" href="javascript:void(0);" @click="handleShowPopup">
+                                <div><i class="icon mIcon"></i><span>添加银行卡付款</span></div>
+                            </a>
+                        </div>
                         <template v-if="pageType != '1' && pageType != '3'">
                             <div class="pay-link" v-if="mobileTabIndex === 2 || mobileTabIndex === 3">
                                 <p v-if="isPC">若您在公司的职位无法直接使用网银付款，请点击右侧“复制支付链接”按钮，将该链接发送给公司财务人员进行网银付款</p>
@@ -150,12 +160,13 @@
                         <template>
                             <div class="iframe" v-html="iframe" style="display: none;"></div>
                         </template>
+
                     </div>
                 </div>
             </div>
         </div>
     </div>
-    <div class="pay-button-main" v-if="tabIndex == 0">
+    <div class="pay-button-main">
         <div class="inner">
             <div class="pay-button" v-if="mobileTabIndex === 0">
                 <a href="javascript:void(0);" id="payMobileSubmit" @click="PayMobileSubmitFn" :class="isSubMitStatus ? 'disabled' : ''" onclick="_czc.push(['_trackEvent','线上支付宝支付','点击','移动支付','','Um_Event_ConfirmMobilePay'])">立即支付</a>
@@ -172,10 +183,136 @@
                 <a v-show="isPC" href="javascript:void(0);" id="paySubmit1" @click="PaySubmitFn" :class="isSubMitStatus ? 'disabled' : ''" onclick="_czc.push(['_trackEvent','线上个人网银支付','点击','网银支付','','Um_Event_CopyUnionPay2'])">立即支付</a>
             </div>
             <div class="pay-button" v-if="mobileTabIndex === 4">
-                <a v-show="isPC" href="javascript:void(0);" id="paySubmit2" @click="PaySubmitFn" :class="isSubMitStatus ? 'disabled' : ''" onclick="_czc.push(['_trackEvent','线上大额银联支付','点击','网银支付','','Um_Event_CopyUnionPay3'])">立即支付</a>
+                <a href="javascript:void(0);" id="paySubmit2" @click="handleQuickPay" :class="isSubMitStatus ? 'disabled' : ''" onclick="_czc.push(['_trackEvent','快捷支付','点击','网银支付','','Um_Event_CopyUnionPay3'])">立即支付</a>
             </div>
         </div>
     </div>
+    <!--添加快捷支付银行卡弹窗-->
+    <div class="model-cards-popup" v-show="isPopup">
+        <div class="model-content">
+            <div class="title">
+                <div class="title-tabs">
+                    <!--                                <a href="javascript:void(0)" class="title-tabs-a" :class="{ current : tabsIndex === 0 }"  @click="handleTabsClick(0)">免输卡号添加</a>-->
+                    <a href="javascript:void(0)" class="title-tabs-a" :class="{ current : tabsIndex === 1 }"  @click="handleTabsClick(1)">输入卡号添加</a>
+                </div>
+                <i class="icon-close" @click.stop="handleCloseModel"></i>
+            </div>
+            <template v-if="tabsIndex === 0">
+                <div class="content bank" v-if="isCardStep === 0">
+                    <a href="javascript:void(0)" class="list" v-for="(bank, index) in bankList" @click="hanldeChooseBanks(bank,index)" :key="index" :class="bankIndex === index ? 'current' : ''">
+                        <img :src="bank.bankLogo" :alt="bank.bankName">
+                    </a>
+                </div>
+                <div class="content" v-if="isCardStep === 1">
+                    <div class="content-labe"><span>确认信息</span></div>
+                    <div class="content-form">
+                        <div class="form-label"><span>*</span>姓名：</div>
+                        <div class="form-input">
+                            <input type="text" maxlength="10" v-model="params.name" placeholder="请输入您的姓名">
+                        </div>
+                    </div>
+                    <div class="content-form">
+                        <div class="form-label"><span>*</span>身份证：</div>
+                        <div class="form-input">
+                            <input type="text" maxlength="18" v-model="params.cardNumber" placeholder="请输入您的身份证号">
+                        </div>
+                    </div>
+                    <div class="content-labe sen">
+                        <p>银行卡类型</p>
+                        <img :src="checkedCards.bankLogo" alt="checkedCards.bankName">
+                        <div class="form-type">
+                            <label class="form-radio">
+                                <input type="radio" name="cardtype" v-model="cardtype" value="1">
+                                <i class="icon mIcon"></i>
+                                <span>借记卡</span>
+                            </label>
+                            <label class="form-radio">
+                                <input type="radio" name="cardtype" v-model="cardtype" value="2">
+                                <i class="icon mIcon"></i>
+                                <span>贷记卡</span>
+                            </label>
+                        </div>
+                    </div>
+                </div>
+                <div class="button">
+                    <a class="button-btn" :class="[disabled ? 'disabled' : '']" href="javascript:void(0)" v-if="isCardStep === 0" @click="handleCardStep">下一步</a>
+                    <a class="button-btn" :class="[disabled1 ? 'disabled' : '']" href="javascript:void(0)" v-if="isCardStep === 1" @click="handleConfirm">下一步</a>
+                </div>
+            </template>
+            <template v-else>
+                <div class="content" v-if="isHassCardStep === 0">
+                    <div class="content-form">
+                        <div class="form-label sen"><span>*</span>卡号：</div>
+                        <div class="form-input">
+                            <input type="text" maxlength="24" v-model="showCardNumber" @input="handleInput" placeholder="请输入本人的银行卡号">
+                        </div>
+                    </div>
+                    <div class="content-label" @click="isShowSupport=!isShowSupport">查看支持银行</div>
+                    <template v-if="isShowSupport">
+                        <a href="javascript:void(0)" class="list" v-for="(bank, index) in bankList" :key="index">
+                            <img :src="bank.bankLogo" :alt="bank.bankName">
+                        </a>
+                    </template>
+                </div>
+                <div class="content" v-if="isHassCardStep === 1">
+                    <div class="content-form none">
+                        <div class="form-label sen">卡号：</div>
+                        <div class="form-text">{{ showCardNumber }}</div>
+                    </div>
+                    <div class="content-labe sen">
+                        <div class="form-label">银行卡类型：</div>
+                        <div class="form-type">
+                            <label class="form-radio">
+                                <input type="radio" name="cardtype" v-model="cardtype" value="1">
+                                <i class="icon mIcon"></i>
+                                <span>借记卡</span>
+                            </label>
+                            <label class="form-radio">
+                                <input type="radio" name="cardtype" v-model="cardtype" value="2">
+                                <i class="icon mIcon"></i>
+                                <span>贷记卡</span>
+                            </label>
+                        </div>
+                    </div>
+                    <div class="content-form">
+                        <div class="form-label sen"><span>*</span>姓名：</div>
+                        <div class="form-input">
+                            <input type="text" maxlength="10" v-model="params.quickPayUserName" placeholder="请输入您的姓名">
+                        </div>
+                    </div>
+                    <div class="content-form">
+                        <div class="form-label sen"><span>*</span>身份证：</div>
+                        <div class="form-input">
+                            <input type="text" maxlength="18" v-model="params.idCard" placeholder="请输入您的身份证号">
+                        </div>
+                    </div>
+                    <div class="content-form">
+                        <div class="form-label sen"><span>*</span>手机号：</div>
+                        <div class="form-input">
+                            <input type="text" maxlength="11" v-model="params.quickPayMobile" placeholder="请输入您的手机号">
+                        </div>
+                    </div>
+                    <div class="content-form" v-if="cardtype==='2'">
+                        <div class="form-label sen"><span>*</span>有效期：</div>
+                        <div class="form-input">
+                            <input type="text" maxlength="5" v-model="params.quickPayBankExpireTime" placeholder="请输入贷记卡有效期(示例：23/04)">
+                        </div>
+                    </div>
+                    <div class="content-form" v-if="cardtype==='2'">
+                        <div class="form-label sen"><span>*</span>cvv2：</div>
+                        <div class="form-input">
+                            <input type="text" maxlength="3" v-model="params.cvvCode" placeholder="请输入贷记卡背面的安全码">
+                        </div>
+                    </div>
+                </div>
+                <div class="button">
+                    <a class="button-btn step0" :class="[disabled2 ? 'disabled' : '']" href="javascript:void(0)" v-if="isHassCardStep === 0" @click="handleHassCardStep">下一步</a>
+                    <a class="button-btn step1" :class="[disabled3 ? 'disabled' : '']" href="javascript:void(0)" v-if="isHassCardStep === 1" @click="handleGetBindCode">下一步</a>
+                </div>
+            </template>
+        </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>
@@ -186,6 +323,21 @@
             <div class="button" id="payButton"><a href="javascript:void(0);" @click="RefreshBody">已完成支付</a></div>
         </div>
     </div>
+    <!-- 短信验证码弹窗   -->
+    <div class="pay-alert-content" v-if="isPayCodeAlert">
+        <div class="pay-alert">
+            <div class="title"><p>输入验证码</p><i class="icon-close" @click.stop="handleCloseCodeAlert"></i></div>
+            <div class="content">
+                <h1>已发送至手机号 {{ phoneNumbe }}</h1>
+                <div class="content-form">
+                    <input type="text" class="input" v-model="codeParams.bindCode" placeholder="请输入短信验证码" maxlength="6" @input="handleCodeInput">
+                    <a class="code-btn"  :class="[{ disabled : isMobileDisabled }]" href="javascript:void(0);">{{ mobileCodeText }}</a>
+                </div>
+                <div class="content-error" v-if="isErrorMsg">{{ errorMsg }}</div>
+            </div>
+            <div class="button"><a href="javascript:void(0);" @click="handleCheckQuickCode">确认支付</a></div>
+        </div>
+    </div>
 </div>
 <!-- 引入底部 -->
 <template th:replace="components/footer"></template>
@@ -193,6 +345,7 @@
 <script charset="utf-8" type="text/javascript" th:src="@{/js/common/serviceapi/product.service.js(v=${version})}"></script>
 <script charset="utf-8" type="text/javascript" th:src="@{/js/common/serviceapi/pay.service.js(v=${version})}"></script>
 <script charset="utf-8" type="text/javascript" th:src="@{/js/pay/caimei-bank.js(v=${version})}"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/pay/mixin/cardsMixns.js(v=${version})}"></script>
 <script charset="utf-8" type="text/javascript" th:src="@{/js/pay/mixin/hlb_payMixin.js(v=${version})}"></script>
 <script charset="utf-8" type="text/javascript" th:src="@{/js/pay/caimei-hlbpay.js(v=${version})}"></script>
 </body>

src/main/resources/templates/user-center/account/cards.html

@@ -28,18 +28,18 @@
                     <img src="/img/base/loading.gif">
                 </div>
                 <div class="cards-container clear" v-else>
-                    <div class="cards-list" v-for="(card , index) in list" :key="index" :class="handleClass(card.B2B)">
-                        <div class="list-logo"><div class="logo"><img :src="handleLogo(card.B2B)"></img></div></div>
+                    <div class="cards-list" v-for="(card , index) in list" :key="index" :class="handleClass(card.bankCode)">
+                        <div class="list-logo"><div class="logo"><img :src="'/img/pay/icon_'+ card.bankCode+'_@2x.png'" /></div></div>
                         <div class="list-main">
-                            <div class="list-main-name">{{ card.name }}</div>
+                            <div class="list-main-name">{{ card.bankName }}</div>
                             <div class="list-main-tag"> <span class="tag"> {{ card.flag === 1 ? '借记卡' : '贷记卡' }} </span> </div>
-                            <div class="list-main-code">{{ card.code | cardsFormat}}</div>
+                            <div class="list-main-code">{{ card.quickPayBankNumber | cardsFormat}}</div>
                         </div>
-                        <div class="list-btn" @click="handleUnbind">解绑</div>
+                        <div class="list-btn" @click="handleUnbind(card)">解绑</div>
                     </div>
                     <div class="cards-list-add" @click="handleShowPopup">
                         <div class="add">
-                            <i></i>
+                            <i class="icon mIcon"></i>
                             <span>添加银行卡</span>
                         </div>
                     </div>
@@ -49,13 +49,13 @@
                     <div class="model-content">
                         <div class="title">
                             <div class="title-tabs">
-                                <a href="javascript:void(0)" class="title-tabs-a" :class="{ current : tabsIndex === 0 }"  @click="handleTabsClick(0)">免输卡号添加</a>
+<!--                                <a href="javascript:void(0)" class="title-tabs-a" :class="{ current : tabsIndex === 0 }"  @click="handleTabsClick(0)">免输卡号添加</a>-->
                                 <a href="javascript:void(0)" class="title-tabs-a" :class="{ current : tabsIndex === 1 }"  @click="handleTabsClick(1)">输入卡号添加</a>
                             </div>
                             <i class="icon-close" @click.stop="handleCloseModel"></i>
                         </div>
                         <template v-if="tabsIndex === 0">
-                            <div class="content" v-if="isCardStep === 0">
+                            <div class="content bank" v-if="isCardStep === 0">
                                 <a href="javascript:void(0)" class="list" v-for="(bank, index) in bankList" @click="hanldeChooseBanks(bank,index)" :key="index" :class="bankIndex === index ? 'current' : ''">
                                     <img :src="bank.bankLogo" :alt="bank.bankName">
                                 </a>
@@ -74,17 +74,17 @@
                                         <input type="text" maxlength="18" v-model="params.cardNumber" placeholder="请输入您的身份证号">
                                     </div>
                                 </div>
-                                <div class="content-labe">
+                                <div class="content-labe sen">
                                     <p>银行卡类型</p>
                                     <img :src="checkedCards.bankLogo" alt="checkedCards.bankName">
                                     <div class="form-type">
                                         <label class="form-radio">
-                                            <input type="radio" name="cardtype" v-model="params.cardtype" value="0">
+                                            <input type="radio" name="cardtype" v-model="cardtype" value="1">
                                             <i class="icon mIcon"></i>
                                             <span>借记卡</span>
                                         </label>
                                         <label class="form-radio">
-                                            <input type="radio" name="cardtype" v-model="params.cardtype" value="1">
+                                            <input type="radio" name="cardtype" v-model="cardtype" value="2">
                                             <i class="icon mIcon"></i>
                                             <span>贷记卡</span>
                                         </label>
@@ -114,43 +114,66 @@
                             <div class="content" v-if="isHassCardStep === 1">
                                 <div class="content-form none">
                                     <div class="form-label sen">卡号：</div>
-                                    <div class="form-text">6217  0340  0002  4704  888</div>
+                                    <div class="form-text">{{ showCardNumber }}</div>
                                 </div>
-                                <div class="content-form none">
-                                    <div class="form-label sen">卡类型：</div>
-                                    <div class="form-text">农业银行借记卡</div>
+                                <div class="content-labe sen">
+                                    <div class="form-label">银行卡类型：</div>
+                                    <div class="form-type">
+                                        <label class="form-radio">
+                                            <input type="radio" name="cardtype" v-model="cardtype" value="1">
+                                            <i class="icon mIcon"></i>
+                                            <span>借记卡</span>
+                                        </label>
+                                        <label class="form-radio">
+                                            <input type="radio" name="cardtype" v-model="cardtype" value="2">
+                                            <i class="icon mIcon"></i>
+                                            <span>贷记卡</span>
+                                        </label>
+                                    </div>
                                 </div>
                                 <div class="content-form">
                                     <div class="form-label sen"><span>*</span>姓名：</div>
                                     <div class="form-input">
-                                        <input type="text" maxlength="10" v-model="params.name" placeholder="请输入您的姓名">
+                                        <input type="text" maxlength="10" v-model="params.quickPayUserName" placeholder="请输入您的姓名">
                                     </div>
                                 </div>
                                 <div class="content-form">
                                     <div class="form-label sen"><span>*</span>身份证：</div>
                                     <div class="form-input">
-                                        <input type="text" maxlength="18" v-model="params.cardNumber" placeholder="请输入您的身份证号">
+                                        <input type="text" maxlength="18" v-model="params.idCard" placeholder="请输入您的身份证号">
                                     </div>
                                 </div>
                                 <div class="content-form">
                                     <div class="form-label sen"><span>*</span>手机号：</div>
                                     <div class="form-input">
-                                        <input type="text" maxlength="18" v-model="params.mobile" placeholder="请输入您的手机号">
+                                        <input type="text" maxlength="11" v-model="params.quickPayMobile" placeholder="请输入您的手机号">
+                                    </div>
+                                </div>
+                                <div class="content-form" v-if="cardtype==='2'">
+                                    <div class="form-label sen"><span>*</span>有效期：</div>
+                                    <div class="form-input">
+                                        <input type="text" maxlength="5" v-model="params.quickPayBankExpireTime" placeholder="请输入贷记卡有效期(示例：23/04)">
+                                    </div>
+                                </div>
+                                <div class="content-form" v-if="cardtype==='2'">
+                                    <div class="form-label sen"><span>*</span>cvv2：</div>
+                                    <div class="form-input">
+                                        <input type="text" maxlength="3" v-model="params.cvvCode" placeholder="请输入贷记卡背面的安全码">
                                     </div>
                                 </div>
                                 <div class="content-form">
                                     <div class="form-label sen"><span>*</span>短信验证码：</div>
                                     <div class="form-input code">
-                                        <input type="text" maxlength="6" v-model="params.code" placeholder="请输入短信验证码">
+                                        <input type="text" maxlength="6" v-model="codeParams.bindCode" placeholder="请输入短信验证码">
                                     </div>
                                     <div class="form-btn">
-                                        <a class="btn" :class="[disabled3 ? 'disabled' : '']" href="javascript:void(0)" @click="handleCardStep">{{ mobileCodeText }}</a>
+                                        <a class="btn" :class="[{disabled : disabled3 },{ disabled : isMobileDisabled }]" href="javascript:void(0)" @click="handleGetBindCode">{{ mobileCodeText }}</a>
                                     </div>
                                 </div>
                             </div>
                             <div class="button">
-                                <a class="button-btn" :class="[disabled2 ? 'disabled' : '']" href="javascript:void(0)" v-if="isHassCardStep === 0" @click="handleCardStep">下一步</a>
-                                <a class="button-btn" :class="[disabled3 ? 'disabled' : '']" href="javascript:void(0)" v-if="isHassCardStep === 1" @click="handleConfirm">下一步</a>
+                                <a class="button-btn" :class="[disabled2 ? 'disabled' : '']" href="javascript:void(0)" v-if="isHassCardStep === 0" @click="handleHassCardStep">下一步</a>
+                                <a class="button-btn" :class="[disabled4 ? 'disabled' : '']" href="javascript:void(0)" v-if="isHassCardStep === 1" @click="handleConfirm">确认绑定</a>
                             </div>
                         </template>
                     </div>
@@ -165,7 +188,7 @@
 <script charset="utf-8" type="text/javascript" th:src="@{/js/center.js(v=${version})}"></script>
 <script charset="utf-8" type="text/javascript" th:src="@{/js/common/serviceapi/user.service.js(v=${version})}"></script>
 <script charset="utf-8" type="text/javascript" th:src="@{/js/common/serviceapi/pay.service.js(v=${version})}"></script>
-<script charset="utf-8" type="text/javascript" th:src="@{/js/pay/mixin/cardsMixns.js(v=${version})}"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/user-center/account/mixins/cardsMixns.js(v=${version})}"></script>
 <script charset="utf-8" type="text/javascript" th:src="@{/js/user-center/account/cards.js(v=${version})}"></script>
 </body>
 </html>

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

@@ -76,7 +76,7 @@
                                 </a>
                                 <a href="/user/cards.html" class="account-cell">
                                     <span>银行卡：</span>
-                                    <span class="red">{{ couponNum }}</span>
+                                    <span class="red">{{ bankNum }}</span>
                                 </a>
                             </div>
                         </div>