请求类型传输

src/components/XtxSwiper.vue

@@ -1,44 +1,39 @@
 <script setup lang="ts">
+import type { BannerItem } from '@/types/home'
 import { ref } from 'vue'
 
 const activeIndex = ref(0)
+
+const onchange: UniHelper.SwiperOnChange = (ev) => {
+  // 排除空值 类型断言
+  activeIndex.value = ev.detail!.current
+}
+
+// 接收父组件 传过来的数据 props --- 指定泛型(一个尖括号一个花括号)
+defineProps<{
+  list: BannerItem[]
+}>()
+
+// const props = defineProps<{
+//   list: BannerItem[]
+// }>()
+
+// console.log(props, 'props')
 </script>
 
 <template>
   <view class="carousel">
-    <swiper :circular="true" :autoplay="false" :interval="3000">
+    <swiper @change="onchange" :circular="true" :autoplay="false" :interval="3000">
-      <swiper-item>
+      <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
+          <image mode="aspectFill" class="image" :src="item.imgUrl"></image>
-            mode="aspectFill"
-            class="image"
-            src="https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/uploads/slider_3.jpg"
-          ></image>
         </navigator>
       </swiper-item>
     </swiper>
     <!-- 指示点 -->
     <view class="indicator">
       <text
-        v-for="(item, index) in 3"
+        v-for="(item, index) in list.length"
         :key="item"
         class="dot"
         :class="{ active: index === activeIndex }"

src/pages/index/index.vue

@@ -1,11 +1,29 @@
 <script setup lang="ts">
-//
+import { getHomeBannerAPI } from '@/services/home'
 import CustomNavbar from './componets/CustomNavbar.vue'
+import { onLoad } from '@dcloudio/uni-app' //要用这个导入 ---用的这个--自动引入时是这个
+import { ref } from 'vue'
+import type { BannerItem } from '@/types/home'
+
+const bannerList = ref<BannerItem[]>([]) //ref([]) 需赋值BannerItem类型后  --- crtrl+i自动导入路径
+
+const getHomeBannerData = async () => {
+  const res = await getHomeBannerAPI()
+  bannerList.value = res.result //res.result 请求时赋值后，此时res.result返回的数据有提示类型了
+}
+
+// 生命周期 --页面加载的时候
+onLoad(() => {
+  getHomeBannerData()
+})
 </script>
 
 <template>
   <CustomNavbar></CustomNavbar>
-  <XtxSwiper></XtxSwiper>
+
+  <!-- 自定义轮播图 ctrl+点击 后先进入的是组件类型 声明文件  可以看到组件引入的路径-->
+  <XtxSwiper :list="bannerList"></XtxSwiper>
+
   <view class="index">index</view>
 </template>
 

src/services/home.ts

@@ -0,0 +1,17 @@
+// 存放路径: src/services/home.ts
+import type { BannerItem } from '@/types/home'
+import { http } from '@/utils/http'
+
+/**
+ * 首页-广告区域-小程序
+ * @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
+}