From 8066f8d394b18bc79e8e622e143fa27ca633552b Mon Sep 17 00:00:00 2001
From: liruiqiang <3151805288@qq.com>
Date: Wed, 13 Aug 2025 15:16:46 +0800
Subject: [PATCH] =?UTF-8?q?=E8=BD=AE=E6=92=AD=E5=9B=BE=E6=8E=A5=E5=8F=A3?=
 =?UTF-8?q?=E5=AF=B9=E6=8E=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/XtxSwiper.vue         | 74 ++++++++----------------------------
 src/components/styles/XtxSwiper.scss | 31 +++++++++++++++
 src/pages/index/index.vue            | 24 +++++++++++-
 src/services/home.ts                 | 18 +++++++++
 src/types/home.d.ts                  | 11 ++++++
 5 files changed, 99 insertions(+), 59 deletions(-)
 create mode 100644 src/components/styles/XtxSwiper.scss
 create mode 100644 src/services/home.ts
 create mode 100644 src/types/home.d.ts

diff --git a/src/components/XtxSwiper.vue b/src/components/XtxSwiper.vue
index dafe056..b1cff24 100644
--- a/src/components/XtxSwiper.vue
+++ b/src/components/XtxSwiper.vue
@@ -1,39 +1,17 @@
 <template>
   <view class="carousel">
-    <swiper :circular="true" :autoplay="false" :interval="3000">
-      <swiper-item>
+    <swiper :circular="true" :autoplay="false" :interval="3000" @change="onChange">
+      <swiper-item v-for="item in list" :key="item.id">
         <navigator url="/pages/index/index" hover-class="none" class="navigator">
-          <image
-            mode="aspectFill"
-            class="image"
-            src="https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/uploads/slider_1.jpg"
-          ></image>
-        </navigator>
-      </swiper-item>
-      <swiper-item>
-        <navigator url="/pages/index/index" hover-class="none" class="navigator">
-          <image
-            mode="aspectFill"
-            class="image"
-            src="https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/uploads/slider_2.jpg"
-          ></image>
-        </navigator>
-      </swiper-item>
-      <swiper-item>
-        <navigator url="/pages/index/index" hover-class="none" class="navigator">
-          <image
-            mode="aspectFill"
-            class="image"
-            src="https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/uploads/slider_3.jpg"
-          ></image>
+          <image mode="aspectFill" class="image" :src="item.imgUrl"></image>
         </navigator>
       </swiper-item>
     </swiper>
     <!-- 指示点 -->
     <view class="indicator">
       <text
-        v-for="(item, index) in 3"
-        :key="item"
+        v-for="(item, index) in list"
+        :key="item.id"
         class="dot"
         :class="{ active: index === activeIndex }"
       ></text>
@@ -42,41 +20,21 @@
 </template>
 
 <script setup lang="ts">
+import type { BannerItem } from '@/types/home'
 import { ref } from 'vue'
 
 const activeIndex = ref(0)
+
+// 当 swiper 下标发生变化时触发
+const onChange: UniHelper.SwiperOnChange = (ev) => {
+  activeIndex.value = ev.detail.current
+}
+// 定义 props 接收
+defineProps<{
+  list: BannerItem[]
+}>()
 </script>
 
 <style lang="scss">
-/* 轮播图 */
-.carousel {
-  height: 280rpx;
-  position: relative;
-  overflow: hidden;
-  transform: translateY(0);
-  background-color: #efefef;
-  .indicator {
-    position: absolute;
-    left: 0;
-    right: 0;
-    bottom: 16rpx;
-    display: flex;
-    justify-content: center;
-    .dot {
-      width: 30rpx;
-      height: 6rpx;
-      margin: 0 8rpx;
-      border-radius: 6rpx;
-      background-color: rgba(255, 255, 255, 0.4);
-    }
-    .active {
-      background-color: #fff;
-    }
-  }
-  .navigator,
-  .image {
-    width: 100%;
-    height: 100%;
-  }
-}
+@use './styles/XtxSwiper.scss';
 </style>
diff --git a/src/components/styles/XtxSwiper.scss b/src/components/styles/XtxSwiper.scss
new file mode 100644
index 0000000..79cc141
--- /dev/null
+++ b/src/components/styles/XtxSwiper.scss
@@ -0,0 +1,31 @@
+/* 轮播图 */
+.carousel {
+  height: 280rpx;
+  position: relative;
+  overflow: hidden;
+  transform: translateY(0);
+  background-color: #efefef;
+  .indicator {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 16rpx;
+    display: flex;
+    justify-content: center;
+    .dot {
+      width: 30rpx;
+      height: 6rpx;
+      margin: 0 8rpx;
+      border-radius: 6rpx;
+      background-color: rgba(255, 255, 255, 0.4);
+    }
+    .active {
+      background-color: #fff;
+    }
+  }
+  .navigator,
+  .image {
+    width: 100%;
+    height: 100%;
+  }
+}
diff --git a/src/pages/index/index.vue b/src/pages/index/index.vue
index a27bb01..73702dd 100644
--- a/src/pages/index/index.vue
+++ b/src/pages/index/index.vue
@@ -2,13 +2,35 @@
   <view>
     <!-- 自定义导航栏 -->
     <CustomNavbar />
-    <XtxSwiper />
+    <PageSkeleton v-if="isLoading" />
+    <XtxSwiper :list="bannerList" />
   </view>
 </template>
 
 <script setup lang="ts">
 import CustomNavbar from './components/CustomNavbar.vue'
 import XtxSwiper from '../../components/XtxSwiper.vue'
+import { ref } from 'vue'
+import { onLoad } from '@dcloudio/uni-app'
+import { getHomeBannerAPI } from '@/services/home'
+import type { BannerItem } from '@/types/home'
+
+// 获取轮播图数据
+const bannerList = ref<BannerItem[]>([])
+const getHomeBannerData = async () => {
+  const res = await getHomeBannerAPI()
+  bannerList.value = res.result
+}
+
+// 是否加载中标记
+const isLoading = ref(false)
+
+// 页面加载
+onLoad(async () => {
+  isLoading.value = true
+  await Promise.all([getHomeBannerData()])
+  isLoading.value = false
+})
 </script>
 
 <style lang="scss">
diff --git a/src/services/home.ts b/src/services/home.ts
new file mode 100644
index 0000000..f2558ee
--- /dev/null
+++ b/src/services/home.ts
@@ -0,0 +1,18 @@
+// 请求封装调用
+import { http } from '@/utils/http'
+
+// 存放路径: src/services/home.ts
+import type { BannerItem } from '@/types/home'
+/**
+ * 首页-广告区域-小程序
+ * @param distributionSite 广告区域展示位置（投放位置 投放位置，1为首页，2为分类商品页） 默认是1
+ */
+export const getHomeBannerAPI = (distributionSite = 1) => {
+  return http<BannerItem[]>({
+    method: 'GET',
+    url: '/home/banner',
+    data: {
+      distributionSite,
+    },
+  })
+}
diff --git a/src/types/home.d.ts b/src/types/home.d.ts
new file mode 100644
index 0000000..0a0f592
--- /dev/null
+++ b/src/types/home.d.ts
@@ -0,0 +1,11 @@
+/** 首页-广告区域数据类型 */
+export type BannerItem = {
+  /** 跳转链接 */
+  hrefUrl: string
+  /** id */
+  id: string
+  /** 图片链接 */
+  imgUrl: string
+  /** 跳转类型 */
+  type: number
+}