fix(AdPage): 修复广告图片加载逻辑并优化错误处理

改进广告图片加载失败时的重试机制，增加状态管理和错误处理调整超时处理逻辑，避免频繁请求添加必要的日志输出以便调试

fix(AdPage): 修复广告图片加载逻辑并优化错误处理
改进广告图片加载失败时的重试机制，增加状态管理和错误处理调整超时处理逻辑，避免频繁请求添加必要的日志输出以便调试
hookehuyr
Commit f1e0345abe57d978ffdcfa1621bd24beaa63cb99 f1e0345a 1 parent 2486a4c4
Showing 2 changed files with 64 additions and 15 deletions
src/components/RankingCard.vue
src/pages/AdPage/index.vue
--- a/src/components/RankingCard.vue
View file @f1e0345
+++ b/src/components/RankingCard.vue
View file @f1e0345
 <!--
  * @Date: 2025-01-09 00:00:00
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-09-28 11:28:21
+ * @LastEditTime: 2025-09-28 14:00:58
  * @FilePath: /lls_program/src/components/RankingCard.vue
  * @Description: 排行榜卡片组件
 -->
@@ -608,7 +608,7 @@ defineExpose({
         font-size: 20rpx;
         margin-bottom: 12rpx;
         text-align: center;
-        max-width: 120rpx;
+        max-width: 140rpx;
         overflow: hidden;
         text-overflow: ellipsis;
         display: -webkit-box;
--- a/src/pages/AdPage/index.vue
View file @f1e0345
+++ b/src/pages/AdPage/index.vue
View file @f1e0345
@@ -146,11 +146,13 @@ const handleImageClick = () => {
  * 图片加载完成处理
  */
 const handleImageLoad = () => {
+  console.log('图片加载成功');
   clearLoadingTimeout();
   imageLoading.value = false;
   imageLoadError.value = false;
   isTimeout.value = false;
   showManualRefresh.value = false;
+  loading.value = false;
   retryCount.value = 0;
 };
@@ -158,26 +160,45 @@ const handleImageLoad = () => {
  * 图片加载失败处理
  */
 const handleImageError = () => {
+  console.log('图片加载失败');
   clearLoadingTimeout();
   imageLoading.value = false;
   imageLoadError.value = true;
-  handleLoadingTimeout();
+  // 不要在这里直接调用handleLoadingTimeout，让重试逻辑统一处理
+  setTimeout(() => {
+    handleLoadingTimeout();
+  }, 100);
 };
 /**
  * 重试加载图片
  */
-const retryLoadImage = () => {
+const retryLoadImage = async () => {
+  // 重置状态
   imageLoading.value = true;
   imageLoadError.value = false;
   isTimeout.value = false;
   showManualRefresh.value = false;
+  loading.value = true;
-  // 开始超时检测
+  try {
-  startLoadingTimeout();
+    // 开始超时检测
+    startLoadingTimeout();
-  // 重新获取广告配置
+    // 重新获取广告配置
-  fetchAdConfig();
+    await fetchAdConfig();
+    
+    // 广告配置成功后，清除超时定时器
+    clearLoadingTimeout();
+    imageLoading.value = false;
+    
+  } catch (error) {
+    console.error('重试获取广告配置失败:', error);
+    // 重试失败时触发超时处理
+    handleLoadingTimeout();
+  } finally {
+    loading.value = false;
+  }
 };
 /**
@@ -185,13 +206,11 @@ const retryLoadImage = () => {
  */
 const startLoadingTimeout = () => {
   // 清除之前的定时器
-  if (loadingTimeout.value) {
+  clearLoadingTimeout();
-    clearTimeout(loadingTimeout.value);
-  }
   // 设置10秒超时
   loadingTimeout.value = setTimeout(() => {
-    if (imageLoading.value) {
+    if (imageLoading.value || loading.value) {
       console.warn('图片加载超时');
       isTimeout.value = true;
       handleLoadingTimeout();
@@ -203,14 +222,22 @@ const startLoadingTimeout = () => {
  * 处理加载超时
  */
 const handleLoadingTimeout = () => {
+  // 清除超时定时器
+  clearLoadingTimeout();
+  
   if (retryCount.value < maxRetries.value) {
     // 自动重试
     retryCount.value++;
     console.log(`第${retryCount.value}次自动重试加载`);
-    retryLoadImage();
+    
+    // 延迟1秒后重试，避免频繁请求
+    setTimeout(() => {
+      retryLoadImage();
+    }, 1000);
   } else {
     // 超过最大重试次数，显示手动刷新选项
     imageLoading.value = false;
+    loading.value = false;
     showManualRefresh.value = true;
     console.error('图片加载失败，已达到最大重试次数');
   }
@@ -231,6 +258,9 @@ const clearLoadingTimeout = () => {
  */
 const initializePage = async () => {
   try {
+    // 重置重试计数
+    retryCount.value = 0;
+    
     // 开始超时检测
     startLoadingTimeout();
@@ -254,18 +284,37 @@ const initializePage = async () => {
       if (!adConfigSuccess) {
         try {
           await fetchAdConfig();
+          adConfigSuccess = true;
           console.log('重试获取广告配置成功');
         } catch (retryError) {
           console.error('重试获取广告配置仍然失败:', retryError);
         }
       }
+      
+      // 如果广告配置成功，清除超时定时器并设置成功状态
+      if (adConfigSuccess) {
+        clearLoadingTimeout();
+        imageLoading.value = false;
+        imageLoadError.value = false;
+      } else {
+        // 广告配置失败，触发重试逻辑
+        imageLoadError.value = true;
+        handleLoadingTimeout();
+      }
+      
     } catch (familyError) {
       console.error('检查家庭状态失败:', familyError);
-      throw familyError; // 家庭状态检查失败需要抛出错误
+      // 家庭状态检查失败，但仍然尝试显示广告
+      if (adConfigSuccess) {
+        clearLoadingTimeout();
+        imageLoading.value = false;
+      } else {
+        handleLoadingTimeout();
+      }
     }
   } catch (error) {
     console.error('页面初始化失败:', error);
-    // 初始化失败时也要处理超时
+    // 初始化失败时处理超时
     handleLoadingTimeout();
   } finally {
     loading.value = false;