u

code/link56/link56-frontend-new/src/views/auth/login.vue

@@ -3,6 +3,7 @@ import type { FormInstance } from 'element-plus'
 import { ElMessage } from 'element-plus'
 import { computed, reactive, ref } from 'vue'
 import { useRouter } from 'vue-router'
+import EmailCodeInput from '@/components/EmailCodeInput.vue'
 import { loginByEmailCodeApi, loginByPasswordApi } from '@/request/api/auth'
 import { authCodeSendApi } from '@/request/api/auth/code'
 import { useUserStore } from '@/store/user'
@@ -52,22 +53,6 @@ const carouselList = [
   },
 ]
 
-// --- 发送验证码状态 & 倒计时 ---
-const sending = ref(false)
-const countdown = ref(0)
-let timer: number | undefined
-
-function startCountdown(seconds = 60) {
-  countdown.value = seconds
-  timer = window.setInterval(() => {
-    countdown.value -= 1
-    if (countdown.value <= 0) {
-      clearInterval(timer)
-      timer = undefined
-    }
-  }, 1000)
-}
-
 const form = reactive<{
   email: string
   password: string
@@ -116,39 +101,8 @@ const formRules = {
   ],
 }
 
-const isEmailValid = computed(() => validateEmail(form.email))
-
 const submitLoading = ref(false)
 
-function handleSendEmailCode() {
-  if (sending.value || countdown.value > 0 || !isEmailValid.value)
-    return
-
-  sending.value = true
-
-  authCodeSendApi({
-    channel: AuthCodeChannel.EMAIL,
-    purpose: AuthCodePurpose.LOGIN,
-    target: form.email,
-  }).then((res) => {
-    if (res.isSuccess) {
-      ElMessage.success('发送成功')
-      startCountdown()
-    }
-    else {
-      sending.value = false
-      ElMessage.error(res.message || '发送失败，请检查邮箱是否正确或稍后再试！')
-    }
-  }).catch((err) => {
-    console.log(err)
-
-    ElMessage.error('发送失败，请稍后再试')
-    sending.value = false
-  }).finally(() => {
-    sending.value = false
-  })
-}
-
 async function submitForm(formEl: FormInstance | undefined) {
   if (!formEl)
     return
@@ -301,30 +255,14 @@ function navigateTo(path: string) {
                 <span class="forgot" @click="navigateTo('/auth/forget')">忘记密码?</span>
               </span>
             </template>
-            <el-input
+            <EmailCodeInput
               v-model="form.code"
-              placeholder="请输入邮箱验证码"
-              class="email-code"
               size="large"
-              :class="(sending || countdown > 0 || !isEmailValid) ? 'disabled' : ''"
-            >
-              <template #append>
-                <el-button
-                  :disabled="sending || countdown > 0 || !isEmailValid"
-                  @click="handleSendEmailCode"
-                >
-                  <template v-if="sending">
-                    发送中...
-                  </template>
-                  <template v-else-if="countdown > 0">
-                    {{ countdown }}s
-                  </template>
-                  <template v-else>
-                    发送验证码
-                  </template>
-                </el-button>
-              </template>
-            </el-input>
+              :email="form.email"
+              :channel="AuthCodeChannel.EMAIL"
+              :purpose="AuthCodePurpose.LOGIN"
+              placeholder="请输入邮箱验证码"
+            />
           </el-form-item>
           <el-form-item>
             <el-checkbox v-model="form.rememberMe" label="记住我" class="remeber" />