From aeedadbb14aaa9c08ba88b0fc5cdd899c417aa0a Mon Sep 17 00:00:00 2001
From: tantao <1416249906@qq.com>
Date: Thu, 25 Aug 2022 14:41:59 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E6=96=B0=E5=A2=9E=E5=85=A8?=
 =?UTF-8?q?=E5=B1=80=E8=AF=B7=E6=B1=82loading?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../interactions/RequestLoading.vue           | 58 +++++++++++++++++++
 1 file changed, 58 insertions(+)
 create mode 100644 src/components/interactions/RequestLoading.vue

diff --git a/src/components/interactions/RequestLoading.vue b/src/components/interactions/RequestLoading.vue
new file mode 100644
index 0000000..d378ec0
--- /dev/null
+++ b/src/components/interactions/RequestLoading.vue
@@ -0,0 +1,58 @@
+<script lang="ts">
+export default {
+  name: "RequestLoading",
+};
+</script>
+
+<script setup lang="ts">
+import { vuexStore } from "@/store";
+import { computed, defineComponent, reactive, ref, toRefs, watch } from "vue";
+
+let timer = null;
+
+const useLoading = () => {
+  const state = reactive({
+    loadedText: "加载中...",
+    isLoading: computed(() => vuexStore.state.isLoading),
+  });
+  return toRefs(state);
+};
+const { loadedText, isLoading } = useLoading() as any;
+</script>
+
+<template>
+  <div
+    v-if="isLoading"
+    class="requestLoading position-fixed start-0 top-0 w-100 h-100"
+  >
+    <div
+      class="position-absolute start-50 translate-middle loadingBox text-center"
+    >
+      <LoadingIcon width="86" height="86" class="loadingIcon" />
+      <div class="text-white text-center mt-2 fs-4 h-25">{{ loadedText }}</div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.requestLoading {
+  z-index: 99999999;
+  background-color: rgba($color: #000000, $alpha: 0.8);
+  text-align: center;
+  .loadingBox {
+    top: 40%;
+    left: 40%;
+    .loadingIcon {
+      animation: rotateIcon 1s infinite;
+    }
+    @keyframes rotateIcon {
+      from {
+        transform: rotate(0);
+      }
+      to {
+        transform: rotate(360deg);
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file