hookehuyr

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

- 移除模拟数据生成逻辑,改用真实API获取认证车列表
- 更新车辆信息显示字段以匹配API返回数据结构
- 使用Taro.showToast替换原有的nut-toast组件
- 添加默认封面图片处理逻辑
<!--
* @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"
:alt="item.name"
:src="item.front_photo || DEFAULT_COVER_IMG"
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="text-sm text-gray-500 mt-1 block">{{ item.details }}</text>
<text class="font-medium text-base block">{{ item.brand }} {{ item.model }}</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)
if (response.code) {
authCars.value = response.data.list
hasMore.value = response.data.hasMore
currentPage.value = 1
const response = await getVehicleListAPI({
verification_status: 5, // 已认证状态
page: 0,
limit: pageSize.value
})
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) {
authCars.value.push(...response.data.list)
hasMore.value = response.data.hasMore
if (response.code === 1) {
const { list, total } = response.data
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
toastType.value = type
toastVisible.value = true
Taro.showToast({
title: message,
icon: type === 'success' ? 'success' : 'none'
})
}
// ==================== 生命周期 ====================
......