fix: 修复推荐数据为空时显示默认图片并优化精品推荐加载逻辑
修复首页推荐数据为空时未显示默认图片的问题 优化精品推荐组件的数据加载逻辑,添加循环查询和错误处理
Showing
2 changed files
with
40 additions
and
15 deletions
| ... | @@ -8,8 +8,8 @@ | ... | @@ -8,8 +8,8 @@ |
| 8 | </view> | 8 | </view> |
| 9 | </view> | 9 | </view> |
| 10 | <view class="grid grid-cols-2 gap-3"> | 10 | <view class="grid grid-cols-2 gap-3"> |
| 11 | - <view v-for="scooter in featuredScooters" :key="scooter.id" | 11 | + <view v-for="scooter in featuredScooters" :key="scooter.id" class="bg-white rounded-lg shadow-sm overflow-hidden" |
| 12 | - class="bg-white rounded-lg shadow-sm overflow-hidden" @tap="() => onProductClick(scooter)"> | 12 | + @tap="() => onProductClick(scooter)"> |
| 13 | <view class="relative p-2"> | 13 | <view class="relative p-2"> |
| 14 | <image :src="scooter.front_photo" mode="aspectFill" class="w-full h-36 object-cover rounded-lg" /> | 14 | <image :src="scooter.front_photo" mode="aspectFill" class="w-full h-36 object-cover rounded-lg" /> |
| 15 | <view | 15 | <view |
| ... | @@ -81,23 +81,45 @@ const onProductClick = (scooter) => { | ... | @@ -81,23 +81,45 @@ const onProductClick = (scooter) => { |
| 81 | 81 | ||
| 82 | /** | 82 | /** |
| 83 | * 加载精品推荐数据 | 83 | * 加载精品推荐数据 |
| 84 | + * 循环查询直到获取到数据或确认没有更多数据 | ||
| 84 | */ | 85 | */ |
| 85 | const loadFeaturedData = async () => { | 86 | const loadFeaturedData = async () => { |
| 86 | try { | 87 | try { |
| 87 | - const res = await getRecommendVehicleAPI({ section: 3, page: 0, limit: 4 }) | 88 | + let page = 0 |
| 88 | - if (res.code) { | 89 | + let hasData = false |
| 89 | - // 处理图片数据 | 90 | + let maxPages = 10 // 设置最大查询页数,避免无限循环 |
| 90 | - const processedData = res.data.list.map(item => ({ | 91 | + |
| 91 | - ...item, | 92 | + while (!hasData && page < maxPages) { |
| 92 | - front_photo: item.front_photo || DEFAULT_COVER_IMG, | 93 | + const res = await getRecommendVehicleAPI({ section: 3, page, limit: 4 }) |
| 93 | - // 确保价格为数字类型 | 94 | + |
| 94 | - price: Number(item.price) || 0, | 95 | + if (res.code && res.data && res.data.list && res.data.list.length > 0) { |
| 95 | - market_price: Number(item.market_price) || 0 | 96 | + // 找到数据,处理并返回 |
| 96 | - })) | 97 | + const processedData = res.data.list.map(item => ({ |
| 97 | - featuredScooters.value = processedData | 98 | + ...item, |
| 99 | + front_photo: item.front_photo || DEFAULT_COVER_IMG, | ||
| 100 | + // 确保价格为数字类型 | ||
| 101 | + price: Number(item.price) || 0, | ||
| 102 | + market_price: Number(item.market_price) || 0 | ||
| 103 | + })) | ||
| 104 | + | ||
| 105 | + // 最多显示4个 | ||
| 106 | + featuredScooters.value = processedData.slice(0, 4) | ||
| 107 | + hasData = true | ||
| 108 | + } else if (res.code && res.data && res.data.total === 0) { | ||
| 109 | + // 确认没有数据,停止查询 | ||
| 110 | + break | ||
| 111 | + } else { | ||
| 112 | + // 当前页没有数据,查询下一页 | ||
| 113 | + page++ | ||
| 114 | + } | ||
| 115 | + } | ||
| 116 | + | ||
| 117 | + if (!hasData) { | ||
| 118 | + featuredScooters.value = [] | ||
| 98 | } | 119 | } |
| 99 | } catch (error) { | 120 | } catch (error) { |
| 100 | console.error('加载精品推荐数据失败:', error) | 121 | console.error('加载精品推荐数据失败:', error) |
| 122 | + featuredScooters.value = [] | ||
| 101 | } | 123 | } |
| 102 | } | 124 | } |
| 103 | 125 | ||
| ... | @@ -125,4 +147,4 @@ onMounted(() => { | ... | @@ -125,4 +147,4 @@ onMounted(() => { |
| 125 | image { | 147 | image { |
| 126 | display: block; | 148 | display: block; |
| 127 | } | 149 | } |
| 128 | -</style> | ||
| ... | \ No newline at end of file | ... | \ No newline at end of file |
| 150 | +</style> | ... | ... |
| 1 | <!-- | 1 | <!-- |
| 2 | * @Date: 2025-06-28 10:33:00 | 2 | * @Date: 2025-06-28 10:33:00 |
| 3 | * @LastEditors: hookehuyr hookehuyr@gmail.com | 3 | * @LastEditors: hookehuyr hookehuyr@gmail.com |
| 4 | - * @LastEditTime: 2025-07-15 15:58:51 | 4 | + * @LastEditTime: 2025-07-16 09:25:38 |
| 5 | * @FilePath: /jgdl/src/pages/index/index.vue | 5 | * @FilePath: /jgdl/src/pages/index/index.vue |
| 6 | * @Description: 捡个电驴首页 | 6 | * @Description: 捡个电驴首页 |
| 7 | --> | 7 | --> |
| ... | @@ -238,6 +238,9 @@ onMounted(async () => { | ... | @@ -238,6 +238,9 @@ onMounted(async () => { |
| 238 | const res1 = await getRecommendVehicleAPI({ section: 1 }) | 238 | const res1 = await getRecommendVehicleAPI({ section: 1 }) |
| 239 | if (res1.code) { | 239 | if (res1.code) { |
| 240 | bannerImages.value = res1.data.list.map(item => item.front_photo); | 240 | bannerImages.value = res1.data.list.map(item => item.front_photo); |
| 241 | + if (!bannerImages.value.length) { | ||
| 242 | + bannerImages.value = [DEFAULT_COVER_IMG] | ||
| 243 | + } | ||
| 241 | } | 244 | } |
| 242 | // 获取最新上架 | 245 | // 获取最新上架 |
| 243 | const res3 = await getVehicleListAPI({ page: 0, limit: 5 }) | 246 | const res3 = await getVehicleListAPI({ page: 0, limit: 5 }) | ... | ... |
-
Please register or login to post a comment