优化手机登录时图形验证码校验问题

sgzb-ui/src/views/login.vue

@@ -115,8 +115,8 @@
                 </el-input>
               </el-form-item>
 
-              <!-- 5.27 新增发送短信验证时 增加图形验证码校验 -->
+              <!-- 5.27 新增发送短信验证时 增加图形验证码校验  暂时注释 因为放在表单内显得暧昧 先模仿南网注册页面使用弹框提示图形验证码 -->
-              <el-form-item
+              <!-- <el-form-item
                 prop="code"
                 v-if="captchaEnabled"
                 class="code-container"
@@ -142,7 +142,7 @@
                     style="width: 100%"
                   />
                 </div>
-              </el-form-item>
+              </el-form-item> -->
               <el-form-item prop="textCode" class="code-container">
                 <el-input
                   v-model="phoneLoginParams.textCode"
@@ -212,17 +212,43 @@
 
     <!-- 图形验证码弹框 -->
     <el-dialog
-      title="提示"
+      title="请输入图形验证码"
-      :visible.sync="dialogVisible"
+      :visible.sync="dialogCodeVisible"
+      v-if="dialogCodeVisible"
       width="30%"
       :before-close="handleClose"
     >
-      <span>这是一段信息</span>
+      <el-form
+        ref="phoneLoginCodeFormRef"
+        :model="phoneLoginParams"
+        :rules="phoneLoginCodeRules"
+      >
+        <el-form-item prop="code" v-if="captchaEnabled" class="code-container">
+          <el-input
+            v-model="phoneLoginParams.code"
+            auto-complete="off"
+            placeholder="图形验证码"
+            @keyup.enter.native="textLogin"
+            style="width: 70%"
+          >
+            <svg-icon
+              slot="prefix"
+              icon-class="validCode"
+              class="el-input__icon input-icon"
+            />
+          </el-input>
+          <div class="login-code">
+            <img
+              :src="phoneCodeUrl"
+              @click="getCode(2)"
+              class="login-code-img"
+              style="width: 100%"
+            />
+          </div>
+        </el-form-item>
+      </el-form>
       <span slot="footer" class="dialog-footer">
-        <el-button @click="dialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="submitSendCode()">确 定</el-button>
-        <el-button type="primary" @click="dialogVisible = false"
-          >确 定</el-button
-        >
       </span>
     </el-dialog>
   </div>
@@ -299,6 +325,8 @@ export default {
             message: '请输入短信验证码',
           },
         ],
+      },
+      phoneLoginCodeRules: {
         code: [
           {
             required: true,
@@ -318,20 +346,19 @@ export default {
       show: 1,
       count: '',
       timer: null,
+      dialogCodeVisible: false, // 图形验证码弹框
     }
   },
   watch: {
     /* 账户，手机号登录切换时，清空表单的校验  5.27 删除之前南网跳转的监听 */
     activeName: {
       handler(newVal) {
-        this.$refs['loginForm'].clearValidate()
+        // this.$refs['loginForm'].clearValidate()
-        this.$refs['phoneLoginFormRef'].clearValidate()
+        this.resetForm('loginForm')
-
+        this.resetForm('phoneLoginFormRef')
         // 切换登录方式时 根据切换方式 自动获取新的图形验证码
         if (newVal === 'account') {
           this.getCode(1)
-        } else {
-          this.getCode(2)
         }
       },
       deep: true,
@@ -364,24 +391,28 @@ export default {
     },
     //获取短信验证码
     getTextCode() {
-      this.$refs.phoneLoginFormRef.validateField(
+      this.$refs.phoneLoginFormRef.validateField('phone', (valid) => {
-        ['phone', 'code'],
+        if (!valid) {
-        async (valid) => {
+          this.getCode(2)
-          if (!valid) {
+          this.dialogCodeVisible = true
-            const sendParams = {
+        }
-              phone: this.phoneLoginParams.phone,
+      })
-              code: this.phoneLoginParams.code,
+    },
-              uuid: this.phoneLoginParams.uuid,
-            }
 
-            const res = await sendCode(sendParams)
+    /* 图形验证码弹框中确定按钮 */
-
+    submitSendCode() {
-            if (res.code == 200) {
+      this.$refs.phoneLoginCodeFormRef.validate((valid) => {
-              this.$modal.msgSuccess('发送成功')
+        if (valid) {
-              const TIME_COUNT = 60
+          const sendParams = {
-              if (!this.timer) {
+            phone: this.phoneLoginParams.phone,
-                this.count = TIME_COUNT
+            code: this.phoneLoginParams.code,
-                this.show = 2
+            uuid: this.phoneLoginParams.uuid,
+          }
+          sendCode(sendParams)
+            .then((res) => {
+              if (res.code == 200) {
+                this.$modal.msgSuccess('发送成功')
+                const TIME_COUNT = 60
                 this.timer = setInterval(() => {
                   if (this.count > 0 && this.count <= TIME_COUNT) {
                     this.count--
@@ -392,35 +423,21 @@ export default {
                   }
                 }, 1000)
               }
-            }
+            })
-          }
+            .finally(() => {
-        },
+              this.dialogCodeVisible = false
-      )
+              this.phoneLoginParams.code = ''
-      // if (regExp.test(this.loginForm.phone)) {
+            })
-      //   sendCode({ phone: this.loginForm.phone }).then((res) => {
+        }
-      //     if (res.code == 200) {
+      })
-      //       this.$modal.msgSuccess('发送成功')
+    },
-      //       const TIME_COUNT = 60
+    /* 图形验证码弹框关闭按钮 */
-      //       if (!this.timer) {
+    handleClose() {
-      //         this.count = TIME_COUNT
+      this.dialogCodeVisible = false
-      //         this.show = 2
+      this.$refs['phoneLoginFormRef'].clearValidate()
-      //         this.timer = setInterval(() => {
+      this.$refs['phoneLoginCodeFormRef'].clearValidate()
-      //           if (this.count > 0 && this.count <= TIME_COUNT) {
+      this.phoneLoginParams.code = ''
-      //             this.count--
-      //           } else {
-      //             this.show = 3
-      //             clearInterval(this.timer)
-      //             this.timer = null
-      //           }
-      //         }, 1000)
-      //       }
-      //     }
-      //   })
-      // } else {
-      //   this.$modal.msgError('请输入正确手机号')
-      // }
     },
-
     getCookie() {
       const username = Cookies.get('username')
       const password = Cookies.get('password')
@@ -604,4 +621,8 @@ export default {
 .code-container .el-form-item__content {
   display: flex;
 }
+
+.el-dialog__body {
+  padding: 30px 20px 0 20px;
+}
 </style>