From 3f6b427f2ffc668d590837289904d09c0ef0ff4f Mon Sep 17 00:00:00 2001
From: zoujing <zoujing@gogpay.cn>
Date: Sun, 20 Sep 2026 10:07:54 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E5=A2=9E=E5=8A=A0=E9=AA=A8?=
 =?UTF-8?q?=E6=9E=B6=E5=B1=8F=E5=8A=A0=E8=BD=BD=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app.css                       |  2 ++
 src/components/EmptyBox/index.vue |  6 +++-
 src/views/benefit/index.vue       | 43 ++++++++++++++++++++---
 src/views/home/index.vue          | 57 +++++++++++++++++++++++++++++++
 4 files changed, 103 insertions(+), 5 deletions(-)

diff --git a/src/app.css b/src/app.css
index 1b62934..ed19564 100644
--- a/src/app.css
+++ b/src/app.css
@@ -42,6 +42,8 @@
   --color-line2: #e4e8ec;
   --color-alt: #f5f7f9;
   --color-danger: #e5484d;
+  /* 骨架屏占位块填充（配 animate-pulse 使用） */
+  --color-skel: rgba(20, 24, 28, 0.08);
 
   /* ---- 字阶（设计稿 7 级；零散字号用 text-[13.5px] 这类任意值） ---- */
   --text-hint: 10.5px; /* 弱提示 */
diff --git a/src/components/EmptyBox/index.vue b/src/components/EmptyBox/index.vue
index 9f4676e..c9ec597 100644
--- a/src/components/EmptyBox/index.vue
+++ b/src/components/EmptyBox/index.vue
@@ -14,7 +14,11 @@ defineProps({
 
 <template>
   <view class="mt-[26px] mx-[14px] px-5 py-[54px] text-center">
-    <AppIcon v-if="showIcon" :name="icon" tone="ink3" :size="34" />
+    <!-- ⚠️ 组件宿主节点是行内盒，图标根节点却是 display:block 的定宽块 →
+         直接放 text-center 里不会居中（会贴左）。用 flex 容器托管才能可靠居中。 -->
+    <view v-if="showIcon" class="flex justify-center">
+      <AppIcon :name="icon" tone="ink3" :size="34" />
+    </view>
     <view class="mt-3 text-[13px] text-ink3">{{ text }}</view>
     <slot />
   </view>
diff --git a/src/views/benefit/index.vue b/src/views/benefit/index.vue
index f37ab62..7c94057 100644
--- a/src/views/benefit/index.vue
+++ b/src/views/benefit/index.vue
@@ -57,6 +57,10 @@ const subTabs = computed(() =>
   BENEFIT_SUB_TABS.map((t) => ({ ...t, count: counts.value[t.key] ?? 0 }))
 );
 
+/** 骨架屏开关：对应列表还没从服务端拉过（加载完才允许出空状态） */
+const centerPending = computed(() => !store.centerLoaded);
+const minePending = computed(() => !!getAccessToken() && !store.mineLoaded);
+
 /** 壳在「切到本面板」与「页面 onShow」时调 */
 const onPanelShow = () => {
   // seg=mine 这类「切过来要落在哪个分段」的意图走 nav 的内存透传（不经过路由，故不用 query）
@@ -231,17 +235,48 @@ const onConfirmUse = async () => {
       <template v-if="seg === 'center'">
         <!-- -mt-[7px] 抵掉 BenefitCard 自带 mt-[11px]：分类栏下方间距 11px → **4px** -->
         <view class="px-[14px] -mt-[7px]">
-          <BenefitCard v-for="item in centerList" :key="item.id" :benefit="item" mode="center" @action="onClaim" />
+          <template v-if="centerPending">
+            <!-- 首屏骨架：3 张卡占位，结构与 BenefitCard 一致 -->
+            <view v-for="i in 3" :key="i"
+              class="relative flex h-[130px] bg-white border-[0.5px] border-line rounded-card mt-[11px] overflow-hidden">
+              <view class="flex-1 min-w-0 px-[14px] pt-[13px] pb-3 flex flex-col">
+                <view class="h-[13px] w-[64px] rounded-[7px] animate-pulse bg-skel" />
+                <view class="mt-2 h-[26px] w-[108px] rounded-[8px] animate-pulse bg-skel" />
+                <view class="mt-[9px] h-[11px] w-[74%] rounded-[6px] animate-pulse bg-skel" />
+                <view class="mt-auto h-[10px] w-[116px] rounded-[5px] animate-pulse bg-skel" />
+              </view>
+              <view
+                class="w-[38%] min-w-[112px] shrink-0 border-l border-dashed border-[rgba(255,138,61,0.45)] animate-pulse bg-skel" />
+            </view>
+          </template>
+          <template v-else>
+            <BenefitCard v-for="item in centerList" :key="item.id" :benefit="item" mode="center" @action="onClaim" />
+          </template>
         </view>
-        <EmptyBox v-if="!centerList.length" text="该类别暂无可用权益" />
+        <EmptyBox v-if="!centerPending && !centerList.length" text="该类别暂无可用权益" />
       </template>
 
       <!-- 分段二 · 我的权益 -->
       <template v-else>
         <view class="px-[14px]">
-          <BenefitCard v-for="item in mineList" :key="item.id" :benefit="item" mode="mine" @action="onCardTap" />
+          <template v-if="minePending">
+            <view v-for="i in 3" :key="i"
+              class="relative flex h-[130px] bg-white border-[0.5px] border-line rounded-card mt-[11px] overflow-hidden">
+              <view class="flex-1 min-w-0 px-[14px] pt-[13px] pb-3 flex flex-col">
+                <view class="h-[13px] w-[64px] rounded-[7px] animate-pulse bg-skel" />
+                <view class="mt-2 h-[26px] w-[108px] rounded-[8px] animate-pulse bg-skel" />
+                <view class="mt-[9px] h-[11px] w-[74%] rounded-[6px] animate-pulse bg-skel" />
+                <view class="mt-auto h-[10px] w-[116px] rounded-[5px] animate-pulse bg-skel" />
+              </view>
+              <view
+                class="w-[38%] min-w-[112px] shrink-0 border-l border-dashed border-[rgba(255,138,61,0.45)] animate-pulse bg-skel" />
+            </view>
+          </template>
+          <template v-else>
+            <BenefitCard v-for="item in mineList" :key="item.id" :benefit="item" mode="mine" @action="onCardTap" />
+          </template>
         </view>
-        <EmptyBox v-if="!mineList.length" text="还没有领取权益" :show-icon="false">
+        <EmptyBox v-if="!minePending && !mineList.length" text="还没有领取权益" :show-icon="false">
           <view class="mt-6 flex justify-center">
             <view
               class="h-9 px-[18px] rounded-full flex items-center border-[0.5px] border-brand text-cap font-semibold text-brand-deep"
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index ae1fe59..6230f09 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -18,6 +18,8 @@ import { goCatalog, previewImages } from "@/utils/nav";
 
 const home = ref({});
 const featured = ref([]);
+/** 首屏数据是否已回来（骨架屏开关；请求失败也置真，避免骨架常驻） */
+const loaded = ref(false);
 
 const brandName = computed(() => home.value?.brand_name || "");
 /** 品牌名末两字走品牌色（「发现龙里」→ 发现 + 龙里） */
@@ -50,6 +52,7 @@ const load = async () => {
     featured.value = [];
   } finally {
     loading = false;
+    loaded.value = true;
   }
 };
 
@@ -76,6 +79,59 @@ const onMapTap = () => {
 
 <template>
   <view class="relative h-screen w-full flex flex-col skin-home">
+    <!-- 首屏骨架屏：数据未到时按真实结构占位（品牌区 / 主视觉 / 玩转龙里 / 导览 / 精选） -->
+    <template v-if="!loaded">
+      <view class="relative z-[60] shrink-0">
+        <view class="px-4 pb-[10px]">
+          <AppStatusBar />
+
+          <view class="mt-[6px] h-[14px] w-[84px] rounded-[7px] animate-pulse bg-skel" />
+          <view class="mt-[9px] h-[32px] w-[186px] rounded-[10px] animate-pulse bg-skel" />
+          <view class="mt-2 h-[18px] w-[234px] rounded-[6px] animate-pulse bg-skel" />
+        </view>
+      </view>
+
+      <scroll-view class="flex-1 min-h-0" scroll-y :show-scrollbar="false">
+        <view class="px-4">
+          <view class="h-[180px] mt-[2px] rounded-hero animate-pulse bg-skel" />
+
+          <view class="flex items-center h-[24px] mt-5 mb-[10px] mx-[2px]">
+            <view class="h-[17px] w-[68px] rounded-[6px] animate-pulse bg-skel" />
+          </view>
+          <view class="flex gap-[10px] h-[226px] mt-[2px]">
+            <view class="flex-[1.06] min-w-0 rounded-tile animate-pulse bg-skel" />
+            <view class="flex-1 min-w-0 flex flex-col gap-[10px]">
+              <view class="h-[108px] rounded-tile animate-pulse bg-skel" />
+              <view class="h-[108px] rounded-tile animate-pulse bg-skel" />
+            </view>
+          </view>
+
+          <view class="flex items-center h-[24px] mt-5 mb-[10px] mx-[2px]">
+            <view class="h-[17px] w-[68px] rounded-[6px] animate-pulse bg-skel" />
+          </view>
+          <view class="h-[112px] mt-[2px] rounded-tile animate-pulse bg-skel" />
+
+          <view class="flex items-center justify-between h-[24px] mt-5 mb-[10px] mx-[2px]">
+            <view class="h-[17px] w-[68px] rounded-[6px] animate-pulse bg-skel" />
+            <view class="h-[12px] w-[36px] rounded-[6px] animate-pulse bg-skel" />
+          </view>
+          <view v-for="i in 3" :key="i"
+            class="flex gap-[11px] bg-white rounded-card p-[10px] shadow-elev1 border-[0.5px] border-line"
+            :class="i > 1 ? 'mt-[10px]' : ''">
+            <view class="shrink-0 w-[92px] h-[92px] rounded-[12px] animate-pulse bg-skel" />
+            <view class="min-w-0 flex-1">
+              <view class="h-[13px] w-[72%] rounded-[6px] animate-pulse bg-skel" />
+              <view class="mt-[9px] h-[10px] w-[94%] rounded-[5px] animate-pulse bg-skel" />
+              <view class="mt-[6px] h-[10px] w-[58%] rounded-[5px] animate-pulse bg-skel" />
+            </view>
+          </view>
+        </view>
+
+        <view class="h-[96px]" />
+      </scroll-view>
+    </template>
+
+    <template v-else>
     <view class="relative z-[60] shrink-0">
       <view class="px-4 pb-[10px]">
         <AppStatusBar />
@@ -175,5 +231,6 @@ const onMapTap = () => {
       <!-- 底部留白 = TabBar 高 78px + 18px 间隔，避免最后一条内容贴住 TabBar -->
       <view class="h-[96px]" />
     </scroll-view>
+    </template>
   </view>
 </template>