|
@@ -1,51 +1,79 @@
|
1
|
1
|
<template>
|
2
|
2
|
<div class="login">
|
3
|
|
- <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
|
4
|
|
- <h3 class="title">智慧楼宇后台管理系统</h3>
|
5
|
|
- <el-form-item prop="username">
|
6
|
|
- <el-input
|
7
|
|
- v-model="loginForm.username"
|
8
|
|
- type="text"
|
9
|
|
- auto-complete="off"
|
10
|
|
- placeholder="账号"
|
|
3
|
+ <video
|
|
4
|
+ src="../assets/video/loginvideobg.mp4"
|
|
5
|
+ autoPlay
|
|
6
|
+ loop
|
|
7
|
+ muted
|
|
8
|
+ poster="../assets/video/bg.png"
|
|
9
|
+ ></video>
|
|
10
|
+ <div class="page_box">
|
|
11
|
+ <el-form
|
|
12
|
+ ref="loginForm"
|
|
13
|
+ :model="loginForm"
|
|
14
|
+ :rules="loginRules"
|
|
15
|
+ class="login-form"
|
|
16
|
+ >
|
|
17
|
+ <h3 class="title">智慧楼宇后台管理系统</h3>
|
|
18
|
+ <el-form-item prop="username">
|
|
19
|
+ <el-input
|
|
20
|
+ v-model="loginForm.username"
|
|
21
|
+ type="text"
|
|
22
|
+ auto-complete="off"
|
|
23
|
+ placeholder="账号"
|
|
24
|
+ >
|
|
25
|
+ <svg-icon
|
|
26
|
+ slot="prefix"
|
|
27
|
+ icon-class="user"
|
|
28
|
+ class="el-input__icon input-icon"
|
|
29
|
+ />
|
|
30
|
+ </el-input>
|
|
31
|
+ </el-form-item>
|
|
32
|
+ <el-form-item prop="password">
|
|
33
|
+ <el-input
|
|
34
|
+ v-model="loginForm.password"
|
|
35
|
+ type="password"
|
|
36
|
+ auto-complete="off"
|
|
37
|
+ placeholder="密码"
|
|
38
|
+ @keyup.enter.native="handleLogin"
|
|
39
|
+ >
|
|
40
|
+ <svg-icon
|
|
41
|
+ slot="prefix"
|
|
42
|
+ icon-class="password"
|
|
43
|
+ class="el-input__icon input-icon"
|
|
44
|
+ />
|
|
45
|
+ </el-input>
|
|
46
|
+ </el-form-item>
|
|
47
|
+ <el-checkbox
|
|
48
|
+ v-model="loginForm.rememberMe"
|
|
49
|
+ style="margin: 0px 0px 25px 0px"
|
|
50
|
+ >记住密码</el-checkbox
|
11
|
51
|
>
|
12
|
|
- <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
|
13
|
|
- </el-input>
|
14
|
|
- </el-form-item>
|
15
|
|
- <el-form-item prop="password">
|
16
|
|
- <el-input
|
17
|
|
- v-model="loginForm.password"
|
18
|
|
- type="password"
|
19
|
|
- auto-complete="off"
|
20
|
|
- placeholder="密码"
|
21
|
|
- @keyup.enter.native="handleLogin"
|
22
|
|
- >
|
23
|
|
- <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
|
24
|
|
- </el-input>
|
25
|
|
- </el-form-item>
|
26
|
|
- <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>
|
27
|
|
- <el-form-item style="width:100%;">
|
28
|
|
- <el-button
|
29
|
|
- :loading="loading"
|
30
|
|
- size="medium"
|
31
|
|
- type="primary"
|
32
|
|
- style="width:100%;"
|
33
|
|
- @click.native.prevent="handleLogin"
|
34
|
|
- >
|
35
|
|
- <span v-if="!loading">登录</span>
|
36
|
|
- <span v-else>登录中...</span>
|
37
|
|
- </el-button>
|
38
|
|
- <div style="float: right;" v-if="register">
|
39
|
|
- <router-link class="link-type" :to="'/register'">立即注册</router-link>
|
40
|
|
- </div>
|
41
|
|
- </el-form-item>
|
42
|
|
- </el-form>
|
|
52
|
+ <el-form-item style="width: 100%">
|
|
53
|
+ <el-button
|
|
54
|
+ :loading="loading"
|
|
55
|
+ size="medium"
|
|
56
|
+ type="primary"
|
|
57
|
+ style="width: 100%"
|
|
58
|
+ @click.native.prevent="handleLogin"
|
|
59
|
+ >
|
|
60
|
+ <span v-if="!loading">登录</span>
|
|
61
|
+ <span v-else>登录中...</span>
|
|
62
|
+ </el-button>
|
|
63
|
+ <div style="float: right" v-if="register">
|
|
64
|
+ <router-link class="link-type" :to="'/register'"
|
|
65
|
+ >立即注册</router-link
|
|
66
|
+ >
|
|
67
|
+ </div>
|
|
68
|
+ </el-form-item>
|
|
69
|
+ </el-form>
|
|
70
|
+ </div>
|
43
|
71
|
</div>
|
44
|
72
|
</template>
|
45
|
73
|
|
46
|
74
|
<script>
|
47
|
75
|
import Cookies from "js-cookie";
|
48
|
|
-import { encrypt, decrypt } from '@/utils/jsencrypt'
|
|
76
|
+import { encrypt, decrypt } from "@/utils/jsencrypt";
|
49
|
77
|
|
50
|
78
|
export default {
|
51
|
79
|
name: "Login",
|
|
@@ -57,30 +85,30 @@ export default {
|
57
|
85
|
password: "admin123",
|
58
|
86
|
rememberMe: false,
|
59
|
87
|
code: "",
|
60
|
|
- uuid: ""
|
|
88
|
+ uuid: "",
|
61
|
89
|
},
|
62
|
90
|
loginRules: {
|
63
|
91
|
username: [
|
64
|
|
- { required: true, trigger: "blur", message: "请输入您的账号" }
|
|
92
|
+ { required: true, trigger: "blur", message: "请输入您的账号" },
|
65
|
93
|
],
|
66
|
94
|
password: [
|
67
|
|
- { required: true, trigger: "blur", message: "请输入您的密码" }
|
|
95
|
+ { required: true, trigger: "blur", message: "请输入您的密码" },
|
68
|
96
|
],
|
69
|
|
- code: [{ required: true, trigger: "change", message: "请输入验证码" }]
|
|
97
|
+ code: [{ required: true, trigger: "change", message: "请输入验证码" }],
|
70
|
98
|
},
|
71
|
99
|
loading: false,
|
72
|
100
|
// 注册开关
|
73
|
101
|
register: false,
|
74
|
|
- redirect: undefined
|
|
102
|
+ redirect: undefined,
|
75
|
103
|
};
|
76
|
104
|
},
|
77
|
105
|
watch: {
|
78
|
106
|
$route: {
|
79
|
|
- handler: function(route) {
|
|
107
|
+ handler: function (route) {
|
80
|
108
|
this.redirect = route.query && route.query.redirect;
|
81
|
109
|
},
|
82
|
|
- immediate: true
|
83
|
|
- }
|
|
110
|
+ immediate: true,
|
|
111
|
+ },
|
84
|
112
|
},
|
85
|
113
|
created() {
|
86
|
114
|
this.getCookie();
|
|
@@ -89,46 +117,90 @@ export default {
|
89
|
117
|
getCookie() {
|
90
|
118
|
const username = Cookies.get("username");
|
91
|
119
|
const password = Cookies.get("password");
|
92
|
|
- const rememberMe = Cookies.get('rememberMe')
|
|
120
|
+ const rememberMe = Cookies.get("rememberMe");
|
93
|
121
|
this.loginForm = {
|
94
|
122
|
username: username === undefined ? this.loginForm.username : username,
|
95
|
|
- password: password === undefined ? this.loginForm.password : decrypt(password),
|
96
|
|
- rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
|
|
123
|
+ password:
|
|
124
|
+ password === undefined ? this.loginForm.password : decrypt(password),
|
|
125
|
+ rememberMe: rememberMe === undefined ? false : Boolean(rememberMe),
|
97
|
126
|
};
|
98
|
127
|
},
|
99
|
128
|
handleLogin() {
|
100
|
|
- this.$refs.loginForm.validate(valid => {
|
|
129
|
+ this.$refs.loginForm.validate((valid) => {
|
101
|
130
|
if (valid) {
|
102
|
131
|
this.loading = true;
|
103
|
132
|
if (this.loginForm.rememberMe) {
|
104
|
133
|
Cookies.set("username", this.loginForm.username, { expires: 30 });
|
105
|
|
- Cookies.set("password", encrypt(this.loginForm.password), { expires: 30 });
|
106
|
|
- Cookies.set('rememberMe', this.loginForm.rememberMe, { expires: 30 });
|
|
134
|
+ Cookies.set("password", encrypt(this.loginForm.password), {
|
|
135
|
+ expires: 30,
|
|
136
|
+ });
|
|
137
|
+ Cookies.set("rememberMe", this.loginForm.rememberMe, {
|
|
138
|
+ expires: 30,
|
|
139
|
+ });
|
107
|
140
|
} else {
|
108
|
141
|
Cookies.remove("username");
|
109
|
142
|
Cookies.remove("password");
|
110
|
|
- Cookies.remove('rememberMe');
|
|
143
|
+ Cookies.remove("rememberMe");
|
111
|
144
|
}
|
112
|
|
- this.$store.dispatch("Login", this.loginForm).then(() => {
|
113
|
|
- this.$router.push({ path: this.redirect || "/" }).catch(()=>{});
|
114
|
|
- }).catch(() => {
|
115
|
|
- this.loading = false;
|
116
|
|
- });
|
|
145
|
+ this.$store
|
|
146
|
+ .dispatch("Login", this.loginForm)
|
|
147
|
+ .then(() => {
|
|
148
|
+ this.$router.push({ path: this.redirect || "/" }).catch(() => {});
|
|
149
|
+ })
|
|
150
|
+ .catch(() => {
|
|
151
|
+ this.loading = false;
|
|
152
|
+ });
|
117
|
153
|
}
|
118
|
154
|
});
|
119
|
|
- }
|
120
|
|
- }
|
|
155
|
+ },
|
|
156
|
+ },
|
121
|
157
|
};
|
122
|
158
|
</script>
|
123
|
159
|
|
124
|
160
|
<style rel="stylesheet/scss" lang="scss">
|
125
|
161
|
.login {
|
|
162
|
+ .center-mixin {
|
|
163
|
+ display: flex;
|
|
164
|
+ align-items: center;
|
|
165
|
+ justify-content: center;
|
|
166
|
+ }
|
|
167
|
+
|
126
|
168
|
display: flex;
|
127
|
169
|
justify-content: center;
|
128
|
170
|
align-items: center;
|
129
|
171
|
height: 100%;
|
130
|
|
- background-image: url("../assets/images/login-background.jpg");
|
|
172
|
+ // background-image: url("../assets/video/bg.png");
|
|
173
|
+ // background: url("../assets/video/loginvideobg.mp4");
|
131
|
174
|
background-size: cover;
|
|
175
|
+ video {
|
|
176
|
+ width: 100%;
|
|
177
|
+ height: 100%;
|
|
178
|
+ position: absolute;
|
|
179
|
+ top: 0;
|
|
180
|
+ bottom: 0;
|
|
181
|
+ left: 0;
|
|
182
|
+ right: 0;
|
|
183
|
+ object-fit: fill;
|
|
184
|
+ display: block;
|
|
185
|
+ }
|
|
186
|
+ .page_box {
|
|
187
|
+ width: 500px;
|
|
188
|
+ height: 330px;
|
|
189
|
+ @extend.center-mixin;
|
|
190
|
+ background-size: 100% 100%;
|
|
191
|
+ --login-form-color: #01defb;
|
|
192
|
+ background-image: url("../assets/video/loginbg.png");
|
|
193
|
+ z-index: 9;
|
|
194
|
+
|
|
195
|
+ .login-form {
|
|
196
|
+ background: none;
|
|
197
|
+ input {
|
|
198
|
+ color: #fff;
|
|
199
|
+ background-color: #102b41 !important;
|
|
200
|
+ border-color: #102b41 !important;
|
|
201
|
+ }
|
|
202
|
+ }
|
|
203
|
+ }
|
132
|
204
|
}
|
133
|
205
|
.title {
|
134
|
206
|
margin: 0px auto 30px auto;
|