✨ feat: 验证码加载特效

src/pages/face/index.vue

@@ -10,7 +10,7 @@
             <input type="text" id="student_num" placeholder="学号">
             <input type="text" id="captcha" placeholder="验证码">
             <div id="captchaImg" @click="getCaptcha()" title="点击更换验证码">
-                <img alt="点我重试" :src="ImageCaptcha" v-if="ImageCaptcha" />
+                <img alt="点我重试" :src="ImageCaptcha" v-if="!captchaLoading" />
                 <a-spin dot v-else />
             </div>
 
@@ -39,7 +39,7 @@
 </template>
 
 <script setup>
-import { ref, reactive, onMounted } from 'vue'
+import { ref, onMounted } from 'vue'
 import { Message } from '@arco-design/web-vue'
 import { BeginFaceReco } from '@/api/lepao'
 import { getImageCaptcha } from '@/api/login'
@@ -50,11 +50,13 @@ const step = ref(1)
 const buttonLoading = ref(false)
 const userInfo = ref({})
 
+const captchaLoading = ref(true)
 let CaptchaId = ref('')
 let ImageCaptcha = ref('')
 
 const getCaptcha = async () => {
     try {
+        captchaLoading.value = true
         const res = await getImageCaptcha()
         if (!res || res.code != 0)
             return Message.error('获取图片验证码失败！' + res?.msg ?? '')
@@ -62,6 +64,8 @@ const getCaptcha = async () => {
         CaptchaId.value = res.data.id
     } catch (error) {
         Message.error('获取图片验证码失败！')
+    } finally {
+        captchaLoading.value = false
     }
 }