hookehuyr

feat(ui): 添加首页头部图片加载降级处理

- 新增 headerImageError 状态管理
- 实现 handleHeaderImageError 错误处理函数
- 图片加载失败时显示蓝色渐变背景降级UI
- 优化用户体验,避免图片加载失败影响页面展示

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
...@@ -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);
......