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

重构认证车源页面的轮播组件，使用通用BannerSwiper组件替代硬编码实现在car.js接口中添加category参数支持，首页和认证车源页面分别传入不同分类参数获取对应轮播数据

feat(轮播): 为认证车源页面添加分类轮播功能
重构认证车源页面的轮播组件，使用通用BannerSwiper组件替代硬编码实现在car.js接口中添加category参数支持，首页和认证车源页面分别传入不同分类参数获取对应轮播数据
hookehuyr
Commit 149bfc95a666dff0d1eacb43a3caad6e9fbba66e 149bfc95 1 parent 8e918828
Showing 3 changed files with 32 additions and 39 deletions
src/api/car.js
src/pages/authCar/index.vue
src/pages/index/index.vue
--- a/src/api/car.js
View file @149bfc9
+++ b/src/api/car.js
View file @149bfc9
 /*
  * @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=只进入车辆详情页) }]
  */
--- a/src/pages/authCar/index.vue
View file @149bfc9
+++ b/src/pages/authCar/index.vue
View file @149bfc9
 <!--
  * @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轮播图 -->
+    <!-- Banner -->
-    <view class="p-4">
+    <BannerSwiper :banner-list="bannerList" />
-      <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>
     <!-- 我要认证按钮 -->
     <view class="px-16 mt-5">
@@ -86,14 +79,8 @@
     <nut-toast v-model:visible="toastVisible" :msg="toastMessage" :type="toastType" />
     <!-- 认证费用说明弹窗 -->
-    <nut-popup
+    <nut-popup v-model:visible="showAuthInfoPopup" position="bottom" :style="{ width: '100%', height: '100%' }"
-      v-model:visible="showAuthInfoPopup"
+      closeable close-icon-position="top-right" @close="showAuthInfoPopup = false">
-      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
+          <nut-button plain class="footer-btn cancel-btn" @click="showAuthInfoPopup = false">
-            plain
-            class="footer-btn cancel-btn"
-            @click="showAuthInfoPopup = false"
-          >
             关闭
           </nut-button>
-          <nut-button
+          <nut-button type="warning" class="footer-btn confirm-btn" color="#fb923c" @click="handleConfirmAuth">
-            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图片数据
+// Banner数据
-const bannerImages = ref([
+const bannerList = 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'
-])
 // 认证车源数据
 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>
--- a/src/pages/index/index.vue
View file @149bfc9
+++ b/src/pages/index/index.vue
View file @149bfc9
 <!--
  * @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 => ({