快捷支付

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

@@ -178,9 +178,12 @@ input::-webkit-outer-spin-button {
     .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-label{width: 100%;height:32px;float: left;line-height: 32px;text-align: left;font-size: 14px;color: #1890F9;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-tabs{width: 100%;height: 27px;box-sizing: border-box;float: left;position: relative;margin-bottom: 24px;}
+    .model-content .content .content-tabs a{width: 60px;height: 27px;float: left;margin-right: 24px;display: block;font-size: 13px;line-height: 24px;text-align: center;box-sizing: border-box;border-bottom: 1px solid #FFFFFF;color: #333333;}
+    .model-content .content .content-tabs a.current{ border-color: #FF5B00;}
     .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;}
@@ -305,6 +308,9 @@ input::-webkit-outer-spin-button {
     .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.none{margin-bottom: 0;}
+    .model-content .content .content-tabs{width: 100%;height: 27px;box-sizing: border-box;float: left;position: relative;margin-bottom: 24px;}
+    .model-content .content .content-tabs a{width: 60px;height: 27px;float: left;margin-right: 24px;display: block;font-size: 13px;line-height: 24px;text-align: center;box-sizing: border-box;border-bottom: 1px solid #FFFFFF;color: #333333;}
+    .model-content .content .content-tabs a.current{ border-color: #FF5B00;}
     .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.card{width: auto;}
     .model-content .content .content-form .form-label span{color: #F94B4B;}

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

@@ -48,12 +48,12 @@ li{list-style:none}
     .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{ width:100%;height:330px;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: 50px;float: left;margin-top: 0;}
+    .model-content .button{width: 100%;height: 50px;float: left;margin-top: 10px;}
     .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;}
@@ -68,9 +68,12 @@ li{list-style:none}
     .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-label{width: 100%;height:32px;float: left;line-height: 32px;text-align: left;font-size: 14px;color: #1890F9;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-tabs{width: 100%;height: 27px;box-sizing: border-box;float: left;position: relative;margin-bottom: 24px;}
+    .model-content .content .content-tabs a{width: 60px;height: 27px;float: left;margin-right: 24px;display: block;font-size: 13px;line-height: 24px;text-align: center;box-sizing: border-box;border-bottom: 1px solid #FFFFFF;color: #333333;}
+    .model-content .content .content-tabs a.current{ border-color: #FF5B00;}
     .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;}
@@ -157,6 +160,9 @@ li{list-style:none}
     .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.none{margin-bottom: 0;}
+    .model-content .content .content-tabs{width: 100%;height: 27px;box-sizing: border-box;float: left;position: relative;margin-bottom: 24px;}
+    .model-content .content .content-tabs a{width: 60px;height: 27px;float: left;margin-right: 24px;display: block;font-size: 13px;line-height: 24px;text-align: center;box-sizing: border-box;border-bottom: 1px solid #FFFFFF;color: #333333;}
+    .model-content .content .content-tabs a.current{ border-color: #FF5B00;}
     .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.card{width: auto;}
     .model-content .content .content-form .form-label span{color: #F94B4B;}

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

@@ -464,7 +464,7 @@ var PayApi = {
                 callback(res);
             });
         },
-        orderPayQuickBankInfos: function(params, callback){ // 免密银行信息
+        orderPayQuickBankInfos: function(params, callback){ // 支持银行信息
             Http.AjaxService({
                 url:'/order/pay/quick/bank/infos',
                 type:'GET',

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

@@ -97,7 +97,7 @@ var payContainer = new Vue({
     },
     methods: {
         initCouponDetail:function (couponId) {//初始化优惠券数据
-            var _self = this;
+            const _self = this;
             ProductApi.QueryCouponDetail({ couponId: couponId },function (response) {
                 if(response.code == 0){
                     _self.couponInfo = response.data
@@ -110,7 +110,7 @@ var payContainer = new Vue({
             })
         },
         infoPayOrderCheckoutCounter:function(){//初始化子订单数据
-            var _self = this;
+            const _self = this;
             PayApi.PayOrderCheckoutShoporders({shopOrderId:_self.payInfo.shopOrderId},function(response){
                 if(response.code == 0){
                     console.log(response);
@@ -136,7 +136,7 @@ var payContainer = new Vue({
             })
         },
         // 校验支付模式
-        checkPayMode: function(range){
+        checkPayMode(range){
             // test range = '4'
             // 1微信 2支付宝 3个人网银 4企业网银
             this.weChatFlag = range.indexOf('1') > -1
@@ -145,11 +145,10 @@ var payContainer = new Vue({
             // 设置默认支付方式
             this.mobileTabIndex = this.aliPayFlag ? 0 : this.weChatFlag ? 1 : this.B2BpayFlag ? 2 : 3
         },
-        getBankList:function () {// 获取网银支付银行列表
-            var _self = this;
+        getBankList () {// 获取网银支付银行列表
+            const _self = this;
             PayApi.PayGetBankCode({},function(response){
-                if(response.code == 0){
-                    _self.bankList = response.data.B2B;
+                if(response.code === 0){
                     _self.bankListB2BData = response.data.B2B;
                     _self.bankListB2CData = response.data.B2C;
                 }else{
@@ -157,10 +156,10 @@ var payContainer = new Vue({
                 }
             })
         },
-        PayOrderOnLineSwitch:function(){//获取是否可以先上支付
-            var _self = this;
+        PayOrderOnLineSwitch(){//获取是否可以先上支付
+            const _self = this;
             PayApi.PayOrderOnLineSwitch({},function(response){
-                if(response.code == 0){
+                if(response.code === 0){
                     if(response.data === 0){
                         _self.isPaySwitch = true;
                         if (_self.pageType === '2') {
@@ -177,7 +176,7 @@ var payContainer = new Vue({
             })
         },
         PayMobileSubmitFn:function(){//点击移动支付方式
-            var _self = this;
+            const _self = this;
             if(_self.isPaySwitch && _self.pageType === '2'){
                 CAIMEI.dialog('支付系统遇到点小问题，请稍后重试', false);
                 return;
@@ -279,15 +278,15 @@ var payContainer = new Vue({
                 this.orderPayQuickPay();
             }
         },
-        PayCouponMiniPayFn:function () {  // 移动支付购买优惠券
-            var _self = this;
+        PayCouponMiniPayFn () {  // 移动支付购买优惠券
+            const _self = this;
             if(_self.payInfo.payBankNum == "WEIXIN"){
                 _self.hlb_PayCouponMiniWxPay();
             }else if(_self.payInfo.payBankNum == "ALIPAY"){//支付宝支付
                 _self.hlb_PayCouponAliPay();
             }
         },
-        changePayAmount:function(event){//输入支付金额控制
+        changePayAmount(event){//输入支付金额控制
             var _self = this;
             var value = event.target.value;
             if(value == "" || value <0 ){//判断是否等于0 或者为空
@@ -305,12 +304,12 @@ var payContainer = new Vue({
                 _self.balanceAmount = _self.toFixedFn(_self.payInfo.obligation-_self.payInfo.payAmount);
             }
         },
-        changePayAmountBlur:function(event){//失去焦点设置金额
-            var _self = this;
+        changePayAmountBlur(event){//失去焦点设置金额
+            const _self = this;
             _self.payAmount = _self.toFixedFn(event.target.value);
             _self.payInfo.payAmount = _self.payAmount;
         },
-        changeTab:function(index,item){//选择支付方式切换
+        changeTab(index,item){//选择支付方式切换
             this.tabIndex = index;
             switch (this.tabIndex) {
                 case 0:
@@ -321,7 +320,7 @@ var payContainer = new Vue({
                     break;
             }
         },
-        checkMobilePay:function(index,bankNum){//选择移动支付方式
+        checkMobilePay(index,bankNum){//选择移动支付方式
             this.current = '';
             this.mobileTabIndex = index;
             this.payInfo.payBankNum = bankNum;
@@ -340,7 +339,7 @@ var payContainer = new Vue({
                     break;
             }
         },
-        checkBankPay:function(index,item){//选择网银支付方式-选择银行
+        checkBankPay(index,item){//选择网银支付方式-选择银行
             var _self = this;
             _self.bankTabIndex = index;
             switch (_self.mobileTabIndex) {
@@ -352,7 +351,7 @@ var payContainer = new Vue({
                     break;
             }
         },
-        copyLinkPaySubmitFn:function(){//复制网银支付链接
+        copyLinkPaySubmitFn(){//复制网银支付链接
             var _self = this;
             if(_self.isPaySwitch && _self.pageType === '2'){
                 CAIMEI.dialog('支付系统遇到点小问题，请稍后重试', false);
@@ -392,11 +391,11 @@ var payContainer = new Vue({
             }
             _self.hlb_CopyLinkPaySubmitFn(params)
         },
-        hidePayAlert:function(){//隐藏已支付弹窗
+        hidePayAlert(){//隐藏已支付弹窗
             var _self = this;
             _self.isPayAlert = false;
         },
-        RefreshBody:function(){//刷新页面
+        RefreshBody(){//刷新页面
             var _self = this;
             if(_self.payInfo.payBankNum == 'WEIXIN'){
                 if( _self.pageType == '2' ){ // 验证支付（支付会员）
@@ -457,8 +456,8 @@ var payContainer = new Vue({
                 });
             }
         },
-        windowLocationHref:function(state){
-            var _self = this;
+        windowLocationHref(state){
+            const _self = this;
             if( _self.pageType === '1'){
                 window.location.href = '/pay/success.html?pageType=second&type='+state+'&payAmount='+_self.payAmount;
             }else if(_self.pageType === '2'){
@@ -484,11 +483,11 @@ var payContainer = new Vue({
                 return map[record.payType]
             }
         },
-        toFixedFn:function(text){//处理小数点后两位数
+        toFixedFn(text){//处理小数点后两位数
             return Number(text).toFixed(2);
         },
     },
-    mounted: function () {
+    mounted () {
         const _self = this;
         // 判断当前支付是订单支付
         this.pageType = CAIMEI.getUrlParam('pageType');

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

@@ -18,10 +18,12 @@ var cardsMixns = function () {
     return {
         data() {
             return {
+                bankList:[],
                 cardtype:'1',
                 maxLen:24,
                 isPopup:false,
                 current:'',
+                bankTabsIndex:1,
                 tabsIndex:1,
                 bankIndex:'',
                 isCardStep:1,
@@ -85,87 +87,6 @@ var cardsMixns = function () {
             },
         },
         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.disabled3){ return }
-                if(!reg.test(this.params.quickPayMobile)){
-                    CAIMEI.dialog('请输入正确的手机号');
-                    return
-                }
-                this.isPopup = false;
-                this.orderPayQuickPay();
-            },
-            handleTabsClick(index){
-                // 切换
-                console.log('tabsIndex',index)
-                this.tabsIndex = index
-            },
-            handleShowPopup(){
-                //显示添加银行卡弹窗
-                this.orderPayQuickBankInfos()
-                this.handeleInitParams()
-                this.isHassCardStep = 0
-                this.isPopup = true
-            },
-            hanldeChooseBanks(cards,index){
-                //选择银行
-                this.bankIndex = index
-                this.checkedCards = cards
-                console.log('bank',cards)
-            },
-            handleCloseModel(){
-                //关闭窗口
-                this.tabsIndex = 1
-                this.bankIndex = ''
-                this.isCardStep = 1
-                this.isPopup = false
-            },
-            handleCodeInput(e){
-                // 隐藏
-                this.isErrorMsg = false
-            },
-            handleInput(e) {
-                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.showCardNumber ='';
-                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;
@@ -234,17 +155,18 @@ var cardsMixns = function () {
                     }
                 })
             },
-            orderPayQuickBankInfos:function () {// 获取网银支付银行列表
-                const _self = this;
-                PayApi.orderPayQuickBankInfos({},function(response){
+            orderPayQuickBankInfos (cardType) {// 获取网银支付银行列表
+                const _self = this
+                PayApi.orderPayQuickBankInfos({ cardType:cardType },function(response){
                     if(response.code === 0){
                         _self.bankList = response.data;
+
                     }else{
                         console.log('获取网银支付银行列表异常')
                     }
                 })
             },
-            userClubBanks:function(){//查询银行卡列表
+            userClubBanks(){//查询银行卡列表
                 const _self = this;
                 PayApi.userClubBanks({ userId : this.params.userId  },function (response) {
                     if(response.code === 0){
@@ -255,6 +177,93 @@ var cardsMixns = function () {
                     }
                 })
             },
+            handleCardStep(){
+                // 选择银行下一步
+                if(this.disabled){ return }
+                this.isCardStep = 1
+            },
+            handleHassCardStep(){
+                // 选择银行下一步
+                if(this.disabled2){ return }
+                this.isHassCardStep = 1
+            },
+            handleGetBindCode(){
+                //获取短信验证码
+                const reg = /^1\d{10}$/;
+                if(this.disabled3){ return }
+                if(!reg.test(this.params.quickPayMobile)){
+                    CAIMEI.dialog('请输入正确的手机号');
+                    return
+                }
+                this.isPopup = false;
+                this.orderPayQuickPay();
+            },
+            handleBankTabsClick(index){
+                // 切换借记卡&贷记卡
+                this.bankTabsIndex = index
+                this.orderPayQuickBankInfos(index)
+            },
+            handleTabsClick(index){
+                // 切换
+                console.log('tabsIndex',index)
+                this.tabsIndex = index
+            },
+            handleShowPopup(){
+                //显示添加银行卡弹窗
+                this.bankTabsIndex = 1
+                this.orderPayQuickBankInfos(this.bankTabsIndex)
+                this.handeleInitParams()
+                this.isHassCardStep = 0
+                this.isPopup = true
+            },
+            hanldeChooseBanks(cards,index){
+                //选择银行
+                this.bankIndex = index
+                this.checkedCards = cards
+                console.log('bank',cards)
+            },
+            handleCloseModel(){
+                //关闭窗口
+                this.tabsIndex = 1
+                this.bankIndex = ''
+                this.isCardStep = 1
+                this.isPopup = false
+            },
+            handleCodeInput(e){
+                // 隐藏
+                this.isErrorMsg = false
+            },
+            handleInput(e) {
+                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.showCardNumber ='';
+                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}
+            },
             formatAccNo(value) {
                 const newValue = value.replace(/([^0-9])/g, '') // 只允许输入数字
                 const formatValue = newValue.replace(/(\d{4})(?=\d)/g, '$1 ') // 每4个数字后面加一个空格

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

@@ -8,7 +8,6 @@ var cardsPage = new Vue({
             userId: 0,
         },
         list: [],
-        bankList:[],
         listRecord: 0,
         pageInput: '1'
     },

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

@@ -18,10 +18,12 @@ var cardsMixns = function () {
     return {
         data() {
             return {
+                bankList:[],
                 cardtype:1,
                 maxLen:24,
                 isPopup:false,
                 tabsIndex:1,
+                bankTabsIndex:1,
                 bankIndex:'',
                 isCardStep:0,
                 isHassCardStep:0,
@@ -62,9 +64,9 @@ var cardsMixns = function () {
             },
         },
         methods: {
-            orderPayQuickBankInfos:function () {// 获取网银支付银行列表
-                var _self = this;
-                PayApi.orderPayQuickBankInfos({},function(response){
+            orderPayQuickBankInfos (cardType) {// 获取网银支付银行列表
+                const _self = this;
+                PayApi.orderPayQuickBankInfos({ cardType:cardType },function(response){
                     if(response.code === 0){
                         _self.bankList = response.data;
                     }else{
@@ -139,6 +141,11 @@ var cardsMixns = function () {
                 }
                 this.orderPayQuickBindCard();
             },
+            handleBankTabsClick(index){
+                // 切换借记卡&贷记卡
+                this.bankTabsIndex = index
+                this.orderPayQuickBankInfos(index)
+            },
             handleTabsClick(index){
                 // 切换
                 console.log('tabsIndex',index)
@@ -146,7 +153,8 @@ var cardsMixns = function () {
             },
             handleShowPopup(){
                 //显示添加银行卡弹窗
-                this.orderPayQuickBankInfos()
+                this.bankTabsIndex = 1
+                this.orderPayQuickBankInfos(this.bankTabsIndex)
                 this.handeleInitParams()
                 this.isPopup = true
             },

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

@@ -249,8 +249,12 @@
                     </div>
                     <div class="content-label" @click="isShowSupport=!isShowSupport">查看支持银行</div>
                     <template v-if="isShowSupport">
+                        <div class="content-tabs">
+                            <a href="javascript:void(0)" class="tabs-cell" :class="{ current : bankTabsIndex === 1 }"  @click="handleBankTabsClick(1)">借记卡</a>
+                            <a href="javascript:void(0)" class="tabs-cell" :class="{ current : bankTabsIndex === 2 }"  @click="handleBankTabsClick(2)">贷记卡</a>
+                        </div>
                         <div v-for="(item, index) in bankList" :key="index">
-                            <a href="javascript:void(0)" class="list" v-for="(bank, bankIndex) in item.banks" :key="bankIndex" v-if="bank.cardType === 1">
+                            <a href="javascript:void(0)" class="list" v-for="(bank, bankIndex) in item.banks" :key="bankIndex">
                                 <img :src="bank.bankLogo" :alt="bank.bankName">
                             </a>
                         </div>

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

@@ -106,8 +106,12 @@
                                 </div>
                                 <div class="content-label" @click="isShowSupport=!isShowSupport">查看支持银行</div>
                                 <template v-if="isShowSupport">
+                                    <div class="content-tabs">
+                                        <a href="javascript:void(0)" class="tabs-cell" :class="{ current : bankTabsIndex === 1 }"  @click="handleBankTabsClick(1)">借记卡</a>
+                                        <a href="javascript:void(0)" class="tabs-cell" :class="{ current : bankTabsIndex === 2 }"  @click="handleBankTabsClick(2)">贷记卡</a>
+                                    </div>
                                     <div v-for="(item, index) in bankList" :key="index">
-                                        <a href="javascript:void(0)" class="list" v-for="(bank, bankIndex) in item.banks" :key="bankIndex" v-if="bank.cardType === 1">
+                                        <a href="javascript:void(0)" class="list" v-for="(bank, bankIndex) in item.banks" :key="bankIndex">
                                             <img :src="bank.bankLogo" :alt="bank.bankName">
                                         </a>
                                     </div>