<template>
|
<div class="loginDiv">
|
<div class="logo-bg"></div>
|
<div class="login-con">
|
<div class="appName">成都石化告警APP</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
|
} from "@/assets/js/api";
|
import {
|
mapMutations,
|
} from 'vuex';
|
export default {
|
data() {
|
return {
|
userName: '',
|
password: ''
|
}
|
},
|
mounted() {
|
|
},
|
methods: {
|
...mapMutations(['setUserPower']),
|
// 登录
|
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).then(res => {
|
// 对结果进行处理
|
self.handleLogin(res)
|
}).catch(error => {
|
// 关闭等待
|
// console.log(error);
|
self.$toast("网络异常");
|
});
|
},
|
// 登录验证
|
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: '/index'
|
})
|
} else {
|
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>
|
