feat: 调整翻牌与邀请码逻辑，增加第8次奖励及前端骨架屏

Yi.Ai.Vue3/src/components/userPersonalCenter/components/CardFlipActivity.vue

@@ -5,7 +5,8 @@ import { onMounted, ref } from 'vue';
 import { flipCard, generateMyInviteCode, getWeeklyTaskStatus, useInviteCode } from '@/api/cardFlip';
 
 const taskData = ref<CardFlipStatusOutput | null>(null);
-const loading = ref(false);
+const loading = ref(false); // 操作加载状态（使用邀请码等）
+const initialLoading = ref(true); // 初始加载状态
 const flipping = ref(false);
 const inviteCodeDialog = ref(false);
 const inputInviteCode = ref('');
@@ -22,7 +23,15 @@ onMounted(() => {
 
 // 获取任务状态
 async function fetchTaskStatus() {
-  loading.value = true;
+  // 首次加载时使用 initialLoading，避免白屏闪烁
+  const isInitialLoad = taskData.value === null;
+  if (isInitialLoad) {
+    initialLoading.value = true;
+  }
+  else {
+    loading.value = true;
+  }
+
   try {
     const res = await getWeeklyTaskStatus();
     taskData.value = res.data;
@@ -31,7 +40,12 @@ async function fetchTaskStatus() {
     ElMessage.error(error?.message || '获取任务状态失败');
   }
   finally {
-    loading.value = false;
+    if (isInitialLoad) {
+      initialLoading.value = false;
+    }
+    else {
+      loading.value = false;
+    }
   }
 }
 
@@ -42,11 +56,17 @@ async function handleFlipCard(record: CardFlipRecord) {
 
   if (canFlip) {
     // 检查是否需要使用邀请码
-    if (record.flipNumber > 8 && (taskData.value?.remainingInviteFlips || 0) > 0) {
-      const usedInviteFlips = 2 - (taskData.value?.remainingInviteFlips || 2);
-      if (usedInviteFlips < (record.flipNumber - 8)) {
+    // 当前已翻次数
+    const currentFlips = taskData.value?.totalFlips || 0;
+
+    // 如果已经翻了7次或以上，需要检查邀请码
+    if (currentFlips >= 7) {
+      const remainingInviteFlips = taskData.value?.remainingInviteFlips || 0;
+
+      // 如果没有剩余邀请次数，提示需要使用邀请码
+      if (remainingInviteFlips === 0) {
         ElMessageBox.confirm(
-          '🎁 需要先使用邀请码解锁此次翻牌机会哦~',
+          '🎁 需要先使用邀请码解锁更多翻牌机会哦~',
           '温馨提示',
           {
             confirmButtonText: '去使用',
@@ -62,13 +82,17 @@ async function handleFlipCard(record: CardFlipRecord) {
       }
     }
 
+    // 标记为正在翻牌（显示加载状态，但不播放动画）
     flipping.value = true;
-    flippingCards.value.add(record.flipNumber);
 
     try {
+      // 先请求后端接口
       const res = await flipCard({ flipNumber: record.flipNumber });
       lastFlipResult.value = res.data;
 
+      // 请求成功后，开始播放翻牌动画
+      flippingCards.value.add(record.flipNumber);
+
       // 等待翻牌动画完成
       await new Promise(resolve => setTimeout(resolve, 800));
 
@@ -105,6 +129,8 @@ async function handleFlipCard(record: CardFlipRecord) {
     }
     catch (error: any) {
       ElMessage.error(error?.message || '翻牌失败');
+      // 如果请求失败，移除翻牌动画
+      flippingCards.value.delete(record.flipNumber);
     }
     finally {
       flipping.value = false;
@@ -236,8 +262,20 @@ function toggleInviteSection() {
 
 <template>
   <div v-loading="loading" class="card-flip-container">
-    <!-- 邀请码操作区 -->
-    <div class="bottom-actions">
+    <!-- 初始加载骨架屏 -->
+    <div v-if="initialLoading" class="loading-skeleton">
+      <div class="skeleton-stats">
+        <div v-for="i in 3" :key="i" class="skeleton-stat-item" />
+      </div>
+      <div class="skeleton-cards">
+        <div v-for="i in 10" :key="i" class="skeleton-card" />
+      </div>
+    </div>
+
+    <!-- 主内容 -->
+    <template v-else>
+      <!-- 邀请码操作区 -->
+      <div class="bottom-actions">
       <el-button
         type="primary"
         :icon="showInviteSection ? 'ArrowUp' : 'Gift'"
@@ -287,7 +325,7 @@ function toggleInviteSection() {
         </div>
 
         <div class="invite-tip">
-          💌 分享给好友，好友使用后可解锁最后2次翻牌机会
+          💌 分享给好友，好友使用后可解锁最后3次翻牌机会
         </div>
       </div>
     </el-collapse-transition>
@@ -402,11 +440,6 @@ function toggleInviteSection() {
               </div>
             </div>
           </div>
-
-          <!-- 锁定遮罩 -->
-          <div v-if="!record.isFlipped && record.flipNumber > (taskData?.totalFlips || 0) + 1" class="card-lock">
-            <span class="lock-icon">🔒</span>
-          </div>
         </div>
       </div>
     </div>
@@ -422,7 +455,7 @@ function toggleInviteSection() {
     >
       <div class="invite-dialog-content">
         <p class="dialog-tip">
-          请输入好友的邀请码，解锁最后2次翻牌机会
+          请输入好友的邀请码，解锁最后3次翻牌机会
         </p>
         <el-input
           v-model="inputInviteCode"
@@ -477,6 +510,7 @@ function toggleInviteSection() {
         </el-button>
       </div>
     </el-dialog>
+    </template>
   </div>
 </template>
 
@@ -1139,4 +1173,52 @@ function toggleInviteSection() {
     opacity: 1;
   }
 }
+
+/* 骨架屏样式 */
+.loading-skeleton {
+  padding: 16px 0;
+
+  .skeleton-stats {
+    display: flex;
+    gap: 12px;
+    margin-bottom: 16px;
+  }
+
+  .skeleton-stat-item {
+    flex: 1;
+    height: 64px;
+    background: linear-gradient(90deg, rgba(255, 255, 255, 0.1) 25%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.1) 75%);
+    background-size: 200% 100%;
+    border-radius: 12px;
+    animation: skeleton-loading 1.5s ease-in-out infinite;
+  }
+
+  .skeleton-cards {
+    display: grid;
+    grid-template-columns: repeat(5, 1fr);
+    gap: 10px;
+
+    @media (max-width: 768px) {
+      grid-template-columns: repeat(5, 1fr);
+      gap: 8px;
+    }
+  }
+
+  .skeleton-card {
+    aspect-ratio: 3/4;
+    background: linear-gradient(90deg, rgba(255, 255, 255, 0.1) 25%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.1) 75%);
+    background-size: 200% 100%;
+    border-radius: 10px;
+    animation: skeleton-loading 1.5s ease-in-out infinite;
+  }
+}
+
+@keyframes skeleton-loading {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
 </style>