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

continew-org · Nov 11, 2024 · 2735dcf · 2735dcf
1 parent 449e512
commit 2735dcf
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 23 deletions.
diff --git a/src/views/login/components/email/index.vue b/src/views/login/components/email/index.vue
@@ -28,12 +28,20 @@
         <a-button disabled class="btn" type="primary" :loading="loading" html-type="submit" size="large" long>立即登录</a-button>
       </a-space>
     </a-form-item>
+    <Verify
+      ref="VerifyRef"
+      :captcha-type="captchaType"
+      :mode="captchaMode"
+      :img-size="{ width: '330px', height: '155px' }"
+      @success="getCaptcha"
+    />
   </a-form>
 </template>
 
 <script setup lang="ts">
-// import { getEmailCaptcha } from '@/apis'
 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 * as Regexp from '@/utils/regexp'
 
@@ -64,7 +72,7 @@ const handleLogin = async () => {
     await userStore.emailLogin(form)
     tabsStore.reset()
     const { redirect, ...othersQuery } = router.currentRoute.value.query
-    router.push({
+    await router.push({
       path: (redirect as string) || '/',
       query: {
         ...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 captchaTime = ref(60)
 const captchaBtnName = ref('获取验证码')
@@ -90,18 +111,13 @@ const resetCaptcha = () => {
   captchaDisable.value = false
 }
 
-const captchaLoading = ref(false)
 // 获取验证码
-const onCaptcha = async () => {
-  if (captchaLoading.value) return
-  const isInvalid = await formRef.value?.validateField('email')
-  if (isInvalid) return
+// eslint-disable-next-line unused-imports/no-unused-vars
+const getCaptcha = async (captchaReq: BehaviorCaptchaReq) => {
   try {
     captchaLoading.value = true
     captchaBtnName.value = '发送中...'
-    // await getEmailCaptcha({
-    //   email: form.email
-    // })
+    // await getEmailCaptcha(form.email, captchaReq)
     captchaLoading.value = false
     captchaDisable.value = true
     captchaBtnName.value = `获取验证码(${(captchaTime.value -= 1)}s)`

diff --git a/src/views/login/components/phone/index.vue b/src/views/login/components/phone/index.vue
@@ -28,19 +28,20 @@
         <a-button disabled class="btn" type="primary" :loading="loading" html-type="submit" size="large" long>立即登录</a-button>
       </a-space>
     </a-form-item>
+    <Verify
+      ref="VerifyRef"
+      :captcha-type="captchaType"
+      :mode="captchaMode"
+      :img-size="{ width: '330px', height: '155px' }"
+      @success="getCaptcha"
+    />
   </a-form>
-  <Verify
-    ref="VerifyRef"
-    :captcha-type="captchaType"
-    :mode="captchaMode"
-    :img-size="{ width: '330px', height: '155px' }"
-    @success="getCaptcha"
-  />
 </template>
 
 <script setup lang="ts">
-// import { getSmsCaptcha } from '@/apis'
 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 * as Regexp from '@/utils/regexp'
 
@@ -71,7 +72,7 @@ const handleLogin = async () => {
     await userStore.phoneLogin(form)
     tabsStore.reset()
     const { redirect, ...othersQuery } = router.currentRoute.value.query
-    router.push({
+    await router.push({
       path: (redirect as string) || '/',
       query: {
         ...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 {
     captchaLoading.value = true
     captchaBtnName.value = '发送中...'
-    // await getSmsCaptcha({
-    //   phone: form.phone
-    // })
+    // await getSmsCaptcha(form.phone, captchaReq)
     captchaLoading.value = false
     captchaDisable.value = true
     captchaBtnName.value = `获取验证码(${(captchaTime.value -= 1)}s)`