<template>
|
<div
|
class="login-bg"
|
v-loading="vLoading"
|
:style="`width: ${currentWidth}px;height:${currentHeight}px`"
|
>
|
<!-- <div class="login-top">
|
<div class="text-right">
|
<el-link
|
class="toIndex cursor-pointer"
|
href="http://smartai.com/"
|
target="_blank"
|
>
|
<span>返回首页</span>
|
</el-link>
|
<el-link
|
class="cursor-pointer"
|
href="http://smartai.com/"
|
target="_blank"
|
>
|
</el-link>
|
<span class="devide">|</span>
|
<el-link
|
class="qrcode cursor-pointer"
|
href="http://smartai.com/"
|
target="_blank"
|
>
|
<img src="../assets/img/u132.png" />
|
</el-link>
|
</div>
|
</div>
|
-->
|
<div class="login-middle">
|
<div class="login-form" v-if="!forgetPassword">
|
<div class="icon-logo">
|
<img src="../assets/img/icon_logo.png" alt />
|
</div>
|
<h1 class="welcome">欢迎登录</h1>
|
|
<el-tabs v-model="activeName" @tab-click="handleClick">
|
<el-tab-pane name="first">
|
<el-form
|
:model="user"
|
status-icon
|
:rules="nullRule"
|
:validate-on-rule-change="false"
|
ref="userLogin"
|
class="demo-ruleForm"
|
>
|
<el-form-item prop="loginName" style="margin-top: 20px">
|
<el-input
|
v-model="user.loginName"
|
style="width: 380px"
|
placeholder="请输入手机号 / 用户名"
|
>
|
<i slot="prefix" class="iconfont icon-yonghu"></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"
|
style="width: 380px"
|
placeholder="请输入密码"
|
>
|
<i slot="prefix" class="iconfont icon-mima1"></i>
|
</el-input>
|
<!-- <el-link
|
class="cursor-pointer toForgetPassword"
|
type="primary"
|
@click="forget"
|
>忘记密码</el-link
|
> -->
|
</el-form-item>
|
<el-form-item>
|
<el-button
|
type="primary"
|
@click="userLogin"
|
style="width: 380px; margin-top: 32px"
|
>登录</el-button
|
>
|
</el-form-item>
|
<!-- <p class="toRegist text-left">
|
还没有账号？
|
<el-link class="cursor-pointer" target="_blank">
|
<router-link to="/Register">立即注册</router-link>
|
</el-link>
|
</p> -->
|
</el-form>
|
</el-tab-pane>
|
<!-- <el-tab-pane label="短信登录" name="second">
|
<el-form
|
:model="phone"
|
status-icon
|
:rules="phoneCodeRule"
|
:validate-on-rule-change="false"
|
ref="phoneLogin"
|
class="demo-ruleForm"
|
>
|
<el-form-item prop="phoneNum" style="margin-top: 20px">
|
<el-input
|
v-model="phone.phoneNum"
|
style="width: 380px"
|
placeholder="请输入手机号"
|
>
|
<i slot="prefix" class="iconfont icon-shoujihao"></i>
|
</el-input>
|
</el-form-item>
|
<el-form-item prop="verifyCode">
|
<el-input
|
@keyup.enter.native="phoneLogin"
|
v-model="phone.verifyCode"
|
autocomplete="off"
|
style="width: 254px"
|
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')"
|
style="width: 380px; margin-top: 32px"
|
>登录</el-button
|
>
|
</el-form-item>
|
<p class="toRegist text-left">
|
还没有账号？
|
<el-link class="cursor-pointer" target="_blank">
|
<router-link to="/Register">立即注册</router-link>
|
</el-link>
|
</p>
|
</el-form>
|
</el-tab-pane> -->
|
</el-tabs>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import {
|
tologin,
|
getLoginUserData,
|
getVerifyCode,
|
updatePwd,
|
forgetPwd,
|
} from "@/api/login";
|
import { getMenuListData, findButtonAuthoritys, findInArr } from "@/api/utils";
|
import { isPhone } from "@/scripts/validate";
|
|
export default {
|
name: "login-pgae",
|
metaInfo: {
|
title: "登录页",
|
},
|
data: () => ({
|
activeName: "first",
|
active: 0,
|
forgetPassword: false,
|
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,
|
currentHeight: 1057,
|
currentWidth: 1920,
|
}),
|
|
methods: {
|
handleClick(tab, event) {},
|
phoneLogin(formName) {
|
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 + ")";
|
} 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;
|
}
|
if (!this.timer) {
|
this.codeDisabled = true;
|
this.getValidStr();
|
this.timer = setInterval(this.getValidStr, 1000);
|
getVerifyCode({ phoneNum: this.phone.phoneNum })
|
.then((res) => {
|
this.gotCode = true;
|
})
|
.catch((err) => {
|
this.$refs[formName].fields[0].validateMessage = err.data.msg;
|
this.$refs[formName].fields[0].validateState = "error";
|
});
|
}
|
},
|
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));
|
sessionStorage.setItem("userInfo", JSON.stringify(data.userInfo));
|
if (this.user.loginName == "basic") {
|
this.AuthData.background = true;
|
}
|
this.loading.close();
|
|
if (!data.userInfo.phoneNum || data.userInfo.reEditPwd) {
|
sessionStorage.setItem("userInfo", JSON.stringify(data.userInfo));
|
this.$router.push({
|
name: "BindPhone",
|
params: { userInfo: data.userInfo },
|
});
|
} else {
|
if (window.location.hash == "#bbs") {
|
window.location.href = data.bbsHost;
|
} else {
|
this.$router.push("/Layout/UserList");
|
}
|
}
|
})
|
.catch((err) => {
|
this.loading.close();
|
if (err && err.status == 401) {
|
return;
|
}
|
this.$notify({
|
title: "提示",
|
type: "error",
|
message: err.data.msg,
|
duration: 2500,
|
offset: 57,
|
});
|
// this.$refs.pwd.focus();
|
});
|
// this.loading = false
|
},
|
|
forget() {
|
this.phone = { phoneNum: "", verifyCode: "" };
|
this.gotCode = false;
|
//this.active = -1;
|
//this.next();
|
//this.forgetPassword = true;
|
this.$router.push("/ForgetPsd");
|
},
|
async setNewPassword() {
|
let res = await forgetPwd({
|
phoneNum: this.phone.phoneNum,
|
verifyCode: this.phone.verifyCode,
|
newPwd: this.newPassword,
|
});
|
return res;
|
},
|
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/Home");
|
return json;
|
} else {
|
this.$notify({
|
title: "提示",
|
type: "error",
|
message: "登录失败！",
|
duration: 2500,
|
offset: 57,
|
});
|
// this.loading.close()
|
}
|
},
|
getScreenHeight() {
|
this.currentHeight = document.documentElement.clientHeight;
|
this.currentWidth = document.documentElement.clientWidth;
|
window.onresize = () => {
|
this.currentHeight = document.documentElement.clientHeight;
|
this.currentWidth = document.documentElement.clientWidth;
|
this.$forceUpdate();
|
};
|
},
|
},
|
created() {
|
this.getScreenHeight();
|
},
|
watch: {},
|
beforeDestroy() {
|
window.onresize = null;
|
},
|
};
|
</script>
|
<style lang="scss">
|
.login-bg {
|
background: url("../assets/img/loginBj.png") no-repeat;
|
background-size: 100% 100%;
|
}
|
|
.login-top {
|
.text-right {
|
float: right;
|
margin-top: 25px;
|
margin-right: 40px;
|
display: flex;
|
align-items: center;
|
.devide {
|
height: 14px;
|
width: 1px;
|
margin: 0 15px;
|
}
|
img {
|
display: block;
|
}
|
}
|
.toIndex {
|
height: 18px;
|
font-size: 18px;
|
font-family: PingFangSC-Medium, PingFang SC;
|
font-weight: 500;
|
line-height: 18px;
|
color: #fff !important;
|
}
|
.el-link.is-underline:hover:after {
|
display: none;
|
}
|
.qrcode {
|
img {
|
width: 29px;
|
}
|
}
|
}
|
.web-site {
|
position: absolute;
|
top: 55px;
|
left: 41px;
|
font-family: PingFangSC-Medium;
|
font-size: 20px;
|
color: #6170e1;
|
letter-spacing: 6.15px;
|
}
|
|
.login-middle {
|
color: #555;
|
.el-form-item__error {
|
left: 14px;
|
}
|
.el-input__prefix {
|
left: 9px;
|
.iconfont {
|
font-size: 20px;
|
}
|
}
|
.el-input--prefix {
|
.el-input__inner {
|
padding-left: 35px;
|
}
|
}
|
.login-form {
|
position: absolute;
|
width: 567px;
|
padding: 0 94px;
|
box-sizing: border-box;
|
height: 526px;
|
top: 50%;
|
left: 50%;
|
transform: translate(-50%, -50%);
|
background: #ffffff;
|
box-shadow: 0px 0px 20px 0px rgba(234, 30, 36, 0.1);
|
.el-button {
|
border: none;
|
}
|
.el-input__inner {
|
background: #fff !important;
|
}
|
.el-input__inner:focus {
|
border-color: #888 !important;
|
}
|
.el-tabs__nav {
|
float: none;
|
}
|
.el-tabs__item {
|
height: 22px;
|
font-size: 16px;
|
font-family: PingFangSC-Medium, PingFang SC;
|
font-weight: bold;
|
line-height: 22px;
|
position: relative;
|
&:after {
|
content: "";
|
position: absolute;
|
width: 1px;
|
height: 14px;
|
left: 84px;
|
top: 5px;
|
background: #ccc;
|
}
|
&:last-of-type {
|
&:after {
|
display: none;
|
}
|
}
|
}
|
.el-tabs__nav-wrap::after {
|
display: none;
|
}
|
.el-tabs__active-bar {
|
display: none;
|
}
|
.icon-logo {
|
margin: 40px 0 20px;
|
img {
|
width: 60px;
|
}
|
}
|
.el-tabs__content {
|
width: 380px;
|
margin: auto;
|
}
|
.welcome {
|
height: 25px;
|
margin-top: 50px;
|
font-size: 25px;
|
font-family: PingFangSC-Medium, PingFang SC;
|
font-weight: bold;
|
color: #222222;
|
line-height: 25px;
|
}
|
.password-form-item {
|
position: relative;
|
.toForgetPassword {
|
position: absolute;
|
top: 50px;
|
right: 0;
|
color: #555;
|
height: 14px;
|
font-size: 14px;
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
line-height: 14px;
|
}
|
}
|
.toRegist {
|
font-size: 14px;
|
font-family: PingFangSC-Regular, PingFang SC;
|
font-weight: 400;
|
color: #555555;
|
line-height: 14px;
|
margin-top: 30px;
|
.el-link {
|
vertical-align: top;
|
}
|
a:hover {
|
text-decoration: none;
|
}
|
.el-link--inner a {
|
color: #ea1e24;
|
}
|
}
|
.code-btn {
|
margin-left: 10px;
|
width: 116px;
|
height: 40px;
|
border: none;
|
color: #ea1e24;
|
background: rgba(234, 30, 36, 0.04);
|
&.is-disabled {
|
background: #eee;
|
border-color: #eee;
|
color: #888;
|
}
|
}
|
}
|
}
|
</style>
|
