校验验证码错误提示显示位置以及手机号未填写直接填写验证码不会报错处理

components/appeal/AccountAppeal.vue

@@ -20,7 +20,7 @@
                          @click="getCheckCode"
                          :disabled="getCodeBtnIsDisabled">获取验证码</el-button>
               <el-button type="primary"  v-show="!sendAccountCode" class="code code-send">已发送({{account_time}}s)</el-button>
-              <!--<span v-show="codeErrorChecked" class="tip codeError-tip" >验证码输入错误</span>-->
+              <span v-show="codeErrorChecked" class="tip codeError-tip" >{{codeErrorMsg}}</span>
             </el-form-item>
             <el-form-item prop="password">
               <el-input type="password" v-model="account.password" auto-complete="off" placeholder="登录密码"></el-input>
@@ -60,13 +60,18 @@
           <div class="close-btn" @click="goCloudCenter">关闭</div>
         </div>
       </div>
+      <loading v-show="isShowLoading"/>
     </div>
   </div>
 </template>
 
 <script>
+  import Loading from '~components/common/loading/Loading.vue'
   export default {
     name: 'AccountAppeal',
+    components: {
+      Loading
+    },
     data () {
       var validateMobile = (rule, value, callback) => {
         if (value === '') {
@@ -95,8 +100,10 @@
           this.codeChecked = false
         } else {
           if (this.account.code !== '') {
-            if (this.token !== '') {
-              if (this.account.code !== '' && this.account.mobile !== '') {
+            if (this.account.mobile === '') {
+              callback(new Error('请先填写正确的手机号'))
+            } else {
+              if (this.token) {
                 let param = new FormData()
                 param.append('mobile', this.account.mobile)
                 param.append('code', this.account.code)
@@ -115,10 +122,15 @@
                       return Promise.reject(response.data)
                     }
                   }).catch(err => {
-                    this.$message.error(err.errMsg)
+                    this.codeErrorMsg = err.errMsg
+                  // this.$message.error(err.errMsg)
                   })
+              } else {
+                callback(new Error('请先获取验证码'))
+                this.codeChecked = false
+                this.codeErrorChecked = false
               }
-            } else {}
+            }
           }
           callback()
         }
@@ -214,6 +226,8 @@
           contactTel: '',
           contactEmail: ''
         },
+        isShowLoading: false,
+        codeErrorMsg: '',
         checked: true,
         sendAccountCode: true,
         account_time: 0,
@@ -281,8 +295,10 @@
       },
 //      获取校验码
       getCheckCode () {
+        this.isShowLoading = true
         this.$http.get(`/appeal/check/mobile`, {params: {mobile: this.account.mobile}})
           .then(response => {
+            this.isShowLoading = false
             this.token = response.data.content.token
             if (this.token !== '') {
               this.$message({
@@ -300,12 +316,14 @@
               }, 1000)
             }
           }).catch(err => {
+            this.isShowLoading = false
             this.$message.error(err.errMsg)
           })
       },
       //    提交表单
       submit () {
         if (this.mobileChecked && this.codeChecked && this.passwordChecked && this.descriptionChecked && this.contactNameChecked && this.contactTelChecked && this.contactEmailChecked && this.checked) {
+          this.isShowLoading = true
           let param = new FormData()
           param.append('mobile', this.account.mobile)
           param.append('code', this.account.code)
@@ -321,12 +339,14 @@
           this.$http.post('/appeal/account', param, config)
             .then(response => {
               if (response.data.success) {
+                this.isShowLoading = false
                 this.goNextStep = false
               } else {
                 this.goNextStep = true
                 return Promise.reject(response.data)
               }
             }).catch(err => {
+              this.isShowLoading = false
               this.$message.error(err.errMsg)
             })
         }
@@ -416,8 +436,13 @@
     text-align: left;
   }
   span.tip.codeError-tip {
-    right: -112px;
-    color: #f56c6c;
+    position: absolute;
+    top: 3px;
+    left: 378px;
+    width: 200px;
+    text-align: left;
+    color: #ff4949;
+    font-size: 12px;
   }
   i{
     position: absolute;

components/appeal/ChangeManagerAppeal.vue

@@ -20,7 +20,7 @@
                          @click="getCheckCode"
                          :disabled="getCodeBtnIsDisabled">获取验证码</el-button>
               <el-button type="primary"  v-show="!sendManagerCode" class="code code-send">已发送({{account_time}}s)</el-button>
-              <!--<span v-show="codeErrorChecked" class="tip codeError-tip" >验证码输入错误</span>-->
+              <span v-show="codeErrorChecked" class="tip codeError-tip" >{{codeErrorMsg}}</span>
             </el-form-item>
             <el-form-item prop="spaceName">
               <el-input type="text"
@@ -362,6 +362,7 @@
           contactEmail: ''
         },
         isShowLoading: false,
+        codeErrorMsg: '',
         isPdf: false,
         checked: true,
         showAddressBox: false,

components/appeal/PasswordRestAppeal.vue

@@ -306,7 +306,7 @@
       return {
         isShowLoading: false,
         showPasswordError: false,
-        codeErrorMsg: false,
+        codeErrorMsg: '',
         goNextStep: true,
         passwordRest: {
           mobile: '',

components/change/ChangeManager.vue

@@ -121,13 +121,18 @@
           </el-form>
         </div>
       </div>
+      <loading v-show="isShowLoading"/>
     </div>
   </div>
 </template>
 
 <script>
+  import Loading from '~components/common/loading/Loading.vue'
   export default {
     name: 'validation',
+    components: {
+      Loading
+    },
     data () {
 //      第一步校验验证码
       var validateFirstCode = (rule, value, callback) => {
@@ -137,7 +142,7 @@
           this.codeChecked = false
         } else {
           if (this.valid.code !== '') {
-            if (this.token !== '') {
+            if (this.token) {
               if (this.valid.code !== '' && this.getMobile !== '') {
                 let param = new FormData()
                 param.append('mobile', this.getMobile)
@@ -160,7 +165,11 @@
                     this.codeErrorMsg = err.errMsg
                   })
               }
-            } else {}
+            } else {
+              callback(new Error('请先获取验证码'))
+              this.codeChecked = false
+              this.codeErrorChecked = false
+            }
           }
           callback()
         }
@@ -189,6 +198,7 @@
         }
       }
       return {
+        isShowLoading: false,
         goFirstStep: true,
         hasValidPhoneWay: false,
         hasValidQuestionsWay: false,
@@ -270,6 +280,7 @@
       getVerifyWay () {
         this.$http.get('/sso/change/admin/checkType').then(response => {
           if (response.data.success) {
+            // console.log(response.data)
             if (!response.data.content) {
               this.goFirstStep = true
               this.showManualAppeal = true
@@ -334,8 +345,10 @@
       },
 //      获取第一步手机验证码
       getCheckCode () {
+        this.isShowLoading = true
         this.$http.get(`/sso/change/admin/check/mobile`)
           .then(response => {
+            this.isShowLoading = false
             this.token = response.data.content.token
             if (this.token !== '') {
               this.$message({
@@ -353,12 +366,14 @@
               }, 1000)
             }
           }).catch(err => {
+            this.isShowLoading = false
             this.$message.error(err.errMsg)
           })
       },
 //      手机号验证下一步
       goNextStep () {
         if (this.codeChecked) {
+          this.isShowLoading = true
           let param = new FormData()
           param.append('code', this.valid.code)
           param.append('token', this.token)
@@ -368,6 +383,7 @@
           this.$http.post(`/sso/change/admin/check/mobile`, param, config)
             .then(response => {
               if (response.data.success) {
+                this.isShowLoading = false
                 this.$store.commit('login/GET_TOKEN', response.data.content)
                 this.showPhoneValid = false
                 this.$router.push({ path: '/change/changeManagerSecondStep' })
@@ -376,21 +392,25 @@
                 return Promise.reject(response.data)
               }
             }).catch(err => {
+              this.isShowLoading = false
               this.$message.error(err.errMsg)
             })
         }
       },
 //      第一步验证邮箱
       firstStepValidEmail () {
+        this.isShowLoading = true
         this.$http.get(`/sso/change/admin/check/email`)
           .then(response => {
             if (response.data.success) {
+              this.isShowLoading = false
               this.emailSendSuccess = true
             } else {
               this.emailSendSuccess = false
               return Promise.reject(response.data)
             }
           }).catch(err => {
+            this.isShowLoading = false
             console.log(err)
 //          this.$message.error(err.errMsg)
           })
@@ -398,6 +418,7 @@
 //      第一步验证密保提交
       validQuestionSubmit () {
         if (this.answer1SecondChecked && this.answer2SecondChecked) {
+          this.isShowLoading = true
           let param = new FormData()
           let answer = []
           answer.push({'answer': this.validQuestion.answer1, 'sort': this.sort1}, {'answer': this.validQuestion.answer2, 'sort': this.sort2})
@@ -409,6 +430,7 @@
           this.$http.post(`/sso/change/admin/check/question`, param, config)
             .then(response => {
               if (response.data.success) {
+                this.isShowLoading = false
                 this.$store.commit('login/GET_TOKEN', response.data.content.token)
                 this.showQuestionsValid = false
                 this.$router.push({ path: '/change/changeManagerSecondStep' })
@@ -417,6 +439,7 @@
                 return Promise.reject(response.data)
               }
             }).catch(err => {
+              this.isShowLoading = false
               this.$message.error(err.errMsg)
             })
         }

components/change/ChangeManagerSecondStep.vue

@@ -17,7 +17,7 @@
               </el-form-item>
               <el-form-item prop="code">
                 <el-input type="text" v-model="valid2.code"
-                          v-bind:class="{ active: this.secondStepCodeErrorChecked }"
+                          v-bind:class="{ active: secondStepCodeErrorChecked }"
                           auto-complete="off"
                           class="msg"
                           placeholder="短信验证码"></el-input>
@@ -44,13 +44,18 @@
           </div>
         </div>
       </div>
+      <loading v-show="isShowLoading"/>
     </div>
   </div>
 </template>
 
 <script>
+  import Loading from '~components/common/loading/Loading.vue'
   export default {
     name: 'validation',
+    components: {
+      Loading
+    },
     data () {
 //      第二步验证手机
       var validateSecondMobile = (rule, value, callback) => {
@@ -80,8 +85,10 @@
           this.secondCodeChecked = false
         } else {
           if (this.valid2.code !== '') {
-            if (this.secondToken !== '') {
-              if (this.valid2.code !== '' && this.valid2.mobile !== '') {
+            if (this.valid2.mobile === '') {
+              callback(new Error('请先填写正确的手机号'))
+            } else {
+              if (this.secondToken) {
                 let param = new FormData()
                 param.append('mobile', this.valid2.mobile)
                 param.append('code', this.valid2.code)
@@ -102,8 +109,12 @@
                   }).catch(err => {
                     this.secondCodeErrorMsg = err.errMsg
                   })
+              } else {
+                callback(new Error('请先获取验证码'))
+                this.secondStepCodeErrorChecked = false
+                this.secondCodeChecked = false
               }
-            } else {}
+            }
           }
           callback()
         }
@@ -145,6 +156,7 @@
         }
       }
       return {
+        isShowLoading: false,
         second_step_time: 0,
         codeErrorChecked: false,
         secondStepCodeErrorChecked: false,
@@ -192,8 +204,10 @@
     methods: {
 //      获取第二步手机验证码
       getSecondCheckCode () {
+        this.isShowLoading = true
         this.$http.get(`/sso/change/admin/check/newMobile`, {params: {mobile: this.valid2.mobile, token: this.firstStepToken}})
           .then(response => {
+            this.isShowLoading = false
             this.secondToken = response.data.content.token
             if (this.secondToken !== '') {
               this.$message({
@@ -211,12 +225,14 @@
               }, 1000)
             }
           }).catch(err => {
+            this.isShowLoading = false
             console.log(err)
           })
       },
 //      更换管理员确认
       setNewMobile () {
         if (this.mobileSecondChecked && this.secondCodeChecked && this.changeReasonChecked && this.contactTelChecked) {
+          this.isShowLoading = true
           let param = new FormData()
           param.append('mobile', this.valid2.mobile)
           param.append('code', this.valid2.code)
@@ -230,11 +246,13 @@
           this.$http.post(`/sso/change/admin`, param, config)
             .then(response => {
               if (response.data.success) {
+                this.isShowLoading = false
                 this.$router.push({ path: '/change/changeManagerThirdStep' })
               } else {
                 return Promise.reject(response.data)
               }
             }).catch(err => {
+              this.isShowLoading = false
               console.log(err)
             })
         }

components/encrypted-setting/EncryptedSetting.vue

@@ -108,7 +108,7 @@
           this.codeChecked = false
         } else {
           if (this.valid.code !== '') {
-            if (this.token !== '') {
+            if (this.token) {
               if (this.valid.code !== '' && this.getMobile !== '') {
                 let param = new FormData()
                 param.append('mobile', this.getMobile)
@@ -131,7 +131,11 @@
                     this.codeErrorMsg = err.errMsg
                   })
               }
-            } else {}
+            } else {
+              callback(new Error('请先获取验证码'))
+              this.codeChecked = false
+              this.codeErrorChecked = false
+            }
           }
           callback()
         }

components/register/PersonalRegistration.vue

@@ -214,33 +214,40 @@
           this.codeErrorChecked = false
           this.codeChecked = false
         } else {
-          if (this.token !== '') {
-            if (this.item.code !== '' && this.item.mobile !== '') {
-              let param = new FormData()
-              param.append('mobile', this.item.mobile)
-              param.append('code', this.item.code)
-              param.append('token', this.token)
-              let config = {
-                headers: {'Content-Type': 'multipart/form-data'}
-              }
-              this.$http.post(`/sso/personal/register/checkCode`, param, config)
-                .then(response => {
-                  if (response.data.success) {
-                    this.codeChecked = true
-                    this.codeErrorChecked = false
-                  } else {
-                    this.codeErrorChecked = true
-                    this.codeChecked = false
+          if (this.item.code !== '') {
+            if (this.item.mobile === '') {
+              callback(new Error('请先填写正确的手机号'))
+            } else {
+              if (this.token) {
+                let param = new FormData()
+                param.append('mobile', this.item.mobile)
+                param.append('code', this.item.code)
+                param.append('token', this.token)
+                let config = {
+                  headers: {'Content-Type': 'multipart/form-data'}
+                }
+                this.$http.post(`/sso/personal/register/checkCode`, param, config)
+                  .then(response => {
+                    if (response.data.success) {
+                      this.codeChecked = true
+                      this.codeErrorChecked = false
+                    } else {
+                      this.codeErrorChecked = true
+                      this.codeChecked = false
 //                    callback(new Error('验证码输入错误'))
-                    return Promise.reject(response.data)
-                  }
-                }).catch(err => {
-                  this.codeErrorMsg = err.errMsg
-//                  console.log(err)
+                      return Promise.reject(response.data)
+                    }
+                  }).catch(err => {
+                    this.codeErrorMsg = err.errMsg
 //                  this.$message.error(err.errMsg)
-                })
+                  })
+              } else {
+                callback(new Error('请先获取验证码'))
+                this.codeChecked = false
+                this.codeErrorChecked = false
+              }
             }
-          } else {}
+          }
           callback()
         }
       }

components/validation/EmailValidation.vue

@@ -153,7 +153,7 @@
           this.codeChecked = false
         } else {
           if (this.valid.code !== '') {
-            if (this.token !== '') {
+            if (this.token) {
               if (this.valid.code !== '' && this.getMobile !== '') {
                 let param = new FormData()
                 param.append('mobile', this.getMobile)
@@ -176,7 +176,11 @@
                     this.codeErrorMsg = err.errMsg
                   })
               }
-            } else {}
+            } else {
+              callback(new Error('请先获取验证码'))
+              this.codeChecked = false
+              this.codeErrorChecked = false
+            }
           }
           callback()
         }