登录

package.json

@@ -20,6 +20,7 @@
     "element-ui": "2.13.2",
     "js-base64": "^3.6.1",
     "js-cookie": "2.2.0",
+    "js-md5": "^0.7.3",
     "normalize.css": "7.0.0",
     "nprogress": "0.2.0",
     "path-to-regexp": "2.4.0",

src/views/login.vue

@@ -49,6 +49,22 @@
                             />
                         </span>-->
           </el-form-item>
+          <p class="input-title">验证码</p>
+          <div class="verificationCode-box">
+              <el-form-item prop="verificationCode">
+                <el-input
+                autocomplete="off"
+                name="verificationCode"
+                ref="verificationCode"
+                tabindex="3"
+                type="text"
+                v-model="loginForm.verificationCode"
+                />
+            </el-form-item>
+            <div class="verificationCode-img">
+                <img v-if="verificationCodeimg&&verificationCodeLoading" :src="verificationCodeimg" alt="图形验证码" @click="getVerificationCodeimg"/>
+            </div>
+          </div>
           <p class="input-title">用户类型</p>
           <el-form-item class="el-form-item-type" prop="type">
             <el-radio label="TEACHER" v-model="loginForm.type">教师</el-radio>
@@ -80,12 +96,13 @@
 </template>
 
 <script>
-import { validUsername, validPass } from "@/utils/validate";
+import { validUsername } from "@/utils/validate";
 import { getStaticContent } from "@/api/ajax";
-import { getObjArr, removeSession, saveObjArr } from "@/utils/role";
+import { getObjArr } from "@/utils/role";
 import { setToken } from "@/utils/auth";
 import { getConfigInfor } from "@/utils/index";
 
+import md5 from 'js-md5'
 export default {
   name: "Login",
   data() {
@@ -103,6 +120,13 @@ export default {
         callback();
       }
     };
+    const validateVerificationCode = (rule, value, callback) => {
+      if (!value) {
+        callback(new Error("请输入验证码"));
+      } else {
+        callback();
+      }
+    };
     return {
       configInfor: null,
       options: [],
@@ -114,6 +138,7 @@ export default {
         username: getObjArr("userName") || "",
         password: "",
         type: "TEACHER",
+        verificationCode:''
       },
       //input 规则
       loginRules: {
@@ -123,11 +148,18 @@ export default {
         password: [
           { required: true, trigger: "blur", validator: validatePassword },
         ],
+        verificationCode: [
+          { required: true, trigger: "blur", validator: validateVerificationCode },
+        ]
       },
       loading: false,
       passwordType: "password",
       redirect: undefined,
       loginCheck: "login",
+      configInfor: null,
+      verificationCodeimg: '', // 图形验证码
+      verificationCodeimgID: '', // 图形验证码ID
+      verificationCodeLoading: true, // 图形验证码的flag
     };
   },
   watch: {
@@ -158,7 +190,10 @@ export default {
           let data = {
             user_type: this.loginForm.type,
             user_name: this.loginForm.username,
-            password: this.loginForm.password,
+            is_password_md5: "true",
+            password: md5(this.loginForm.password).toUpperCase(),
+            verification_code_image_text: this.loginForm.verificationCode,
+            verification_code_image_id: this.verificationCodeimgID
           };
           getStaticContent(MethodName, data)
             .then((res) => {
@@ -167,6 +202,7 @@ export default {
             })
             .catch(() => {
               this.loading = false;
+              this.getVerificationCodeimg()
             });
         } else {
           this.loading = false;
@@ -177,9 +213,28 @@ export default {
     async _getConfig() {
       this.configInfor = await getConfigInfor();
     },
+    // 图形验证码
+    getVerificationCodeimg(){
+        if(!this.verificationCodeLoading) return
+        this.verificationCodeLoading = false
+        let MethodName = "login_control-GetVerificationCodeImage";
+        let data = {};
+        getStaticContent(MethodName, data).then((res) => {
+            if(res){
+                this.verificationCodeLoading = true
+                this.verificationCodeimgID = res.image_id
+                this.verificationCodeimg = 'data:image/jpeg;base64,'+res.image_content_base64
+            }else{
+                this.verificationCodeLoading = true;
+            }
+        }).catch(() => {
+            this.verificationCodeLoading = true;
+        });
+    },
   },
   mounted() {
     this._getConfig();
+    this.getVerificationCodeimg()
   },
 };
 </script>
@@ -429,5 +484,25 @@ $fc: rgb(24, 144, 255);
     width: 100%;
     vertical-align: bottom;
   }
+}   
+.verificationCode-box{
+    display: flex;
+    >div{
+        flex: 1;
+        max-width: 171px;
+        &.verificationCode-img{
+            min-width: 90px;
+            height: 34px;
+            margin-left: 5px;
+            flex: initial;
+            background: #C5C5C5;
+            border-radius: 4px;    
+            overflow: hidden;
+            >img{
+                height: 34px;
+                cursor: pointer;
+            }
+        }
+    }
 }
 </style>