|
|
@ -16,6 +16,14 @@ |
|
|
|
<i :class="'el-input__icon el-icon-' + lock" @click="changeLock" slot="suffix"></i> |
|
|
|
</el-input> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item> |
|
|
|
<el-input |
|
|
|
v-model="loginForm.captcha" |
|
|
|
name="logVerify" |
|
|
|
maxlength="10" |
|
|
|
/> |
|
|
|
<img :src="path + picPath" alt="请输入验证码" @click="loginVefify()" class="vPic"> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item> |
|
|
|
<el-button @click="submitForm" style="width:100%">登 录</el-button> |
|
|
|
</el-form-item> |
|
|
@ -27,6 +35,8 @@ |
|
|
|
|
|
|
|
<script> |
|
|
|
import { mapActions } from 'vuex' |
|
|
|
import { captcha } from '@/api/user' |
|
|
|
const path = process.env.VUE_APP_BASE_API |
|
|
|
export default { |
|
|
|
name: 'Login', |
|
|
|
data() { |
|
|
@ -49,14 +59,22 @@ export default { |
|
|
|
lock: 'lock', |
|
|
|
loginForm: { |
|
|
|
username: '', |
|
|
|
password: '' |
|
|
|
password: '', |
|
|
|
captcha:'', |
|
|
|
captchaId: '', |
|
|
|
}, |
|
|
|
rules: { |
|
|
|
username: [{ validator: checkUsername, trigger: 'blur' }], |
|
|
|
password: [{ validator: checkPassword, trigger: 'blur' }] |
|
|
|
} |
|
|
|
}, |
|
|
|
path:path, |
|
|
|
logVerify:'', |
|
|
|
picPath:'' |
|
|
|
} |
|
|
|
}, |
|
|
|
created() { |
|
|
|
this.loginVefify() |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
...mapActions('user', ['LoginIn']), |
|
|
|
async login() { |
|
|
@ -78,6 +96,13 @@ export default { |
|
|
|
}, |
|
|
|
changeLock() { |
|
|
|
this.lock === 'lock' ? (this.lock = 'unlock') : (this.lock = 'lock') |
|
|
|
}, |
|
|
|
loginVefify() { |
|
|
|
console.log(this.logVerify) |
|
|
|
captcha({}).then(ele=>{ |
|
|
|
this.picPath = ele.data.picPath |
|
|
|
this.loginForm.captchaId = ele.data.captchaId |
|
|
|
}) |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
@ -94,5 +119,9 @@ export default { |
|
|
|
margin-left: -22vw; |
|
|
|
top: 25vh; |
|
|
|
} |
|
|
|
.vPic{ |
|
|
|
position: absolute; |
|
|
|
right: 10px; |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |
|
|
|
</style> |