|
|
@@ -63,6 +63,24 @@
|
|
|
placeholder="密码"
|
|
|
/>
|
|
|
</el-form-item>
|
|
|
+ <el-form-item prop="captcha">
|
|
|
+ <span class="svg-container">
|
|
|
+ <svg-icon icon-class="password"/>
|
|
|
+ </span>
|
|
|
+ <el-input
|
|
|
+ name="captcha"
|
|
|
+ v-model="loginForm.captchaCode"
|
|
|
+ @keyup.enter.native="handleLogin"
|
|
|
+ placeholder="验证码"
|
|
|
+ style="width: 200px !important;"
|
|
|
+ />
|
|
|
+ <img
|
|
|
+ :src="captchaUrl"
|
|
|
+ @click="refreshCaptcha"
|
|
|
+ class="captcha-img"
|
|
|
+ alt="验证码"
|
|
|
+ >
|
|
|
+ </el-form-item>
|
|
|
<el-form-item
|
|
|
prop="authcode"
|
|
|
v-if="showCode"
|
|
|
@@ -121,6 +139,7 @@
|
|
|
|
|
|
<script>
|
|
|
// import drawCanvas from './canvas'
|
|
|
+import { getCaptcha } from '@/api/login'
|
|
|
import { encrypt } from '@/utils'
|
|
|
|
|
|
const blocks = [
|
|
|
@@ -153,19 +172,32 @@ export default {
|
|
|
loginForm: {
|
|
|
projectName: project,
|
|
|
userName,
|
|
|
- password
|
|
|
+ password,
|
|
|
+ captchaId: '',
|
|
|
+ captchaCode: ''
|
|
|
},
|
|
|
loginRules: {
|
|
|
projectName: [{required: true, trigger: 'blur', message: '请输入项目名'}],
|
|
|
userName: [{required: true, trigger: 'blur', message: '请输入用户名'}],
|
|
|
- password: [{required: true, trigger: 'blur', message: '请输入密码'}]
|
|
|
+ password: [{required: true, trigger: 'blur', message: '请输入密码'}],
|
|
|
+ captchaCode: [{required: true, trigger: 'blur', message: '请输入验证码'}]
|
|
|
},
|
|
|
loading: false,
|
|
|
pwdType: 'password',
|
|
|
+ captchaUrl: '',
|
|
|
count: 31
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
+ refreshCaptcha () {
|
|
|
+ getCaptcha()
|
|
|
+ .then(res => {
|
|
|
+ this.loginForm.captchaId = res.headers['captcha-id'] || ''
|
|
|
+ this.captchaUrl = res.data
|
|
|
+ }).catch(() => {
|
|
|
+ this.$message.error('获取验证码失败，请重试')
|
|
|
+ })
|
|
|
+ },
|
|
|
showPwd () {
|
|
|
if (this.pwdType === 'password') {
|
|
|
this.pwdType = ''
|
|
|
@@ -174,11 +206,13 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
handleLogin () {
|
|
|
- const { projectName, userName, password } = this.loginForm
|
|
|
+ const { projectName, userName, password, captchaCode, captchaId } = this.loginForm
|
|
|
let params = {
|
|
|
projectName: projectName.trim(),
|
|
|
userName: userName.trim(),
|
|
|
- password: encrypt(password)
|
|
|
+ password: encrypt(password),
|
|
|
+ captchaCode: captchaCode.trim(),
|
|
|
+ captchaId: captchaId.trim()
|
|
|
}
|
|
|
|
|
|
if (this.savePwd) {
|
|
|
@@ -199,6 +233,7 @@ export default {
|
|
|
this.$router.push('/index/dashboard')
|
|
|
}).catch(() => {
|
|
|
this.loading = false
|
|
|
+ this.refreshCaptcha()
|
|
|
})
|
|
|
} else {
|
|
|
console.log('error submit!!')
|
|
|
@@ -213,6 +248,7 @@ export default {
|
|
|
this.loginForm.projectName = window.localStorage.getItem('projectName') || ''
|
|
|
this.loginForm.password = window.localStorage.getItem('password') || ''
|
|
|
this.savePwd = !!this.loginForm.password
|
|
|
+ this.refreshCaptcha()
|
|
|
},
|
|
|
beforeDestroy () {
|
|
|
this.stopCanvasAnimate = true
|
|
|
@@ -227,6 +263,7 @@ $light_gray: #eee;
|
|
|
/* reset element-ui css */
|
|
|
.login-container {
|
|
|
.el-form-item__content {
|
|
|
+ display: flex;
|
|
|
line-height: 36px;
|
|
|
color: #454545;
|
|
|
border: 1px solid #C3D5E8;
|
|
|
@@ -279,8 +316,8 @@ $light_gray: #eee;
|
|
|
position: absolute;
|
|
|
z-index: 20;
|
|
|
top: 50%;
|
|
|
- margin-top: -300px;
|
|
|
- height: 600px;
|
|
|
+ margin-top: -280px;
|
|
|
+ height: 620px;
|
|
|
left: calc(50% - 480px);
|
|
|
display: flex;
|
|
|
background: #fff;
|
|
|
@@ -372,6 +409,17 @@ $light_gray: #eee;
|
|
|
margin: 4px 0;
|
|
|
border-right: 1px solid #C3D5E8;
|
|
|
}
|
|
|
+
|
|
|
+ .captcha-img {
|
|
|
+ width: 100px;
|
|
|
+ height: 36px;
|
|
|
+ margin-top: 2px;
|
|
|
+ margin-left: 20px;
|
|
|
+ vertical-align: middle;
|
|
|
+ cursor: pointer;
|
|
|
+ border: 1px solid #C3D5E8;
|
|
|
+ border-radius: 4px;
|
|
|
+ }
|
|
|
.show-pwd {
|
|
|
position: absolute; top: 7px; right: 10px; font-size: 16px; color: $dark_gray; cursor: pointer; user-select: none;
|
|
|
}
|
