fix: 为车辆列表添加默认封面图片处理

在多个页面中为车辆数据添加默认封面图片处理，当front_photo为空时使用DEFAULT_COVER_IMG 同时优化了首页的代码格式和分享功能缩进

fix: 为车辆列表添加默认封面图片处理
在多个页面中为车辆数据添加默认封面图片处理，当front_photo为空时使用DEFAULT_COVER_IMG 同时优化了首页的代码格式和分享功能缩进
hookehuyr
Commit abfa9a5764b17150ab2b82e039646b4e537f1368 abfa9a57 1 parent fc38c33e
Showing 3 changed files with 43 additions and 15 deletions
src/pages/authCar/index.vue
src/pages/index/index.vue
src/pages/newCarList/index.vue
--- a/src/pages/authCar/index.vue
View file @abfa9a5
+++ b/src/pages/authCar/index.vue
View file @abfa9a5
 <!--
  * @Date: 2022-09-19 14:11:06
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-07-10 22:49:42
+ * @LastEditTime: 2025-07-11 10:11:35
  * @FilePath: /jgdl/src/pages/authCar/index.vue
  * @Description: 认证车源
 -->
@@ -95,7 +95,7 @@ import { useFavorite } from '@/composables/useFavorite'
 import './index.less'
 // 接口导入
 import { getVehicleListAPI } from '@/api/car';
-
+import { DEFAULT_COVER_IMG } from '@/utils/config'
 // Banner图片数据
 const bannerImages = ref([
   'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=800&h=400&fit=crop',
@@ -174,6 +174,7 @@ const loadAuthCarData = async (isLoadMore = false) => {
             // 处理图片数据
             const processedData = vehicleList.map(item => ({
                 ...item,
+                front_photo: item.front_photo || DEFAULT_COVER_IMG,
             }))
             if (isLoadMore) {
--- a/src/pages/index/index.vue
View file @abfa9a5
+++ b/src/pages/index/index.vue
View file @abfa9a5
 <!--
  * @Date: 2025-06-28 10:33:00
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-07-10 21:30:57
+ * @LastEditTime: 2025-07-11 10:09:02
  * @FilePath: /jgdl/src/pages/index/index.vue
  * @Description: 捡个电驴首页
 -->
@@ -16,7 +16,8 @@
           </nut-col>
           <nut-col span="18">
             <!-- Search Bar -->
-            <nut-searchbar v-model="searchValue" placeholder="搜索更多商品" :disabled="true" @click-input="onSearchHandle" shape="round" background="transparent" input-background="#ffffff">
+            <nut-searchbar v-model="searchValue" placeholder="搜索更多商品" :disabled="true" @click-input="onSearchHandle"
+              shape="round" background="transparent" input-background="#ffffff">
               <template #leftin>
                 <Search2 />
               </template>
@@ -40,19 +41,22 @@
     <view class="px-4 mt-2">
       <view class="flex justify-around py-4">
         <view class="flex flex-col items-center" @tap="onNewCarClick">
-          <view class="w-12 h-12 rounded-full bg-orange-100 flex items-center justify-center" style="background: linear-gradient( 135deg, rgba(255,161,53,0.15) 0%, rgba(235,83,5,0.25) 100%); box-shadow: 0px 2px 8px 0px rgba(235,83,5,0.15);">
+          <view class="w-12 h-12 rounded-full bg-orange-100 flex items-center justify-center"
+            style="background: linear-gradient( 135deg, rgba(255,161,53,0.15) 0%, rgba(235,83,5,0.25) 100%); box-shadow: 0px 2px 8px 0px rgba(235,83,5,0.15);">
             <Clock size="20" color="#f97316" />
           </view>
           <text class="text-xs mt-1 text-gray-700">最新上架</text>
         </view>
         <view class="flex flex-col items-center" @tap="onGoodCarClick">
-          <view class="w-12 h-12 rounded-full bg-orange-100 flex items-center justify-center" style="background: linear-gradient( 135deg, rgba(255,161,53,0.15) 0%, rgba(235,83,5,0.25) 100%); box-shadow: 0px 2px 8px 0px rgba(235,83,5,0.15);">
+          <view class="w-12 h-12 rounded-full bg-orange-100 flex items-center justify-center"
+            style="background: linear-gradient( 135deg, rgba(255,161,53,0.15) 0%, rgba(235,83,5,0.25) 100%); box-shadow: 0px 2px 8px 0px rgba(235,83,5,0.15);">
             <Star size="20" color="#f97316" />
           </view>
           <text class="text-xs mt-1 text-gray-700">特价好车</text>
         </view>
         <view class="flex flex-col items-center" @tap="onCertifiedClick">
-          <view class="w-12 h-12 rounded-full bg-orange-100 flex items-center justify-center" style="background: linear-gradient( 135deg, rgba(255,161,53,0.15) 0%, rgba(235,83,5,0.25) 100%); box-shadow: 0px 2px 8px 0px rgba(235,83,5,0.15);">
+          <view class="w-12 h-12 rounded-full bg-orange-100 flex items-center justify-center"
+            style="background: linear-gradient( 135deg, rgba(255,161,53,0.15) 0%, rgba(235,83,5,0.25) 100%); box-shadow: 0px 2px 8px 0px rgba(235,83,5,0.15);">
             <Shop size="20" color="#f97316" />
           </view>
           <text class="text-xs mt-1 text-gray-700">认证车源</text>
@@ -73,14 +77,16 @@
         <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"
+            <image :src="scooter.front_photo" mode="aspectFill" class="w-full h-36 object-cover rounded-lg" />
-              class="w-full h-36 object-cover rounded-lg" />
+            <view
-            <view class="absolute top-4 right-3 w-7 h-7 rounded-full bg-white bg-opacity-80 flex items-center justify-center" @tap.stop="() => toggleFavorite(scooter)">
+              class="absolute top-4 right-3 w-7 h-7 rounded-full bg-white bg-opacity-80 flex items-center justify-center"
+              @tap.stop="() => toggleFavorite(scooter)">
               <Heart1 v-if="!scooter.is_favorite" size="22" :color="'#9ca3af'" />
               <HeartFill v-else size="22" :color="'#ef4444'" />
             </view>
             <view v-if="scooter.verification_status === 5"
-              class="absolute bottom-4 right-4 text-white text-xs px-1.5 py-0.5 rounded flex items-center" style="background-color: #EB5305;">
+              class="absolute bottom-4 right-4 text-white text-xs px-1.5 py-0.5 rounded flex items-center"
+              style="background-color: #EB5305;">
               <Check size="12" color="#ffffff" class="mr-0.5" />
               <text class="text-white">认证</text>
             </view>
@@ -123,7 +129,8 @@
               <image :src="scooter.front_photo" :alt="scooter.name" mode="aspectFill"
                 class="w-full flex-1 object-cover rounded-lg" />
               <view v-if="scooter.verification_status === 5"
-                class="absolute bottom-3 right-3 text-white text-xs px-1 rounded flex items-center" style="background-color: #EB5305;">
+                class="absolute bottom-3 right-3 text-white text-xs px-1 rounded flex items-center"
+                style="background-color: #EB5305;">
                 <Check size="12" color="#ffffff" class="mr-0.5" />
                 <text class="text-white">认证</text>
               </view>
@@ -170,7 +177,7 @@ import "./index.less";
 // 导入接口
 import { getRecommendVehicleAPI, getVehicleListAPI } from '@/api/car';
 import { useFavorite } from '@/composables/useFavorite'
-
+import { DEFAULT_COVER_IMG } from '@/utils/config'
 // 响应式数据
 const searchValue = ref('')
 // favoriteIds 已移除，现在使用基于对象属性的收藏模式
@@ -289,11 +296,30 @@ onMounted(async () => {
   const res2 = await getRecommendVehicleAPI({ section: 3 })
   if (res2.code) {
     featuredScooters.value = res2.data
+    // 处理图片数据
+    const processedData = res2.data.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
   }
   // 获取最新上架
   const res3 = await getVehicleListAPI({ page: 0, limit: 5 })
   if (res3.code) {
     latestScooters.value = res3.data.list
+    // 处理图片数据
+    const processedData = res3.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,
+    }))
+    latestScooters.value = processedData
   }
 })
--- a/src/pages/newCarList/index.vue
View file @abfa9a5
+++ b/src/pages/newCarList/index.vue
View file @abfa9a5
 <!--
  * @Date: 2022-09-19 14:11:06
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-07-10 22:47:45
+ * @LastEditTime: 2025-07-11 10:10:56
  * @FilePath: /jgdl/src/pages/newCarList/index.vue
  * @Description: 最新上架页面
 -->
@@ -121,7 +121,7 @@ import './index.less'
 // 接口导入
 import { getVehicleBrandsAPI, getSchoolsAPI } from '@/api/other';
 import { getVehicleListAPI } from '@/api/car';
-
+import { DEFAULT_COVER_IMG } from '@/utils/config'
 // 响应式数据
 const searchValue = ref('')
 /**
@@ -268,6 +268,7 @@ const loadVehicleData = async (isLoadMore = false) => {
             // 处理图片数据
             const processedData = vehicleList.map(item => ({
                 ...item,
+                front_photo: item.front_photo || DEFAULT_COVER_IMG,
                 // 添加新车标签（7天内发布的车辆）
                 isNew: new Date() - new Date(item.created_time) < 7 * 24 * 60 * 60 * 1000
             }))