验证码登录

src/main/resources/static/css/account/bind.css

@@ -22,10 +22,11 @@ li{list-style:none}
     .formLine-tabs .tabs-item.current{font-weight: bold;color: #E15621;}
     .formLine-tabs .tabs-item.current:before{background: #E15621;}
     .formLine{width: 100%;float: left;}
-    .formLine .code-btn{width: 120px;height: 44px;line-height: 44px;text-align: center;background: #E15621;font-size: 14px;color: #FFFFFF;position: absolute;right: 0;top: 31px;}
+    .formLine.smscode{width: 280px;}
+    .formLine .code-btn{width: 120px;height: 44px;line-height: 44px;text-align: center;background: #E15621;font-size: 14px;color: #FFFFFF;position: absolute;right: -119px;top: 31px;}
     .formLine .code-btn.disabled{background: rgba(225,86,33,0.7);}
     .formLine input{height:44px;line-height:44px;}
-    .formLine input.smscode{padding-right: 120px;box-sizing: border-box;}
+    .formLine input.smscode{box-sizing: border-box;}
     .subLine{width: 100%;float: left;margin: 40px 0;}
     .subLine .btn.disabled{background: #E2E2E2;}
 

src/main/resources/static/css/account/login.css

@@ -19,7 +19,8 @@ li{list-style:none}
  .loginForm .formLine-tabs .tabs-item.current:before{background: #E15621;}
  .loginForm form{margin-top:10px;}
  .loginForm .formLine{width: 100%; height:70px;padding:0;float: left;position: relative;}
- .loginForm .formLine .code-btn{width: 96px;height: 48px;line-height: 48px;text-align: center;background: #E15621;font-size: 14px;color: #FFFFFF;position: absolute;right: 0;top: 0;}
+ .loginForm .formLine.smscode{width: 254px;}
+ .loginForm .formLine .code-btn{width: 97px;height: 48px;line-height: 48px;text-align: center;background: #E15621;font-size: 14px;color: #FFFFFF;position: absolute;right: -96px;top: 0;}
  .loginForm .formLine .code-btn.disabled{background: rgba(225,86,33,0.7);}
  .loginForm input{height:48px;line-height:48px;}
  .loginForm input.smscode{padding-right: 96px;box-sizing: border-box;}
@@ -94,10 +95,11 @@ li{list-style:none}
  .loginForm .formLine-tabs .tabs-item.current:before{background: #E15621;}
  .loginForm form{width:93.4vw;margin:54vw auto 0}
  .loginForm .formLine{height:16.4vw;padding:0;position: relative;}
+ .loginForm .formLine.smscode{width: 68vw;}
  .loginForm input{height:11.2vw;line-height:6vw;padding: 2.6vw 0;box-sizing: border-box;}
- .loginForm .formLine .code-btn{width: 24.8vw;height:11.2vw;line-height: 11.2vw;text-align: center;background: #E15621;font-size:3.4vw;color: #FFFFFF;position: absolute;right: 0;top: 0;}
+ .loginForm .formLine .code-btn{width: 24.8vw;height:11.2vw;line-height: 11.2vw;text-align: center;background: #E15621;font-size:3.4vw;color: #FFFFFF;position: absolute;right: -24.8vw;top: 0;}
  .loginForm .formLine .code-btn.disabled{background: rgba(225,86,33,0.7);}
- .loginForm input.smscode{padding-right: 24.8vw;box-sizing: border-box;}
+ .loginForm input.smscode{box-sizing: border-box;}
  .loginForm .checked{top:3.6vw;right:3.6vw;}
  .loginForm .forget{text-align:right;color:#4a4f58;font-size:3.4vw;line-height:3.4vw;margin-bottom:4.8vw}
  .loginForm .forget .btn{float: left;color: #E15621;}

src/main/resources/static/js/account/bind.js

@@ -49,6 +49,13 @@ var bindPage = new Vue({
             imgCode:'',
             token:''
         },
+        verifiParams:{
+            mobileOrEmail :'',
+            password : '',
+            mobile:'',
+            code:'',
+            codeType:0
+        },
         isDisabled:true,
         isSubDisabled:true
     },
@@ -56,17 +63,25 @@ var bindPage = new Vue({
 
     },
     methods: {
-        handleStepNext(){// 账号密码 下一步
-            if(this.isDisabled){ return }
-            if(this.loginTabs === 0){
-                this.activeNum = 1;
+        handleTabsClick(index){// tabs切换
+            this.loginTabs = this.userParams.passOrNote = this.verifiParams.codeType = index;
+            this.isDisabled = true;
+            if(this.loginTabs === 1){
+                this.userParams.mobileOrEmail = '';
+                this.userParams.password = '';
             }else{
-                this.userLoginVerification();
+                this.userParams.companyMobile = '';
+                this.codeParams.mobile = '';
+                this.codeParams.code = '';
             }
         },
+        handleStepNext(){// 账号密码 下一步
+            if(this.isDisabled){ return }
+            this.userLoginVerification();
+        },
         userLoginVerification(){// 校验短信验证码
             var _self = this;
-            UserApi.userLoginVerification(this.codeParams,function(response){
+            UserApi.userLoginVerification(this.verifiParams,function(response){
                 if(response.code === 0){
                     _self.activeNum = 1;
                 }else{
@@ -74,65 +89,43 @@ var bindPage = new Vue({
                 }
             });
         },
-        handleTabsClick(index){// tabs切换
-            this.loginTabs = this.userParams.passOrNote = index;
-            if(this.loginTabs === 1){
-                this.userParams.mobileOrEmail = '';
-                this.userParams.password = '';
-            }else{
-                this.userParams.companyMobile = '';
-                this.codeParams.mobile = '';
-                this.codeParams.code = '';
-            }
-        },
-        handleInputMobileOrEmail(e){
-            this.userParams.mobileOrEmail = e.target.value;
+        handleInputMobileOrEmail(e){// 账号输入
+            this.userParams.mobileOrEmail = this.verifiParams.mobileOrEmail = e.target.value;
             this.handldeCheckInput();
         },
-        handleInputPassword(e){
-            this.userParams.password = e.target.value;
+        handleInputPassword(e){// 密码输入
+            this.userParams.password = this.verifiParams.password = e.target.value;
             this.handldeCheckInput();
         },
-        handleInputPhone(e){
-            this.codeParams.mobile = this.smsCodeParams.mobile = this.userParams.companyMobile = e.target.value;
+        handleInputPhone(e){// 已注册手机号输入
+            this.codeParams.mobile = this.smsCodeParams.mobile = this.verifiParams.mobile = this.userParams.companyMobile = e.target.value;
             this.handldeCheckInput();
         },
-        handleInputSmsCode(e){
-            this.codeParams.code = e.target.value;
+        handleInputSmsCode(e){// 短信验证码输入
+            this.codeParams.code = this.verifiParams.code = e.target.value;
             this.handldeCheckInput();
         },
-        handldeCheckInput(){// 控制下一步按钮高亮
-            if(this.loginTabs === 0){
-                if(this.userParams.mobileOrEmail !== "" && this.userParams.password !==""){
-                    this.isDisabled =false;
-                }else{
-                    this.isDisabled =true;
-                }
-            }else{
-                if(this.codeParams.mobile !== "" && this.codeParams.code !==""){
-                    this.isDisabled =false;
-                }else{
-                    this.isDisabled =true;
-                }
-            }
-        },
-        handleInputLinkName(e){
+        handleInputLinkName(e){// 运营人员输入
             this.userParams.linkName = e.target.value;
-            this.handldeCheckInput1();
+            this.handldeCheckInput();
         },
-        handleInputMobile(e){
+        handleInputMobile(e){// 运营人员手机号输入
             this.userParams.mobile = e.target.value;
-            this.handldeCheckInput1();
+            this.handldeCheckInput();
         },
-        handleInputSmsCodee(e){
+        handleInputSmsCodee(e){// 运营人员手机验证码输入
             this.userParams.smsCode = e.target.value;
-            this.handldeCheckInput1();
+            this.handldeCheckInput();
         },
-        handldeCheckInput1(){// 控制提交按钮高亮
-            if(this.userParams.linkName !== "" && this.userParams.mobile !=="" && this.userParams.smsCode !==""){
-                this.isSubDisabled =false;
+        handldeCheckInput(){// 控制按钮高亮
+            if(this.activeNum ===  1){
+                this.isSubDisabled = !(this.userParams.linkName !== '' && this.userParams.mobile !== '' && this.userParams.smsCode !== '');
             }else{
-                this.isSubDisabled =true;
+                if(this.loginTabs === 0){
+                    this.isDisabled = !(this.userParams.mobileOrEmail !== '' && this.userParams.password !== '');
+                }else{
+                    this.isDisabled = !(this.codeParams.mobile !== '' && this.codeParams.code !== '');
+                }
             }
         },
         handleMobileCode(){// 点击获取短信验证码
@@ -141,7 +134,7 @@ var bindPage = new Vue({
             this.$nextTick(function() {
                 if (!verifyCheack('.codeParamsMobile')) { return false; }
                 UserApi.userLoginCode(_self.smsCodeParams,function (response) {
-                    if(response.code == 0){
+                    if(response.code === 0){
                         CAIMEI.dialog('获取验证码成功~',false,function () {});
                         var TIME_COUNT = 60;
                         if (!_self.mobilTime1) {
@@ -194,9 +187,9 @@ var bindPage = new Vue({
                         _self.setStorages( _self.userData);
                         _self.loginLoading = false;
                         // 绑定成功后跳转
-                        if(_userIdentity == 4 || _userIdentity ==2){
+                        if(_userIdentity === 4 || _userIdentity ===2){
                             window.location.href = '/user/dashboard.html';
-                        }else if(_userIdentity == 3){
+                        }else if(_userIdentity === 3){
                             window.location.href = '/supplier/dashboard.html';
                         }
                     });
@@ -215,7 +208,7 @@ var bindPage = new Vue({
                 if (!mobile) { return false; }
                 if (!pass) { return false; }
                 PublicApi.getImgVerifyCode({platformType: 0},function(response){
-                    if(response.code == 0){
+                    if(response.code === 0){
                         _self.bindCodeParams.imgCode = '';
                         _self.codeImagePath = response.data.baseImage;
                         _self.bindCodeParams.token = response.data.token;
@@ -228,7 +221,7 @@ var bindPage = new Vue({
         },
         getMobileCodeFn:function(){//机构注册获取注册短信验证码
             var _self = this;
-            if(this.bindCodeParams.imgCode == ''){
+            if(this.bindCodeParams.imgCode === ''){
                 CAIMEI.dialog('请输入图形验证码',false,function () {});
                 return
             }
@@ -240,7 +233,7 @@ var bindPage = new Vue({
             this.bindCodeParams.mobile = this.userParams.mobile
             _self.isMobileDisabled = true;
             UserApi.getNoteSMScode(this.bindCodeParams,function (response) {
-                if(response.code == 0){
+                if(response.code === 0){
                     _self.isCodeModel = false;
                     CAIMEI.dialog('验证短信已发送',false,function () {});
                     var TIME_COUNT = 60;

src/main/resources/templates/account/bind.html

@@ -55,7 +55,7 @@
                             <i class="checked icon mIcon"></i>
                             <span class="errTips icon mIcon" tips="请输入正确格式的手机号"></span>
                         </div>
-                        <div class="formLine">
+                        <div class="formLine smscode">
                             <p><em>*</em>验证码：</p>
                             <input type="text" class="smscode" v-model.trim="codeParams.code" autocomplete="off" placeholder="请输入短信验证码" @input="handleInputSmsCode" :rule="rule.code"  maxlength="6" @blur="blurHandle($event)" needverify>
                             <i class="checked icon mIcon"></i>
@@ -81,7 +81,7 @@
                         <i class="checked icon mIcon"></i>
                         <span class="errTips icon mIcon" tips="请输入有效电话号码"></span>
                     </div>
-                    <div class="formLine">
+                    <div class="formLine smscode">
                         <p><em>*</em>短信验证码：</p>
                         <input class="smscode" type="text" v-model.trim="userParams.smsCode" @input="handleInputSmsCodee"  placeholder="请输入短信验证码" :rule="rule.code"  maxlength="6" @blur="blurHandle($event)" needverify>
                         <i class="checked icon mIcon"></i>

src/main/resources/templates/account/login.html

@@ -47,7 +47,7 @@
                         <i class="checked icon mIcon"></i>
                         <span class="errTips icon mIcon" tips="请输入正确格式的手机号"></span>
                     </div>
-                    <div class="formLine">
+                    <div class="formLine smscode">
                         <input type="text" class="smscode" v-model.trim="codeParams.code" autocomplete="off" placeholder="请输入短信验证码" :rule="rule.code"  maxlength="6" @blur="blurHandle($event)" needverify>
                         <i class="checked icon mIcon"></i>
                         <span class="errTips icon mIcon" tips="请输入短信验证码"></span>