feat(myAuthCar): 替换模拟数据为真实API接口并更新UI显示

- 移除模拟数据生成逻辑，改用真实API获取认证车列表 - 更新车辆信息显示字段以匹配API返回数据结构 - 使用Taro.showToast替换原有的nut-toast组件 - 添加默认封面图片处理逻辑

feat(myAuthCar): 替换模拟数据为真实API接口并更新UI显示
- 移除模拟数据生成逻辑，改用真实API获取认证车列表 - 更新车辆信息显示字段以匹配API返回数据结构 - 使用Taro.showToast替换原有的nut-toast组件 - 添加默认封面图片处理逻辑
hookehuyr
Commit 9f83aaa7d1834a0ca96925134123d9b1d2d8a2e0 9f83aaa7 1 parent 7e2e4959
Showing 1 changed file with 39 additions and 108 deletions
src/pages/myAuthCar/index.vue
--- a/src/pages/myAuthCar/index.vue
View file @9f83aaa
+++ b/src/pages/myAuthCar/index.vue
View file @9f83aaa
 <!--
  * @Date: 2022-09-19 14:11:06
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-07-09 11:34:24
+ * @LastEditTime: 2025-07-11 17:14:08
  * @FilePath: /jgdl/src/pages/myAuthCar/index.vue
  * @Description: 我的认证车页面
 -->
@@ -29,22 +29,21 @@
                         <view class="flex p-4">
                             <view class="w-24 h-24 relative">
                                 <image
-                                    :src="item.imageUrl"
+                                    :src="item.front_photo || DEFAULT_COVER_IMG"
-                                    :alt="item.name"
                                     mode="aspectFill"
                                     class="w-full h-full object-cover rounded-lg"
                                 />
                             </view>
                             <view class="flex-1 ml-4">
-                                <text class="font-medium text-base block">{{ item.name }}</text>
+                                <text class="font-medium text-base block">{{ item.brand }} {{ item.model }}</text>
-                                <text class="text-sm text-gray-500 mt-1 block">{{ item.details }}</text>
+                                <text class="text-sm text-gray-500 mt-1 block">{{ item.manufacture_year }}年|续航{{ item.range_km }}km|最高时速{{ item.max_speed_kmh }}km/h</text>
                                 <view class="mt-2 flex justify-between items-center">
                                     <view>
                                         <text class="text-orange-500 font-bold" style="font-size: 1.2rem;">
-                                            ¥{{ item.price.toLocaleString() }}
+                                            ¥{{ item.price?.toLocaleString() }}
                                         </text>
                                         <text class="text-gray-400 text-xs line-through ml-2">
-                                            ¥{{ item.originalPrice.toLocaleString() }}
+                                            ¥{{ item.market_price?.toLocaleString() }}
                                         </text>
                                     </view>
                                     <nut-button
@@ -81,13 +80,6 @@
                 </view>
             </scroll-view>
         </view>
-
-        <!-- 成功提示 -->
-        <nut-toast
-            v-model:visible="toastVisible"
-            :msg="toastMessage"
-            :type="toastType"
-        />
     </view>
 </template>
@@ -95,37 +87,11 @@
 import { ref, computed, onMounted } from 'vue'
 import Taro from '@tarojs/taro'
 import './index.less'
+// 导入接口
+import { getVehicleListAPI } from '@/api/car'
+import { DEFAULT_COVER_IMG } from '@/utils/config'
 // ==================== API相关 ====================
-/**
- * API服务 - 为真实API预留空间
- */
-const apiService = {
-    /**
-     * 获取我的认证车列表
-     * @param {number} page - 页码
-     * @param {number} pageSize - 每页数量
-     * @returns {Promise} API响应
-     */
-    async getAuthCarsList(page = 1, pageSize = 10) {
-        // TODO: 替换为真实API调用
-        // return await request.get('/api/auth-cars', { page, pageSize })
-
-        // 模拟API延迟
-        await new Promise(resolve => setTimeout(resolve, 800 + Math.random() * 400))
-
-        // 模拟API响应数据
-        return {
-            code: 200,
-            data: {
-                list: generateMockData(page, pageSize),
-                total: 50, // 模拟总数
-                hasMore: page < 5 // 模拟是否还有更多数据
-            },
-            message: 'success'
-        }
-    }
-}
 // ==================== 响应式数据 ====================
 /**
@@ -138,15 +104,10 @@ const authCars = ref([])
  */
 const loading = ref(false)
 const hasMore = ref(true)
-const currentPage = ref(1)
+const currentPage = ref(0) // API页码从0开始
 const pageSize = ref(10)
-/**
+
- * Toast提示
- */
-const toastVisible = ref(false)
-const toastMessage = ref('')
-const toastType = ref('success')
 /**
  * 滚动样式 - 考虑header和TabBar的高度
@@ -158,48 +119,6 @@ const scrollStyle = computed(() => {
 })
 // ==================== 数据处理方法 ====================
-/**
- * 生成模拟数据
- * @param {number} page - 页码
- * @param {number} size - 每页数量
- * @returns {Array} 模拟数据数组
- */
-const generateMockData = (page, size) => {
-    const brands = ['小牛', '雅迪', '绿源', '爱玛', '台铃', '新日', '立马', '小鸟']
-    const models = ['豪华版', '标准版', '运动版', '经典版', '智能版', '动力版']
-    const images = [
-        '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',
-        'https://images.unsplash.com/photo-1591637333184-19aa84b3e01f?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60',
-        'https://images.unsplash.com/photo-1558980664-3a031cf67ea8?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60',
-        'https://images.unsplash.com/photo-1567922045116-2a00fae2ed03?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60',
-        'https://images.unsplash.com/photo-1573981368236-719bbb6f70f7?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60'
-    ]
-
-    const data = []
-    for (let i = 0; i < size; i++) {
-        const index = (page - 1) * size + i
-        const brand = brands[Math.floor(Math.random() * brands.length)]
-        const model = models[Math.floor(Math.random() * models.length)]
-        const image = images[Math.floor(Math.random() * images.length)]
-        const originalPrice = Math.floor(Math.random() * 3000) + 3000
-        const price = Math.floor(originalPrice * (0.7 + Math.random() * 0.2)) // 7-9折
-        const usageTime = Math.floor(Math.random() * 24) + 1 // 1-24个月
-        const range = Math.floor(Math.random() * 100) + 60 // 60-160km续航
-
-        data.push({
-            id: `auth_${index + 100}`,
-            name: `${brand} ${model}`,
-            details: `续航${range}km | 使用${usageTime}个月`,
-            price: price,
-            originalPrice: originalPrice,
-            imageUrl: image,
-            brand: brand,
-            authTime: new Date(Date.now() - Math.random() * 30 * 24 * 60 * 60 * 1000).toISOString() // 最近30天内认证
-        })
-    }
-    return data
-}
 /**
  * 初始化加载数据
@@ -207,17 +126,23 @@ const generateMockData = (page, size) => {
 const initData = async () => {
     loading.value = true
     try {
-        const response = await apiService.getAuthCarsList(1, pageSize.value)
+        const response = await getVehicleListAPI({
-        if (response.code) {
+            verification_status: 5, // 已认证状态
-            authCars.value = response.data.list
+            page: 0,
-            hasMore.value = response.data.hasMore
+            limit: pageSize.value
-            currentPage.value = 1
+        })
+
+        if (response.code === 1) {
+            const { list, total } = response.data
+            authCars.value = list || []
+            hasMore.value = list && list.length === pageSize.value
+            currentPage.value = 0
         } else {
-            showToast('加载失败，请重试', 'error')
+            showToast(response.msg || '获取认证车列表失败', 'error')
         }
     } catch (error) {
         console.error('加载我的认证车列表失败:', error)
-        showToast('网络错误，请重试', 'error')
+        showToast('加载失败，请重试', 'error')
     } finally {
         loading.value = false
     }
@@ -232,18 +157,23 @@ const loadMore = async () => {
     loading.value = true
     try {
         const nextPage = currentPage.value + 1
-        const response = await apiService.getAuthCarsList(nextPage, pageSize.value)
+        const response = await getVehicleListAPI({
+            verification_status: 5, // 已认证状态
+            page: nextPage,
+            limit: pageSize.value
+        })
-        if (response.code) {
+        if (response.code === 1) {
-            authCars.value.push(...response.data.list)
+            const { list, total } = response.data
-            hasMore.value = response.data.hasMore
+            authCars.value.push(...(list || []))
+            hasMore.value = list && list.length === pageSize.value
             currentPage.value = nextPage
         } else {
-            showToast('加载失败，请重试', 'error')
+            showToast(response.msg || '加载失败，请重试', 'error')
         }
     } catch (error) {
         console.error('加载更多数据失败:', error)
-        showToast('网络错误，请重试', 'error')
+        showToast('加载失败，请重试', 'error')
     } finally {
         loading.value = false
     }
@@ -282,9 +212,10 @@ const scroll = (e) => {
  * 显示提示信息
  */
 const showToast = (message, type = 'success') => {
-    toastMessage.value = message
+    Taro.showToast({
-    toastType.value = type
+        title: message,
-    toastVisible.value = true
+        icon: type === 'success' ? 'success' : 'none'
+    })
 }
 // ==================== 生命周期 ====================