登录

package.json

@@ -14,6 +14,7 @@
     "element-ui": "^2.15.1",
     "emoji-vue": "^0.2.4",
     "js-cookie": "^2.2.1",
+    "js-md5": "^0.7.3",
     "mockjs": "^1.1.0",
     "node-sass": "^4.14.1",
     "nprogress": "^0.2.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>
@@ -82,12 +98,11 @@
 <script>
 import { validUsername, validPass } from "@/utils/validate";
 import { getStaticContent } from "@/api/api";
-import { getObjArr, saveObjArr } from "@/utils/role";
-import Cookies from "js-cookie";
+import { getObjArr } from "@/utils/role";
 import { setToken } from "@/utils/auth";
 import { removeSession } from "@/utils/role";
 import { getConfigInfor } from "@/utils/index";
-3;
+import md5 from 'js-md5'
 export default {
   name: "Login",
   data() {
@@ -105,6 +120,13 @@ export default {
         callback();
       }
     };
+    const validateVerificationCode = (rule, value, callback) => {
+      if (!value) {
+        callback(new Error("请输入验证码"));
+      } else {
+        callback();
+      }
+    };
     return {
       options: [],
       select: "1",
@@ -115,6 +137,7 @@ export default {
         username: getObjArr("userName") || "",
         password: "",
         type: "TEACHER",
+        verificationCode:''
       },
       //input 规则
       loginRules: {
@@ -124,12 +147,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,13 +187,13 @@ export default {
         if (valid) {
           this.loading = true;
           let MethodName = "login_control-Login";
-          let UserCode = "";
-          let UserType = "";
-          let SessionID = "";
           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) => {
@@ -173,6 +202,7 @@ export default {
             })
             .catch(() => {
               this.loading = false;
+              this.getVerificationCodeimg()
             });
         } else {
           this.loading = false;
@@ -183,10 +213,29 @@ 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();
     removeSession("SysList");
+    this._getConfig();
+    this.getVerificationCodeimg()
   },
 };
 </script>
@@ -437,5 +486,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>