首页登录增加loading

src/pages/Home/components/LoginForm.vue

@@ -77,9 +77,13 @@
       </Button>
       <Button
         type="submit"
-        class="h-[48px] flex-1 cursor-pointer rounded-[25px] bg-[#A8FF53] text-lg font-medium text-black hover:bg-[#96E64A]"
+        :disabled="isLoggingIn"
+        class="relative h-[48px] flex-1 cursor-pointer overflow-hidden rounded-[25px] bg-[#A8FF53] text-lg font-medium text-black hover:bg-[#96E64A]"
       >
-        登录/注册
+        <div class="flex items-center justify-center">
+          <Loader2 v-if="isLoggingIn" class="absolute left-4 h-5 w-5 animate-spin md:left-8" />
+          <span :class="{ 'ml-2': isLoggingIn }"> 登录/注册 </span>
+        </div>
       </Button>
     </div>
     <CodeSentTip ref="CodeSentTipRef" />
@@ -216,6 +220,8 @@ const handleGetCode = async () => {
   }
 }
 const router = useRouter()
+const isLoggingIn = ref(false)
+
 const handleLogin = () => {
   if (!code.value) {
     toast('请输入验证码')
@@ -224,6 +230,8 @@ const handleLogin = () => {
   if (!validateEmail(email.value)) {
     return toast.error('邮箱格式无效，请检查')
   }
+
+  isLoggingIn.value = true
   request
     .post<any, { token: string }>('/api/v1/auth/login/email', {
       email: email.value,
@@ -234,6 +242,12 @@ const handleLogin = () => {
       localStorage.setItem('UserEmail', email.value)
       router.push({ path: '/user-center' })
     })
+    .catch((error) => {
+      console.error('登录失败', error)
+    })
+    .finally(() => {
+      isLoggingIn.value = false
+    })
 }
 </script>