fix: 补充重构邮箱登录后遗漏的行为验证码

This commit is contained in:
2024-11-11 21:51:58 +08:00
parent 449e5128d7
commit 2735dcf939
2 changed files with 39 additions and 23 deletions

View File

@@ -28,12 +28,20 @@
<a-button disabled class="btn" type="primary" :loading="loading" html-type="submit" size="large" long>立即登录</a-button> <a-button disabled class="btn" type="primary" :loading="loading" html-type="submit" size="large" long>立即登录</a-button>
</a-space> </a-space>
</a-form-item> </a-form-item>
<Verify
ref="VerifyRef"
:captcha-type="captchaType"
:mode="captchaMode"
:img-size="{ width: '330px', height: '155px' }"
@success="getCaptcha"
/>
</a-form> </a-form>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
// import { getEmailCaptcha } from '@/apis'
import { type FormInstance, Message } from '@arco-design/web-vue' import { type FormInstance, Message } from '@arco-design/web-vue'
import type { BehaviorCaptchaReq } from '@/apis'
// import { type BehaviorCaptchaReq, getEmailCaptcha } from '@/apis'
import { useTabsStore, useUserStore } from '@/stores' import { useTabsStore, useUserStore } from '@/stores'
import * as Regexp from '@/utils/regexp' import * as Regexp from '@/utils/regexp'
@@ -64,7 +72,7 @@ const handleLogin = async () => {
await userStore.emailLogin(form) await userStore.emailLogin(form)
tabsStore.reset() tabsStore.reset()
const { redirect, ...othersQuery } = router.currentRoute.value.query const { redirect, ...othersQuery } = router.currentRoute.value.query
router.push({ await router.push({
path: (redirect as string) || '/', path: (redirect as string) || '/',
query: { query: {
...othersQuery, ...othersQuery,
@@ -78,6 +86,19 @@ const handleLogin = async () => {
} }
} }
const VerifyRef = ref<InstanceType<any>>()
const captchaType = ref('blockPuzzle')
const captchaMode = ref('pop')
const captchaLoading = ref(false)
// 弹出行为验证码
const onCaptcha = async () => {
if (captchaLoading.value) return
const isInvalid = await formRef.value?.validateField('email')
if (isInvalid) return
VerifyRef.value.show()
}
const captchaTimer = ref() const captchaTimer = ref()
const captchaTime = ref(60) const captchaTime = ref(60)
const captchaBtnName = ref('获取验证码') const captchaBtnName = ref('获取验证码')
@@ -90,18 +111,13 @@ const resetCaptcha = () => {
captchaDisable.value = false captchaDisable.value = false
} }
const captchaLoading = ref(false)
// 获取验证码 // 获取验证码
const onCaptcha = async () => { // eslint-disable-next-line unused-imports/no-unused-vars
if (captchaLoading.value) return const getCaptcha = async (captchaReq: BehaviorCaptchaReq) => {
const isInvalid = await formRef.value?.validateField('email')
if (isInvalid) return
try { try {
captchaLoading.value = true captchaLoading.value = true
captchaBtnName.value = '发送中...' captchaBtnName.value = '发送中...'
// await getEmailCaptcha({ // await getEmailCaptcha(form.email, captchaReq)
// email: form.email
// })
captchaLoading.value = false captchaLoading.value = false
captchaDisable.value = true captchaDisable.value = true
captchaBtnName.value = `获取验证码(${(captchaTime.value -= 1)}s)` captchaBtnName.value = `获取验证码(${(captchaTime.value -= 1)}s)`

View File

@@ -28,19 +28,20 @@
<a-button disabled class="btn" type="primary" :loading="loading" html-type="submit" size="large" long>立即登录</a-button> <a-button disabled class="btn" type="primary" :loading="loading" html-type="submit" size="large" long>立即登录</a-button>
</a-space> </a-space>
</a-form-item> </a-form-item>
<Verify
ref="VerifyRef"
:captcha-type="captchaType"
:mode="captchaMode"
:img-size="{ width: '330px', height: '155px' }"
@success="getCaptcha"
/>
</a-form> </a-form>
<Verify
ref="VerifyRef"
:captcha-type="captchaType"
:mode="captchaMode"
:img-size="{ width: '330px', height: '155px' }"
@success="getCaptcha"
/>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
// import { getSmsCaptcha } from '@/apis'
import { type FormInstance, Message } from '@arco-design/web-vue' import { type FormInstance, Message } from '@arco-design/web-vue'
import type { BehaviorCaptchaReq } from '@/apis'
// import { type BehaviorCaptchaReq, getSmsCaptcha } from '@/apis'
import { useTabsStore, useUserStore } from '@/stores' import { useTabsStore, useUserStore } from '@/stores'
import * as Regexp from '@/utils/regexp' import * as Regexp from '@/utils/regexp'
@@ -71,7 +72,7 @@ const handleLogin = async () => {
await userStore.phoneLogin(form) await userStore.phoneLogin(form)
tabsStore.reset() tabsStore.reset()
const { redirect, ...othersQuery } = router.currentRoute.value.query const { redirect, ...othersQuery } = router.currentRoute.value.query
router.push({ await router.push({
path: (redirect as string) || '/', path: (redirect as string) || '/',
query: { query: {
...othersQuery, ...othersQuery,
@@ -110,13 +111,12 @@ const resetCaptcha = () => {
} }
// 获取验证码 // 获取验证码
const getCaptcha = async () => { // eslint-disable-next-line unused-imports/no-unused-vars
const getCaptcha = async (captchaReq: BehaviorCaptchaReq) => {
try { try {
captchaLoading.value = true captchaLoading.value = true
captchaBtnName.value = '发送中...' captchaBtnName.value = '发送中...'
// await getSmsCaptcha({ // await getSmsCaptcha(form.phone, captchaReq)
// phone: form.phone
// })
captchaLoading.value = false captchaLoading.value = false
captchaDisable.value = true captchaDisable.value = true
captchaBtnName.value = `获取验证码(${(captchaTime.value -= 1)}s)` captchaBtnName.value = `获取验证码(${(captchaTime.value -= 1)}s)`