|
@@ -46,7 +46,7 @@
|
|
|
<input class="inp" type="password" v-model.trim="password" placeholder="请输入密码" />
|
|
<input class="inp" type="password" v-model.trim="password" placeholder="请输入密码" />
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
- <div class="row">
|
|
|
|
|
|
|
+ <div class="row" v-if="showCaptcha">
|
|
|
<div class="field cap-field">
|
|
<div class="field cap-field">
|
|
|
<img class="i" :src="require('@/assets/i_captcha.png')" />
|
|
<img class="i" :src="require('@/assets/i_captcha.png')" />
|
|
|
<span class="field-label">验证码</span>
|
|
<span class="field-label">验证码</span>
|
|
@@ -97,8 +97,14 @@ export default {
|
|
|
hint: "",
|
|
hint: "",
|
|
|
isDoorOpening: false,
|
|
isDoorOpening: false,
|
|
|
doorNavigated: false,
|
|
doorNavigated: false,
|
|
|
|
|
+ loginFailedCount: Number(sessionStorage.getItem('loginFailedCount')) || 0,
|
|
|
};
|
|
};
|
|
|
},
|
|
},
|
|
|
|
|
+ computed: {
|
|
|
|
|
+ showCaptcha() {
|
|
|
|
|
+ return this.loginFailedCount >= 3;
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
mounted() {
|
|
mounted() {
|
|
|
this.updateScale();
|
|
this.updateScale();
|
|
|
window.addEventListener('resize', this.updateScale, { passive: true });
|
|
window.addEventListener('resize', this.updateScale, { passive: true });
|
|
@@ -118,6 +124,20 @@ export default {
|
|
|
async onLogin() {
|
|
async onLogin() {
|
|
|
this.hint = "";
|
|
this.hint = "";
|
|
|
|
|
|
|
|
|
|
+ // 如果验证码已显示,则进行前端拦截与校验
|
|
|
|
|
+ if (this.showCaptcha) {
|
|
|
|
|
+ if (!this.captchaInput) {
|
|
|
|
|
+ this.hint = "请输入验证码";
|
|
|
|
|
+ return;
|
|
|
|
|
+ }
|
|
|
|
|
+ // 前端比对验证码 (忽略大小写)
|
|
|
|
|
+ if (this.captchaInput.toLowerCase() !== this.captchaCode.toLowerCase()) {
|
|
|
|
|
+ this.hint = "验证码错误";
|
|
|
|
|
+ this.captchaInput = ""; // 验证码错误后清空输入框
|
|
|
|
|
+ return;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
let data;
|
|
let data;
|
|
|
try {
|
|
try {
|
|
|
data = await apiLogin({
|
|
data = await apiLogin({
|
|
@@ -125,8 +145,17 @@ export default {
|
|
|
password: this.password,
|
|
password: this.password,
|
|
|
captcha: this.captchaInput
|
|
captcha: this.captchaInput
|
|
|
});
|
|
});
|
|
|
|
|
+
|
|
|
|
|
+ // 登录成功,重置次数并清空缓存
|
|
|
|
|
+ this.loginFailedCount = 0;
|
|
|
|
|
+ sessionStorage.removeItem('loginFailedCount');
|
|
|
} catch (e) {
|
|
} catch (e) {
|
|
|
this.hint = e.message || '登录失败';
|
|
this.hint = e.message || '登录失败';
|
|
|
|
|
+ // 登录失败,次数 +1 并存入缓存
|
|
|
|
|
+ this.loginFailedCount++;
|
|
|
|
|
+ sessionStorage.setItem('loginFailedCount', this.loginFailedCount);
|
|
|
|
|
+ this.captchaInput = "";
|
|
|
|
|
+
|
|
|
return;
|
|
return;
|
|
|
}
|
|
}
|
|
|
|
|
|