feat(首页): 更新电动车列表数据结构和API调用

重构首页电动车展示逻辑，使用新的API返回数据结构： 1. 更新图片字段为front_photo 2. 使用brand和model组合显示电动车名称 3. 修改收藏功能直接操作scooter对象 4. 添加获取轮播图、精品推荐和最新上架数据的API调用 5. 更新认证状态判断逻辑为verification_status === 5

feat(首页): 更新电动车列表数据结构和API调用
重构首页电动车展示逻辑，使用新的API返回数据结构： 1. 更新图片字段为front_photo 2. 使用brand和model组合显示电动车名称 3. 修改收藏功能直接操作scooter对象 4. 添加获取轮播图、精品推荐和最新上架数据的API调用 5. 更新认证状态判断逻辑为verification_status === 5
hookehuyr
Commit 48090c0b3226e4acb88e07a0f4d3847d8f473f93 48090c0b 1 parent 3896bff0
Showing 2 changed files with 51 additions and 47 deletions
src/pages/index/index.vue
src/pages/myCar/index.vue
--- a/src/pages/index/index.vue
View file @48090c0
+++ b/src/pages/index/index.vue
View file @48090c0
 <!--
  * @Date: 2025-06-28 10:33:00
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-07-09 16:08:53
+ * @LastEditTime: 2025-07-10 18:30:25
  * @FilePath: /jgdl/src/pages/index/index.vue
  * @Description: 捡个电驴首页
 -->
@@ -73,24 +73,24 @@
         <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.imageUrl" :alt="scooter.name" mode="aspectFill"
+            <image :src="scooter.front_photo" mode="aspectFill"
               class="w-full h-36 object-cover rounded-lg" />
-            <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.id)">
+            <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)">
-              <Heart1 v-if="!favoriteIds.includes(scooter.id)" size="22" :color="'#9ca3af'" />
+              <Heart1 v-if="!scooter.is_favorite" size="22" :color="'#9ca3af'" />
               <HeartFill v-else size="22" :color="'#ef4444'" />
             </view>
-            <view v-if="scooter.isVerified"
+            <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;">
               <Check size="12" color="#ffffff" class="mr-0.5" />
               <text class="text-white">认证</text>
             </view>
           </view>
           <view class="p-2 pl-3">
-            <text class="font-medium text-sm block">{{ scooter.name }}</text>
+            <text class="font-medium text-sm block">{{ scooter.brand }} {{ scooter.model }}</text>
             <text class="text-xs text-gray-500 block mt-1 mb-1">
-              {{ scooter.year }} · {{ scooter.school }}
+              {{ scooter.manufacture_year }}年 · {{ scooter.school_name }}
-              <text v-if="scooter.batteryHealth">电池健康度{{ scooter.batteryHealth }}%</text>
+              <!-- <text v-if="scooter.battery_capacity_ah">电池容量{{ scooter.battery_capacity_ah }}Ah</text>
-              <text v-if="scooter.mileage"> 行驶{{ scooter.mileage }}公里</text>
+              <text v-if="scooter.total_mileage_km"> 行驶{{ scooter.total_mileage_km }}公里</text> -->
             </text>
             <view class="mt-1">
               <text class="text-orange-500 font-bold" style="font-size: 1.25rem;">
@@ -118,32 +118,32 @@
       <view class="flex flex-col">
         <view v-for="scooter in latestScooters" :key="scooter.id"
           class="bg-white rounded-lg shadow-sm overflow-hidden mb-3" @tap="() => onProductClick(scooter)">
-          <view class="flex">
+          <view class="flex min-h-32">
-            <view class="w-32 h-24 relative p-2">
+            <view class="w-32 relative p-2 flex flex-col">
-              <image :src="scooter.imageUrl" :alt="scooter.name" mode="aspectFill"
+              <image :src="scooter.front_photo" :alt="scooter.name" mode="aspectFill"
-                class="w-full h-full object-cover rounded-lg" />
+                class="w-full flex-1 object-cover rounded-lg" />
-              <view v-if="scooter.isVerified"
+              <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;">
                 <Check size="12" color="#ffffff" class="mr-0.5" />
                 <text class="text-white">认证</text>
               </view>
             </view>
-            <view class="flex-1 p-3 relative">
+            <view class="flex-1 p-3 relative flex flex-col">
-              <view class="absolute top-2 right-2" @tap.stop="() => toggleFavorite(scooter.id)">
+              <view class="absolute top-2 right-2" @tap.stop="() => toggleFavorite(scooter)">
-                <Heart1 v-if="!favoriteIds.includes(scooter.id)" size="22" :color="'#9ca3af'" />
+                <Heart1 v-if="!scooter.is_favorite" size="22" :color="'#9ca3af'" />
                 <HeartFill v-else size="22" :color="'#ef4444'" />
               </view>
-              <text class="font-medium text-sm block">{{ scooter.name }}</text>
+              <text class="font-medium text-sm block">{{ scooter.brand }} {{ scooter.model }}</text>
-              <text class="text-xs text-gray-600 mt-1 block">
+              <text class="text-xs text-gray-600 mt-1 block" style="word-break: break-all;">
-                {{ scooter.year }} ·
+                {{ scooter.manufacture_year }}年
-                <text v-if="scooter.batteryHealth">电池健康度{{ scooter.batteryHealth }}%</text>
+                <text v-if="scooter.range_km">续航{{ scooter.range_km }}km</text>
-                <text v-if="scooter.mileage"> 行驶{{ scooter.mileage }}公里</text>
+                <text v-if="scooter.max_speed_kmh"> 最高时速{{ scooter.max_speed_kmh }}km/h</text>
               </text>
-              <view class="mt-2">
+              <view class="mt-auto">
                 <text class="text-orange-500 font-bold" style="font-size: 1.25rem;">
                   ¥{{ scooter.price.toLocaleString() }}
                 </text>
-                <text class="text-xs text-gray-500 mt-1 block">{{ scooter.school }}</text>
+                <text class="text-xs text-gray-500 mt-1 block">{{ scooter.school_name }}</text>
               </view>
             </view>
           </view>
@@ -168,7 +168,7 @@ import TabBar from '@/components/TabBar.vue'
 import SearchPopup from '@/components/SearchPopup.vue'
 import "./index.less";
 // 导入接口
-import { getRecommendVehicleAPI } from '@/api/car';
+import { getRecommendVehicleAPI, getVehicleListAPI } from '@/api/car';
 // 响应式数据
 const searchValue = ref('')
@@ -181,11 +181,7 @@ const onSearchHandle = () => {
 }
 // Banner图片
-const bannerImages = ref([
+const bannerImages = ref([])
-  'https://images.unsplash.com/photo-1558981806-ec527fa84c39?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60',
-  'https://images.unsplash.com/photo-1558981285-6f0c94958bb6?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60',
-  'https://images.unsplash.com/photo-1558981403-c5f9899a28bc?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60'
-])
 // 精品推荐数据
 const featuredScooters = ref([
@@ -276,20 +272,18 @@ const latestScooters = ref([
  * 切换收藏状态
  * @param {string} scooterId - 电动车ID
  */
-const toggleFavorite = (scooterId) => {
+const toggleFavorite = async (scooter) => {
-  const index = favoriteIds.value.indexOf(scooterId)
+  scooter.is_favorite = !scooter.is_favorite
-  if (index > -1) {
+  if (scooter.is_favorite) {
-    favoriteIds.value.splice(index, 1)
     Taro.showToast({
-      title: '取消收藏',
+      title: '收藏成功',
-      icon: 'none',
+      icon: 'success',
       duration: 2000
     })
   } else {
-    favoriteIds.value.push(scooterId)
     Taro.showToast({
-      title: '收藏成功',
+      title: '取消收藏',
-      icon: 'success',
+      icon: 'none',
       duration: 2000
     })
   }
@@ -383,12 +377,21 @@ useReady(async () => {
 })
 onMounted(async () => {
-  console.warn('index mounted')
+  // 获取首页轮播
-  // 获取推荐车源
+  const res1 = await getRecommendVehicleAPI({ section: 1 })
-  // const res = await getRecommendVehicleAPI()
+  if (res1.code) {
-  // if (res.code) {
+    bannerImages.value = res1.data.map(item => item.front_photo);
-    // recommendVehicleList.value = res.data
+  }
-  // }
+  // 获取精品推荐
+  const res2 = await getRecommendVehicleAPI({ section: 3 })
+  if (res2.code) {
+    featuredScooters.value = res2.data
+  }
+  // 获取最新上架
+  const res3 = await getVehicleListAPI({ page: 0, page_size: 5 })
+  if (res3.code) {
+    latestScooters.value = res3.data.list
+  }
 })
 // 分享功能
--- a/src/pages/myCar/index.vue
View file @48090c0
+++ b/src/pages/myCar/index.vue
View file @48090c0
 <!--
  * @Date: 2022-09-19 14:11:06
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-07-10 17:40:19
+ * @LastEditTime: 2025-07-10 17:47:49
  * @FilePath: /jgdl/src/pages/myCar/index.vue
  * @Description: 文件描述
 -->
@@ -212,8 +212,9 @@ const confirmOffline = async () => {
     }
     // 调用API更新车源状态
-    const { code, msg } = await changeVehicleStatusAPI({ id: car.id, status: status })
+    const { code, msg, data } = await changeVehicleStatusAPI({ id: car.id, status: status })
     if (code) {
+      car.status = data.status;
       Taro.showToast({
         title: status === 5 ? '下架成功' : msg,
         icon: 'none',