hookehuyr

fix: 修复推荐数据为空时显示默认图片并优化精品推荐加载逻辑

修复首页推荐数据为空时未显示默认图片的问题
优化精品推荐组件的数据加载逻辑,添加循环查询和错误处理
......@@ -8,8 +8,8 @@
</view>
</view>
<view class="grid grid-cols-2 gap-3">
<view v-for="scooter in featuredScooters" :key="scooter.id"
class="bg-white rounded-lg shadow-sm overflow-hidden" @tap="() => onProductClick(scooter)">
<view v-for="scooter in featuredScooters" :key="scooter.id" class="bg-white rounded-lg shadow-sm overflow-hidden"
@tap="() => onProductClick(scooter)">
<view class="relative p-2">
<image :src="scooter.front_photo" mode="aspectFill" class="w-full h-36 object-cover rounded-lg" />
<view
......@@ -81,23 +81,45 @@ const onProductClick = (scooter) => {
/**
* 加载精品推荐数据
* 循环查询直到获取到数据或确认没有更多数据
*/
const loadFeaturedData = async () => {
try {
const res = await getRecommendVehicleAPI({ section: 3, page: 0, limit: 4 })
if (res.code) {
// 处理图片数据
const processedData = res.data.list.map(item => ({
...item,
front_photo: item.front_photo || DEFAULT_COVER_IMG,
// 确保价格为数字类型
price: Number(item.price) || 0,
market_price: Number(item.market_price) || 0
}))
featuredScooters.value = processedData
let page = 0
let hasData = false
let maxPages = 10 // 设置最大查询页数,避免无限循环
while (!hasData && page < maxPages) {
const res = await getRecommendVehicleAPI({ section: 3, page, limit: 4 })
if (res.code && res.data && res.data.list && res.data.list.length > 0) {
// 找到数据,处理并返回
const processedData = res.data.list.map(item => ({
...item,
front_photo: item.front_photo || DEFAULT_COVER_IMG,
// 确保价格为数字类型
price: Number(item.price) || 0,
market_price: Number(item.market_price) || 0
}))
// 最多显示4个
featuredScooters.value = processedData.slice(0, 4)
hasData = true
} else if (res.code && res.data && res.data.total === 0) {
// 确认没有数据,停止查询
break
} else {
// 当前页没有数据,查询下一页
page++
}
}
if (!hasData) {
featuredScooters.value = []
}
} catch (error) {
console.error('加载精品推荐数据失败:', error)
featuredScooters.value = []
}
}
......@@ -125,4 +147,4 @@ onMounted(() => {
image {
display: block;
}
</style>
\ No newline at end of file
</style>
......
<!--
* @Date: 2025-06-28 10:33:00
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-07-15 15:58:51
* @LastEditTime: 2025-07-16 09:25:38
* @FilePath: /jgdl/src/pages/index/index.vue
* @Description: 捡个电驴首页
-->
......@@ -238,6 +238,9 @@ onMounted(async () => {
const res1 = await getRecommendVehicleAPI({ section: 1 })
if (res1.code) {
bannerImages.value = res1.data.list.map(item => item.front_photo);
if (!bannerImages.value.length) {
bannerImages.value = [DEFAULT_COVER_IMG]
}
}
// 获取最新上架
const res3 = await getVehicleListAPI({ page: 0, limit: 5 })
......