轮播图接口对接

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>

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%;
+  }
+}

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">

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,
+    },
+  })
+}

src/types/home.d.ts

@@ -0,0 +1,11 @@
+/** 首页-广告区域数据类型 */
+export type BannerItem = {
+  /** 跳转链接 */
+  hrefUrl: string
+  /** id */
+  id: string
+  /** 图片链接 */
+  imgUrl: string
+  /** 跳转类型 */
+  type: number
+}