Compare commits
2 Commits
9020710132
...
3881be316e
| Author | SHA1 | Date |
|---|---|---|
 xiaomeng
|
3881be316e | |
 home孙
|
323dc130d8 |
|
|
@ -1,116 +1,138 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="login">
|
<div class="login">
|
||||||
<div class="login-header">
|
<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="">
|
|
||||||
<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>
|
|
||||||
<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>
|
|
||||||
<div><i v-if="save" class="el-icon-check"></i></div>
|
|
||||||
记住密码
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="login-btn" @click="login">
|
|
||||||
登 录
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
<div class="login-view">
|
||||||
|
<div class="login-title">
|
||||||
|
<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>
|
||||||
|
<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>
|
||||||
|
<div><i v-if="save" class="el-icon-check"></i></div>
|
||||||
|
记住密码
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="login-btn" @keyup.enter="toLogin" @click="login">登 录</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
data(){
|
data() {
|
||||||
return {
|
return {
|
||||||
usernameAct:false,
|
usernameAct: false,
|
||||||
passwordAct:false,
|
passwordAct: false,
|
||||||
save:false,
|
save: false,
|
||||||
password:'',
|
password: "",
|
||||||
username:'',
|
username: "",
|
||||||
}
|
};
|
||||||
},
|
},
|
||||||
mounted(){
|
mounted() {
|
||||||
if(localStorage.getItem('save')){
|
if (localStorage.getItem("save")) {
|
||||||
this.password=localStorage.getItem('password')
|
this.password = localStorage.getItem("password");
|
||||||
this.username=localStorage.getItem('username')
|
this.username = localStorage.getItem("username");
|
||||||
this.save=true
|
this.save = true;
|
||||||
}else{
|
} else {
|
||||||
this.username=localStorage.getItem('username')
|
this.username = localStorage.getItem("username");
|
||||||
// this.save=true
|
// 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() {
|
||||||
login(){
|
var store = this.$store.state;
|
||||||
var store=this.$store.state
|
|
||||||
|
|
||||||
// "username": "xiaomeng",
|
// "username": "xiaomeng",
|
||||||
// "password": "lihe12345"
|
// "password": "lihe12345"
|
||||||
if(!this.username){
|
if (!this.username) {
|
||||||
this.$message.error("用户名未填写");
|
this.$message.error("用户名未填写");
|
||||||
return
|
return;
|
||||||
}
|
}
|
||||||
if(!this.password){
|
if (!this.password) {
|
||||||
this.$message.error("密码未填写");
|
this.$message.error("密码未填写");
|
||||||
return
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
var data = {
|
var data = {
|
||||||
"username": this.username,
|
username: this.username,
|
||||||
"password":this.password
|
password: this.password,
|
||||||
}; // 替换为你要发送的数据
|
}; // 替换为你要发送的数据
|
||||||
this.api.login(data).then((res) => {
|
this.api.login(data).then((res) => {
|
||||||
if(this.save){
|
if (this.save) {
|
||||||
localStorage.setItem('save',1)
|
localStorage.setItem("save", 1);
|
||||||
localStorage.setItem('username',this.username)
|
localStorage.setItem("username", this.username);
|
||||||
localStorage.setItem('password',this.password)
|
localStorage.setItem("password", this.password);
|
||||||
}else{
|
} else {
|
||||||
localStorage.setItem('save',0)
|
localStorage.setItem("save", 0);
|
||||||
localStorage.setItem('username',this.username)
|
localStorage.setItem("username", this.username);
|
||||||
if(localStorage.getItem('password')){
|
if (localStorage.getItem("password")) {
|
||||||
localStorage.removeItem('password')
|
localStorage.removeItem("password");
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
if (res.data.code == 200) {
|
if (res.data.code == 200) {
|
||||||
this.$message({
|
this.$message({
|
||||||
message: '登陆成功',
|
message: "登陆成功",
|
||||||
type: "success",
|
type: "success",
|
||||||
});
|
});
|
||||||
store.equipmentIndex=1
|
store.equipmentIndex = 1;
|
||||||
localStorage.setItem('token',res.data.data.token)
|
localStorage.setItem("token", res.data.data.token);
|
||||||
localStorage.setItem('userInfo',JSON.stringify(res.data.data))
|
localStorage.setItem("userInfo", JSON.stringify(res.data.data));
|
||||||
this.$router.push({ name: 'index' })
|
this.$router.push({ name: "index" });
|
||||||
} else {
|
} else {
|
||||||
localStorage.removeItem('token')
|
localStorage.removeItem("token");
|
||||||
this.$message.error(res.data.msg);
|
this.$message.error(res.data.msg);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
},
|
|
||||||
},
|
},
|
||||||
|
},
|
||||||
}
|
};
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.login{
|
.login {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
// min-height: 900px;
|
// min-height: 900px;
|
||||||
background: url(../assets/image/login-bg.png) no-repeat center;
|
background: url(../assets/image/login-bg.png) no-repeat center;
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
background-position:center center;
|
background-position: center center;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
|
||||||
Loading…
Reference in New Issue