登录添加验证码

src/api/app.js

@@ -146,3 +146,10 @@ export function GetSysVersionInfo() {
 export function PinyinToAudioFile(data) {
   return http.post(`${process.env.VUE_APP_EepServer}?MethodName=tool-PinyinToAudioFile`, data);
 }
+
+/**
+ * @description 得到验证码图像
+ */
+export function GetVerificationCodeImage() {
+  return http.get(`${process.env.VUE_APP_EepServer}?MethodName=login_control-GetVerificationCodeImage`);
+}

src/views/login/index.vue

@@ -12,6 +12,14 @@
         <el-form-item prop="password" label="密码">
           <el-input v-model="form.password" type="password" show-password />
         </el-form-item>
+        <el-form-item prop="verification_code_image_text" class="verification-code" label="验证码">
+          <el-input v-model="form.verification_code_image_text" @keyup.enter.native="signIn" />
+          <el-image
+            v-if="image_content_base64.length > 0"
+            :src="`data:image/jpg;base64,${image_content_base64}`"
+            @click="updateVerificationCode"
+          />
+        </el-form-item>
         <el-form-item prop="user_type" label="用户类型">
           <el-radio-group v-model="form.user_type">
             <el-radio label="USER">机构用户</el-radio>
@@ -51,7 +59,7 @@
 
 <script>
 import md5 from 'md5';
-import { GetLogo } from '@/api/app';
+import { GetLogo, GetVerificationCodeImage } from '@/api/app';
 import { setConfig, getLocalStore, setLocalStore } from '@/utils/auth';
 import { getUserTypeToJump } from '@/router/guard';
 import { updateBaseURL } from '@/utils/http';
@@ -70,6 +78,8 @@ export default {
         password: '',
         is_password_md5: 'true',
         server_address: getLocalStore('server_address') || '', // 服务器地址
+        verification_code_image_id: '',
+        verification_code_image_text: '',
       },
       rules: {
         user_name: [
@@ -86,15 +96,23 @@ export default {
             trigger: 'blur',
           },
         ],
+        verification_code_image_text: [{ required: true, trigger: 'blur', message: '验证码不能为空' }],
       },
       image_content_base64: '',
       showUseragreement: false,
     };
   },
   created() {
+    this.updateVerificationCode();
     this.getLogo();
   },
   methods: {
+    updateVerificationCode() {
+      GetVerificationCodeImage().then(({ image_id, image_content_base64: image }) => {
+        this.form.verification_code_image_id = image_id;
+        this.image_content_base64 = image;
+      });
+    },
     getLogo() {
       GetLogo().then((res) => {
         setConfig(res);
@@ -114,7 +132,9 @@ export default {
           .then((user_type) => {
             this.$router.push({ path: getUserTypeToJump(user_type) });
           })
-          .catch(() => {});
+          .catch(() => {
+            this.updateVerificationCode();
+          });
       });
     },