账号密码登录验证码

src/main.js

@@ -19,6 +19,7 @@ axios.defaults.baseURL = protocolName + "//" + domainName;
 axios.defaults.headers["Content-Type"] = "application/json;charset=UTF-8";
 
 Vue.prototype.$http = axios;
+Vue.prototype.$baseURL = protocolName + "//" + domainName;
 Vue.config.productionTip = false;
 // http request拦截器 添加一个请求拦截器
 axios.interceptors.request.use(

src/views/Login.vue

@@ -8,20 +8,17 @@
       服务台
     </h2>
     <div v-if="requesterLgoinType == 'web'" style="width: 5rem">
-      <cube-input
-        v-model="zhanghao"
-        placeholder="您的账号为学工号"
-      ></cube-input>
-      <br />
-      <cube-input
-        v-model="mima"
-        type="password"
-        placeholder="您的初始密码为学工号后四位"
-      ></cube-input>
-      <br />
-      <cube-button @click="zlogin()" style="background: #005395"
-        >登录</cube-button
-      >
+      <div class="login_input">
+        <cube-input v-model="zhanghao" placeholder="您的账号为学工号"></cube-input>
+      </div>
+      <div class="login_input">
+        <cube-input v-model="mima" type="password" placeholder="您的初始密码为学工号后四位"></cube-input>
+      </div>
+      <div class="login_input" style="display: flex;">
+        <cube-input v-model="captcha" placeholder="请输入验证码" style="width: 50%;margin: 0 1%;"></cube-input>
+        <img style="width: 50%;margin: 0 1%;" :src="verificationCodeImg" @click="getVerificationCodeImg">
+      </div>
+      <cube-button @click="zlogin()" style="background: #005395">登录</cube-button>
     </div>
   </div>
 </template>
@@ -36,12 +33,13 @@ import {
 // 注意事项：个人微信需要关注微工作台，否则会导致没有userId（userId为openID）登录失败
 import { decode } from "js-base64";
 import LoadIng from "./../views/loading.vue";
-import http from "../request/http";
 export default {
   data() {
     return {
       zhanghao: "",
       mima: "",
+      captcha: "",
+      verificationCodeImg: "",
       requesterLgoinType: "",
       isSSo: true // 是否单点登录
     };
@@ -50,6 +48,10 @@ export default {
     LoadIng
   },
   methods: {
+    // 获取验证码
+    getVerificationCodeImg(){
+      this.verificationCodeImg = `${this.$baseURL}/service/auth/getCaptcha?` + Date.now();
+    },
     // 获取版本配置（报修主题：报修人/报修科室）
     getConfig() {
       this.$http
@@ -94,6 +96,7 @@ export default {
             this.getCode();
           } else if (this.requesterLgoinType == "web") {
             // this.$router.push({ path: "/login" });
+            this.getVerificationCodeImg();
           }
         }
       });
@@ -121,10 +124,37 @@ export default {
           .split("=")[1];
         ssoStr = decode(decodeURIComponent(ssoStr));
         ssoJson = JSON.parse(ssoStr);
+      }else if(!this.zhanghao || !this.zhanghao.trim()){
+          that.$createDialog({
+              type: "alert",
+              title: "提示",
+              content: "请输入用户名",
+              icon: "cubeic-wrong",
+              color: "red"
+            }).show();
+          return;
+      }else if(!this.mima || !this.mima.trim()){
+          that.$createDialog({
+              type: "alert",
+              title: "提示",
+              content: "请输入密码",
+              icon: "cubeic-wrong",
+              color: "red"
+            }).show();
+          return;
+      }else if(!this.captcha || !this.captcha.trim()){
+          that.$createDialog({
+              type: "alert",
+              title: "提示",
+              content: "请输入验证码",
+              icon: "cubeic-wrong",
+              color: "red"
+            }).show();
+          return;
       }
       var postData = this.isSSo
         ? { username: ssoJson.a, password: ssoJson.u, t: false }
-        : { username: this.zhanghao, password: this.mima };
+        : { username: this.zhanghao, password: this.mima, captcha: this.captcha };
       postData = {
         k: this.encryptByEnAESLogin(JSON.stringify(postData))
       };
@@ -137,16 +167,24 @@ export default {
             JSON.stringify(res.data.data.requester)
           );
           this.getConfig();
+        } else if(res.data && res.data.state == 403){
+          // 403代表验证码校验失败
+          that.$createDialog({
+              type: "alert",
+              title: "提示",
+              content: "验证码错误",
+              icon: "cubeic-wrong",
+              color: "red"
+            }).show();
+            this.getVerificationCodeImg();
         } else {
-          that
-            .$createDialog({
+          that.$createDialog({
               type: "alert",
               title: "系统错误",
               content: "请稍后再试",
               icon: "cubeic-wrong",
               color: "red"
-            })
-            .show();
+            }).show();
         }
       });
     },
@@ -239,6 +277,9 @@ export default {
 </script>
 
 <style scoped>
+.login_input{
+  margin-bottom: 0.2rem;
+}
 .color {
   color: red;
   font-size: 1rem;