✨ feat: 登录页验证码加入状态

src/pages/Login/components/login.vue

@@ -28,13 +28,15 @@
                         <icon-check-circle />
                     </template>
                     <template #append>
-                        <img alt="!点我重试" :src="ImageCaptcha" class="captcha" @click="getCaptcha()">
+                        <img alt="!点我重试" :src="ImageCaptcha" class="captcha" @click="getCaptcha()" v-if="!captchaLoading">
+                        <icon-loading  v-else />
                     </template>
                 </a-input>
             </a-form-item>
 
             <div class="forgetpass">
-                <a-button type="text" @click="emit('changeMode', 'uniLogin')">快捷登录</a-button>
+                <!-- <a-button type="text" @click="emit('changeMode', 'uniLogin')">快捷登录</a-button> -->
+                <!-- <div class="tip">由于业务变更 现无法通过QQ/微信快捷登录<br>快捷登录用户可在注册新账号后提交工单联系客服找回原账号</div> -->
                 <a-button type="text" @click="emit('changeMode', 'register')">注册账号</a-button>
             </div>
 
@@ -61,6 +63,7 @@ const from = route.query.from
 
 const userStore = useUserStore()
 
+let captchaLoading = ref(false)
 let CaptchaId = ref('')
 let ImageCaptcha = ref('')
 let loading = ref(false)
@@ -72,6 +75,7 @@ let form = reactive({
 
 const getCaptcha = async () => {
     try {
+        captchaLoading.value = true
         const res = await getImageCaptcha()
         if (!res || res.code != 0)
             return requestFailed('获取图片验证码失败！' + res?.msg ?? '')
@@ -79,6 +83,8 @@ const getCaptcha = async () => {
         CaptchaId.value = res.data.id
     } catch (error) {
         requestFailed('获取图片验证码失败！')
+    } finally {
+        captchaLoading.value = false
     }
 }
 
@@ -152,6 +158,14 @@ const requestFailed = (msg) => {
     font-family: Alimama ShuHeiTi, -apple-system, BlinkMacSystemFont;
 }
 
+.tip {
+    color: #777;
+    font-size: 0.9em;
+    text-align: left;
+    margin-bottom: 20px;
+    margin-left: -8px;
+}
+
 .forgetpass {
     width: 100%;
     margin-top: -10px;
@@ -162,6 +176,5 @@ const requestFailed = (msg) => {
 .captcha {
     max-height: 35px;
     margin-right: -10px;
-
 }
 </style>