|
|
|
|
@ -1,7 +1,7 @@
|
|
|
|
|
<!--
|
|
|
|
|
* @Author: your name
|
|
|
|
|
* @Date: 2021-10-19 14:14:52
|
|
|
|
|
* @LastEditTime: 2021-10-19 16:42:11
|
|
|
|
|
* @LastEditTime: 2021-10-20 16:13:29
|
|
|
|
|
* @LastEditors: Please set LastEditors
|
|
|
|
|
* @Description: In User Settings Edit
|
|
|
|
|
* @FilePath: /data-show/src/views/Login/loginForm/index.vue
|
|
|
|
|
@ -9,19 +9,19 @@
|
|
|
|
|
<template>
|
|
|
|
|
<div class="lgf-outter">
|
|
|
|
|
<a-form-model layout="horizontal" :model="form" :rules="rules" ref="loginForm">
|
|
|
|
|
<a-form-model-item label="用户名" prop="phone">
|
|
|
|
|
<a-input v-model="form.phone" placeholder="请输入账号" autocomplete="off"/>
|
|
|
|
|
<a-form-model-item label="用户名" prop="sUserName">
|
|
|
|
|
<a-input v-model="form.sUserName" placeholder="请输入账号" autocomplete="off" :maxLength="30"/>
|
|
|
|
|
</a-form-model-item>
|
|
|
|
|
<a-form-model-item label="密码" prop="pwd">
|
|
|
|
|
<a-input v-model="form.pwd" :type="pwdType" placeholder="请输入密码" autocomplete="off">
|
|
|
|
|
<a-form-model-item label="密码" prop="sPwd">
|
|
|
|
|
<a-input v-model="form.sPwd" :type="pwdType" placeholder="请输入密码" autocomplete="off">
|
|
|
|
|
<span slot="suffix" class="iconfont icon-zhengyan-21 login-eye" v-if="pwdType==='password'" @click="changePwdType"></span>
|
|
|
|
|
<span slot="suffix" class="iconfont icon-in_biyan login-eye" v-else @click="changePwdType"></span>
|
|
|
|
|
</a-input>
|
|
|
|
|
</a-form-model-item>
|
|
|
|
|
<a-form-model-item label="验证码" prop="code">
|
|
|
|
|
<a-input v-model="form.code" placeholder="请输入验证码" autocomplete="off">
|
|
|
|
|
<a-button slot="addonAfter" style="width: 100px" @click="countdown" v-if="showCode">FNMAK</a-button>
|
|
|
|
|
<a-button slot="addonAfter" style="width: 100px" v-else>{{count}}</a-button>
|
|
|
|
|
<a-form-model-item label="验证码" prop="sVerifycode">
|
|
|
|
|
<a-input v-model="form.sVerifycode" placeholder="请输入验证码" autocomplete="off">
|
|
|
|
|
<a-button slot="addonAfter" style="width: 100px" @click="getCode" v-if="!codeImg" :loading="btnLoading">获取验证码</a-button>
|
|
|
|
|
<img style="width: 100px; height: 30px;cursor: pointer;" slot="addonAfter" :src="codeImg" @click="getCode" v-else>
|
|
|
|
|
</a-input>
|
|
|
|
|
</a-form-model-item>
|
|
|
|
|
</a-form-model>
|
|
|
|
|
@ -38,6 +38,7 @@
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
import {loginSubmit, getVerifycode} from "@/api/login"
|
|
|
|
|
export default {
|
|
|
|
|
name: "loginForm",
|
|
|
|
|
data() {
|
|
|
|
|
@ -60,16 +61,7 @@ export default {
|
|
|
|
|
if (value === "") {
|
|
|
|
|
callback(new Error("请输入账户"));
|
|
|
|
|
} else {
|
|
|
|
|
let reg = /^[0-9a-zA-Z]*$/;
|
|
|
|
|
if (!reg.test(value)) {
|
|
|
|
|
callback(
|
|
|
|
|
new Error("用户名是英文字母或英文字母与数字的组合")
|
|
|
|
|
);
|
|
|
|
|
} else if (value.length < 8 || value.length > 13) {
|
|
|
|
|
callback(new Error("账号在8~13位之间"));
|
|
|
|
|
} else {
|
|
|
|
|
callback();
|
|
|
|
|
}
|
|
|
|
|
callback();
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
const validateCode = (rule, value, callback) => {
|
|
|
|
|
@ -82,43 +74,42 @@ export default {
|
|
|
|
|
return {
|
|
|
|
|
pwdType: "password",
|
|
|
|
|
remCheck: false,
|
|
|
|
|
count: 0,
|
|
|
|
|
showCode: true,
|
|
|
|
|
timer: null,
|
|
|
|
|
codeImg: "",
|
|
|
|
|
btnLoading: false,
|
|
|
|
|
form: {
|
|
|
|
|
phone: "",
|
|
|
|
|
pwd: "",
|
|
|
|
|
code: "",
|
|
|
|
|
sUserName: "",
|
|
|
|
|
sPwd: "",
|
|
|
|
|
sVerifycode: "",
|
|
|
|
|
},
|
|
|
|
|
rules: {
|
|
|
|
|
phone: [{ validator: validateAccount, trigger: "change" }],
|
|
|
|
|
pwd: [{ validator: validatePass, trigger: "change" }],
|
|
|
|
|
code: [{ validator: validateCode, trigger: "change" }],
|
|
|
|
|
sUserName: [{ validator: validateAccount, trigger: "change" }],
|
|
|
|
|
sPwd: [{ validator: validatePass, trigger: "change" }],
|
|
|
|
|
sVerifycode: [{ validator: validateCode, trigger: "change" }],
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
created() {
|
|
|
|
|
if(JSON.stringify(this.getAccount) != "{}") {
|
|
|
|
|
this.remCheck = this.getAccount.remCheck;
|
|
|
|
|
this.form.sUserName = this.getAccount.sUserName;
|
|
|
|
|
this.form.sPwd = this.getAccount.sPwd;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
// 改变是否可以看密码
|
|
|
|
|
changePwdType() {
|
|
|
|
|
this.pwdType = this.pwdType === "password" ? "" : "password";
|
|
|
|
|
},
|
|
|
|
|
// 倒计时
|
|
|
|
|
countdown() {
|
|
|
|
|
const TIME_COUNT = 60;
|
|
|
|
|
if (!this.timer) {
|
|
|
|
|
this.count = TIME_COUNT;
|
|
|
|
|
this.showCode = false;
|
|
|
|
|
this.timer = setInterval(() => {
|
|
|
|
|
if (this.count > 0 && this.count <= TIME_COUNT) {
|
|
|
|
|
this.count--;
|
|
|
|
|
} else {
|
|
|
|
|
this.showCode = true;
|
|
|
|
|
clearInterval(this.timer);
|
|
|
|
|
this.timer = null;
|
|
|
|
|
}
|
|
|
|
|
}, 1000);
|
|
|
|
|
}
|
|
|
|
|
// 获取验证码
|
|
|
|
|
getCode() {
|
|
|
|
|
this.btnLoading = true;
|
|
|
|
|
getVerifycode().then(res => {
|
|
|
|
|
this.codeImg = `data:image/jpeg;base64,${res.data}`
|
|
|
|
|
this.btnLoading = false;
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
//忘记密码
|
|
|
|
|
forgetPassword() {
|
|
|
|
|
this.$emit("forgetPassword");
|
|
|
|
|
@ -127,7 +118,16 @@ export default {
|
|
|
|
|
onSubmit() {
|
|
|
|
|
this.$refs.loginForm.validate((valid) => {
|
|
|
|
|
if (valid) {
|
|
|
|
|
alert("submit!");
|
|
|
|
|
loginSubmit(this.form).then(res => {
|
|
|
|
|
let data = res.data;
|
|
|
|
|
this.setToken(data.toKen);
|
|
|
|
|
this.setUser(data);
|
|
|
|
|
if(this.remCheck) {
|
|
|
|
|
this.setAccount({sUserName:this.form.sUserName, sPwd: this.form.sPwd, remCheck: this.remCheck})
|
|
|
|
|
} else {
|
|
|
|
|
this.setAccount({});
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
} else {
|
|
|
|
|
console.log("error submit!!");
|
|
|
|
|
return false;
|
|
|
|
|
|
