<template>
|
<div class="loginDiv">
|
<div class="logo-bg"></div>
|
<div class="login-con">
|
<div class="appName">{{ platformName }}</div>
|
<div class="login-title">登录</div>
|
<div class="lineInput">
|
<img src="../../assets/img/login-ico1.png" class="ico1">
|
<van-field v-model="userName" placeholder="请输入账号" />
|
</div>
|
<div class="lineInput">
|
<img src="../../assets/img/login-ico2.png" class="ico2">
|
<van-field v-model="password" placeholder="请输入密码" type="password" />
|
</div>
|
<div class="subBtn" @click="submit">登录</div>
|
</div>
|
|
</div>
|
</template>
|
|
<script>
|
import {
|
login,
|
searchPlatformName,
|
getLoginVerity
|
} from "@/pages/login/js/api";
|
import {
|
mapMutations,
|
} from 'vuex';
|
export default {
|
data() {
|
return {
|
userName: '',
|
password: '',
|
verifyCode: '',
|
platformName: "",
|
}
|
},
|
mounted() {
|
this.changeVerifyCode()
|
this.searchPlatformName();
|
},
|
methods: {
|
...mapMutations(['setUserPower']),
|
searchPlatformName() {
|
searchPlatformName()
|
.then((res) => {
|
let rs = JSON.parse(res.data.result);
|
if (rs.code == 1) {
|
let data = rs.data[0];
|
this.platformName = data.param;
|
} else {
|
this.platformName = "蓄电池后台监控管理平台";
|
}
|
sessionStorage.setItem("platformName", this.platformName);
|
})
|
.catch((error) => {
|
this.platformName = "蓄电池后台监控管理平台";
|
sessionStorage.setItem("platformName", this.platformName);
|
});
|
},
|
// 登录
|
submit() {
|
let self = this;
|
if (self.userName == '') {
|
self.$toast('请输入账号!')
|
return
|
}
|
if (self.password == '') {
|
self.$toast('请输入密码!')
|
return
|
}
|
// 开启等待框
|
this.$toast.loading({
|
message: '登录中...',
|
duration: 0
|
})
|
login(self.userName, self.password, self.verifyCode).then(res => {
|
// 对结果进行处理
|
self.handleLogin(res)
|
}).catch(error => {
|
// 关闭等待
|
// console.log(error);
|
self.$toast("网络异常");
|
});
|
},
|
changeVerifyCode() {
|
getLoginVerity().then(res => {
|
let rs = JSON.parse(res.data.result);
|
if (rs.code == 1) {
|
this.verifyCode = rs.data + "";
|
} else {
|
this.verifyCode = "";
|
}
|
}).catch(error => {
|
this.verifyCode = "";
|
});
|
},
|
// 登录验证
|
handleLogin(res) {
|
let self = this;
|
// 关闭等待
|
// this.loading = false;
|
let rs = JSON.parse(res.data.result);
|
if (rs.code == 1) {
|
self.$toast("登录成功!");
|
sessionStorage.setItem('username', self.username);
|
sessionStorage.setItem('userId', rs.data);
|
self.setUserPower(rs.data2);
|
self.$router.push({
|
path: '/menu'
|
})
|
} else {
|
this.changeVerifyCode();
|
self.$toast(rs.msg);
|
}
|
},
|
}
|
}
|
</script>
|
|
<style scoped="scoped">
|
.loginDiv {
|
width: 100%;
|
height: 100%;
|
background: #ffffff;
|
padding-top: 160px;
|
}
|
|
.logo-bg {
|
width: 100%;
|
height: 100%;
|
background: url("../../assets/img/logo-bg.png") 0 0 no-repeat;
|
background-size: 100% 100%;
|
position: absolute;
|
left: 0;
|
top: 0;
|
}
|
|
.login-con {
|
width: 100%;
|
padding: 0 70px;
|
position: relative;
|
}
|
|
.appName {
|
color: #ffffff;
|
font-size: 48px;
|
font-weight: bold;
|
margin-bottom: 240px;
|
width: 100%;
|
text-align: center;
|
}
|
|
.login-title {
|
width: 110px;
|
height: 76px;
|
line-height: 76px;
|
font-size: 50px;
|
font-weight: bold;
|
color: #333;
|
border-bottom: 8px solid #4b88f9;
|
text-align: center;
|
margin-bottom: 68px;
|
}
|
|
.lineInput {
|
width: 100%;
|
height: 88px;
|
background-color: #f5f5f5;
|
border-radius: 44px;
|
margin-bottom: 40px;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
padding: 0 40px;
|
}
|
|
.lineInput .ico1 {
|
width: 25px;
|
height: 31px;
|
}
|
|
.lineInput .ico2 {
|
width: 26px;
|
height: 31px;
|
}
|
|
.lineInput /deep/ .van-cell {
|
background-color: transparent;
|
}
|
|
.subBtn {
|
width: 100%;
|
height: 88px;
|
border-radius: 44px;
|
background-image: linear-gradient(to right, #08aeec, #4b88f9);
|
box-shadow: 0 10px 20px rgb(85 149 246 / 50%);
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
color: #ffffff;
|
font-size: 32px;
|
margin-top: 50px;
|
}
|
</style>
|
