hookehuyr

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

当广告图片URL为空时显示默认图片,避免空白页面
<!--
* @Date: 2022-09-19 14:11:06
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-09-26 17:20:49
* @LastEditTime: 2025-09-28 14:03:53
* @FilePath: /lls_program/src/pages/AdPage/index.vue
* @Description: 广告页面
-->
......@@ -36,7 +36,7 @@
<!-- 背景图片 -->
<image
v-show="!imageLoading && !imageLoadError"
:src="adImageUrl"
:src="adImageUrl || defaultAdImage"
class="ad-background"
mode="scaleToFill"
@tap="handleImageClick"
......@@ -75,6 +75,9 @@ import { getMyFamiliesAPI } from "@/api/family";
import { silentAuth } from "@/utils/authRedirect";
import "./index.less";
// 默认广告图片
const defaultAdImage = 'https://cdn.ipadbiz.cn/space_34093/%E5%BC%95%E5%AF%BC%E9%A1%B51_Fu2ZY_Tm6TL1OzbyrqQkeVRAdVfU.jpg?imageMogr2/strip/quality/60';
// 定义响应式数据
const adImageUrl = ref('');
const loading = ref(true);
......@@ -187,11 +190,11 @@ const retryLoadImage = async () => {
// 重新获取广告配置
await fetchAdConfig();
// 广告配置成功后,清除超时定时器
clearLoadingTimeout();
imageLoading.value = false;
} catch (error) {
console.error('重试获取广告配置失败:', error);
// 重试失败时触发超时处理
......@@ -224,12 +227,12 @@ const startLoadingTimeout = () => {
const handleLoadingTimeout = () => {
// 清除超时定时器
clearLoadingTimeout();
if (retryCount.value < maxRetries.value) {
// 自动重试
retryCount.value++;
console.log(`第${retryCount.value}次自动重试加载`);
// 延迟1秒后重试,避免频繁请求
setTimeout(() => {
retryLoadImage();
......@@ -260,7 +263,7 @@ const initializePage = async () => {
try {
// 重置重试计数
retryCount.value = 0;
// 开始超时检测
startLoadingTimeout();
......@@ -275,11 +278,11 @@ const initializePage = async () => {
} catch (adError) {
console.error('获取广告配置失败,但继续执行后续逻辑:', adError);
}
// 无论广告配置是否成功,都要检查家庭状态
try {
await checkUserFamily();
// 如果家庭状态检查成功,但广告配置失败了,再次尝试获取广告配置
if (!adConfigSuccess) {
try {
......@@ -290,7 +293,7 @@ const initializePage = async () => {
console.error('重试获取广告配置仍然失败:', retryError);
}
}
// 如果广告配置成功,清除超时定时器并设置成功状态
if (adConfigSuccess) {
clearLoadingTimeout();
......@@ -301,7 +304,7 @@ const initializePage = async () => {
imageLoadError.value = true;
handleLoadingTimeout();
}
} catch (familyError) {
console.error('检查家庭状态失败:', familyError);
// 家庭状态检查失败,但仍然尝试显示广告
......