captcha demo

src/api/setting.js

@@ -6,4 +6,12 @@ export function getWebSetting(data) {
       method: 'get',
       data
     })
+}
+
+export function getPageId(data) {
+  return request({
+    url: '/v1/site/page-data',
+    method: 'get',
+    data
+  })
 }

src/lang/en.js

@@ -79,7 +79,8 @@ export default {
     password: 'Password',
     any: 'any',
     thirdparty: 'Or connect with',
-    thirdpartyTips: 'Can not be simulated on local, so please combine you own business simulation! ! !'
+    thirdpartyTips: 'Can not be simulated on local, so please combine you own business simulation! ! !',
+    verifyCode: 'Verification Code'
   },
   documentation: {
     documentation: 'Documentation',

src/lang/es.js

@@ -79,7 +79,8 @@ export default {
     password: 'Contraseña',
     any: 'nada',
     thirdparty: 'Conectar con',
-    thirdpartyTips: 'No se puede simular en local, así que combine su propia simulación de negocios. ! !'
+    thirdpartyTips: 'No se puede simular en local, así que combine su propia simulación de negocios. ! !',
+    verifyCode: 'Código de verificación'
   },
   documentation: {
     documentation: 'Documentación',

src/lang/ja.js

@@ -79,7 +79,8 @@ export default {
     password: 'パスワード',
     any: 'password',
     thirdparty: '外部IDでログイン',
-    thirdpartyTips: 'ローカル環境ではログインできません。実装が必要です。'
+    thirdpartyTips: 'ローカル環境ではログインできません。実装が必要です。',
+    verifyCode: '認証コード'
   },
   documentation: {
     documentation: 'ドキュメント',

src/lang/zh.js

@@ -79,7 +79,8 @@ export default {
     password: '密码',
     any: '随便填',
     thirdparty: '第三方登录',
-    thirdpartyTips: '本地不能模拟，请结合自己业务进行模拟！！！'
+    thirdpartyTips: '本地不能模拟，请结合自己业务进行模拟！！！',
+    verifyCode: '验证码'
   },
   documentation: {
     documentation: '文档',

src/store/modules/settings.js

@@ -1,6 +1,6 @@
 import variables from '@/styles/element-variables.scss'
 import defaultSettings from '@/settings'
-import { getWebSetting } from '@/api/setting'
+import { getWebSetting, getPageId } from '@/api/setting'
 
 const { showSettings, tagsView, fixedHeader, sidebarLogo, supportPinyinSearch } = defaultSettings
 
@@ -38,6 +38,15 @@ const actions = {
       })
     })
   },
+  getPageId({ commit }, data) {
+    return new Promise((resolve, reject) => {
+      getPageId({}).then(response => {
+        resolve(response)
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
 }
 
 export default {

src/views/login/index.vue

@@ -1,14 +1,12 @@
 <template>
   <div class="login-container">
     <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" autocomplete="on" label-position="left">
-
       <div class="title-container">
         <h3 class="title">
           {{ $t('login.title') }}
         </h3>
         <lang-select class="set-language" />
       </div>
-
       <el-form-item prop="username">
         <span class="svg-container">
           <svg-icon icon-class="user" />
@@ -21,6 +19,7 @@
           type="text"
           tabindex="1"
           autocomplete="on"
+          @change="refreshLoginVerifyStatus"
         />
       </el-form-item>
 
@@ -47,7 +46,17 @@
           </span>
         </el-form-item>
       </el-tooltip>
-
+      <el-form-item label-width="0px" class="border-bottom key-name" v-show="isLoginVerify">
+        <el-input
+        type="verifyCode" 
+        v-model="loginForm.verifyCode" 
+        auto-complete="off" 
+        @keyup.enter.native="handleLogin" 
+        :placeholder="$t('login.verifyCode')">
+        </el-input>
+      </el-form-item>
+      <el-image :src="captchaUrl" @click="changeCaptcha" class="login-captcha">
+      </el-image>
       <el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="handleLogin">
         {{ $t('login.logIn') }}
       </el-button>
@@ -106,7 +115,8 @@ export default {
     return {
       loginForm: {
         username: 'admin',
-        password: '111111'
+        password: '111111',
+        verifyCode: ''
       },
       loginRules: {
         // username: [{ required: true, trigger: 'blur', validator: validateUsername }],
@@ -117,6 +127,9 @@ export default {
       loading: false,
       showDialog: false,
       redirect: undefined,
+      isLoginVerify: true,
+      captchaUrl: '',
+      pageId:'',
       otherQuery: {}
     }
   },
@@ -132,6 +145,15 @@ export default {
       immediate: true
     }
   },
+  beforeCreate() {
+    this.$store.dispatch('settings/getPageId', {})
+      .then(response => {
+        this.pageId = response.data.pageId
+        this.captchaUrl = process.env.VUE_APP_BASE_API + '/v1/site/captcha?page_id=' + this.pageId + '&v=' + Math.random();
+      })
+      .catch((error) => {
+      })
+  },
   created() {
     // window.addEventListener('storage', this.afterQRScan)
     console.log('created')
@@ -172,6 +194,10 @@ export default {
               this.loading = false
             })
             .catch(error => {
+              this.refreshLoginVerifyStatus();
+              if( this.isLoginVerify ) {
+                this.changeCaptcha()
+              }
               this.loading = false
             })
         } else {
@@ -180,6 +206,16 @@ export default {
         }
       })
     },
+    // 是否展示验证码
+    refreshLoginVerifyStatus() {
+      if (this.loginForm.username) {
+        // 发送请求
+        console.log('======',this.loginForm.username, '<----->')
+      }
+    },
+    changeCaptcha() {
+      this.captchaUrl = process.env.VUE_APP_BASE_API + '/v1/site/captcha?page_id=' + this.pageId + '&v=' + Math.random();
+    },
     //获取网站设置
     siteConfig() {
       // this.$store.dispatch('settings/getWebSetting', {})
@@ -328,6 +364,10 @@ $light_gray:#eee;
     }
   }
 
+  .login-captcha {
+    background-color: #fff;
+  }
+
   .show-pwd {
     position: absolute;
     right: 10px;