登录验证码

src/apis/modules/common.js

@@ -6,6 +6,9 @@ export const getRegion = (params) => request.basic.get('/region', params)
 // 获取 验证码ID
 export const getCaptcha = (params) => request.basic.get('/api/v1/captcha/id', params)
 
+// 获取图片
+export const getCaptchaImage = (params) => request.basic.get('/api/v1/captcha/image', params , { responseType: 'blob' })
+
 //上传图片
 export const uploadFile=(params)=>request.basic.post('/api/v1/upload',params,{
     headers: {

src/utils/request.js

@@ -20,7 +20,7 @@ const options = {
     },
     interceptorRequestCatch: () => {},
     interceptorResponse: (response) => {
-        const list=['/api/v1/activity-registers/export']
+        const list=['/api/v1/activity-registers/export', '/api/v1/captcha/image']
         // 错误处理
         const { success, msg = 'Network Error' } = response.data || {}
         if (![true].includes(success) && !list.includes(response.config.url)) {

src/views/login/index.vue

@@ -20,7 +20,7 @@
                             </template>
                         </a-input>
                     </a-form-item>
-                    <!-- <a-form-item name="captcha_code">
+                    <a-form-item name="captcha_code">
                         <a-space>
                             <a-input v-model:value="formData.captcha_code" size="large" type="text"
                                 :placeholder="$t('pages.login.captcha.placeholder')" @pressEnter="handleLogin">
@@ -31,7 +31,7 @@
                             <a-image @click="getCaptcha" :preview="false" :width="140" :height="42"
                                 :src="captcha_img" />
                         </a-space>
-                    </a-form-item> -->
+                    </a-form-item>
                     <a-form-item>
                         <a-button type="primary" size="large" block :loading="loading" @click="handleLogin">{{
                             $t('pages.login.submit') }}
@@ -44,7 +44,7 @@
 </template>
 
 <script setup>
-import { Modal, notification } from 'ant-design-vue'
+import { Modal, notification, message } from 'ant-design-vue'
 import { computed, onMounted, ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { LockOutlined, UserOutlined, SafetyOutlined } from '@ant-design/icons-vue'
@@ -87,11 +87,24 @@ onMounted(() => {
  * 获取 验证码ID
  */
 async function getCaptcha() {
-    const { data } = await apis.common.getCaptcha().catch((err) => {
-        console.log(err)
-    })
-    captcha_id.value = data.captcha_id
-    captcha_img.value = httpApi + `?id=${data.captcha_id}`
+    try {
+        // 1. 获取 captcha_id
+        const response = await apis.common.getCaptcha()
+        const data = response.data
+        if (!data?.captcha_id) {
+            console.warn('验证码ID缺失')
+            return
+        }
+        captcha_id.value = data.captcha_id
+        const imageResponse = await apis.common.getCaptchaImage({ id: data.captcha_id })
+        console.log('Blob 对象:', imageResponse)
+        const blobUrl = URL.createObjectURL(imageResponse)
+        captcha_img.value = blobUrl
+        console.log('验证码图片URL:', blobUrl)
+    } catch (err) {
+        console.error('获取验证码失败:', err)
+        captcha_img.value = ''
+    }
 }
 /**
  * 登录
@@ -100,26 +113,33 @@ async function getCaptcha() {
 async function handleLogin() {
     formRef.value.validate().then(async (values) => {
         values.captcha_id = captcha_id.value
-        if (values.password === 'abc-123') values.password = md5(values.password)
-        loading.value = true
-        const { success } = await userStore
-            .login({
-                ...values,
-            })
-            .catch(() => {
-                loading.value = false
-                getCaptcha()
-            })
-        loading.value = false
-        if (config('http.code.success') === success) {
-            // 加载完成
-            if (appStore.complete) {
-                goIndex()
-            } else {
-                await appStore.init()
-                goIndex()
-            }
+        if (values.password === 'abc-123') {
+            values.password = md5(values.password)
         }
+
+        loading.value = true
+        try {
+            const response = await userStore.login({ ...values })
+            loading.value = false
+            if (config('http.code.success') === response.success) {
+                if (appStore.complete) {
+                    goIndex()
+                } else {
+                    await appStore.init()
+                    goIndex()
+                }
+            } else {
+                message.error(t(response.msg))
+            }
+        } catch (error) {
+            loading.value = false
+            getCaptcha()
+            const msg = error.msg || error.message || '登录失败，请重试'
+            message.error(t(msg))
+            console.log("登录出错：", error)
+        }
+    }).catch(validationError => {
+        console.log('表单校验失败', validationError)
     })
 }