chore: 优化部分代码

src/views/login/components/phone/index.vue

@@ -18,7 +18,7 @@
         :loading="captchaLoading"
         :disabled="captchaDisable"
         size="large"
-        @click="handleOpenBehaviorCaptcha"
+        @click="onCaptcha"
       >
         {{ captchaBtnName }}
       </a-button>
@@ -31,12 +31,12 @@
     </a-form-item>
   </a-form>
   <Verify
-      ref="VerifyRef"
-      :mode="captchaMode"
-      :captcha-type="captchaType"
-      :img-size="{ width: '330px', height: '155px' }"
-      @success="onCaptcha"
-  ></Verify>
+    ref="VerifyRef"
+    :captcha-type="captchaType"
+    :mode="captchaMode"
+    :img-size="{ width: '330px', height: '155px' }"
+    @success="getCaptcha"
+  />
 </template>
 
 <script setup lang="ts">
@@ -64,9 +64,9 @@ const router = useRouter()
 const loading = ref(false)
 // 登录
 const handleLogin = async () => {
+  const isInvalid = await formRef.value?.validate()
+  if (isInvalid) return
   try {
-    const isInvalid = await formRef.value?.validate()
-    if (isInvalid) return
     loading.value = true
     await userStore.phoneLogin(form)
     const { redirect, ...othersQuery } = router.currentRoute.value.query
@@ -87,22 +87,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('phone')
+  if (isInvalid) return
+  VerifyRef.value.show()
+}
+
 const captchaTimer = ref()
 const captchaTime = ref(60)
 const captchaBtnName = ref('获取验证码')
 const captchaDisable = ref(false)
-const captchaLoading = ref(false)
-
-// 弹出行为验证码
-const handleOpenBehaviorCaptcha = () => {
-  if (captchaLoading.value) return
-  formRef.value?.validateField('phone', (valid: any) => {
-    if (!valid) {
-      VerifyRef.value.show()
-    }
-  })
-}
-
 // 重置验证码
 const resetCaptcha = () => {
   window.clearInterval(captchaTimer.value)
@@ -112,10 +109,7 @@ const resetCaptcha = () => {
 }
 
 // 获取验证码
-const onCaptcha = async () => {
-  if (captchaLoading.value) return
-  const isInvalid = await formRef.value?.validateField('phone')
-  if (isInvalid) return
+const getCaptcha = async () => {
   try {
     captchaLoading.value = true
     captchaBtnName.value = '发送中...'