快捷支付

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

@@ -184,7 +184,7 @@ input::-webkit-outer-spin-button {
     .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{width: 500px;height: 32px;float: left;margin-left:10px;color: #F94B4B;box-sizing: border-box;padding: 0 13px;border:1px solid #B8BFCA;border-radius: 2px;}
     .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;}
@@ -279,8 +279,8 @@ input::-webkit-outer-spin-button {
     .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{width: 100%;height: 8vw;float: left;box-sizing: border-box;}
+    .model-content .title .title-tabs a{width: 100px;height: 8vw;float: left;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;}
@@ -288,7 +288,7 @@ input::-webkit-outer-spin-button {
     .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{display: block;width: 60vw;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;}
@@ -301,17 +301,20 @@ input::-webkit-outer-spin-button {
     .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-labe .form-label{float: left;}
     .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-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;}
-    .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{width: 100%;height: 10vw;float: left;color: #F94B4B;box-sizing: border-box;padding: 0 3vw;border:1px solid #B8BFCA;border-radius: 2px;}
     .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; }
+    .model-content .content .content-form .form-text{ line-height: 6vw; font-size: 3.4vw;color: #333333;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;}
@@ -321,10 +324,12 @@ input::-webkit-outer-spin-button {
     .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 .button a{width: 60vw;height: 11vw;display: block;background: #FF5B00;font-size: 3.4vw;text-align: center;line-height: 11vw;color: #FFFFFF;margin: 0 auto;border-radius: 3px;}
     /*快捷支付获取短信验证码弹窗*/
     .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; }
+    .pay-alert-content .pay-alert .content-error{ width: 100%;height: 6vw;float: left;line-height: 6vw;;text-align: left;font-size: 3.2vw;color: #FF0000; }
+
 }

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

@@ -74,13 +74,14 @@ li{list-style:none}
     .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{width: 500px;height: 32px;float: left;margin-left:10px;color: #F94B4B;box-sizing: border-box;padding: 0 13px;border:1px solid #B8BFCA;border-radius: 2px;}
     .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; }
+    .model-content .content .content-error{ width: 100%;height: 22px;float: left;line-height: 22px;text-align: left;font-size: 12px;color: #FF0000;box-sizing: border-box;padding-left: 100px; }
 
 
 
@@ -130,8 +131,8 @@ li{list-style:none}
     .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{width: 100%;height: 8vw;float: left;box-sizing: border-box;}
+    .model-content .title .title-tabs a{width: 100px;height: 8vw;float: left;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;}
@@ -139,7 +140,7 @@ li{list-style:none}
     .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{display: block;width: 60vw;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;}
@@ -151,18 +152,22 @@ li{list-style: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-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-labe .form-label{float: left;}
     .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-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;}
-    .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{width: 100%;height: 10vw;float: left;color: #F94B4B;box-sizing: border-box;padding: 0 3vw;border:1px solid #B8BFCA;border-radius: 2px; }
     .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; }
+    .model-content .content .content-form .form-text{ line-height: 6vw; font-size: 3.4vw;color: #333333;float: left; }
+    .model-content .content .content-error{ width: 100%;height: 6vw;float: left;line-height: 6vw;;text-align: left;font-size: 3.2vw;color: #FF0000; }
     footer{display: none;}
 }
 

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

@@ -1,11 +1,11 @@
 // 快捷支付银行卡
 const defaultParams = {
     userId: globalUserData.userId, //机构UserId
-    quickPayBankNumber: '6217007200096308948', //快捷支付用户银行卡号/信用卡号
-    quickPayMobile: '13979770617', //快捷支付银行卡绑定手机号
+    quickPayBankNumber: '', //快捷支付用户银行卡号/信用卡号
+    quickPayMobile: '', //快捷支付银行卡绑定手机号
     quickPayBankExpireTime: '', //快捷支付信用卡过期时间,只包含年月，格式yy-MM
-    quickPayUserName: '郑景翼', //快捷支付用户姓名
-    idCard: '430527198906176613', //身份证号
+    quickPayUserName: '', //快捷支付用户姓名
+    idCard: '', //身份证号
     cvvCode: '' //信用卡安全码
 }
 const defaultCodeParams = {
@@ -34,6 +34,8 @@ var cardsMixns = function () {
                 mobileCodeText:'获取验证码',
                 mobilTime:null,
                 isMobileDisabled:false,
+                errorMsg:'',
+                isErrorMsg:false
             }
         },
         filters: {
@@ -60,25 +62,15 @@ 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.isMobileDisabled){ return }
-                if(!reg.test(this.params.quickPayMobile)){
-                    CAIMEI.dialog('请输入正确的手机号');
-                    return
-                }
-                this.orderPayQuickBindCard();
+            orderPayQuickBankInfos:function () {// 获取网银支付银行列表
+                var _self = this;
+                PayApi.orderPayQuickBankInfos({},function(response){
+                    if(response.code === 0){
+                        _self.bankList = response.data;
+                    }else{
+                        console.log('获取网银支付银行列表异常')
+                    }
+                })
             },
             orderPayQuickBindCard() {
                 const _self = this;
@@ -104,13 +96,15 @@ var cardsMixns = function () {
                             },1000)
                         }
                     }else{
+                        _self.isErrorMsg = true
+                        _self.errorMsg = response.msg
                         console.log('获取绑卡验证码失败')
                     }
                 })
             },
             handleConfirm(){
-                const _self = this;
                 //校验并绑定
+                const _self = this;
                 if(this.disabled4){ return }
                 PayApi.orderPayQuickBindCode(this.codeParams,function(response){
                     if(response.code === 0){
@@ -120,10 +114,31 @@ var cardsMixns = function () {
                             _self.GetUserClubBanks();
                         }, 2000)
                     }else{
-                        console.log('绑卡失败')
+                        _self.isErrorMsg = true
+                        _self.errorMsg = response.msg
                     }
                 })
             },
+            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();
+            },
             handleTabsClick(index){
                 // 切换
                 console.log('tabsIndex',index)
@@ -131,10 +146,17 @@ var cardsMixns = function () {
             },
             handleShowPopup(){
                 //显示添加银行卡弹窗
-                this.orderPayQuickUncodeInfos();
+                this.orderPayQuickBankInfos()
+                this.handeleInitParams()
+                this.isPopup = true
+            },
+            handeleInitParams(){
+                // 初始化快捷支付信息
+
+                this.isHassCardStep = 0
+                this.showCardNumber ='';
                 this.params = Object.assign({}, defaultParams);
                 this.codeParams= Object.assign({}, defaultCodeParams);
-                this.isPopup = true
             },
             hanldeChooseBanks(cards,index){
                 //选择银行
@@ -144,11 +166,15 @@ var cardsMixns = function () {
             },
             handleCloseModel(){
                 //关闭窗口
-                this.tabsIndex = 0
+                this.tabsIndex = 1
                 this.bankIndex = ''
-                this.isCardStep = 0
+                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('')
@@ -166,16 +192,6 @@ var cardsMixns = function () {
                 //获取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',

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

@@ -258,7 +258,7 @@
                 </div>
                 <div class="content" v-if="isHassCardStep === 1">
                     <div class="content-form none">
-                        <div class="form-label sen">卡号：</div>
+                        <div class="form-label sen card">卡号：</div>
                         <div class="form-text">{{ showCardNumber }}</div>
                     </div>
                     <div class="content-labe sen">

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

@@ -106,14 +106,16 @@
                                 </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>
+                                    <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">
+                                            <img :src="bank.bankLogo" :alt="bank.bankName">
+                                        </a>
+                                    </div>
                                 </template>
                             </div>
                             <div class="content" v-if="isHassCardStep === 1">
                                 <div class="content-form none">
-                                    <div class="form-label sen">卡号：</div>
+                                    <div class="form-label sen card">卡号：</div>
                                     <div class="form-text">{{ showCardNumber }}</div>
                                 </div>
                                 <div class="content-labe sen">
@@ -164,12 +166,13 @@
                                 <div class="content-form">
                                     <div class="form-label sen"><span>*</span>短信验证码：</div>
                                     <div class="form-input code">
-                                        <input type="text" maxlength="6" v-model="codeParams.bindCode" placeholder="请输入短信验证码">
+                                        <input type="text" maxlength="6" v-model="codeParams.bindCode" placeholder="请输入短信验证码" @input="handleCodeInput">
                                     </div>
                                     <div class="form-btn">
                                         <a class="btn" :class="[{disabled : disabled3 },{ disabled : isMobileDisabled }]" href="javascript:void(0)" @click="handleGetBindCode">{{ mobileCodeText }}</a>
                                     </div>
                                 </div>
+                                <div class="content-error" v-if="isErrorMsg">{{ errorMsg }}</div>
                             </div>
                             <div class="button">
                                 <a class="button-btn" :class="[disabled2 ? 'disabled' : '']" href="javascript:void(0)" v-if="isHassCardStep === 0" @click="handleHassCardStep">下一步</a>