hookehuyr

fix(AdPage): 添加默认广告图片并在加载失败时显示

当广告图片URL为空时显示默认图片,避免空白页面
1 <!-- 1 <!--
2 * @Date: 2022-09-19 14:11:06 2 * @Date: 2022-09-19 14:11:06
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2025-09-26 17:20:49 4 + * @LastEditTime: 2025-09-28 14:03:53
5 * @FilePath: /lls_program/src/pages/AdPage/index.vue 5 * @FilePath: /lls_program/src/pages/AdPage/index.vue
6 * @Description: 广告页面 6 * @Description: 广告页面
7 --> 7 -->
...@@ -36,7 +36,7 @@ ...@@ -36,7 +36,7 @@
36 <!-- 背景图片 --> 36 <!-- 背景图片 -->
37 <image 37 <image
38 v-show="!imageLoading && !imageLoadError" 38 v-show="!imageLoading && !imageLoadError"
39 - :src="adImageUrl" 39 + :src="adImageUrl || defaultAdImage"
40 class="ad-background" 40 class="ad-background"
41 mode="scaleToFill" 41 mode="scaleToFill"
42 @tap="handleImageClick" 42 @tap="handleImageClick"
...@@ -75,6 +75,9 @@ import { getMyFamiliesAPI } from "@/api/family"; ...@@ -75,6 +75,9 @@ import { getMyFamiliesAPI } from "@/api/family";
75 import { silentAuth } from "@/utils/authRedirect"; 75 import { silentAuth } from "@/utils/authRedirect";
76 import "./index.less"; 76 import "./index.less";
77 77
78 +// 默认广告图片
79 +const defaultAdImage = 'https://cdn.ipadbiz.cn/space_34093/%E5%BC%95%E5%AF%BC%E9%A1%B51_Fu2ZY_Tm6TL1OzbyrqQkeVRAdVfU.jpg?imageMogr2/strip/quality/60';
80 +
78 // 定义响应式数据 81 // 定义响应式数据
79 const adImageUrl = ref(''); 82 const adImageUrl = ref('');
80 const loading = ref(true); 83 const loading = ref(true);
...@@ -187,11 +190,11 @@ const retryLoadImage = async () => { ...@@ -187,11 +190,11 @@ const retryLoadImage = async () => {
187 190
188 // 重新获取广告配置 191 // 重新获取广告配置
189 await fetchAdConfig(); 192 await fetchAdConfig();
190 - 193 +
191 // 广告配置成功后,清除超时定时器 194 // 广告配置成功后,清除超时定时器
192 clearLoadingTimeout(); 195 clearLoadingTimeout();
193 imageLoading.value = false; 196 imageLoading.value = false;
194 - 197 +
195 } catch (error) { 198 } catch (error) {
196 console.error('重试获取广告配置失败:', error); 199 console.error('重试获取广告配置失败:', error);
197 // 重试失败时触发超时处理 200 // 重试失败时触发超时处理
...@@ -224,12 +227,12 @@ const startLoadingTimeout = () => { ...@@ -224,12 +227,12 @@ const startLoadingTimeout = () => {
224 const handleLoadingTimeout = () => { 227 const handleLoadingTimeout = () => {
225 // 清除超时定时器 228 // 清除超时定时器
226 clearLoadingTimeout(); 229 clearLoadingTimeout();
227 - 230 +
228 if (retryCount.value < maxRetries.value) { 231 if (retryCount.value < maxRetries.value) {
229 // 自动重试 232 // 自动重试
230 retryCount.value++; 233 retryCount.value++;
231 console.log(`第${retryCount.value}次自动重试加载`); 234 console.log(`第${retryCount.value}次自动重试加载`);
232 - 235 +
233 // 延迟1秒后重试,避免频繁请求 236 // 延迟1秒后重试,避免频繁请求
234 setTimeout(() => { 237 setTimeout(() => {
235 retryLoadImage(); 238 retryLoadImage();
...@@ -260,7 +263,7 @@ const initializePage = async () => { ...@@ -260,7 +263,7 @@ const initializePage = async () => {
260 try { 263 try {
261 // 重置重试计数 264 // 重置重试计数
262 retryCount.value = 0; 265 retryCount.value = 0;
263 - 266 +
264 // 开始超时检测 267 // 开始超时检测
265 startLoadingTimeout(); 268 startLoadingTimeout();
266 269
...@@ -275,11 +278,11 @@ const initializePage = async () => { ...@@ -275,11 +278,11 @@ const initializePage = async () => {
275 } catch (adError) { 278 } catch (adError) {
276 console.error('获取广告配置失败,但继续执行后续逻辑:', adError); 279 console.error('获取广告配置失败,但继续执行后续逻辑:', adError);
277 } 280 }
278 - 281 +
279 // 无论广告配置是否成功,都要检查家庭状态 282 // 无论广告配置是否成功,都要检查家庭状态
280 try { 283 try {
281 await checkUserFamily(); 284 await checkUserFamily();
282 - 285 +
283 // 如果家庭状态检查成功,但广告配置失败了,再次尝试获取广告配置 286 // 如果家庭状态检查成功,但广告配置失败了,再次尝试获取广告配置
284 if (!adConfigSuccess) { 287 if (!adConfigSuccess) {
285 try { 288 try {
...@@ -290,7 +293,7 @@ const initializePage = async () => { ...@@ -290,7 +293,7 @@ const initializePage = async () => {
290 console.error('重试获取广告配置仍然失败:', retryError); 293 console.error('重试获取广告配置仍然失败:', retryError);
291 } 294 }
292 } 295 }
293 - 296 +
294 // 如果广告配置成功,清除超时定时器并设置成功状态 297 // 如果广告配置成功,清除超时定时器并设置成功状态
295 if (adConfigSuccess) { 298 if (adConfigSuccess) {
296 clearLoadingTimeout(); 299 clearLoadingTimeout();
...@@ -301,7 +304,7 @@ const initializePage = async () => { ...@@ -301,7 +304,7 @@ const initializePage = async () => {
301 imageLoadError.value = true; 304 imageLoadError.value = true;
302 handleLoadingTimeout(); 305 handleLoadingTimeout();
303 } 306 }
304 - 307 +
305 } catch (familyError) { 308 } catch (familyError) {
306 console.error('检查家庭状态失败:', familyError); 309 console.error('检查家庭状态失败:', familyError);
307 // 家庭状态检查失败,但仍然尝试显示广告 310 // 家庭状态检查失败,但仍然尝试显示广告
......