hookehuyr

feat(轮播): 为认证车源页面添加分类轮播功能

重构认证车源页面的轮播组件,使用通用BannerSwiper组件替代硬编码实现
在car.js接口中添加category参数支持,首页和认证车源页面分别传入不同分类参数获取对应轮播数据
/*
* @Date: 2025-07-09 14:58:51
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-08-01 14:58:39
* @LastEditTime: 2025-08-04 13:29:22
* @FilePath: /jgdl/src/api/car.js
* @Description: 车辆相关API接口
*/
......@@ -120,6 +120,7 @@ export const changeVehicleStatusAPI = (params) => fn(fetch.post(Api.CHANGE_STATU
/**
* @description: 首页轮播列表
* @param category 分类(homepage=首页轮播,verification=认证车源)
* @returns data.list[{ id 文章ID, icon 封面图, post_title 文章标题, post_link 车辆ID, post_content 文章内容, type 类型(icon=只显示封面图,content=只显示文章详情,vehicle=只进入车辆详情页) }]
*/
......
<!--
* @Date: 2022-09-19 14:11:06
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-08-04 10:30:09
* @LastEditTime: 2025-08-04 13:29:45
* @FilePath: /jgdl/src/pages/authCar/index.vue
* @Description: 认证车源
-->
<template>
<view class="auth-car-page">
<!-- Banner轮播图 -->
<view class="p-4">
<nut-swiper :init-page="0" :pagination-visible="true" pagination-color="#ffffff" auto-play="3000"
class="rounded-lg overflow-hidden" height="160">
<nut-swiper-item v-for="(image, index) in bannerImages" :key="index">
<image :src="image" mode="aspectFill" class="w-full h-40 object-cover" />
</nut-swiper-item>
</nut-swiper>
</view>
<!-- Banner -->
<BannerSwiper :banner-list="bannerList" />
<!-- 我要认证按钮 -->
<view class="px-16 mt-5">
......@@ -86,14 +79,8 @@
<nut-toast v-model:visible="toastVisible" :msg="toastMessage" :type="toastType" />
<!-- 认证费用说明弹窗 -->
<nut-popup
v-model:visible="showAuthInfoPopup"
position="bottom"
:style="{ width: '100%', height: '100%' }"
closeable
close-icon-position="top-right"
@close="showAuthInfoPopup = false"
>
<nut-popup v-model:visible="showAuthInfoPopup" position="bottom" :style="{ width: '100%', height: '100%' }"
closeable close-icon-position="top-right" @close="showAuthInfoPopup = false">
<view class="auth-info-popup">
<!-- 标题 -->
<view class="popup-header">
......@@ -116,19 +103,10 @@
<!-- 底部按钮 -->
<view class="popup-footer">
<nut-button
plain
class="footer-btn cancel-btn"
@click="showAuthInfoPopup = false"
>
<nut-button plain class="footer-btn cancel-btn" @click="showAuthInfoPopup = false">
关闭
</nut-button>
<nut-button
type="warning"
class="footer-btn confirm-btn"
color="#fb923c"
@click="handleConfirmAuth"
>
<nut-button type="warning" class="footer-btn confirm-btn" color="#fb923c" @click="handleConfirmAuth">
知道了
</nut-button>
</view>
......@@ -142,18 +120,15 @@ import Taro from '@tarojs/taro'
import { ref, computed, onMounted } from 'vue'
import { Check, Heart1, HeartFill } from '@nutui/icons-vue-taro'
import { useFavorite } from '@/composables/useFavorite'
import BannerSwiper from '@/components/BannerSwiper.vue'
import './index.less'
// 接口导入
import { getVehicleListAPI } from '@/api/car';
import { getVehicleListAPI, getArticleListAPI } from '@/api/car';
import { getVerificationPriceAPI } from '@/api/other';
import { DEFAULT_COVER_IMG } from '@/utils/config'
// Banner图片数据
const bannerImages = ref([
'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=800&h=400&fit=crop',
'https://images.unsplash.com/photo-1571068316344-75bc76f77890?w=800&h=400&fit=crop',
'https://images.unsplash.com/photo-1571068316344-75bc76f77890?w=800&h=400&fit=crop'
])
// Banner数据
const bannerList = ref([])
// 认证车源数据
const authCars = ref([])
......@@ -317,6 +292,23 @@ onMounted(async () => {
await loadAuthCarData()
// 获取认证费用
await getVerificationPrice()
// 获取轮播图数据
const response = await getArticleListAPI({ category: 'verification' })
if (response.code && response.data.list.length) {
// 将API数据转换为轮播图格式
const articleBanners = response.data.list.map(item => ({
id: item.post_link || item.id, // 使用post_link作为车辆ID,如果没有则使用文章ID
type: item.type || 'icon', // 使用接口返回的type字段
image: item.icon, // 使用icon作为封面图
title: item.post_title, // 使用post_title作为标题
content: item.post_content // 使用post_content作为文章内容
}))
bannerList.value = articleBanners
} else {
// API调用失败时设置为空数组
bannerList.value = []
console.warn('获取轮播图数据失败')
}
})
</script>
......
<!--
* @Date: 2025-06-28 10:33:00
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-07-29 11:00:46
* @LastEditTime: 2025-08-04 13:28:57
* @FilePath: /jgdl/src/pages/index/index.vue
* @Description: 捡个电驴首页
-->
......@@ -171,7 +171,7 @@ useReady(async () => {
onMounted(async () => {
// 获取首页轮播
const { code, data } = await getArticleListAPI()
const { code, data } = await getArticleListAPI({ category: 'homepage' })
if (code && data.list.length) {
// 将API数据转换为轮播图格式
const articleBanners = data.list.map(item => ({
......