|
|
@@ -14,7 +14,13 @@
|
|
14
|
14
|
<el-row>
|
|
15
|
15
|
<el-col :span="24">
|
|
16
|
16
|
<el-form-item prop="username">
|
|
17
|
|
- <el-input :prefix-icon="UserFilled" v-model="loginForm.username" placeholder="请输入您的账号" clearable />
|
|
|
17
|
+ <el-input
|
|
|
18
|
+ :prefix-icon="UserFilled"
|
|
|
19
|
+ v-model="loginForm.username"
|
|
|
20
|
+ placeholder="请输入您的账号"
|
|
|
21
|
+ clearable
|
|
|
22
|
+ @keyup.enter="loginSubmit(form)"
|
|
|
23
|
+ />
|
|
18
|
24
|
</el-form-item>
|
|
19
|
25
|
</el-col>
|
|
20
|
26
|
</el-row>
|
|
|
@@ -28,29 +34,26 @@
|
|
28
|
34
|
v-model="loginForm.password"
|
|
29
|
35
|
placeholder="请输入密码"
|
|
30
|
36
|
clearable
|
|
|
37
|
+ @keyup.enter="loginSubmit(form)"
|
|
31
|
38
|
/>
|
|
32
|
39
|
</el-form-item>
|
|
33
|
40
|
</el-col>
|
|
34
|
41
|
</el-row>
|
|
35
|
|
- <!-- <el-row>
|
|
36
|
|
- <el-form-item prop="code">
|
|
37
|
|
- <el-col :span="16">
|
|
38
|
|
- <el-input v-model="loginForm.code" placeholder="请输入验证码">
|
|
39
|
|
- <template #prefix>
|
|
40
|
|
- <el-icon><Picture /></el-icon>
|
|
41
|
|
- </template>
|
|
42
|
|
- </el-input>
|
|
43
|
|
- </el-col>
|
|
44
|
|
- <el-col :span="8">
|
|
45
|
|
- <div class="login-code">
|
|
46
|
|
- <span v-if="verificationCode.type == 'text'" class="login-code-img" @click="refreshCode">
|
|
47
|
|
- {{ verificationCode.value }}
|
|
48
|
|
- </span>
|
|
49
|
|
- <img v-else :src="verificationCode.src" class="login-code-img" @click="refreshCode" />
|
|
50
|
|
- </div>
|
|
51
|
|
- </el-col>
|
|
52
|
|
- </el-form-item>
|
|
53
|
|
- </el-row> -->
|
|
|
42
|
+ <el-row class="login-code">
|
|
|
43
|
+ <el-col :span="16">
|
|
|
44
|
+ <el-form-item prop="code">
|
|
|
45
|
+ <el-input
|
|
|
46
|
+ :prefix-icon="Picture"
|
|
|
47
|
+ v-model="loginForm.code"
|
|
|
48
|
+ placeholder="请输入验证码"
|
|
|
49
|
+ @keyup.enter="loginSubmit(form)"
|
|
|
50
|
+ />
|
|
|
51
|
+ </el-form-item>
|
|
|
52
|
+ </el-col>
|
|
|
53
|
+ <el-col :span="8">
|
|
|
54
|
+ <img :src="verificationCode.src" class="login-code-img" @click="refreshCode" />
|
|
|
55
|
+ </el-col>
|
|
|
56
|
+ </el-row>
|
|
54
|
57
|
<el-row class="login_btn">
|
|
55
|
58
|
<el-button type="primary" @click="loginSubmit(form)">登录</el-button>
|
|
56
|
59
|
</el-row>
|
|
|
@@ -71,7 +74,7 @@ import { UserFilled, Lock, Picture } from "@element-plus/icons-vue";
|
|
71
|
74
|
const loginForm = ref<ILogin>({
|
|
72
|
75
|
username: "",
|
|
73
|
76
|
password: "",
|
|
74
|
|
- code: "1890",
|
|
|
77
|
+ code: "",
|
|
75
|
78
|
randomStr: ""
|
|
76
|
79
|
});
|
|
77
|
80
|
const form = ref<FormInstance>();
|
|
|
@@ -91,9 +94,7 @@ const router = useRouter();
|
|
91
|
94
|
|
|
92
|
95
|
const refreshCode = () => {
|
|
93
|
96
|
loginForm.value.randomStr = randomLenNum(verificationCode.value.lenth, true);
|
|
94
|
|
- verificationCode.value.type === "text"
|
|
95
|
|
- ? (verificationCode.value.value = randomLenNum(verificationCode.value.lenth))
|
|
96
|
|
- : (verificationCode.value.src = `${process.env.VUE_APP_BASE_URL}/admin/api/code?randomStr=${loginForm.value.randomStr}`);
|
|
|
97
|
+ verificationCode.value.src = `${process.env.VUE_APP_BASE_URL}/admin/api/code?randomStr=${loginForm.value.randomStr}`;
|
|
97
|
98
|
};
|
|
98
|
99
|
|
|
99
|
100
|
const loginSubmit = async (formRef?: FormInstance) => {
|
|
|
@@ -105,8 +106,8 @@ const loginSubmit = async (formRef?: FormInstance) => {
|
|
105
|
106
|
.then(() => {
|
|
106
|
107
|
router.push(store.getters.tagWel.value);
|
|
107
|
108
|
})
|
|
108
|
|
- .catch((err) => {
|
|
109
|
|
- ElMessage.warning("请检查用户名/密码后再次尝试");
|
|
|
109
|
+ .catch(() => {
|
|
|
110
|
+ refreshCode();
|
|
110
|
111
|
});
|
|
111
|
112
|
}
|
|
112
|
113
|
});
|
|
|
@@ -185,16 +186,14 @@ refreshCode();
|
|
185
|
186
|
height: 40px;
|
|
186
|
187
|
border-radius: 20px;
|
|
187
|
188
|
margin: 30px 20px 0 20px;
|
|
188
|
|
- background-color: #4a4996;
|
|
189
|
|
- border-color: #4a4996;
|
|
|
189
|
+ background-color: linear-gradient(270deg, #2fa1ff 0%, #174df5 100%);
|
|
|
190
|
+ border-color: linear-gradient(270deg, #2fa1ff 0%, #174df5 100%);
|
|
190
|
191
|
}
|
|
191
|
192
|
.login-code {
|
|
192
|
193
|
display: flex;
|
|
193
|
194
|
align-items: center;
|
|
194
|
195
|
justify-content: space-around;
|
|
195
|
|
- margin-left: 10px;
|
|
196
|
196
|
.login-code-img {
|
|
197
|
|
- margin-top: 2px;
|
|
198
|
197
|
width: 100px;
|
|
199
|
198
|
height: 38px;
|
|
200
|
199
|
background-color: #fdfdfd;
|
|
|
@@ -206,6 +205,7 @@ refreshCode();
|
|
206
|
205
|
line-height: 38px;
|
|
207
|
206
|
text-indent: 5px;
|
|
208
|
207
|
text-align: center;
|
|
|
208
|
+ margin-bottom: 16px;
|
|
209
|
209
|
}
|
|
210
|
210
|
}
|
|
211
|
211
|
}
|