添加轮播图接口

app/config/api.ts

@@ -0,0 +1,74 @@
+/**
+ * API 配置和接口函数
+ * 用于统一管理项目的 API 请求
+ */
+
+// API 基础地址
+export const API_BASE_URL = 'https://ele.ccttiot.com/prod-api'
+
+/**
+ * Banner 数据类型定义
+ */
+export interface BannerItem {
+  id: string
+  imgUrl: string
+  status: string
+  orderNum: string
+  createBy?: string
+  createTime?: string
+  updateBy?: string
+  updateTime?: string
+  remark?: string | null
+  scope?: string | null
+  deleted?: string | null
+  areaPermissions?: string | null
+  createId?: string
+  updateId?: string
+}
+
+/**
+ * API 响应数据结构
+ */
+export interface ApiResponse<T> {
+  msg: string
+  code: number
+  data: T
+}
+
+/**
+ * 获取轮播图列表
+ * @returns Promise<BannerItem[]> 返回轮播图数据数组
+ */
+export async function getBannerList(): Promise<BannerItem[]> {
+  try {
+    const response = await $fetch<ApiResponse<BannerItem[]>>(
+      `${API_BASE_URL}/app/owBanner/list`,
+      {
+        method: 'GET',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+      }
+    )
+
+    // 检查响应状态
+    if (response.code === 200 && Array.isArray(response.data)) {
+      // 过滤出状态为启用的 banner，并按 orderNum 排序
+      return response.data
+        .filter((item) => item.status === '1') // 只返回启用状态的 banner
+        .sort((a, b) => {
+          const orderA = parseInt(a.orderNum || '0', 10)
+          const orderB = parseInt(b.orderNum || '0', 10)
+          return orderB - orderA // 降序排列，数字越大越靠前
+        })
+    }
+
+    console.warn('获取轮播图列表失败，返回空数组', response)
+    return []
+  } catch (error) {
+    console.error('获取轮播图列表时发生错误:', error)
+    // 发生错误时返回空数组，避免页面崩溃
+    return []
+  }
+}
+

app/pages/index/index.vue

@@ -3,7 +3,30 @@
       <UPage>
         <!-- 主要内容区域 -->
         <main role="main">
-          <img src="/img/banner.png" alt="" class="w-full">
+          <!-- 轮播图区域 -->
+          <div v-if="bannerLoading" class="w-full h-64 bg-gray-200 flex items-center justify-center">
+            <div class="text-gray-500">加载中...</div>
+          </div>
+          <UCarousel 
+            v-else-if="bannerItems.length > 0"
+            v-slot="{ item }" 
+            arrows  
+            :prev="{ color: 'primary' }"
+            :next="{ color: 'primary' }" 
+            loop 
+              :autoplay="{ delay: 5000 }"
+            :items="bannerItems" 
+            class="w-full"
+          >
+            <div class="w-full h-64 md:h-96 lg:h-[500px] overflow-hidden">
+              <img 
+                :src="item.imgUrl" 
+                :alt="item.remark || '轮播图'" 
+                class="w-full h-full object-cover" 
+              />
+            </div>
+          </UCarousel>
+          <img v-else src="/img/banner.png" alt="默认横幅" class="w-full">
           <UPageSection :ui="{container:'lg:py-0 lg:px-0' }">
 
 
@@ -25,10 +48,6 @@
                 <div class="   cursor-pointer">
                   <img src="/img/5.jpg" alt="服务项目展示图片5" class="w-full rounded-lg       transition-shadow duration-300">
                 </div>
-                <UCarousel v-slot="{ item }" arrows  :prev="{ color: 'primary' }"
-                           :next="{ color: 'primary' }" loop :items="items" class="w-full max-w-xl mx-auto">
-                  <img :src="item" width="620" height="320" class="rounded-lg" alt="">
-                </UCarousel>
                 <div class="cursor-pointer">
                   <img src="/img/6.png" alt="服务项目展示图片6" class="w-full rounded-lg       transition-shadow duration-300">
                 </div>
@@ -142,7 +161,9 @@
 <script setup lang="ts">
 // SEO优化配置
 import AMapComponent from "~/components/AMapComponent.vue";
-import {computed, ref} from 'vue'
+import {computed, ref, onMounted} from 'vue'
+import { getBannerList, type BannerItem } from '~/config/api'
+
 const mapRef = ref(null)
 const centerLng = ref(120.25834)
 const centerLat = ref(27.114063)
@@ -150,6 +171,29 @@ const centerLat = ref(27.114063)
 const mapStatus = ref('加载中...')
 
 const mapCenter = computed(() => [centerLng.value, centerLat.value])
+
+// 轮播图相关数据
+const bannerItems = ref<BannerItem[]>([])
+const bannerLoading = ref(true)
+
+// 获取轮播图数据
+const fetchBannerList = async () => {
+  try {
+    bannerLoading.value = true
+    const banners = await getBannerList()
+    bannerItems.value = banners
+  } catch (error) {
+    console.error('获取轮播图失败:', error)
+    bannerItems.value = []
+  } finally {
+    bannerLoading.value = false
+  }
+}
+
+// 页面加载时获取轮播图数据
+onMounted(() => {
+  fetchBannerList()
+})
 const onMapReady = (mapInstance) => {
   console.log('地图实例:', mapInstance)
   mapStatus.value = '地图加载完成'
@@ -301,11 +345,4 @@ const users = ref([
     }
   }
 ])
-
-const items = [
-  'https://picsum.photos/640/640?random=1',
-  'https://picsum.photos/640/640?random=2',
-  'https://picsum.photos/640/640?random=3',
-
-]
 </script>