hookehuyr

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

修复首页推荐数据为空时未显示默认图片的问题
优化精品推荐组件的数据加载逻辑,添加循环查询和错误处理
...@@ -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 })
......