<template>
|
<div class="loginDiv">
|
<div class="logo-bg"></div>
|
<div class="login-con">
|
<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";
|
export default {
|
data() {
|
return {
|
userName: '',
|
password: ''
|
}
|
},
|
mounted() {
|
|
},
|
methods: {
|
// 登录
|
submit() {
|
let self = this;
|
if (self.userName == '') {
|
self.$toast('请输入账号!')
|
return
|
}
|
if (self.password == '') {
|
self.$toast('请输入密码!')
|
return
|
}
|
// 开启等待框
|
|
login(self.userName, self.password).then(res => {
|
// 对结果进行处理
|
console.log(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.$router.push({
|
path: '/index'
|
})
|
} else {
|
self.$toast(rs.msg);
|
}
|
},
|
}
|
}
|
</script>
|
|
<style scoped="scoped">
|
.loginDiv {
|
width: 100%;
|
height: 100%;
|
background: #ffffff;
|
}
|
|
.logo-bg {
|
width: 100%;
|
height: 136px;
|
background: url('../assets/img/logo-bg.png') 0 0 no-repeat;
|
background-size: 100% 100%;
|
margin-bottom: 60px;
|
}
|
|
.login-con {
|
width: 100%;
|
padding: 0 35px;
|
}
|
|
.login-title {
|
width: 55px;
|
height: 38px;
|
line-height: 38px;
|
font-size: 25px;
|
font-weight: bold;
|
color: #333;
|
border-bottom: 4px solid #41c5f6;
|
text-align: center;
|
margin-bottom: 34px;
|
}
|
|
.lineInput {
|
width: 100%;
|
height: 44px;
|
background-color: #f5f5f5;
|
border-radius: 22px;
|
margin-bottom: 20px;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
padding: 0 20px;
|
}
|
|
.lineInput .ico1 {
|
width: 12.5px;
|
height: 15.5px;
|
}
|
|
.lineInput .ico2 {
|
width: 13px;
|
height: 15.5px;
|
}
|
|
.lineInput /deep/ .van-cell {
|
background-color: transparent;
|
}
|
|
.subBtn {
|
width: 100%;
|
height: 44px;
|
border-radius: 22px;
|
background-image: linear-gradient(to right, #5db9fc, #53d6f4);
|
box-shadow: 0 5px 10px rgba(85, 207, 246, 0.5);
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
color: #ffffff;
|
font-size: 16px;
|
margin-top: 25px;
|
}
|
</style>
|
