登录页验证码修改成弹窗

front-vue/src/views/login.vue

@@ -28,14 +28,6 @@
                                             <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
                                         </el-input>
                                     </el-form-item>
-                                    <el-form-item prop="code">
-                                        <el-input v-model="loginForm.code" auto-complete="off" placeholder="验证码" style="width: 53%;" @keyup.enter.native="handleLogin">
-                                            <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
-                                        </el-input>
-                                        <div class="login-code">
-                                            <img :src="codeUrl" @click="getCode" class="login-code-img" />
-                                        </div>
-                                    </el-form-item>
                                     <el-form-item style="width:100%;margin-bottom: 0;">
                                         <el-checkbox v-model="loginForm.rememberMe">记住密码</el-checkbox>
                                      </el-form-item>
@@ -65,14 +57,6 @@
                                             <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
                                         </el-input>
                                     </el-form-item>
-                                    <el-form-item prop="code">
-                                        <el-input v-model="loginForm.code" auto-complete="off" placeholder="验证码" style="width: 53%;" @keyup.enter.native="handleLogin">
-                                            <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
-                                        </el-input>
-                                        <div class="login-code">
-                                            <img :src="codeUrl" @click="getCode" class="login-code-img" />
-                                        </div>
-                                    </el-form-item>
                                     <el-form-item prop="cade">
                                         <el-input v-model="loginForm.shortMessageCode" type="text"  maxlength="" auto-complete="off" placeholder="请输入验证码" id="" onkeydown="enterHandler(event)">
                                             <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
@@ -140,6 +124,25 @@
             </el-dialog>
         </el-container>
         <el-footer></el-footer>
+
+        <!-- 密码登录验证码 -->
+        <el-dialog
+            title="验证码"
+            :close-on-click-modal="false"
+            :visible.sync="codeDialogVisible"
+            width="30%">
+            <div style="display:flex;">
+                <el-input v-model="loginForm.code" auto-complete="off" placeholder="验证码" style="width: 53%;" @keyup.enter.native="handleLogin">
+                    <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
+                </el-input>
+                <div class="login-code">
+                    <img :src="codeUrl" @click="getCode" class="login-code-img" />
+                </div>
+            </div>
+            <span slot="footer" class="dialog-footer">
+                <el-button type="primary" @click="handleImgCodeSubmit">确 定</el-button>
+            </span>
+        </el-dialog>
     </div>
 </template>
 <script>
@@ -177,13 +180,6 @@ export default {
                         trigger: "blur",
                         message: "用户名不能为空",
                     },
-                ],
-                code: [
-                    {
-                        required: true,
-                        trigger: "change",
-                        message: "验证码不能为空",
-                    },
                 ]
             },
             loading: false,
@@ -192,7 +188,8 @@ export default {
             sendShortMessageBtn : false,
             dialogVisible : false,
             companyList : [],
-            chooseCompanyId : ''
+            chooseCompanyId : '',
+            codeDialogVisible: false
         };
     },
     watch: {
@@ -236,7 +233,13 @@ export default {
                   rememberMe === undefined ? false : Boolean(rememberMe),
           };
       },
-
+      handleImgCodeSubmit () {
+          if (this.activeName === 'login_password') {
+              this.handleLogin()
+          } else {
+              this.sendMessage()
+          }
+      },
       handleLogin() {
           this.$refs.loginForm.validate((valid) => {
               if (valid) {
@@ -250,6 +253,18 @@ export default {
                       this.loading = false;
                       return;
                     }
+
+                     if (this.codeDialogVisible) {
+                        if (!this.loginForm.code) {
+                            this.loading = false
+                            return this.msgError("请输入验证码!");
+                        } else {
+                            this.codeDialogVisible = false
+                        }
+                    } else {
+                        this.loading = false;
+                        return this.codeDialogVisible = true
+                    }
                   // 短信验证码登陆
                   } else{
                     this.loginForm.type = "1";
@@ -331,6 +346,16 @@ export default {
       sendMessage(){
             this.$refs.loginForm.validate((valid) => {
                 if (valid) {
+                  if (this.codeDialogVisible) {
+                    if (!this.loginForm.code) {
+                        this.loading = false
+                        return this.msgError("请输入验证码!");
+                    } else {
+                        this.codeDialogVisible = false
+                    }
+                  } else {
+                      return this.codeDialogVisible = true
+                  }
                   // 调用获取短信验证码接口
                   sendShortMessage(this.loginForm.username, this.loginForm.code, this.loginForm.uuid).then(response => {
                     this.sendShortMessageBtn = true;
@@ -407,34 +432,34 @@ export default {
         background-size: 935px 434px;
         background-repeat: no-repeat;
         margin-top: 40px;
-        // 输入框大小
-        .el-input {
+    }
+    // 输入框大小
+    .el-input {
+        height: 55px;
+        width: 100%;
+        background-image: linear-gradient(
+            #fdfdfd, 
+            #fdfdfd), 
+        linear-gradient(
+            #e7f0ff, 
+            #e7f0ff);
+        background-blend-mode: normal, 
+            normal;
+        input {
             height: 55px;
             width: 100%;
-            background-image: linear-gradient(
-                #fdfdfd, 
-                #fdfdfd), 
-            linear-gradient(
-                #e7f0ff, 
-                #e7f0ff);
-            background-blend-mode: normal, 
-                normal;
-            input {
-                height: 55px;
-                width: 100%;
-                font-size: 18px;
-            }
-        }
-        .input-icon {
-            height: 53px;
-            width: 22px;
-            margin-left: 14px;
-            margin-right: 14px
-        }
-        .el-input--prefix .el-input__inner{
-            padding-left: 50px;
+            font-size: 18px;
         }
     }
+    .input-icon {
+        height: 53px;
+        width: 22px;
+        margin-left: 14px;
+        margin-right: 14px
+    }
+    .el-input--prefix .el-input__inner{
+        padding-left: 50px;
+    }
     .login-tip {
         font-size: 13px;
         text-align: center;
@@ -468,7 +493,7 @@ export default {
     // 内部供应链
     .zap-tabs{
         width: 410px;
-        height: 550px;
+        height: 480px;
         padding: 10px 48px 46px;
         box-sizing: border-box;
         background-image: linear-gradient(
@@ -505,11 +530,12 @@ export default {
     .login-left{
         width: 704px;
         margin-top: 40px;
+        text-align: left;
         .login-name{
-            width: 100%;
+            width: 515px;
         }
         .login-illustration{
-            width: 515px;
+            width: 704px;
         }
     }
     .zap-logo{
@@ -626,5 +652,11 @@ export default {
     .zap-scanning__color{
         color: #23b24b;
     }
+    .el-tabs__header{
+        margin-bottom: 38px;
+    }
+    .el-dialog:not(.is-fullscreen){
+        margin-top: 25vh !important;
+    }
 }
 </style>