feat(认证车源): 重构认证车源页面并优化提交成功提示

重构认证车源页面，使用API获取真实数据替代模拟数据优化表单提交成功后的提示交互，区分编辑模式和申请模式移除模拟数据加载逻辑，改为分页加载API数据

feat(认证车源): 重构认证车源页面并优化提交成功提示
重构认证车源页面，使用API获取真实数据替代模拟数据优化表单提交成功后的提示交互，区分编辑模式和申请模式移除模拟数据加载逻辑，改为分页加载API数据
hookehuyr
Commit 0a50f2747ab21d77a045fbbf6040483ca3af5148 0a50f274 1 parent eb5020de
Showing 2 changed files with 100 additions and 112 deletions
src/pages/authCar/index.vue
src/pages/setAuthCar/index.vue
--- a/src/pages/authCar/index.vue
View file @0a50f27
+++ b/src/pages/authCar/index.vue
View file @0a50f27
 <!--
  * @Date: 2022-09-19 14:11:06
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-07-10 21:34:57
+ * @LastEditTime: 2025-07-10 22:49:42
  * @FilePath: /jgdl/src/pages/authCar/index.vue
  * @Description: 认证车源
 -->
@@ -19,13 +19,7 @@
     <!-- 我要认证按钮 -->
     <view class="px-16 mt-5">
-      <nut-button
+      <nut-button color="#FFA135" size="large" block @click="handleAuth" class="auth-button">
-        color="#FFA135"
-        size="large"
-        block
-        @click="handleAuth"
-        class="auth-button"
-      >
         <view class="flex items-center justify-center">
           <Check class="mr-2" size="20" color="#ffffff" />
           <text class="text-white font-medium">我要认证</text>
@@ -40,23 +34,14 @@
       </view>
       <!-- 滚动列表 -->
-      <scroll-view
+      <scroll-view class="auth-car-list" :style="scrollStyle" :scroll-y="true" @scrolltolower="loadMore"
-        class="auth-car-list"
+        @scroll="scroll" :lower-threshold="50" :enable-flex="false">
-        :style="scrollStyle"
-        :scroll-y="true"
-        @scrolltolower="loadMore"
-        @scroll="scroll"
-        :lower-threshold="50"
-        :enable-flex="false"
-      >
         <view class="space-y-4">
-          <view v-for="car in authCars" :key="car.id"
+          <view v-for="car in authCars" :key="car.id" class="bg-white rounded-lg shadow-sm overflow-hidden mb-3"
-            class="bg-white rounded-lg shadow-sm overflow-hidden mb-3"
+            @tap="() => onCarClick(car)">
-            @tap="() => onCarClick(car)"
-          >
             <view class="flex">
               <view class="w-32 h-24 relative p-2">
-                <image :src="car.imageUrl" :alt="car.name" mode="aspectFill"
+                <image :src="car.front_photo" :alt="car.name" mode="aspectFill"
                   class="w-full h-full object-cover rounded-lg" />
               </view>
               <view class="flex-1 p-3 relative">
@@ -64,17 +49,17 @@
                   <Heart1 v-if="!car.is_favorite" size="22" :color="'#9ca3af'" />
                   <HeartFill v-else size="22" :color="'#ef4444'" />
                 </view>
-                <text class="font-medium text-sm block">{{ car.name }}</text>
+                <text class="font-medium text-sm block">{{ car.brand }} {{ car.model }}</text>
                 <text class="text-xs text-gray-600 mt-1 block">
-                  {{ car.year }} ·
+                  {{ car.manufacture_year }} ·
-                  <text v-if="car.batteryHealth">电池健康度{{ car.batteryHealth }}%</text>
+                  <text v-if="car.range_km">续航{{ car.range_km }}km</text>
-                  <text v-if="car.mileage"> 行驶{{ car.mileage }}公里</text>
+                  <text v-if="car.max_speed_kmh"> 最高时速{{ car.max_speed_kmh }}km/h</text>
                 </text>
                 <view class="mt-2">
                   <text class="text-orange-500 font-bold" style="font-size: 1.2rem;">
                     ¥{{ car.price.toLocaleString() }}
                   </text>
-                  <text class="text-xs text-gray-500 mt-1 block">{{ car.school }}</text>
+                  <text class="text-xs text-gray-500 mt-1 block">{{ car.school_name }}</text>
                 </view>
                 <!-- 认证信息 -->
                 <!-- <view class="mt-1">
@@ -98,11 +83,7 @@
     </view>
     <!-- 成功提示 -->
-    <nut-toast
+    <nut-toast v-model:visible="toastVisible" :msg="toastMessage" :type="toastType" />
-      v-model:visible="toastVisible"
-      :msg="toastMessage"
-      :type="toastType"
-    />
   </view>
 </template>
@@ -112,6 +93,8 @@ import { ref, computed, onMounted } from 'vue'
 import { Check, Heart1, HeartFill } from '@nutui/icons-vue-taro'
 import { useFavorite } from '@/composables/useFavorite'
 import './index.less'
+// 接口导入
+import { getVehicleListAPI } from '@/api/car';
 // Banner图片数据
 const bannerImages = ref([
@@ -121,52 +104,7 @@ const bannerImages = ref([
 ])
 // 认证车源数据
-const authCars = ref([
+const authCars = ref([])
-  {
-    id: 1,
-    name: '小牛NGT 电动车',
-    year: '2023年',
-    batteryHealth: 95,
-    mileage: 1200,
-    price: 4500,
-    school: '上海理工大学',
-    imageUrl: 'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=400&h=300&fit=crop',
-    authDate: '2024-01-15'
-  },
-  {
-    id: 2,
-    name: '雅迪 DE2 电动车',
-    year: '2023年',
-    batteryHealth: 88,
-    mileage: 2800,
-    price: 3200,
-    school: '上海大学',
-    imageUrl: 'https://images.unsplash.com/photo-1571068316344-75bc76f77890?w=400&h=300&fit=crop',
-    authDate: '2024-01-10'
-  },
-  {
-    id: 3,
-    name: '爱玛 A500 电动车',
-    year: '2022年',
-    batteryHealth: 92,
-    mileage: 1800,
-    price: 2800,
-    school: '华东理工大学',
-    imageUrl: 'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=400&h=300&fit=crop',
-    authDate: '2024-01-08'
-  },
-  {
-    id: 4,
-    name: '台铃 TDR-2023 电动车',
-    year: '2023年',
-    batteryHealth: 90,
-    mileage: 2200,
-    price: 3800,
-    school: '上海交通大学',
-    imageUrl: 'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=400&h=300&fit=crop',
-    authDate: '2024-01-05'
-  }
-])
 // 收藏状态
 // 收藏功能现在使用基于对象属性的模式
@@ -174,6 +112,8 @@ const authCars = ref([
 // 加载状态
 const loading = ref(false)
 const hasMore = ref(true)
+const currentPage = ref(0)
+const pageSize = ref(10)
 // Toast提示
 const toastVisible = ref(false)
@@ -210,37 +150,61 @@ const onCarClick = (car) => {
 const { toggleFavorite } = useFavorite()
 /**
- * 加载更多数据
+ * 加载认证车辆数据
+ * @param {boolean} isLoadMore - 是否为加载更多
  */
-const loadMore = () => {
+const loadAuthCarData = async (isLoadMore = false) => {
-  if (loading.value || !hasMore.value) return
+    if (loading.value) return
     loading.value = true
-  // 模拟加载更多数据
+    try {
-  setTimeout(() => {
+        // 构建请求参数 - 只获取认证车辆
-    const newCars = [
+        const params = {
-      {
+            page: currentPage.value,
-        id: authCars.value.length + 1,
+            limit: pageSize.value,
-        name: '新增认证车辆',
+            verification_status: 1 // 只获取已认证的车辆
-        year: '2023年',
-        batteryHealth: 85,
-        mileage: 3000,
-        price: 2500,
-        school: '复旦大学',
-        imageUrl: 'https://images.unsplash.com/photo-1571068316344-75bc76f77890?w=400&h=300&fit=crop',
-        authDate: '2024-01-01'
         }
-    ]
-    authCars.value.push(...newCars)
+        const response = await getVehicleListAPI(params)
-    loading.value = false
-    // 模拟没有更多数据
+        if (response && response.code === 1 && response.data) {
-    if (authCars.value.length >= 10) {
+            const vehicleList = response.data.list || []
-      hasMore.value = false
+
+            // 处理图片数据
+            const processedData = vehicleList.map(item => ({
+                ...item,
+            }))
+
+            if (isLoadMore) {
+                authCars.value.push(...processedData)
+            } else {
+                authCars.value = processedData
+            }
+
+            // 检查是否还有更多数据 - 基于总数和当前已加载数量
+            const totalLoaded = (currentPage.value + 1) * pageSize.value
+            hasMore.value = totalLoaded < response.data.total
+        } else {
+            console.error('API返回错误:', response)
+            showToast(response?.msg || '获取数据失败', 'error')
+        }
+    } catch (error) {
+        console.error('加载认证车辆数据失败:', error)
+        showToast('网络错误，请稍后重试', 'error')
+    } finally {
+        loading.value = false
     }
-  }, 1000)
+}
+
+/**
+ * 加载更多数据
+ */
+const loadMore = async () => {
+    if (loading.value || !hasMore.value) return
+
+    currentPage.value++
+    await loadAuthCarData(true)
 }
 /**
@@ -253,16 +217,21 @@ const scroll = (e) => {
 /**
  * 显示提示信息
  */
-// showToast 功能现在由 useFavorite composable 处理
+const showToast = (message, type = 'success') => {
+    toastMessage.value = message
+    toastType.value = type
+    toastVisible.value = true
+}
 // 初始化
-onMounted(() => {
+onMounted(async () => {
-  // 可以在这里加载初始数据
+    // 加载初始认证车辆数据
+    await loadAuthCarData()
 })
 </script>
 <script>
 export default {
-以在这里加载: 'AuthCarPage'
+  name: 'AuthCarPage'
 }
 </script>
--- a/src/pages/setAuthCar/index.vue
View file @0a50f27
+++ b/src/pages/setAuthCar/index.vue
View file @0a50f27
 <!--
  * @Date: 2022-09-19 14:11:06
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-07-10 17:24:11
+ * @LastEditTime: 2025-07-10 22:59:16
  * @FilePath: /jgdl/src/pages/setAuthCar/index.vue
  * @Description: 申请认证
 -->
@@ -424,16 +424,35 @@ const onSubmit = async () => {
         }
         Taro.hideLoading()
-        const successTitle = isEditMode.value ? '保存成功' : '申请提交成功'
+        // 提交成功提示
+        if (isEditMode.value) {
             Taro.showToast({
-            title: successTitle,
+                title: '保存成功',
-            icon: 'success'
+                icon: 'success',
+                duration: 2000,
+                complete: () => {
+                    // 保存成功后返回上一页
+                    Taro.navigateBack()
+                }
+            })
+        } else {
+            Taro.showModal({
+                title: '温馨提示',
+                content: '认证提交成功，我们会尽快审核',
+                showCancel: false,
+                confirmText: '知道了',
+                success: function (res) {
+                    if (res.confirm) {
+                        Taro.navigateBack()
+                    }
+                }
             })
+        }
         // 返回上一页
-        setTimeout(() => {
+        // setTimeout(() => {
-            Taro.navigateBack()
+        //     Taro.navigateBack()
-        }, 1500)
+        // }, 1500)
     } catch (error) {
         console.error('提交失败:', error)
         Taro.hideLoading()