<template>
|
<div class="loginForm">
|
<div class="login-form">
|
<el-tabs v-model="activeName" :stretch="true">
|
<el-tab-pane label="账号登录" name="first">
|
<el-form
|
:model="user"
|
:rules="nullRule"
|
:validate-on-rule-change="false"
|
ref="userLogin"
|
class="demo-ruleForm"
|
>
|
<el-form-item prop="loginName">
|
<el-input
|
v-model="user.loginName"
|
placeholder="请输入手机号 / 用户名"
|
>
|
<i slot="prefix" class="iconfont"></i>
|
</el-input>
|
</el-form-item>
|
<el-form-item prop="password" class="password-form-item">
|
<el-input
|
show-password
|
@keyup.enter.native="userLogin"
|
v-model="user.password"
|
autocomplete="off"
|
placeholder="请输入密码"
|
>
|
<i slot="prefix" class="iconfont"></i>
|
</el-input>
|
</el-form-item>
|
<el-form-item>
|
<el-button
|
type="primary"
|
@click="userLogin"
|
class="loginBtn"
|
:disabled="!user.loginName || !user.password"
|
>登录</el-button
|
>
|
</el-form-item>
|
<div class="option">
|
<el-link class="cursor-register" target="_blank">
|
<router-link to="/Register">注册</router-link>
|
</el-link>
|
<el-link class="cursor-pointer" type="primary" @click="forget"
|
>忘记密码</el-link
|
>
|
</div>
|
</el-form>
|
</el-tab-pane>
|
<el-tab-pane label="短信登录" name="second">
|
<el-form
|
:model="phone"
|
:rules="phoneCodeRule"
|
:validate-on-rule-change="false"
|
ref="phoneLogin"
|
class="demo-ruleForm"
|
>
|
<el-form-item prop="phoneNum">
|
<div class="phoneNum">
|
<el-input v-model="phone.phoneNum" placeholder="请输入手机号">
|
<i slot="prefix" class="iconfont icon-shoujihao"></i>
|
</el-input>
|
</div>
|
</el-form-item>
|
<el-form-item prop="verifyCode">
|
<el-input
|
@keyup.enter.native="phoneLogin"
|
v-model="phone.verifyCode"
|
autocomplete="off"
|
placeholder="请输入验证码"
|
>
|
<i slot="prefix" class="iconfont icon-yanzhengma"></i>
|
</el-input>
|
<el-button
|
class="code-btn"
|
:disabled="codeDisabled"
|
@click="getCode('phoneLogin')"
|
>{{ codeMsg }}</el-button
|
>
|
</el-form-item>
|
<el-form-item>
|
<el-button
|
type="primary"
|
@click="phoneLogin('phoneLogin')"
|
class="loginBtn"
|
:disabled="!phone.phoneNum || !phone.verifyCode"
|
>登录</el-button
|
>
|
</el-form-item>
|
<div class="option">
|
<el-link class="cursor-register" target="_blank">
|
<router-link to="/Register">注册</router-link>
|
</el-link>
|
<el-link class="cursor-pointer" type="primary" @click="forget"
|
>忘记密码</el-link
|
>
|
</div>
|
</el-form>
|
</el-tab-pane>
|
</el-tabs>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import {
|
tologin,
|
getLoginUserData,
|
makeVerifyCode,
|
getMenuPermission,
|
} from "@/api/login";
|
import { isPhone } from "@/scripts/validate";
|
|
export default {
|
name: "login-pgae",
|
metaInfo: {
|
title: "登录页",
|
},
|
data: () => ({
|
activeName: "first",
|
countdown: 60,
|
gotCode: false,
|
codeMsg: "获取验证码",
|
codeDisabled: false,
|
phoneNum: "",
|
verifyCode: "",
|
newPassword: "",
|
passwordAgain: "",
|
user: {
|
loginName: "",
|
password: "",
|
rememberMe: false,
|
},
|
phone: {
|
phoneNum: "",
|
verifyCode: "",
|
},
|
nullRule: {},
|
userRules: {
|
loginName: [
|
{ required: true, message: "请输入用户名", trigger: "change" },
|
],
|
password: [{ required: true, message: "请输入密码", trigger: "change" }],
|
},
|
phoneCodeRule: {
|
phoneNum: [{ validator: isPhone, trigger: "change" }],
|
verifyCode: [
|
{ required: true, message: "请输入验证码", trigger: "change" },
|
],
|
},
|
loading: "",
|
vLoading: false,
|
}),
|
|
methods: {
|
phoneLogin() {
|
this.nullRule = this.phoneCodeRule;
|
this.$nextTick(() => {
|
this.$refs["phoneLogin"].validate((valid) => {
|
if (valid) {
|
this.loading = this.$loading({
|
// lock: true,
|
text: "Loading",
|
spinner: "el-icon-loading",
|
background: "rgba(0, 0, 0, 0.7)",
|
});
|
let param = {
|
phoneNum: this.phone.phoneNum,
|
verifyCode: this.phone.verifyCode,
|
};
|
this.testLogin(param);
|
// return false
|
} else {
|
this.nullRule = {};
|
}
|
});
|
this.nullRule = {};
|
});
|
},
|
userLogin() {
|
this.nullRule = this.userRules;
|
this.$nextTick(() => {
|
this.$refs["userLogin"].validate((valid) => {
|
if (valid) {
|
this.loading = this.$loading({
|
// lock: true,
|
text: "Loading",
|
spinner: "el-icon-loading",
|
background: "rgba(0, 0, 0, 0.7)",
|
});
|
let param = {
|
username: this.user.loginName,
|
password: this.user.password,
|
};
|
this.testLogin(param);
|
// return false
|
} else {
|
this.nullRule = {};
|
}
|
});
|
this.nullRule = {};
|
});
|
},
|
getValidStr() {
|
if (this.countdown > 0 && this.countdown <= 60) {
|
this.countdown--;
|
if (this.countdown !== 0) {
|
this.codeMsg = `${this.countdown}s`;
|
} else {
|
clearInterval(this.timer);
|
this.codeMsg = "获取验证码";
|
this.countdown = 60;
|
this.timer = null;
|
this.codeDisabled = false;
|
}
|
}
|
},
|
// 获取验证码
|
getCode(formName) {
|
// // 验证码60秒倒计时
|
// var pattern = /^1[345789]\d{9}$/;
|
// if (this.phone.phoneNum == "") {
|
// this.$refs[formName].fields[0].validateMessage = "请输入手机号";
|
// this.$refs[formName].fields[0].validateState = "error";
|
// return;
|
// }
|
// if (!pattern.test(this.phone.phoneNum)) {
|
// this.$refs[formName].fields[0].validateMessage = "手机号码格式有误";
|
// this.$refs[formName].fields[0].validateState = "error";
|
// return;
|
// }
|
|
this.$refs[formName].validateField("phoneNum", (res) => {
|
if (res) {
|
document.querySelector(".phoneNum .el-input__inner").focus();
|
}
|
if (!this.timer && !res) {
|
this.codeDisabled = true;
|
this.getValidStr();
|
this.timer = setInterval(this.getValidStr, 1000);
|
makeVerifyCode({ phoneNum: this.phone.phoneNum })
|
.then(() => {
|
this.gotCode = true;
|
})
|
.catch((err) => {
|
this.$refs[formName].fields[0].validateState = "error";
|
setTimeout(() => {
|
if (document.querySelector(".el-form-item__error")) {
|
document.querySelector(".el-form-item__error").innerHTML =
|
'<span class="iconfont error"></span>手机号未注册,您可以<span class="colorBlue toRegister">去注册</span>';
|
this.$nextTick(() => {
|
document
|
.querySelector(".toRegister")
|
.addEventListener("click", () => {
|
this.$router.push("/register");
|
});
|
});
|
} else {
|
this.$refs[formName].fields[0].validateMessage = err.data.msg;
|
}
|
document.querySelector(".phoneNum .el-input__inner").focus();
|
}, 100);
|
});
|
}
|
});
|
},
|
async testLogin(param) {
|
tologin(param)
|
.then((res) => {
|
const data = res.data;
|
const loginedInfo = {
|
access_token: data.token_type + " " + data.access_token,
|
refresh_token: data.refresh_token,
|
};
|
sessionStorage.setItem("expires_in", data.expires_in);
|
sessionStorage.setItem("loginedInfo", JSON.stringify(loginedInfo));
|
|
getMenuPermission().then((rep) => {
|
data.userInfo.permissions = rep.data.permissions;
|
sessionStorage.setItem("userInfo", JSON.stringify(data.userInfo));
|
this.$router.push("/");
|
});
|
this.loading.close();
|
})
|
.catch((err) => {
|
this.loading.close();
|
|
if (err.data && err.data.msg == "验证码有误") {
|
this.$refs["phoneLogin"].fields[1].validateState = "error";
|
|
setTimeout(() => {
|
if (document.querySelector(".el-form-item__error")) {
|
document.querySelector(".el-form-item__error").innerHTML =
|
'<span class="iconfont error"></span>验证码不正确，请重新输入';
|
} else {
|
this.$refs["phoneLogin"].fields[1].validateMessage =
|
err.data.msg;
|
}
|
document.querySelector(".phoneNum .el-input__inner").focus();
|
}, 100);
|
} else if (err.data.msg == "用户名或密码有误") {
|
this.$refs["userLogin"].fields[1].validateState = "error";
|
|
setTimeout(() => {
|
if (document.querySelector(".el-form-item__error")) {
|
document.querySelector(".el-form-item__error").innerHTML =
|
'<span class="iconfont error"></span>用户名或密码有误';
|
} else {
|
this.$refs["userLogin"].fields[1].validateMessage =
|
err.data.msg;
|
}
|
document.querySelector(".phoneNum .el-input__inner").focus();
|
}, 100);
|
}
|
|
// this.$notify({
|
// title: "提示",
|
// type: "error",
|
// message: err.data.msg,
|
// duration: 2500,
|
// offset: 57,
|
// });
|
// this.$refs.pwd.focus();
|
});
|
// this.loading = false
|
},
|
forget() {
|
this.$router.push({
|
path: "/Register",
|
query: {
|
isReset: true,
|
},
|
});
|
},
|
async getLoginUserData() {
|
let json = await getLoginUserData();
|
if (!json.error) {
|
// this.loading.close()
|
sessionStorage.setItem("userInfo", JSON.stringify(json));
|
this.$notify({
|
title: "提示",
|
type: "success",
|
message: "登录成功！",
|
duration: 2500,
|
offset: 57,
|
});
|
/* 判断当前是否在登录页，如果在登录页 */
|
// if (window.location.href.indexOf('/login') !== -1) {
|
// router.push({
|
// path: '/',
|
// query: {
|
// is_login: true
|
// }
|
// })
|
// }
|
// await this.getMenuList();
|
this.$router.push("/Layout/ProductCenter");
|
return json;
|
} else {
|
this.$notify({
|
title: "提示",
|
type: "error",
|
message: "登录失败！",
|
duration: 2500,
|
offset: 57,
|
});
|
// this.loading.close()
|
}
|
},
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.loginForm {
|
position: absolute;
|
width: 660px;
|
height: 454px;
|
left: 240px;
|
top: 313px;
|
box-sizing: border-box;
|
background-color: #fff;
|
|
.el-tabs ::v-deep {
|
margin: 0 30px;
|
|
.el-tabs__item {
|
box-sizing: border-box;
|
padding: 0;
|
margin: 10px 0;
|
height: 70px;
|
line-height: 70px;
|
font-size: 18px;
|
color: #999999;
|
|
&.is-active {
|
color: #0065ff;
|
}
|
}
|
|
#tab-first {
|
border-right: 1px solid #e9ebee;
|
}
|
|
.el-tabs__active-bar {
|
left: 102px;
|
width: 96px !important;
|
background: #0065ff;
|
}
|
|
.el-tabs__nav-wrap::after {
|
height: 1px;
|
color: #e9ebee;
|
}
|
|
.el-tabs__header {
|
margin-bottom: 60px;
|
}
|
|
.el-form-item {
|
width: 456px;
|
margin: 0 auto;
|
margin-bottom: 30px;
|
|
.el-form-item__content {
|
text-align: center;
|
}
|
|
&.is-error {
|
input:focus {
|
border-color: #ff4b33;
|
}
|
}
|
}
|
}
|
|
.el-input ::v-deep {
|
width: 456px;
|
height: 48px;
|
input {
|
padding-left: 64px;
|
height: 48px;
|
border: 1px solid #c0c5cc;
|
box-sizing: border-box;
|
border-radius: 4px;
|
|
&::-webkit-input-placeholder {
|
font-size: 16px;
|
color: #999;
|
}
|
|
&:focus {
|
border-color: #0065ff;
|
}
|
}
|
|
.iconfont {
|
margin: 0 20px;
|
font-size: 24px;
|
line-height: 48px;
|
color: #999999;
|
}
|
}
|
|
.loginBtn {
|
margin-top: 30px;
|
width: 456px;
|
height: 48px;
|
background: #0065ff;
|
border-radius: 4px;
|
|
&:hover {
|
background: #0033ff;
|
}
|
|
&.is-disabled {
|
background: #0065ff;
|
opacity: 0.5;
|
}
|
}
|
|
.code-btn {
|
box-sizing: border-box;
|
width: 101px;
|
height: 30px;
|
position: absolute;
|
top: 9px;
|
right: 20px;
|
padding: 4px 0;
|
padding-left: 20px;
|
border: none;
|
border-left: 1px solid #c0c5cc;
|
border-radius: 0;
|
|
font-size: 16px;
|
line-height: 22px;
|
|
color: #0065ff;
|
|
&:hover {
|
background-color: #fff;
|
}
|
|
&.is-disabled {
|
color: #999999;
|
}
|
}
|
|
.option {
|
margin-top: -10px;
|
text-align: center;
|
|
.cursor-register {
|
box-sizing: content-box;
|
padding: 0 24px;
|
border-right: 1px solid #c0c5cc;
|
color: #666666;
|
|
&::after {
|
display: none;
|
}
|
}
|
|
.cursor-pointer {
|
box-sizing: content-box;
|
padding: 0 24px;
|
color: #666666;
|
|
&::after {
|
display: none;
|
}
|
}
|
}
|
|
::v-deep .error {
|
margin-right: 10px;
|
}
|
|
::v-deep .el-form-item__error {
|
color: #ff4b33;
|
font-size: 14px;
|
|
.toRegister {
|
cursor: pointer;
|
text-decoration: underline;
|
}
|
}
|
}
|
</style>
|
