<template>
|
<div class v-loading="vLoading" :style="`width: ${currentWidth}px;height:${currentHeight}px`">
|
<div class="login-top">
|
<div style="float:right;margin:20px 40px 0 0;">
|
<el-link class="cursor-pointer" href="https://element.eleme.io" target="_blank" style="color:wihte;margin-right:150px">
|
<span style="color:white;height:20px;margin:10px">返回首页</span>
|
</el-link>
|
<el-link class="cursor-pointer" href="https://element.eleme.io" target="_blank" style="color:wihte">
|
<router-link to="/Register"><span style="color:white;height:20px;">注册</span></router-link>
|
</el-link>
|
<span style="color:white;height:20px;margin:10px;font-size:18px">|</span>
|
<el-link class="cursor-pointer" href="https://element.eleme.io" target="_blank">
|
<img src="../assets/img/u132.png" style="width:30px;height:30px"/>
|
</el-link>
|
</div>
|
</div>
|
|
<div class="login-middle">
|
<div class="login-form">
|
<h1 class="welcome">欢迎登陆</h1>
|
<el-tabs v-model="activeName" @tab-click="handleClick">
|
<el-tab-pane label="账户登录" name="first">
|
<el-form
|
:model="user"
|
status-icon
|
:rules="nullRule"
|
:validate-on-rule-change="false"
|
ref="ruleForm"
|
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 iconyonghu1"></i>
|
</el-input>
|
</el-form-item>
|
<el-form-item prop="password">
|
<el-input
|
show-password
|
@keyup.enter.native="systemLogin()"
|
v-model="user.password"
|
autocomplete="off"
|
style="width:380px"
|
placeholder="请输入密码"
|
>
|
<i slot="prefix" class="iconfont iconmima"></i>
|
</el-input>
|
</el-form-item>
|
<div style="float:right;padding-right:10px;margin-bottom:15px">
|
<el-link type="primary" class="cursor-pointer" href="https://element.eleme.io" target="_blank">立即注册</el-link>
|
<el-link type="primary" class="cursor-pointer" href="https://element.eleme.io" target="_blank" style="margin-left:25px">忘记密码</el-link>
|
</div>
|
<el-form-item>
|
<el-button type="primary" @click="systemLogin()" style="width:380px">登录</el-button>
|
</el-form-item>
|
</el-form>
|
</el-tab-pane>
|
<el-tab-pane label="短信登录" name="second">
|
<el-form
|
:model="user"
|
status-icon
|
:rules="nullRule"
|
:validate-on-rule-change="false"
|
ref="ruleForm"
|
class="demo-ruleForm"
|
>
|
<el-form-item prop="loginName" style="margin-top:20px">
|
<el-input v-model="user.phoneNum" style="width:380px" placeholder="请输入手机号">
|
<i slot="prefix" class="iconfont iconyonghu1"></i>
|
</el-input>
|
</el-form-item>
|
<el-form-item prop="password">
|
<el-input
|
show-password
|
@keyup.enter.native="systemLogin()"
|
v-model="user.password"
|
autocomplete="off"
|
style="width:250px"
|
placeholder="请输入验证码"
|
>
|
<i slot="prefix" class="iconfont iconmima"></i>
|
</el-input>
|
<el-button plain style="margin-left:20px">获取验证码</el-button>
|
</el-form-item>
|
<div style="float:right;padding-right:10px;margin-bottom:15px">
|
<el-link type="primary" class="cursor-pointer" href="https://element.eleme.io" target="_blank">立即注册</el-link>
|
<el-link type="primary" class="cursor-pointer" href="https://element.eleme.io" target="_blank" style="margin-left:25px">忘记密码</el-link>
|
</div>
|
<el-form-item>
|
<el-button type="primary" @click="systemLogin()" style="width:380px">登录</el-button>
|
</el-form-item>
|
</el-form>
|
</el-tab-pane>
|
</el-tabs>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { tologin, getLoginUserData, getServerName } from "@/api/login";
|
import { getMenuListData, findButtonAuthoritys, findInArr } from "@/api/utils";
|
|
export default {
|
name: "login-pgae",
|
metaInfo: {
|
title: "登录页"
|
},
|
data: () => ({
|
activeName: 'first',
|
user: {
|
loginName: "",
|
password: "",
|
rememberMe: false
|
},
|
nullRule: {},
|
rules: {
|
loginName: [{ required: true, message: "请输入用户名", trigger: "change" }],
|
password: [{ required: true, message: "请输入密码", trigger: "change" }]
|
},
|
loading: "",
|
vLoading: false,
|
currentHeight: 1057,
|
currentWidth: 1920
|
}),
|
methods: {
|
handleClick(tab, event) {
|
console.log(tab, event);
|
},
|
systemLogin() {
|
this.nullRule = this.rules
|
this.$nextTick(() => {
|
this.$refs["ruleForm"].validate(valid => {
|
if (valid) {
|
this.loading = this.$loading({
|
lock: true,
|
text: "Loading",
|
spinner: "el-icon-loading",
|
background: "rgba(0, 0, 0, 0.7)"
|
});
|
this.testLogin();
|
// return false
|
} else {
|
this.nullRule = {}
|
}
|
});
|
this.nullRule = {}
|
})
|
},
|
async testLogin() {
|
// let json = await tologin({username:this.user.loginName,password:this.user.password})
|
tologin({ username: this.user.loginName, password: this.user.password }).then(json => {
|
// console.log(json, "登录请求");
|
const loginedInfo = {
|
access_token: json.token_type + " " + json.access_token,
|
refresh_token: json.refresh_token
|
};
|
sessionStorage.setItem("expires_in", json.expires_in);
|
sessionStorage.setItem("loginedInfo", JSON.stringify(loginedInfo));
|
this.loading.close();
|
this.getLoginUserData();
|
}).catch(err => {
|
// console.log(err, "登录报错");
|
this.loading.close();
|
this.$notify({
|
title: "提示",
|
type: "error",
|
message: err
|
});
|
this.$refs.pwd.focus();
|
});
|
// console.log(json,'登录成功？')
|
// this.loading = false
|
},
|
async getLoginUserData() {
|
let json = await getLoginUserData();
|
if (!json.error) {
|
// this.loading.close()
|
sessionStorage.setItem("userInfo", JSON.stringify(json));
|
this.$notify({
|
title: "提示",
|
type: "success",
|
message: "登录成功！"
|
});
|
/* 判断当前是否在登录页，如果在登录页 */
|
// if (window.location.href.indexOf('/login') !== -1) {
|
// router.push({
|
// path: '/',
|
// query: {
|
// is_login: true
|
// }
|
// })
|
// }
|
await this.getMenuList();
|
this.$router.push("/Layout");
|
return json;
|
} else {
|
this.$notify({
|
title: "提示",
|
type: "error",
|
message: "登录失败！"
|
});
|
// this.loading.close()
|
}
|
},
|
/* 获取菜单数据 */
|
async getMenuList() {
|
let results = await getMenuListData({
|
module: this.state.menuName
|
});
|
if (results && results.success) {
|
/* 菜单数据赋值 permission权限 */
|
this.menuListData = results.data;
|
/* 存储权限 */
|
let buttonAuthoritys = results.data;
|
// console.log(this.$route.query.is_loginsss)
|
if (results && results.length && this.$route.query.is_login) {
|
this.$router.replace(results[0].url);
|
}
|
sessionStorage.setItem(
|
"buttonAuthoritys",
|
"," + buttonAuthoritys + ","
|
);
|
sessionStorage.setItem("menuInfo", JSON.stringify(results));
|
} else {
|
this.$toast({
|
type: "error",
|
message: "菜单获取失败"
|
});
|
}
|
},
|
getScreenHeight() {
|
this.currentHeight = document.documentElement.clientHeight;
|
this.currentWidth = document.documentElement.clientWidth;
|
// console.log(this.currentHeight, "当前窗口大小");
|
window.onresize = () => {
|
this.currentHeight = document.documentElement.clientHeight;
|
this.currentWidth = document.documentElement.clientWidth;
|
// console.log(this.currentHeight, "当前窗口大小2", this.currentWidth);
|
this.$forceUpdate();
|
};
|
},
|
async getServerName() {
|
let res = await getServerName()
|
if (res && res.success) {
|
this.AuthData.serverTitle = res.data.serverName
|
window.document.title = res.data.serverName ? res.data.serverName : '智 能 计 算 节 点';
|
sessionStorage.setItem("title", res.data.serverName);
|
}
|
}
|
},
|
created() {
|
this.getServerName();
|
this.getScreenHeight();
|
},
|
watch: {},
|
beforeDestroy() {
|
window.onresize = null;
|
}
|
};
|
</script>
|
<style lang="scss">
|
.login-top {
|
|
background: url("../assets/img/top.png") no-repeat;
|
|
width: 100%;
|
height: 8%;
|
min-width: 1000px;
|
background-repeat: no-repeat;
|
background-size: cover;
|
-webkit-background-size: cover;
|
}
|
.web-site {
|
position: absolute;
|
top: 55px;
|
left: 41px;
|
font-family: PingFangSC-Medium;
|
font-size: 20px;
|
color: #6170e1;
|
letter-spacing: 6.15px;
|
}
|
|
.login-middle {
|
background: url("../assets/img/loginBg.jpg") repeat;
|
width: 100%;
|
height: 92%;
|
.login-form {
|
position: absolute;
|
top: 35%;
|
left: 50%;
|
.el-tabs__item {
|
width:200px !important;
|
}
|
.welcome {
|
font-size: 25px;
|
margin-bottom: 20px;
|
}
|
}
|
}
|
</style>
|
