<template>
|
<el-form
|
ref="loginForm"
|
:rules="loginRules"
|
:model="loginForm"
|
class="login-form"
|
status-icon
|
label-width="0"
|
>
|
<el-form-item prop="username">
|
<el-input
|
v-model="loginForm.username"
|
size="small"
|
auto-complete="off"
|
placeholder="请输入用户名"
|
@keyup.enter.native="handleLogin"
|
>
|
<i slot="prefix" class="icon-yonghuming" />
|
</el-input>
|
</el-form-item>
|
<el-form-item prop="password">
|
<el-input
|
:type="passwordType"
|
v-model="loginForm.password"
|
size="small"
|
auto-complete="off"
|
placeholder="请输入密码"
|
@keyup.enter.native="handleLogin"
|
>
|
<i slot="suffix" class="el-icon-view el-input__icon" @click="showPassword" />
|
<i slot="prefix" class="icon-mima"></i>
|
</el-input>
|
</el-form-item>
|
<el-form-item prop="code" v-if="website.validateCode">
|
<!--<Verify
|
@success="verifySuccess"
|
:mode="'pop'"
|
:captchaType="'blockPuzzle'"
|
:imgSize="{ width: '330px', height: '155px' }"
|
ref="verify"
|
/>-->
|
<el-row :span="24">
|
<el-col :span="16">
|
<el-input
|
size="small"
|
@keyup.enter.native="handleLogin"
|
:maxLength="code.len"
|
v-model="loginForm.code"
|
auto-complete="off"
|
placeholder="请输入验证码"
|
>
|
<i slot="prefix" class="icon-yanzhengma"></i>
|
</el-input>
|
</el-col>
|
<el-col :span="8">
|
<div class="login-code">
|
<span
|
class="login-code-img"
|
@click="refreshCode"
|
v-if="code.type == 'text'"
|
>{{code.value}}</span>
|
<img :src="code.src"
|
class="login-code-img"
|
@click="refreshCode"
|
v-else>
|
</div>
|
</el-col>
|
</el-row>
|
</el-form-item>
|
<el-form-item>
|
<el-button
|
v-show="loginShow"
|
type="primary"
|
size="small"
|
class="login-submit"
|
@click.native.prevent="handleLogin"
|
>登录</el-button>
|
<el-button
|
style="width: 100%"
|
v-show="loadingShow"
|
type="primary"
|
class="login-submit"
|
:loading="true"
|
>加载中</el-button>
|
</el-form-item>
|
</el-form>
|
</template>
|
|
<script>
|
import { randomLenNum } from "@/util/util";
|
import { mapGetters } from "vuex";
|
import { getCode } from "@/api/code";
|
import Verify from "@/components/verifition/Verify";
|
|
export default {
|
name: "Userlogin",
|
components: {
|
Verify,
|
},
|
data() {
|
return {
|
socialForm: {
|
code: "",
|
state: "",
|
},
|
loginForm: {
|
username: "",
|
password: "",
|
code: "",
|
randomStr: "blockPuzzle",
|
},
|
checked: false,
|
code: {
|
src: undefined,
|
len: 4,
|
},
|
loginRules: {
|
username: [
|
{ required: true, message: "请输入用户名", trigger: "blur" },
|
],
|
password: [
|
{ required: true, message: "请输入密码", trigger: "blur" },
|
{ min: 6, message: "密码长度最少为6位", trigger: "blur" },
|
],
|
},
|
passwordType: "password",
|
loginShow: true,
|
loadingShow: false,
|
};
|
},
|
computed: {
|
...mapGetters(["tagWel","website"]),
|
},
|
created() {
|
if(this.website.validateCode){
|
this.refreshCode();
|
}
|
},
|
methods: {
|
refreshCode() {
|
this.loginForm.code = ''
|
this.loginForm.randomStr = randomLenNum(this.code.len, true)
|
this.code.type === 'text'
|
? (this.code.value = randomLenNum(this.code.len))
|
: (this.code.src = `${this.codeUrl}?randomStr=${this.loginForm.randomStr}`)
|
},
|
showPassword() {
|
this.passwordType == ""
|
? (this.passwordType = "password")
|
: (this.passwordType = "");
|
},
|
handleLogin() {
|
this.$refs.loginForm.validate((valid) => {
|
if (valid) {
|
// this.verifySuccess()
|
// this.$refs.verify.show();
|
this.loginShow = false
|
this.loadingShow = true
|
this.$store.dispatch("LoginByUsername", this.loginForm).then(() => {
|
this.$router.push({ path: this.tagWel.value });
|
console.log(this.tagWel.value,'this.tagWel.value')
|
}).catch(err => {
|
this.refreshCode()
|
this.loginShow = true
|
this.loadingShow = false
|
});
|
}
|
});
|
},
|
verifySuccess(params) {
|
// this.loginForm.code = params.captchaVerification;
|
|
this.$store.dispatch("LoginByUsername", this.loginForm).then(() => {
|
this.$router.push({ path: this.tagWel.value });
|
});
|
},
|
},
|
};
|
</script>
|
|
<style>
|
</style>
|
