Login.vue
4.13 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
<template>
<div class="login-container">
<div class="login" id="login">
<div class="limiter">
<div class="container-login100">
<div class="wrap-login100">
<span class="login100-form-title p-b-26">综合视频平台</span>
<span class="login100-form-title p-b-48">
<i class="fa fa-video-camera"></i>
</span>
<div class="wrap-input100 validate-input" data-validate="Valid email is: a@b.c">
<input :class="'input100 ' + (username == '' ? '' : 'has-val')" type="text" v-model="username"
name="username">
<span class="focus-input100" data-placeholder="用户名"></span>
</div>
<div class="wrap-input100 validate-input" data-validate="Enter password">
<span class="btn-show-pass">
<i :class="'fa ' + (!showPassword ? 'fa-eye' : 'fa-eye-slash')"
@click="showPassword = !showPassword"></i>
</span>
<input :class="'input100 ' + (password == '' ? '' : 'has-val')"
:type="(!showPassword ? 'password' : 'text')" v-model="password" name="password">
<span class="focus-input100" data-placeholder="密码"></span>
</div>
<div class="container-login100-form-btn">
<div class="wrap-login100-form-btn" :class="{ 'login-loading': isLoging }" v-loading="isLoging"
element-loading-background="rgb(0 0 0 / 0%);" element-loading-custom-class="login-loading-class">
<div class="login100-form-bgbtn"></div>
<button class="login100-form-btn" @click="login">登录</button>
</div>
</div>
</div>
</div>
<div class="company-author">
<span>@2024 上海巴士拓华科技发展有限公司 版权所有</span>
</div>
</div>
</div>
</div>
</template>
<script>
import crypto from 'crypto';
import userService from "./service/UserService";
export default {
name: 'Login',
data() {
return {
isLoging: false,
showPassword: false,
loginLoading: false,
username: '',
password: ''
}
},
created() {
var that = this;
document.onkeydown = function (e) {
var key = window.event.keyCode;
if (key == 13) {
that.login();
}
}
},
methods: {
//登录逻辑
login() {
if (this.username != '' && this.password != '') {
this.toLogin();
}
},
//登录请求
toLogin() {
//需要想后端发送的登录参数
let loginParam = {
username: this.username,
password: crypto.createHash('md5').update(this.password, "utf8").digest('hex')
}
var that = this;
//设置在登录状态
this.isLoging = true;
let timeoutTask = setTimeout(() => {
that.$message.error("登录超时");
that.isLoging = false;
}, 1000)
this.$axios({
method: 'get',
url: "/api/user/login",
params: loginParam
}).then(function (res) {
window.clearTimeout(timeoutTask)
console.log(res);
console.log("登录成功");
if (res.data.code === 0) {
userService.setUser(res.data.data)
//登录成功后
that.cancelEnterkeyDefaultAction();
that.$router.push('/');
} else {
that.isLoging = false;
that.$message({
showClose: true,
message: '登录失败，用户名或密码错误',
type: 'error'
});
}
}).catch(function (error) {
console.log(error)
window.clearTimeout(timeoutTask)
that.$message.error(error.response.data.msg);
that.isLoging = false;
});
},
cancelEnterkeyDefaultAction: function () {
document.onkeydown = function (e) {
var key = window.event.keyCode;
if (key == 13) {
return false;
}
}
}
}
}
</script>
<style scoped>
.container-login100 {
background: url("../assets/login-bg.jpg") no-repeat;
background-size: 100% 100%;
width: 100vw;
height: 100vh;
}
</style>