feat: 添加等待提示

components/z-loading.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="lds-ring">
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+  </div>
+</template>
+
+<style scoped lang="less">
+.lds-ring {
+  display: inline-block;
+  position: relative;
+  width: 1em;
+  height: 1em;
+
+  div {
+    box-sizing: border-box;
+    display: block;
+    position: absolute;
+    top: 0.1em;
+    left: 0.1em;
+    width: 0.8em;
+    height: 0.8em;
+    margin: 0.1em;
+    border: 0.1em solid #fff;
+    border-radius: 50%;
+    animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+    border-color: #fff transparent transparent transparent;
+
+    &:nth-child(1) {
+      animation-delay: -0.45s;
+    }
+
+    &:nth-child(2) {
+      animation-delay: -0.3s;
+    }
+
+    &:nth-child(3) {
+      animation-delay: -0.15s;
+    }
+
+    @keyframes lds-ring {
+      0% {
+        transform: rotate(0deg);
+      }
+      100% {
+        transform: rotate(360deg);
+      }
+    }
+  }
+}
+</style>

pages/login.vue

@@ -34,7 +34,10 @@
           <nuxt-link to="/reset">忘记密码？</nuxt-link>
         </template>
       </z-input>
-      <button>登录</button>
+      <button type="submit">
+        <z-loading v-if="isLoading" />
+        登录<template v-if="isLoading">中...</template>
+      </button>
     </form>
     <p class="action">
       还没有账号？
@@ -58,6 +61,8 @@ const appLogo = ref(route.query['app-logo']?.toString() ?? '');
 
 const isWxapp = route.query['wxapp']?.toString() === 'true';
 
+const isLoading = ref(false);
+
 interface LoginRes {
   id: number;
   username: string;
@@ -68,6 +73,8 @@ interface LoginRes {
 }
 
 function submit(e: Event) {
+  if (isLoading.value) return;
+  isLoading.value = true;
   $fetch<ResBody<LoginRes>>('https://api.cas.ziqiang.net.cn/auth/users/', {
     method: 'POST',
     body: {
@@ -110,6 +117,7 @@ function submit(e: Event) {
       }
     })
     .catch((err) => {
+      isLoading.value = false;
       console.error(err);
       MMessage.error(err.data.msg);
     });

pages/register.vue

@@ -84,7 +84,10 @@
           <Lock />
         </template>
       </z-input>
-      <button class="submit">注册</button>
+      <button type="submit" class="submit">
+        <z-loading v-if="isLoading" />
+        注册<template v-if="isLoading">中...</template>
+      </button>
     </form>
     <p class="action">
       已有账号？
@@ -114,6 +117,8 @@ const confirmedPassword = ref('');
 
 const router = useRouter();
 
+const isLoading = ref(false);
+
 interface RegisterRes {
   id: number;
   username: string;
@@ -130,6 +135,8 @@ interface RegisterRes {
 }
 
 function submit(e: Event) {
+  if (isLoading.value) return;
+  isLoading.value = true;
   e.preventDefault();
   $fetch<ResBody<RegisterRes>>('https://api.cas.ziqiang.net.cn/users/', {
     method: 'POST',
@@ -148,6 +155,9 @@ function submit(e: Event) {
     })
     .catch((err) => {
       MMessage.error(err.data?.msg);
+    })
+    .finally(() => {
+      isLoading.value = false;
     });
 }