src/views/frame/Login.vue

@@ -18,6 +18,17 @@
             >
             </el-input>
           </el-form-item>
+          <el-form-item prop="code">
+            <el-input
+              class="codeBox"
+              v-model="loginForm.code"
+              placeholder="验证码"
+              prefix-icon="naf-icons naf-icon-verifycode"
+              @keyup.13.native="submitForm('loginForm')"
+            >
+              <img class="code" slot="append" :src="codeUrl" @click="codeLoad" />
+            </el-input>
+          </el-form-item>
           <el-form-item>
             <el-button type="primary" @click="submitForm('loginForm')" :style="{ width: '100%' }">登录</el-button>
           </el-form-item>
@@ -34,14 +45,17 @@ const title = process.env.VUE_APP_MENU_TITLE
 export default {
   data () {
     return {
+      codeUrl: null,
       title,
       loginForm: {
         acct: '',
-        password: ''
+        password: '',
+        code: ''
       },
       rules: {
         acct: [{ required: true, message: '请输入帐号' }],
-        password: [{ required: true, message: '请输入密码' }]
+        password: [{ required: true, message: '请输入密码' }],
+        code: [{ required: true, message: '请输入验证码' }]
       }
     }
   },
@@ -52,7 +66,8 @@ export default {
         if (valid) {
           const res = await this.login({
             acct: this.loginForm.acct,
-            password: this.loginForm.password
+            password: this.loginForm.password,
+            code: this.loginForm.code
           })
           if (res && res.errcode === 0) {
             sessionStorage.setItem('token', res.token)
@@ -77,12 +92,25 @@ export default {
             })
             return false
           }
+          if (this.loginForm.code === '' || this.loginForm.code == null) {
+            this.$notify.error({
+              title: '错误',
+              message: '请输入验证码',
+              offset: 100
+            })
+            return false
+          }
         }
         return true
       })
+    },
+    codeLoad () {
+      this.codeUrl = `/api/captcha?${Math.random()}`
     }
   },
-  mounted () {}
+  mounted () {
+    this.codeLoad()
+  }
 }
 </script>
 
@@ -127,4 +155,8 @@ h1 {
   position: relative;
   top: 2px;
 }
+.code {
+  display: block;
+  height: 2.5em;
+}
 </style>