116 lines
3.9 KiB
Vue
116 lines
3.9 KiB
Vue
<template>
|
|
<div class="login">
|
|
<div class="login-header">
|
|
<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>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
data(){
|
|
return {
|
|
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')
|
|
// this.save=true
|
|
}
|
|
if(localStorage.getItem('token')){
|
|
this.$router.push({ name: 'index' })
|
|
}
|
|
},
|
|
methods:{
|
|
login(){
|
|
var store=this.$store.state
|
|
|
|
// "username": "xiaomeng",
|
|
// "password": "lihe12345"
|
|
if(!this.username){
|
|
this.$message.error("用户名未填写");
|
|
return
|
|
}
|
|
if(!this.password){
|
|
this.$message.error("密码未填写");
|
|
return
|
|
}
|
|
|
|
var data = {
|
|
"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 (res.data.code == 200) {
|
|
this.$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' })
|
|
} else {
|
|
localStorage.removeItem('token')
|
|
this.$message.error("请求出错,请重试");
|
|
}
|
|
});
|
|
},
|
|
},
|
|
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.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>
|
|
|
|
|