1 #162
|
|
@ -1,116 +1,138 @@
|
|||
<template>
|
||||
<div class="login">
|
||||
<div class="login-header">
|
||||
<img src="../assets/image/logo.png" alt="">
|
||||
<img src="../assets/image/logo.png" alt="" />
|
||||
</div>
|
||||
<div class="login-view">
|
||||
<div class="login-title">
|
||||
<img src="../assets/image/login-icon.png" alt="">
|
||||
<img src="../assets/image/login-icon.png" alt="" />
|
||||
<span>用户登录</span>
|
||||
</div>
|
||||
<div class="login-input username" :class="usernameAct?'active':''">
|
||||
<img src="../assets/image/username.png" alt="">
|
||||
<input v-model="username" @focus="usernameAct=true" @blur="usernameAct=false" type="text" placeholder="用户名">
|
||||
<div class="login-input username" :class="usernameAct ? 'active' : ''">
|
||||
<img src="../assets/image/username.png" alt="" />
|
||||
<input
|
||||
v-model="username"
|
||||
@focus="usernameAct = true"
|
||||
@blur="usernameAct = false"
|
||||
type="text"
|
||||
placeholder="用户名"
|
||||
/>
|
||||
</div>
|
||||
<div class="login-input password" :class="passwordAct?'active':''">
|
||||
<img src="../assets/image/password.png" alt="">
|
||||
<input v-model="password" @focus="passwordAct=true" @blur="passwordAct=false" type="password" placeholder="密 码">
|
||||
<div class="login-input password" :class="passwordAct ? 'active' : ''">
|
||||
<img src="../assets/image/password.png" alt="" />
|
||||
<input
|
||||
v-model="password"
|
||||
@focus="passwordAct = true"
|
||||
@blur="passwordAct = false"
|
||||
type="password"
|
||||
placeholder="密 码"
|
||||
/>
|
||||
</div>
|
||||
<div class="save" @click="save=!save">
|
||||
<div class="save" @click="save = !save">
|
||||
<div>
|
||||
<div><i v-if="save" class="el-icon-check"></i></div>
|
||||
记住密码
|
||||
</div>
|
||||
</div>
|
||||
<div class="login-btn" @click="login">
|
||||
登 录
|
||||
<div class="login-btn" @keyup.enter="toLogin" @click="login">登 录</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data(){
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
usernameAct:false,
|
||||
passwordAct:false,
|
||||
save:false,
|
||||
password:'',
|
||||
username:'',
|
||||
}
|
||||
usernameAct: false,
|
||||
passwordAct: false,
|
||||
save: false,
|
||||
password: "",
|
||||
username: "",
|
||||
};
|
||||
},
|
||||
mounted(){
|
||||
if(localStorage.getItem('save')){
|
||||
this.password=localStorage.getItem('password')
|
||||
this.username=localStorage.getItem('username')
|
||||
this.save=true
|
||||
}else{
|
||||
this.username=localStorage.getItem('username')
|
||||
mounted() {
|
||||
if (localStorage.getItem("save")) {
|
||||
this.password = localStorage.getItem("password");
|
||||
this.username = localStorage.getItem("username");
|
||||
this.save = true;
|
||||
} else {
|
||||
this.username = localStorage.getItem("username");
|
||||
// this.save=true
|
||||
}
|
||||
if(localStorage.getItem('token')){
|
||||
this.$router.push({ name: 'index' })
|
||||
if (localStorage.getItem("token")) {
|
||||
this.$router.push({ name: "index" });
|
||||
}
|
||||
this.toLogin();
|
||||
},
|
||||
methods: {
|
||||
toLogin() {
|
||||
document.onkeydown = e =>{
|
||||
if (!e.shiftKey && e.keyCode === 13) {
|
||||
e.cancelBubble = true; //ie阻止冒泡行为
|
||||
e.stopPropagation();//Firefox阻止冒泡行为
|
||||
e.preventDefault(); //取消事件的默认动作*换行
|
||||
if (e.srcElement.value) {
|
||||
this.login()
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
login(){
|
||||
var store=this.$store.state
|
||||
login() {
|
||||
var store = this.$store.state;
|
||||
|
||||
// "username": "xiaomeng",
|
||||
// "password": "lihe12345"
|
||||
if(!this.username){
|
||||
if (!this.username) {
|
||||
this.$message.error("用户名未填写");
|
||||
return
|
||||
return;
|
||||
}
|
||||
if(!this.password){
|
||||
if (!this.password) {
|
||||
this.$message.error("密码未填写");
|
||||
return
|
||||
return;
|
||||
}
|
||||
|
||||
var data = {
|
||||
"username": this.username,
|
||||
"password":this.password
|
||||
username: this.username,
|
||||
password: this.password,
|
||||
}; // 替换为你要发送的数据
|
||||
this.api.login(data).then((res) => {
|
||||
if(this.save){
|
||||
localStorage.setItem('save',1)
|
||||
localStorage.setItem('username',this.username)
|
||||
localStorage.setItem('password',this.password)
|
||||
}else{
|
||||
localStorage.setItem('save',0)
|
||||
localStorage.setItem('username',this.username)
|
||||
if(localStorage.getItem('password')){
|
||||
localStorage.removeItem('password')
|
||||
if (this.save) {
|
||||
localStorage.setItem("save", 1);
|
||||
localStorage.setItem("username", this.username);
|
||||
localStorage.setItem("password", this.password);
|
||||
} else {
|
||||
localStorage.setItem("save", 0);
|
||||
localStorage.setItem("username", this.username);
|
||||
if (localStorage.getItem("password")) {
|
||||
localStorage.removeItem("password");
|
||||
}
|
||||
}
|
||||
if (res.data.code == 200) {
|
||||
this.$message({
|
||||
message: '登陆成功',
|
||||
message: "登陆成功",
|
||||
type: "success",
|
||||
});
|
||||
store.equipmentIndex=1
|
||||
localStorage.setItem('token',res.data.data.token)
|
||||
localStorage.setItem('userInfo',JSON.stringify(res.data.data))
|
||||
this.$router.push({ name: 'index' })
|
||||
store.equipmentIndex = 1;
|
||||
localStorage.setItem("token", res.data.data.token);
|
||||
localStorage.setItem("userInfo", JSON.stringify(res.data.data));
|
||||
this.$router.push({ name: "index" });
|
||||
} else {
|
||||
localStorage.removeItem('token')
|
||||
localStorage.removeItem("token");
|
||||
this.$message.error(res.data.msg);
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.login{
|
||||
.login {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
// min-height: 900px;
|
||||
background: url(../assets/image/login-bg.png) no-repeat center;
|
||||
background-size: cover;
|
||||
background-position:center center;
|
||||
}
|
||||
</style>
|
||||
background-position: center center;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue