feat: 登录优化

src/views/User/login.vue

@@ -3,20 +3,27 @@
     <div class="login">
       <el-tabs v-model="activeName" class="tab-no-bottom">
         <el-tab-pane label="用户名登录" name="first">
-          <el-form :model="userForm" status-icon>
-            <el-form-item>
+          <el-form :model="userForm" status-icon ref="userLoginFormRef">
+            <el-form-item prop="userName"
+                          :rules="[{ required: true, message: '请输入用户名/条码卡号', trigger: 'blur' }]"
+            >
               <el-input v-model="userForm.userName"
-                        placeholder="请输入用户名/条码卡号"></el-input>
+                        placeholder="请输入用户名/条码卡号(test)"></el-input>
             </el-form-item>
 
-            <el-form-item>
+            <el-form-item prop="password"
+                          :rules="[{ required: true, message: '请输入密码', trigger: 'blur' }]"
+            >
               <el-input type="password"
                         v-model="userForm.password"
-                        placeholder="请输入密码"
+                        placeholder="请输入密码(test)"
                         autocomplete="off"></el-input>
             </el-form-item>
 
-            <el-form-item class="validate-append">
+            <el-form-item class="validate-append"
+                          prop="validateCode"
+                          :rules="[{ required: true, message: '请输入验证码', trigger: 'blur' }]"
+            >
               <el-input
                   v-model="userForm.validateCode"
                   placeholder="请输入验证码"
@@ -25,6 +32,10 @@
               </el-input>
             </el-form-item>
 
+            <div v-if="showUserLoginError" class="login-error">
+              {{ userLoginError }}
+            </div>
+
             <el-form-item>
               <el-button type="primary" @click="loginByUser" style="width: 100%">登 录</el-button>
             </el-form-item>
@@ -80,6 +91,8 @@ export default {
   components: {EntryCard},
   data() {
     return {
+      showUserLoginError: false,
+      userLoginError: '',
       hasSent: false,
       timer: null,
       time: 60,
@@ -97,6 +110,23 @@ export default {
   },
   methods: {
     loginByUser() {
+      this.$refs['userLoginFormRef'].validate((valid) => {
+        if (valid) {
+          if (this.userForm.validateCode === 'kjjj') {
+            if (this.userForm.userName === 'test' && this.userForm.password === 'test') {
+              this.$router.push({path: '/home'})
+            } else {
+              this.userLoginError = '用户名或密码不正确！'
+            }
+          } else {
+            this.userLoginError = '验证码不正确！'
+            this.showUserLoginError = true;
+          }
+        } else {
+          console.log('error submit!!');
+          return false;
+        }
+      });
 
     },
     loginByMobile() {
@@ -171,6 +201,13 @@ export default {
       }
     }
   }
+
+  .login-error {
+    margin-bottom: 10px;
+    font-size: 12px;
+    font-weight: 400;
+    color: rgb(242, 53, 53);
+  }
 }
 
 @media (max-width: 456px) {