feat(ui): 添加首页头部图片加载降级处理
- 新增 headerImageError 状态管理 - 实现 handleHeaderImageError 错误处理函数 - 图片加载失败时显示蓝色渐变背景降级UI - 优化用户体验,避免图片加载失败影响页面展示 Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Showing
1 changed file
with
34 additions
and
1 deletions
| ... | @@ -2,7 +2,24 @@ | ... | @@ -2,7 +2,24 @@ |
| 2 | <view class="relative w-full min-h-screen overflow-y-auto overflow-x-hidden bg-[#F9FAFB] pb-[200rpx]"> | 2 | <view class="relative w-full min-h-screen overflow-y-auto overflow-x-hidden bg-[#F9FAFB] pb-[200rpx]"> |
| 3 | <!-- Header Section --> | 3 | <!-- Header Section --> |
| 4 | <view class="absolute left-0 top-0 w-full h-[544rpx] z-0"> | 4 | <view class="absolute left-0 top-0 w-full h-[544rpx] z-0"> |
| 5 | - <image class="w-full h-full" src="https://picsum.photos/seed/header/750/544" mode="aspectFill" /> | 5 | + <!-- 正常加载: 显示图片 --> |
| 6 | + <image | ||
| 7 | + v-if="!headerImageError" | ||
| 8 | + class="w-full h-full" | ||
| 9 | + src="https://picsum.photos/seed/header/750/544" | ||
| 10 | + mode="aspectFill" | ||
| 11 | + @error="handleHeaderImageError" | ||
| 12 | + /> | ||
| 13 | + <!-- 降级处理: 图片加载失败时显示纯色背景 --> | ||
| 14 | + <view | ||
| 15 | + v-else | ||
| 16 | + class="w-full h-full bg-gradient-to-br from-blue-600 to-blue-800 flex items-center justify-center" | ||
| 17 | + > | ||
| 18 | + <!-- <view class="text-center"> | ||
| 19 | + <text class="text-white/50 text-[24rpx]">背景图片加载失败</text> | ||
| 20 | + </view> --> | ||
| 21 | + </view> | ||
| 22 | + <!-- 渐变遮罩始终显示 --> | ||
| 6 | <view class="absolute inset-0 bg-gradient-to-b from-blue-600/80 to-transparent"></view> | 23 | <view class="absolute inset-0 bg-gradient-to-b from-blue-600/80 to-transparent"></view> |
| 7 | </view> | 24 | </view> |
| 8 | 25 | ||
| ... | @@ -158,6 +175,22 @@ import { homeIconAPI } from '@/api/home'; | ... | @@ -158,6 +175,22 @@ import { homeIconAPI } from '@/api/home'; |
| 158 | // User Store | 175 | // User Store |
| 159 | const userStore = useUserStore(); | 176 | const userStore = useUserStore(); |
| 160 | 177 | ||
| 178 | +// Header Image Error State | ||
| 179 | +/** | ||
| 180 | + * 头部图片加载失败状态 | ||
| 181 | + * @description 用于控制降级UI的显示 | ||
| 182 | + */ | ||
| 183 | +const headerImageError = ref(false); | ||
| 184 | + | ||
| 185 | +/** | ||
| 186 | + * 处理头部图片加载失败 | ||
| 187 | + * @description 图片加载失败时触发,显示降级UI | ||
| 188 | + */ | ||
| 189 | +const handleHeaderImageError = () => { | ||
| 190 | + console.warn('Header image failed to load, showing fallback'); | ||
| 191 | + headerImageError.value = true; | ||
| 192 | +}; | ||
| 193 | + | ||
| 161 | // Plan Popup State | 194 | // Plan Popup State |
| 162 | const showPlanPopup = ref(false); | 195 | const showPlanPopup = ref(false); |
| 163 | const selectedProduct = ref(null); | 196 | const selectedProduct = ref(null); | ... | ... |
-
Please register or login to post a comment