fix: 采用弹窗的方式显示验证码,解决验证码在低分辨率下被掩盖的Bug

This commit is contained in:
RockYang
2023-09-05 16:47:40 +08:00
parent 3d7fa680cb
commit e4e7868b30
11 changed files with 354 additions and 499 deletions

View File

@@ -9,7 +9,7 @@
<div class="header">{{ title }}</div>
<div class="content">
<div class="block">
<el-input placeholder="手机号" size="large" v-model="username" autocomplete="off">
<el-input placeholder="手机号" size="large" maxlength="11" v-model="username" autocomplete="off">
<template #prefix>
<el-icon>
<UserFilled/>
@@ -57,6 +57,7 @@ import FooterBar from "@/components/FooterBar.vue";
import {isMobile} from "@/utils/libs";
import {checkSession} from "@/action/session";
import {setUserToken} from "@/store/session";
import {validateMobile} from "@/utils/validate";
const router = useRouter();
const title = ref('ChatGPT-PLUS 用户登录');
@@ -81,8 +82,8 @@ onMounted(() => {
})
const login = function () {
if (username.value === '') {
return ElMessage.error('请输入用户名');
if (!validateMobile(username.value)) {
return ElMessage.error('请输入合法的手机号');
}
if (password.value.trim() === '') {
return ElMessage.error('请输入密码');

View File

@@ -64,8 +64,7 @@
</el-input>
</el-col>
<el-col :span="12">
<send-msg-mobile size="large" :mobile="formData.mobile" v-if="isMobile()"/>
<send-msg size="large" :mobile="formData.mobile" v-else/>
<send-msg size="large" :mobile="formData.mobile"/>
</el-col>
</el-row>
</div>
@@ -109,7 +108,7 @@ import FooterBar from "@/components/FooterBar.vue";
import SendMsg from "@/components/SendMsg.vue";
import {validateMobile} from "@/utils/validate";
import {isMobile} from "@/utils/libs";
import SendMsgMobile from "@/components/mobile/SendMsgMobile.vue";
import SendMsgMobile from "@/components/SendMsg.vue";
const router = useRouter();
const title = ref('ChatGPT-PLUS 用户注册');