style(加载动画): 将加载动画的样式抽象成一个新的公共组件，然后在页面中使用

2026-05-15 16:39:50 +08:00 · 2026-05-15 16:39:50 +08:00 · fd0a3a6202
commit fd0a3a6202
parent fe031a37ba
30 changed files with 74 additions and 127 deletions
--- a/src/components/LoadingContent.vue
+++ b/src/components/LoadingContent.vue
@ -0,0 +1,41 @@
+<template>
+  <div class="loading-content">
+    <img
+      :src="loadingImg"
+      alt=""
+      class="loading-spinner-image"
+      :style="{ width: size, height: size, margin: spinnerMargin }"
+    />
+    <p v-if="$slots.default" :style="textStyle">
+      <slot />
+    </p>
+  </div>
+</template>
+
+<script setup>
+import loadingImg from '@/assets/icon/Azizi/loading.webp'
+
+defineProps({
+  size: {
+    type: String,
+    default: '80px',
+  },
+  spinnerMargin: {
+    type: String,
+    default: '0 auto',
+  },
+  textStyle: {
+    type: [String, Object, Array],
+    default: '',
+  },
+})
+</script>
+
+<style scoped>
+.loading-spinner-image {
+  position: relative;
+  z-index: 1;
+  display: block;
+  object-fit: contain;
+}
+</style>
--- a/src/components/LoadingSpinner.vue
+++ b/src/components/LoadingSpinner.vue
@ -1,32 +0,0 @@
-<template>
-  <img
-    :src="loadingImg"
-    alt=""
-    class="loading-spinner-image"
-    :style="{ width: size, height: size, margin }"
-  />
-</template>
-
-<script setup>
-import loadingImg from '@/assets/icon/Azizi/loading.webp'
-
-defineProps({
-  size: {
-    type: String,
-    default: '80px',
-  },
-  margin: {
-    type: String,
-    default: '0 auto',
-  },
-})
-</script>
-
-<style scoped>
-.loading-spinner-image {
-  position: relative;
-  z-index: 1;
-  display: block;
-  object-fit: contain;
-}
-</style>
--- a/src/main.js
+++ b/src/main.js
@ -14,7 +14,7 @@ import { useLangStore } from '@/stores/lang'
 import i18n, { initI18n, setLocale } from './locales/i18n'

 import App from './App.vue'
-import LoadingSpinner from './components/LoadingSpinner.vue'
+import LoadingContent from './components/LoadingContent.vue'
 import router from './router'
 import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

@ -28,7 +28,7 @@ pinia.use(piniaPluginPersistedstate)

 const app = createApp(App)
 app.directive('smart-img', smartImage)
-app.component('LoadingSpinner', LoadingSpinner)
+app.component('LoadingContent', LoadingContent)

 app.use(router)
 app.use(pinia)
--- a/src/views/Activities/DailyRecharge/index.vue
+++ b/src/views/Activities/DailyRecharge/index.vue
@ -2,11 +2,7 @@
  <div class="fullPage">
    <!-- 预加载状态 -->
    <div v-if="isLoading" class="loading-container">
-      <div class="loading-content">
-        <!-- 加载动画 -->
-        <LoadingSpinner />
-        <p>{{ t('loading') }}...</p>
-      </div>
+      <LoadingContent>{{ t('loading') }}...</LoadingContent>
    </div>

    <!-- 主要内容 -->
--- a/src/views/Activities/LesserBairam/index.vue
+++ b/src/views/Activities/LesserBairam/index.vue
@ -3,10 +3,7 @@
  <div class="fullPage">
    <!-- 预加载状态 -->
    <div v-if="isLoading" class="loading-container">
-      <div class="loading-content">
-        <LoadingSpinner />
-        <p>{{ $t('loading') }}...</p>
-      </div>
+      <LoadingContent>{{ $t('loading') }}...</LoadingContent>
    </div>

    <!-- 主要内容 -->
--- a/src/views/Activities/LoginReward/index.vue
+++ b/src/views/Activities/LoginReward/index.vue
@ -2,11 +2,7 @@
  <div class="fullPage">
    <!-- 预加载状态 -->
    <div v-if="isLoading" class="loading-container">
-      <div class="loading-content">
-        <!-- 加载动画 -->
-        <LoadingSpinner />
-        <p>{{ t('loading') }}...</p>
-      </div>
+      <LoadingContent>{{ t('loading') }}...</LoadingContent>
    </div>

    <!-- 主要内容 -->
--- a/src/views/Activities/LuckyDollars/Season3/index.vue
+++ b/src/views/Activities/LuckyDollars/Season3/index.vue
@ -3,10 +3,7 @@
  <div class="fullPage">
    <!-- 预加载状态 -->
    <div v-if="isLoading" class="loading-container">
-      <div class="loading-content">
-        <LoadingSpinner />
-        <p>{{ $t('loading') }}...</p>
-      </div>
+      <LoadingContent>{{ $t('loading') }}...</LoadingContent>
    </div>

    <!-- 主要内容 -->
--- a/src/views/Activities/LuckyDollars/Season4/index.vue
+++ b/src/views/Activities/LuckyDollars/Season4/index.vue
@ -2,10 +2,7 @@
  <div class="fullPage">
    <!-- 预加载状态 -->
    <div v-if="isLoading" class="loading-container">
-      <div class="loading-content">
-        <LoadingSpinner />
-        <p>{{ $t('loading') }}...</p>
-      </div>
+      <LoadingContent>{{ $t('loading') }}...</LoadingContent>
    </div>

    <!-- 主要内容 -->
--- a/src/views/Activities/LuckyDollars/Season5/index.vue
+++ b/src/views/Activities/LuckyDollars/Season5/index.vue
@ -2,10 +2,7 @@
  <div class="fullPage">
    <!-- 预加载状态 -->
    <div v-if="isLoading" class="loading-container">
-      <div class="loading-content">
-        <LoadingSpinner />
-        <p>{{ $t('loading') }}...</p>
-      </div>
+      <LoadingContent>{{ $t('loading') }}...</LoadingContent>
    </div>

    <!-- 主要内容 -->
--- a/src/views/Activities/PokerAce/index.vue
+++ b/src/views/Activities/PokerAce/index.vue
@ -2,10 +2,7 @@
  <div class="fullPage">
    <!-- 预加载状态 -->
    <div v-if="isLoading" class="loading-container">
-      <div class="loading-content">
-        <LoadingSpinner />
-        <p>{{ t('loading') }}...</p>
-      </div>
+      <LoadingContent>{{ t('loading') }}...</LoadingContent>
    </div>

    <!-- 主要内容 -->
--- a/src/views/Activities/SpringFestival/index.vue
+++ b/src/views/Activities/SpringFestival/index.vue
@ -2,11 +2,7 @@
  <div class="fullPage">
    <!-- 预加载状态 -->
    <div v-if="isLoading" class="loading-container">
-      <div class="loading-content">
-        <!-- 加载动画 -->
-        <LoadingSpinner />
-        <p>{{ $t('loading') }}...</p>
-      </div>
+      <LoadingContent>{{ $t('loading') }}...</LoadingContent>
    </div>

    <!-- 主要内容 -->
--- a/src/views/AgencyCenter/Message.vue
+++ b/src/views/AgencyCenter/Message.vue
@ -10,8 +10,7 @@

    <div style="padding: 16px; position: relative; z-index: 2">
      <div v-if="loading" class="loading-state">
-        <LoadingSpinner margin="0 auto 16px" />
-        <p>{{ t('loading') }}...</p>
+        <LoadingContent spinner-margin="0 auto 16px">{{ t('loading') }}...</LoadingContent>
      </div>

      <div v-else style="display: flex; flex-direction: column; gap: 12px">
--- a/src/views/AgencyCenter/TeamBill.vue
+++ b/src/views/AgencyCenter/TeamBill.vue
@ -44,8 +44,7 @@

        <!-- 加载状态 -->
        <div v-if="loading" class="loading-container">
-          <LoadingSpinner />
-          <p>{{ t('loading') }}...</p>
+          <LoadingContent>{{ t('loading') }}...</LoadingContent>
        </div>

        <!-- 账单列表 -->
--- a/src/views/AgencyCenter/TeamMember.vue
+++ b/src/views/AgencyCenter/TeamMember.vue
@ -84,8 +84,7 @@

      <!-- 加载状态 -->
      <div v-if="loading" class="loading-container">
-        <LoadingSpinner />
-        <p>{{ t('loading') }}...</p>
+        <LoadingContent>{{ t('loading') }}...</LoadingContent>
      </div>

      <!-- 成员列表 -->
@ -204,8 +203,7 @@
        <div>
          <!-- 加载更多状态 -->
          <div v-if="loadingMore" class="loading-more">
-            <LoadingSpinner size="20px" margin="0 auto 8px" />
-            <p>{{ t('loading') }}...</p>
+            <LoadingContent size="20px" spinner-margin="0 auto 8px">{{ t('loading') }}...</LoadingContent>
          </div>

          <!-- 没有更多数据提示 -->
--- a/src/views/AgencyCenter/components/TeamBillMore.vue
+++ b/src/views/AgencyCenter/components/TeamBillMore.vue
@ -77,8 +77,7 @@

    <!-- 加载成员 -->
    <div v-if="loading" class="loading-container">
-      <LoadingSpinner />
-      <p>{{ t('loading') }}...</p>
+      <LoadingContent>{{ t('loading') }}...</LoadingContent>
    </div>

    <!-- 成员列表 -->
--- a/src/views/CPReward/index.vue
+++ b/src/views/CPReward/index.vue
@ -3,8 +3,7 @@
    <GeneralHeader :title="t('cp_reward')" :isHomePage="true" color="black" class="page-header" />

    <div v-if="isLoading" class="loading-container">
-      <LoadingSpinner />
-      <p>{{ t('loading') }}...</p>
+      <LoadingContent>{{ t('loading') }}...</LoadingContent>
    </div>

    <div v-show="!isLoading" class="reward-content">
--- a/src/views/GoodID/index.vue
+++ b/src/views/GoodID/index.vue
@ -3,8 +3,7 @@
  <div class="fullPage">
    <!-- 预加载状态 -->
    <div v-if="isLoading" class="loading-container">
-      <LoadingSpinner />
-      <p>{{ $t('loading') }}...</p>
+      <LoadingContent>{{ $t('loading') }}...</LoadingContent>
    </div>

    <!-- 主要内容 -->
--- a/src/views/Invitation/InviteToRegister.vue
+++ b/src/views/Invitation/InviteToRegister.vue
@ -7,8 +7,7 @@
      <BackgroundLayer :backgroundImages="[imageUrl('bg')]" />

      <!-- 加载动画 -->
-      <LoadingSpinner />
-      <p>{{ $t('loading') }}...</p>
+      <LoadingContent>{{ $t('loading') }}...</LoadingContent>
    </div>

    <!-- 主要内容 -->
--- a/src/views/Invitation/inviteNewUser.vue
+++ b/src/views/Invitation/inviteNewUser.vue
@ -7,8 +7,7 @@
      <BackgroundLayer :backgroundImages="[imageUrl('bg1New'), imageUrl('bg2'), imageUrl('bg3')]" />

      <!-- 加载动画 -->
-      <LoadingSpinner />
-      <p>{{ $t('loading') }}...</p>
+      <LoadingContent>{{ $t('loading') }}...</LoadingContent>
    </div>

    <!-- 主要内容 -->
--- a/src/views/Ranking/Couple/index.vue
+++ b/src/views/Ranking/Couple/index.vue
@ -2,11 +2,7 @@
  <div class="fullPage">
    <!-- 预加载状态 -->
    <div v-if="isLoading" class="loading-container">
-      <div class="loading-content">
-        <!-- 加载动画 -->
-        <LoadingSpinner />
-        <p>{{ $t('loading') }}...</p>
-      </div>
+      <LoadingContent>{{ $t('loading') }}...</LoadingContent>
    </div>

    <!-- 主要内容 -->
--- a/src/views/Ranking/GamesKing/index.vue
+++ b/src/views/Ranking/GamesKing/index.vue
@ -3,11 +3,7 @@
  <div class="fullPage">
    <!-- 预加载状态 -->
    <div v-if="isLoading" class="loading-container">
-      <div class="loading-content">
-        <!-- 加载动画 -->
-        <LoadingSpinner />
-        <p>{{ $t('loading') }}...</p>
-      </div>
+      <LoadingContent>{{ $t('loading') }}...</LoadingContent>
    </div>

    <!-- 主要内容 -->
--- a/src/views/Ranking/KingAndQueen/TopList.vue
+++ b/src/views/Ranking/KingAndQueen/TopList.vue
@ -3,11 +3,7 @@
  <div class="fullPage">
    <!-- 预加载状态 -->
    <div v-if="isLoading" class="loading-container">
-      <div class="loading-content">
-        <!-- 加载动画 -->
-        <LoadingSpinner />
-        <p style="color: #fff">{{ $t('loading') }}...</p>
-      </div>
+      <LoadingContent :text-style="{ color: '#fff' }">{{ $t('loading') }}...</LoadingContent>
    </div>

    <!-- 主要内容 -->
--- a/src/views/Ranking/Overall/Ranking.vue
+++ b/src/views/Ranking/Overall/Ranking.vue
@ -5,10 +5,7 @@
    :style="{ backgroundColor: currentRankingConfig.backgroundColor }"
  >
    <div v-if="isLoading" class="loading-container">
-      <div class="loading-content">
-        <LoadingSpinner />
-        <p>{{ t('loading') }}...</p>
-      </div>
+      <LoadingContent>{{ t('loading') }}...</LoadingContent>
    </div>

    <div v-else style="position: relative; z-index: 4">
--- a/src/views/Ranking/WeeklyStar/WeeklyStar.vue
+++ b/src/views/Ranking/WeeklyStar/WeeklyStar.vue
@ -3,11 +3,7 @@
  <div class="fullPage">
    <!-- 预加载状态 -->
    <div v-if="isLoading" class="loading-container">
-      <div class="loading-content">
-        <!-- 加载动画 -->
-        <LoadingSpinner />
-        <p>{{ $t('loading') }}...</p>
-      </div>
+      <LoadingContent>{{ $t('loading') }}...</LoadingContent>
    </div>

    <!-- 主要内容 -->
--- a/src/views/RechargeAgency/SearchUser.vue
+++ b/src/views/RechargeAgency/SearchUser.vue
@ -112,8 +112,7 @@

      <!-- 加载状态 -->
      <div v-if="isSearching" class="loading-state">
-        <LoadingSpinner margin="0 auto 16px" />
-        <p>{{ t('searching') }}...</p>
+        <LoadingContent spinner-margin="0 auto 16px">{{ t('searching') }}...</LoadingContent>
      </div>

      <!-- 空状态 -->
--- a/src/views/RechargeAgency/SellerRecordsView.vue
+++ b/src/views/RechargeAgency/SellerRecordsView.vue
@ -91,10 +91,9 @@
        "
      >
        <!-- 加载动画 -->
-        <LoadingSpinner margin="0 auto 16px" />
-
-        <!-- 提示文本 -->
-        <p style="margin: 0; font-size: 14px">{{ t('loading') }}...</p>
+        <LoadingContent spinner-margin="0 auto 16px" :text-style="{ fontSize: '14px' }">
+          {{ t('loading') }}...
+        </LoadingContent>
      </div>

      <!-- 用户列表(加载完...) -->
--- a/src/views/RechargeAgency/index.vue
+++ b/src/views/RechargeAgency/index.vue
@ -11,8 +11,7 @@

    <!-- 权限校验加载状态 -->
    <div v-if="checkingAccess" class="loading-container">
-      <LoadingSpinner />
-      <p>{{ t('checking_permissions') }}...</p>
+      <LoadingContent>{{ t('checking_permissions') }}...</LoadingContent>
    </div>

    <!-- 主要内容 -->
--- a/src/views/Wallet/Detail/HistorySalary.vue
+++ b/src/views/Wallet/Detail/HistorySalary.vue
@ -44,8 +44,7 @@

        <!-- 加载状态 -->
        <div v-if="loading" class="loading-container">
-          <LoadingSpinner />
-          <p>{{ t('loading') }}...</p>
+          <LoadingContent>{{ t('loading') }}...</LoadingContent>
        </div>

        <!-- 报告列表 -->
--- a/src/views/Wallet/Detail/InformationDetails.vue
+++ b/src/views/Wallet/Detail/InformationDetails.vue
@ -11,8 +11,7 @@
    <div class="content">
      <!-- 加载状态 -->
      <div v-if="loading" class="loading-state">
-        <LoadingSpinner margin="0 auto 16px" />
-        <p>{{ t('loading') }}...</p>
+        <LoadingContent spinner-margin="0 auto 16px">{{ t('loading') }}...</LoadingContent>
      </div>

      <!-- 错误状态 -->
--- a/src/views/Wallet/Transfer/SearchPayee.vue
+++ b/src/views/Wallet/Transfer/SearchPayee.vue
@ -71,8 +71,7 @@

      <!-- 角色检查加载状态 -->
      <div v-if="isLoadingRole" class="loading-state">
-        <LoadingSpinner margin="0 auto 16px" />
-        <p>{{ t('checking_permissions') }}...</p>
+        <LoadingContent spinner-margin="0 auto 16px">{{ t('checking_permissions') }}...</LoadingContent>
      </div>

      <!-- 搜索结果 -->
@ -179,8 +178,7 @@

      <!-- 加载状态 -->
      <div v-if="isSearching" class="loading-state">
-        <LoadingSpinner margin="0 auto 16px" />
-        <p>{{ t('searching') }}...</p>
+        <LoadingContent spinner-margin="0 auto 16px">{{ t('searching') }}...</LoadingContent>
      </div>
    </div>