Hooke / jgdl

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
0ba154f9 1 parent abfa9a57

feat(特价好车): 实现特价好车页面数据对接API 

- 移除模拟数据，改为从API获取真实车辆数据
- 实现品牌、年份、学校的筛选功能
- 添加分页加载更多功能
- 更新车辆卡片显示字段以匹配API返回数据
Inline Side-by-side
Showing 3 changed files with 159 additions and 180 deletions
/*
* @Date: 2025-07-09 14:58:51
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-07-10 14:45:49
* @LastEditTime: 2025-07-11 10:18:35
* @FilePath: /jgdl/src/api/car.js
* @Description: 车辆相关API接口
*/
......@@ -66,6 +66,13 @@ export const editVehicleAPI = (params) => fn(fetch.post(Api.EDIT_VEHICLE, params
/**
* @description: 首页轮播/最新上架/特价好车
* @param section 推荐的位置，1=首页轮播, 2=特价好车, 3=精品推荐
* @param school_id 学校ID
* @param brand 品牌
* @param manufacture_year 出厂年份
* @param verification_status 认证状态（1=不认证, 3=认证待审核, 5=已认证, 7=认证失败）
* @param keyword 搜索关键字（品牌/型号/描述）
* @param page 页码
* @param limit 每页数量
* @returns data[{ id, seller_id, school_id, school_name, title, brand, model, manufacture_year, new_level, range_km, total_mileage_km, max_speed_kmh, battery_capacity_ah, brake_wear_level, tire_wear_level, price, market_price, verification_status, rejection_reason, note, photos, is_favorite }]
*/
......
<!--
* @Date: 2022-09-19 14:11:06
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-07-04 16:58:46
* @LastEditTime: 2025-07-11 10:45:41
* @FilePath: /jgdl/src/pages/goodCarList/index.vue
* @Description: 特价好车页面
-->
......@@ -53,45 +53,45 @@
>
<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 v-if="car.isSpecial"
class="absolute bottom-3 right-3 bg-red-500 text-white text-xs px-1 rounded flex items-center">
<text class="text-white">特</text>
</view>
<!-- 折扣标签 -->
<view v-if="car.discount"
<!-- <view v-if="car.discount"
class="absolute top-3 left-3 bg-red-500 text-white text-xs px-1 rounded">
<text class="text-white">{{ car.discount }}折</text>
</view>
</view> -->
</view>
<view class="flex-1 p-3 relative">
<view class="absolute top-3 right-4" @tap.stop="() => toggleFavorite(car)">
<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 }} ·
<text v-if="car.batteryHealth">电池健康度{{ car.batteryHealth }}%</text>
<text v-if="car.mileage"> 行驶{{ car.mileage }}公里</text>
{{ car.manufacture_year }} ·
<text v-if="car.range_km">续航{{ car.range_km }}km</text>
<text v-if="car.max_speed_kmh"> 最高时速{{ car.max_speed_kmh }}km/h</text>
</text>
<view class="mt-2">
<!-- 原价和现价 -->
<view class="flex items-center">
<text v-if="car.originalPrice" class="text-xs text-gray-400 line-through mr-2">
¥{{ car.originalPrice.toLocaleString() }}
<text v-if="car.market_price" class="text-xs text-gray-400 line-through mr-2">
¥{{ car.market_price.toLocaleString() }}
</text>
<text class="text-orange-500 font-bold" style="font-size: 1.2rem;">
¥{{ car.price.toLocaleString() }}
</text>
</view>
<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">
<!-- <view class="mt-1">
<text class="text-xs text-red-600">{{ car.specialTag }}</text>
</view>
</view> -->
</view>
</view>
</view>
......@@ -128,116 +128,44 @@ import { ref, computed, onMounted } from 'vue'
import { Search2, Heart1, HeartFill } from '@nutui/icons-vue-taro'
import { useFavorite } from '@/composables/useFavorite'
import './index.less'
// 接口导入
import { getVehicleBrandsAPI, getSchoolsAPI } from '@/api/other';
import { getRecommendVehicleAPI } from '@/api/car';
import { DEFAULT_COVER_IMG } from '@/utils/config'
// 响应式数据
const searchValue = ref('')
const onBlurSearch = () => {
console.warn(searchValue.value)
/**
* 搜索框失焦事件
*/
const onBlurSearch = async () => {
// 重置分页并重新加载数据
currentPage.value = 0
hasMore.value = true
await loadVehicleData()
}
// 收藏功能现在使用基于对象属性的模式
// Filter states - 使用NutUI Menu组件
const selectedBrand = ref('全部品牌')
const selectedYear = ref('出厂年份')
const selectedSchool = ref('所在学校')
const selectedBrand = ref('')
const selectedYear = ref('')
const selectedSchool = ref('')
// Menu选项数据
const brandOptions = ref([
{ text: '全部品牌', value: '全部品牌' },
{ text: '雅迪', value: '雅迪' },
{ text: '台铃', value: '台铃' },
{ text: '小鸟', value: '小鸟' },
{ text: '新日', value: '新日' },
{ text: '爱玛', value: '爱玛' },
{ text: '小牛', value: '小牛' }
])
const yearOptions = ref([
{ text: '出厂年份', value: '出厂年份' },
{ text: '2024年', value: '2024年' },
{ text: '2023年', value: '2023年' },
{ text: '2022年', value: '2022年' },
{ text: '2021年', value: '2021年' },
{ text: '2020年', value: '2020年' }
])
const schoolOptions = ref([
{ text: '所在学校', value: '所在学校' },
{ text: '上海理工大学', value: '上海理工大学' },
{ text: '上海复旦大学', value: '上海复旦大学' },
{ text: '上海同济大学', value: '上海同济大学' },
{ text: '上海交通大学', value: '上海交通大学' }
])
const brandOptions = ref([])
const yearOptions = ref([])
const schoolOptions = ref([])
// 特价好车数据
const goodCars = ref([
{
id: 1,
name: '雅迪 DE3 电动车',
year: '2023年',
batteryHealth: 85,
mileage: 1200,
originalPrice: 4800,
price: 3600,
discount: 7.5,
school: '上海理工大学',
imageUrl: 'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=400&h=300&fit=crop',
specialTag: '限时特价',
isSpecial: true,
brand: '雅迪'
},
{
id: 2,
name: '爱玛 A600 电动车',
year: '2022年',
batteryHealth: 80,
mileage: 2000,
originalPrice: 3800,
price: 2850,
discount: 7.5,
school: '上海大学',
imageUrl: 'https://images.unsplash.com/photo-1571068316344-75bc76f77890?w=400&h=300&fit=crop',
specialTag: '急售特价',
isSpecial: true,
brand: '爱玛'
},
{
id: 3,
name: '台铃 TDR-2023 电动车',
year: '2023年',
batteryHealth: 88,
mileage: 800,
originalPrice: 4200,
price: 3360,
discount: 8.0,
school: '华东理工大学',
imageUrl: 'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=400&h=300&fit=crop',
specialTag: '毕业甩卖',
isSpecial: true,
brand: '台铃'
},
{
id: 4,
name: '小牛 NGT 电动车',
year: '2022年',
batteryHealth: 75,
mileage: 3000,
originalPrice: 5200,
price: 3640,
discount: 7.0,
school: '上海交通大学',
imageUrl: 'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=400&h=300&fit=crop',
specialTag: '超值特价',
isSpecial: true,
brand: '小牛'
}
])
const goodCars = ref([])
// 加载状态
const loading = ref(false)
const hasMore = ref(true)
const currentPage = ref(1)
const pageSize = ref(4)
const currentPage = ref(0)
const pageSize = ref(10)
// Toast提示
const toastVisible = ref(false)
......@@ -303,84 +231,93 @@ const onSchoolChange = (value) => {
/**
* 过滤车辆数据
*/
const filterCars = () => {
// TODO: 实现过滤逻辑
const filterCars = async () => {
// 重置数据
goodCars.value = []
currentPage.value = 0
hasMore.value = true
// 重新加载数据
await loadVehicleData()
showToast('筛选条件已更新', 'success')
}
/**
* 生成模拟车辆数据
* @param {number} page - 页码
* @param {number} size - 每页数量
* @returns {Array} 车辆数据数组
* 加载车辆数据
* @param {boolean} isLoadMore - 是否为加载更多
*/
const generateMockData = (page, size) => {
const brands = ['雅迪', '台铃', '小鸟', '新日', '爱玛', '小牛', '绿源', '立马']
const schools = ['上海理工大学', '上海复旦大学', '上海同济大学', '上海交通大学', '华东师范大学', '上海大学']
const years = ['2024年', '2023年', '2022年', '2021年', '2020年']
const images = [
'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',
'https://images.unsplash.com/photo-1583568671741-c70dafa8e8e7?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60',
'https://images.unsplash.com/photo-1595941069915-4ebc5197c14a?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 specialTags = ['限时特价', '急售特价', '毕业甩卖', '超值特价', '清仓特价', '年底促销']
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 school = schools[Math.floor(Math.random() * schools.length)]
const year = years[Math.floor(Math.random() * years.length)]
const image = images[Math.floor(Math.random() * images.length)]
const specialTag = specialTags[Math.floor(Math.random() * specialTags.length)]
const originalPrice = Math.floor(Math.random() * 2000) + 3000
const discount = (Math.floor(Math.random() * 30) + 60) / 10 // 6.0-8.9折
const price = Math.floor(originalPrice * discount / 10)
data.push({
id: `good_${index + 100}`,
name: `${brand} ${['豪华版', '标准版', '运动版', '经典版'][Math.floor(Math.random() * 4)]}`,
year: year,
school: school,
originalPrice: originalPrice,
price: price,
discount: discount,
imageUrl: image,
batteryHealth: Math.floor(Math.random() * 30) + 70, // 特价车电池健康度相对较低
mileage: Math.floor(Math.random() * 3000) + 1000, // 特价车里程相对较高
brand: brand,
specialTag: specialTag,
isSpecial: true
})
const loadVehicleData = async (isLoadMore = false) => {
if (loading.value) return
loading.value = true
try {
// 构建请求参数
const params = {
section: 2,
page: currentPage.value,
limit: pageSize.value
}
// 添加筛选条件
if (selectedSchool.value) {
params.school_id = selectedSchool.value
}
if (selectedBrand.value) {
params.brand = selectedBrand.value
}
if (selectedYear.value) {
params.manufacture_year = selectedYear.value
}
if (searchValue.value.trim()) {
params.keyword = searchValue.value.trim()
}
const response = await getRecommendVehicleAPI(params)
if (response && response.code === 1 && response.data) {
const vehicleList = response.data.list || []
// 处理图片数据
const processedData = vehicleList.map(item => ({
...item,
front_photo: item.front_photo || DEFAULT_COVER_IMG,
// 添加特价标签（有市场价且当前价格低于市场价的车辆）
isSpecial: item.market_price && item.price < item.market_price,
// 确保价格为数字类型
price: Number(item.price) || 0,
market_price: Number(item.market_price) || 0
}))
if (isLoadMore) {
goodCars.value.push(...processedData)
} else {
goodCars.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
}
return data
}
/**
* 加载更多数据
*/
const loadMore = () => {
const loadMore = async () => {
if (loading.value || !hasMore.value) return
loading.value = true
// 模拟网络请求延迟
setTimeout(() => {
// 模拟最多加载5页数据
if (currentPage.value >= 5) {
hasMore.value = false
loading.value = false
return
}
currentPage.value++
const newData = generateMockData(currentPage.value, pageSize.value)
goodCars.value.push(...newData)
loading.value = false
}, 1000 + Math.random() * 1000)
currentPage.value++
await loadVehicleData(true)
}
/**
......@@ -400,8 +337,43 @@ const showToast = (message, type = 'success') => {
}
// 初始化
onMounted(() => {
// 可以在这里加载初始数据
onMounted(async () => {
// 获取全部品牌数据
const vBrands = await getVehicleBrandsAPI()
if (vBrands.code) {
brandOptions.value = vBrands.data.map(brand => ({
text: brand,
value: brand
}))
brandOptions.value = [{
text: '全部品牌',
value: ''
}, ...brandOptions.value]
}
// 生成从当前日期开始往前10年的年份
yearOptions.value = Array.from({ length: 10 }, (_, i) => ({
text: (new Date().getFullYear() - i).toString() + '年',
value: (new Date().getFullYear() - i).toString()
}))
yearOptions.value = [{
text: '全部年份',
value: ''
}, ...yearOptions.value]
// 获取全部学校数据
const schoolData = await getSchoolsAPI()
if (schoolData.code) {
schoolOptions.value = schoolData.data.map(school => ({
text: school.name,
value: school.id
}))
}
schoolOptions.value = [{
text: '全部学校',
value: ''
}, ...schoolOptions.value]
// 加载初始车辆数据
await loadVehicleData()
})
</script>
......
<!--
* @Date: 2025-06-28 10:33:00
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-07-11 10:09:02
* @LastEditTime: 2025-07-11 10:58:14
* @FilePath: /jgdl/src/pages/index/index.vue
* @Description: 捡个电驴首页
-->
......@@ -290,14 +290,14 @@ onMounted(async () => {
// 获取首页轮播
const res1 = await getRecommendVehicleAPI({ section: 1 })
if (res1.code) {
bannerImages.value = res1.data.map(item => item.front_photo);
bannerImages.value = res1.data.list.map(item => item.front_photo);
}
// 获取精品推荐
const res2 = await getRecommendVehicleAPI({ section: 3 })
if (res2.code) {
featuredScooters.value = res2.data
featuredScooters.value = res2.data.list
// 处理图片数据
const processedData = res2.data.map(item => ({
const processedData = res2.data.list.map(item => ({
...item,
front_photo: item.front_photo || DEFAULT_COVER_IMG,
// 确保价格为数字类型
......