From 21b9783bf8837cad3cbda0cfd9eccd8fe2709564 Mon Sep 17 00:00:00 2001
From: jqtmviyu <jqtmviyu@gmail.com>
Date: Tue, 22 Apr 2025 11:07:47 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20:sparkles:=20=E9=A6=96=E9=A1=B5?=
 =?UTF-8?q?=E5=8A=A0=E8=BD=BD=E6=95=B0=E6=8D=AE=E5=89=8D=E4=BD=BF=E7=94=A8?=
 =?UTF-8?q?=E9=AA=A8=E6=9E=B6=E5=B1=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/index/components/PageSkeleton.vue | 362 ++++++++++++++++++++
 src/pages/index/index.vue                   |  31 +-
 2 files changed, 381 insertions(+), 12 deletions(-)
 create mode 100644 src/pages/index/components/PageSkeleton.vue

diff --git a/src/pages/index/components/PageSkeleton.vue b/src/pages/index/components/PageSkeleton.vue
new file mode 100644
index 0000000..5c5e502
--- /dev/null
+++ b/src/pages/index/components/PageSkeleton.vue
@@ -0,0 +1,362 @@
+<template name="skeleton">
+  <view is="components/JbcSwiper">
+    <view class="carousel JbcSwiper--carousel">
+      <swiper :circular="true" :current="0" :interval="3000" :autoplay="false">
+        <swiper-item
+          style="
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            transform: translate(0%, 0px) translateZ(0px);
+          "
+        >
+          <navigator class="navigator JbcSwiper--navigator" hover-class="none">
+            <image class="image JbcSwiper--image sk-image" mode="aspectFill"></image>
+          </navigator>
+        </swiper-item>
+      </swiper>
+      <view class="indicator JbcSwiper--indicator">
+        <text class="dot JbcSwiper--dot active JbcSwiper--active"></text>
+        <text class="dot JbcSwiper--dot"></text>
+        <text class="dot JbcSwiper--dot"></text>
+        <text class="dot JbcSwiper--dot"></text>
+        <text class="dot JbcSwiper--dot"></text>
+      </view>
+    </view>
+  </view>
+  <view is="pages/index/components/CategoryPanel">
+    <view class="category CategoryPanel--category">
+      <navigator class="category-item CategoryPanel--category-item" hover-class="none">
+        <image class="icon CategoryPanel--icon sk-image"></image>
+        <text class="text CategoryPanel--text sk-transparent sk-text-14-2857-158 sk-text"
+          >居家</text
+        >
+      </navigator>
+      <navigator class="category-item CategoryPanel--category-item" hover-class="none">
+        <image class="icon CategoryPanel--icon sk-image"></image>
+        <text class="text CategoryPanel--text sk-transparent sk-text-14-2857-849 sk-text"
+          >锦鲤</text
+        >
+      </navigator>
+      <navigator class="category-item CategoryPanel--category-item" hover-class="none">
+        <image class="icon CategoryPanel--icon sk-image"></image>
+        <text class="text CategoryPanel--text sk-transparent sk-text-14-2857-598 sk-text"
+          >服饰</text
+        >
+      </navigator>
+      <navigator class="category-item CategoryPanel--category-item" hover-class="none">
+        <image class="icon CategoryPanel--icon sk-image"></image>
+        <text class="text CategoryPanel--text sk-transparent sk-text-14-2857-271 sk-text"
+          >母婴</text
+        >
+      </navigator>
+      <navigator class="category-item CategoryPanel--category-item" hover-class="none">
+        <image class="icon CategoryPanel--icon sk-image"></image>
+        <text class="text CategoryPanel--text sk-transparent sk-text-14-2857-768 sk-text"
+          >个护</text
+        >
+      </navigator>
+      <navigator class="category-item CategoryPanel--category-item" hover-class="none">
+        <image class="icon CategoryPanel--icon sk-image"></image>
+        <text class="text CategoryPanel--text sk-transparent sk-text-14-2857-999 sk-text"
+          >严选</text
+        >
+      </navigator>
+      <navigator class="category-item CategoryPanel--category-item" hover-class="none">
+        <image class="icon CategoryPanel--icon sk-image"></image>
+        <text class="text CategoryPanel--text sk-transparent sk-text-14-2857-502 sk-text"
+          >数码</text
+        >
+      </navigator>
+      <navigator class="category-item CategoryPanel--category-item" hover-class="none">
+        <image class="icon CategoryPanel--icon sk-image"></image>
+        <text class="text CategoryPanel--text sk-transparent sk-text-14-2857-420 sk-text"
+          >运动</text
+        >
+      </navigator>
+      <navigator class="category-item CategoryPanel--category-item" hover-class="none">
+        <image class="icon CategoryPanel--icon sk-image"></image>
+        <text class="text CategoryPanel--text sk-transparent sk-text-14-2857-89 sk-text">杂项</text>
+      </navigator>
+      <navigator class="category-item CategoryPanel--category-item" hover-class="none">
+        <image class="icon CategoryPanel--icon sk-image"></image>
+        <text class="text CategoryPanel--text sk-transparent sk-text-14-2857-28 sk-text">品牌</text>
+      </navigator>
+    </view>
+  </view>
+  <view is="pages/index/components/HotPanel">
+    <view class="panel HotPanel--panel hot HotPanel--hot">
+      <view class="item HotPanel--item">
+        <view class="title HotPanel--title">
+          <text class="title-text HotPanel--title-text sk-transparent sk-text-14-2857-496 sk-text"
+            >特惠推荐</text
+          >
+          <text class="title-desc HotPanel--title-desc sk-transparent sk-text-14-2857-20 sk-text"
+            >精选全攻略</text
+          >
+        </view>
+        <navigator class="cards HotPanel--cards" hover-class="none">
+          <image class="image HotPanel--image sk-image" mode="aspectFit"></image>
+          <image class="image HotPanel--image sk-image" mode="aspectFit"></image>
+        </navigator>
+      </view>
+      <view class="item HotPanel--item">
+        <view class="title HotPanel--title">
+          <text class="title-text HotPanel--title-text sk-transparent sk-text-14-2857-183 sk-text"
+            >爆款推荐</text
+          >
+          <text class="title-desc HotPanel--title-desc sk-transparent sk-text-14-2857-205 sk-text"
+            >最受欢迎</text
+          >
+        </view>
+        <navigator class="cards HotPanel--cards" hover-class="none">
+          <image class="image HotPanel--image sk-image" mode="aspectFit"></image>
+          <image class="image HotPanel--image sk-image" mode="aspectFit"></image>
+        </navigator>
+      </view>
+      <view class="item HotPanel--item">
+        <view class="title HotPanel--title">
+          <text class="title-text HotPanel--title-text sk-transparent sk-text-14-2857-35 sk-text"
+            >一站买全</text
+          >
+          <text class="title-desc HotPanel--title-desc sk-transparent sk-text-14-2857-223 sk-text"
+            >精心优选</text
+          >
+        </view>
+        <navigator class="cards HotPanel--cards" hover-class="none">
+          <image class="image HotPanel--image sk-image" mode="aspectFit"></image>
+          <image class="image HotPanel--image sk-image" mode="aspectFit"></image>
+        </navigator>
+      </view>
+      <view class="item HotPanel--item">
+        <view class="title HotPanel--title">
+          <text class="title-text HotPanel--title-text sk-transparent sk-text-14-2857-158 sk-text"
+            >新鲜好物</text
+          >
+          <text class="title-desc HotPanel--title-desc sk-transparent sk-text-14-2857-452 sk-text"
+            >生活加分项</text
+          >
+        </view>
+        <navigator class="cards HotPanel--cards" hover-class="none">
+          <image class="image HotPanel--image sk-image" mode="aspectFit"></image>
+          <image class="image HotPanel--image sk-image" mode="aspectFit"></image>
+        </navigator>
+      </view>
+    </view>
+  </view>
+</template>
+
+<style>
+.sk-transparent {
+  color: transparent !important;
+}
+.sk-text-24-0741-766 {
+  background-image: linear-gradient(
+    transparent 24.0741%,
+    #eeeeee 0%,
+    #eeeeee 75.9259%,
+    transparent 0%
+  ) !important;
+  background-size: 100% 48.913rpx;
+  position: relative !important;
+}
+.sk-text {
+  background-origin: content-box !important;
+  background-clip: content-box !important;
+  background-color: transparent !important;
+  color: transparent !important;
+  background-repeat: repeat-y !important;
+}
+.sk-text-14-2857-226 {
+  background-image: linear-gradient(
+    transparent 14.2857%,
+    #eeeeee 0%,
+    #eeeeee 85.7143%,
+    transparent 0%
+  ) !important;
+  background-size: 100% 38.0435rpx;
+  position: relative !important;
+}
+.sk-text-14-2857-158 {
+  background-image: linear-gradient(
+    transparent 14.2857%,
+    #eeeeee 0%,
+    #eeeeee 85.7143%,
+    transparent 0%
+  ) !important;
+  background-size: 100% 35.5072rpx;
+  position: relative !important;
+}
+.sk-text-14-2857-849 {
+  background-image: linear-gradient(
+    transparent 14.2857%,
+    #eeeeee 0%,
+    #eeeeee 85.7143%,
+    transparent 0%
+  ) !important;
+  background-size: 100% 35.5072rpx;
+  position: relative !important;
+}
+.sk-text-14-2857-598 {
+  background-image: linear-gradient(
+    transparent 14.2857%,
+    #eeeeee 0%,
+    #eeeeee 85.7143%,
+    transparent 0%
+  ) !important;
+  background-size: 100% 35.5072rpx;
+  position: relative !important;
+}
+.sk-text-14-2857-271 {
+  background-image: linear-gradient(
+    transparent 14.2857%,
+    #eeeeee 0%,
+    #eeeeee 85.7143%,
+    transparent 0%
+  ) !important;
+  background-size: 100% 35.5072rpx;
+  position: relative !important;
+}
+.sk-text-14-2857-768 {
+  background-image: linear-gradient(
+    transparent 14.2857%,
+    #eeeeee 0%,
+    #eeeeee 85.7143%,
+    transparent 0%
+  ) !important;
+  background-size: 100% 35.5072rpx;
+  position: relative !important;
+}
+.sk-text-14-2857-999 {
+  background-image: linear-gradient(
+    transparent 14.2857%,
+    #eeeeee 0%,
+    #eeeeee 85.7143%,
+    transparent 0%
+  ) !important;
+  background-size: 100% 35.5072rpx;
+  position: relative !important;
+}
+.sk-text-14-2857-502 {
+  background-image: linear-gradient(
+    transparent 14.2857%,
+    #eeeeee 0%,
+    #eeeeee 85.7143%,
+    transparent 0%
+  ) !important;
+  background-size: 100% 35.5072rpx;
+  position: relative !important;
+}
+.sk-text-14-2857-420 {
+  background-image: linear-gradient(
+    transparent 14.2857%,
+    #eeeeee 0%,
+    #eeeeee 85.7143%,
+    transparent 0%
+  ) !important;
+  background-size: 100% 35.5072rpx;
+  position: relative !important;
+}
+.sk-text-14-2857-89 {
+  background-image: linear-gradient(
+    transparent 14.2857%,
+    #eeeeee 0%,
+    #eeeeee 85.7143%,
+    transparent 0%
+  ) !important;
+  background-size: 100% 35.5072rpx;
+  position: relative !important;
+}
+.sk-text-14-2857-28 {
+  background-image: linear-gradient(
+    transparent 14.2857%,
+    #eeeeee 0%,
+    #eeeeee 85.7143%,
+    transparent 0%
+  ) !important;
+  background-size: 100% 35.5072rpx;
+  position: relative !important;
+}
+.sk-text-14-2857-496 {
+  background-image: linear-gradient(
+    transparent 14.2857%,
+    #eeeeee 0%,
+    #eeeeee 85.7143%,
+    transparent 0%
+  ) !important;
+  background-size: 100% 43.1159rpx;
+  position: relative !important;
+}
+.sk-text-14-2857-20 {
+  background-image: linear-gradient(
+    transparent 14.2857%,
+    #eeeeee 0%,
+    #eeeeee 85.7143%,
+    transparent 0%
+  ) !important;
+  background-size: 100% 32.971rpx;
+  position: relative !important;
+}
+.sk-text-14-2857-183 {
+  background-image: linear-gradient(
+    transparent 14.2857%,
+    #eeeeee 0%,
+    #eeeeee 85.7143%,
+    transparent 0%
+  ) !important;
+  background-size: 100% 43.1159rpx;
+  position: relative !important;
+}
+.sk-text-14-2857-205 {
+  background-image: linear-gradient(
+    transparent 14.2857%,
+    #eeeeee 0%,
+    #eeeeee 85.7143%,
+    transparent 0%
+  ) !important;
+  background-size: 100% 32.971rpx;
+  position: relative !important;
+}
+.sk-text-14-2857-35 {
+  background-image: linear-gradient(
+    transparent 14.2857%,
+    #eeeeee 0%,
+    #eeeeee 85.7143%,
+    transparent 0%
+  ) !important;
+  background-size: 100% 43.1159rpx;
+  position: relative !important;
+}
+.sk-text-14-2857-223 {
+  background-image: linear-gradient(
+    transparent 14.2857%,
+    #eeeeee 0%,
+    #eeeeee 85.7143%,
+    transparent 0%
+  ) !important;
+  background-size: 100% 32.971rpx;
+  position: relative !important;
+}
+.sk-text-14-2857-452 {
+  background-image: linear-gradient(
+    transparent 14.2857%,
+    #eeeeee 0%,
+    #eeeeee 85.7143%,
+    transparent 0%
+  ) !important;
+  background-size: 100% 32.971rpx;
+  position: relative !important;
+}
+.sk-image {
+  background: #efefef !important;
+}
+.sk-container {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background-color: transparent;
+}
+</style>
diff --git a/src/pages/index/index.vue b/src/pages/index/index.vue
index 6703da9..c0fe018 100644
--- a/src/pages/index/index.vue
+++ b/src/pages/index/index.vue
@@ -12,14 +12,17 @@
       @scrolltolower="onScrollToLower"
       @refresherrefresh="onRefresh"
     >
-      <!-- 轮播图 -->
-      <JbcSwiper :list="bannerList" />
-      <!-- 分类 -->
-      <CategoryPanel :list="categoryList" />
-      <!-- 热门 -->
-      <HotPanel :list="hotList" />
-      <!-- 猜你喜欢 -->
-      <JbcGuess ref="guessRef" />
+      <PageSkeleton v-if="isLoading" />
+      <template v-else>
+        <!-- 轮播图 -->
+        <JbcSwiper :list="bannerList" />
+        <!-- 分类 -->
+        <CategoryPanel :list="categoryList" />
+        <!-- 热门 -->
+        <HotPanel :list="hotList" />
+        <!-- 猜你喜欢 -->
+        <JbcGuess ref="guessRef" />
+      </template>
     </scroll-view>
   </view>
 </template>
@@ -33,6 +36,10 @@ import { onLoad } from '@dcloudio/uni-app'
 import CategoryPanel from './components/CategoryPanel.vue'
 import HotPanel from './components/HotPanel.vue'
 import type { JbcGuessInstance } from '@/types/components'
+import PageSkeleton from './components/PageSkeleton.vue'
+
+// 数据加载状态
+const isLoading = ref(true)
 
 // 获取轮播图数据
 const bannerList = ref<BannerItem[]>([])
@@ -79,10 +86,10 @@ const onRefresh = async () => {
 }
 
 // 页面加载勾子
-onLoad(() => {
-  getBannerList()
-  getCategoryList()
-  getHotList()
+onLoad(async () => {
+  isLoading.value = true
+  await Promise.allSettled([getBannerList(), getCategoryList(), getHotList()])
+  isLoading.value = false
 })
 </script>