feat: ✨ 首页banner轮播图封装

src/components/JbcSwiper.vue

@@ -0,0 +1,70 @@
+<template>
+  <view class="carousel">
+    <swiper :circular="true" :autoplay="false" :interval="3000" @change="handleChange">
+      <swiper-item v-for="item in props.list" :key="item.id">
+        <navigator url="/pages/index/index" hover-class="none" class="navigator">
+          <image mode="aspectFill" class="image" :src="item.imgUrl"></image>
+        </navigator>
+      </swiper-item>
+    </swiper>
+    <!-- 指示点 -->
+    <view class="indicator">
+      <text
+        v-for="(item, index) in props.list"
+        :key="item.id"
+        class="dot"
+        :class="{ active: index === activeIndex }"
+      ></text>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import type { BannerItem } from '@/types/home'
+import { ref } from 'vue'
+
+const props = defineProps<{
+  list: BannerItem[]
+}>()
+
+// 当前轮播图索引
+const activeIndex = ref(0)
+// 轮播图切换
+const handleChange: UniHelper.SwiperOnChange = (e) => {
+  activeIndex.value = e.detail!.current
+}
+</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%;
+  }
+}
+</style>

src/pages.json

@@ -7,8 +7,8 @@
     "custom": {
       // uni-ui 规则如下配置
       "^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue",
-      // 以 Xtx 开头的组件，在 components 文件夹中查找引入（需要重启服务器）
+      // 以 Jbc 开头的组件，在 components 文件夹中查找引入（需要重启服务器）
-      "^Xtx(.*)": "@/components/Xtx$1.vue"
+      "^Jbc(.*)": "@/components/Jbc$1.vue"
     }
   },
   // 页面路由

src/pages/index/index.vue

@@ -1,14 +1,26 @@
 <template>
   <CustomNavbar />
-  <view class="content">
+  <JbcSwiper :list="bannerList" />
-    {{ title }}
+  <view class="content"> home </view>
-  </view>
 </template>
 
 <script setup lang="ts">
+import type { BannerItem } from '@/types/home'
 import CustomNavbar from './components/CustomNavbar.vue'
 import { ref } from 'vue'
-const title = ref('Hello')
+import { getHomeBanner } from '@/services/home'
+import { onLoad } from '@dcloudio/uni-app'
+
+// 获取轮播图数据
+const bannerList = ref<BannerItem[]>([])
+const getBannerList = async () => {
+  const res = await getHomeBanner()
+  bannerList.value = res.result
+  console.log('bannerList: ', bannerList.value)
+}
+onLoad(() => {
+  getBannerList()
+})
 </script>
 
 <style></style>

src/services/home.ts

@@ -0,0 +1,17 @@
+import type { BannerItem } from '@/types/home'
+import { http } from '@/utils/http'
+
+/**
+ * 获取首页轮播图
+ * @param distributionSite - 广告区域展示位置: 1 为首页（默认值）; 2 为商品分类页
+ * @returns 轮播图数据
+ */
+export const getHomeBanner = (distributionSite = 1) => {
+  return http<BannerItem[]>({
+    url: '/home/banner',
+    method: 'GET',
+    data: {
+      distributionSite,
+    },
+  })
+}

src/types/components.d.ts

@@ -0,0 +1,10 @@
+import JbcSwiper from '@/components/JbcSwiper.vue'
+
+declare module 'vue' {
+  export interface GlobalComponents {
+    JbcSwiper: typeof JbcSwiper
+  }
+}
+
+// 组件实例类型
+export type JbcSwiperInstance = InstanceType<typeof JbcSwiper>

src/types/global.d.ts

@@ -0,0 +1,39 @@
+/** 通用分页结果类型 */
+export type PageResult<T> = {
+  /** 列表数据 */
+  items: T[]
+  /** 总条数 */
+  counts: number
+  /** 当前页数 */
+  page: number
+  /** 总页数 */
+  pages: number
+  /** 每页条数 */
+  pageSize: number
+}
+
+/** 通用分页参数类型 */
+export type PageParams = {
+  /** 页码：默认值为 1 */
+  page?: number
+  /** 页大小：默认值为 10 */
+  pageSize?: number
+}
+
+/** 通用商品类型 */
+export type GoodsItem = {
+  /** 商品描述 */
+  desc: string
+  /** 商品折扣 */
+  discount: number
+  /** id */
+  id: string
+  /** 商品名称 */
+  name: string
+  /** 商品已下单数量 */
+  orderNum: number
+  /** 商品图片 */
+  picture: string
+  /** 商品价格 */
+  price: number
+}

src/types/home.d.ts

@@ -0,0 +1,42 @@
+import type { GoodsItem } from './global'
+
+/** 首页-广告区域数据类型 */
+export type BannerItem = {
+  /** 跳转链接 */
+  hrefUrl: string
+  /** id */
+  id: string
+  /** 图片链接 */
+  imgUrl: string
+  /** 跳转类型 */
+  type: number
+}
+
+/** 首页-前台类目数据类型 */
+export type CategoryItem = {
+  /** 图标路径 */
+  icon: string
+  /** id */
+  id: string
+  /** 分类名称 */
+  name: string
+}
+
+/** 首页-热门推荐数据类型 */
+export type HotItem = {
+  /** 说明 */
+  alt: string
+  /** id */
+  id: string
+  /** 图片集合[ 图片路径 ] */
+  pictures: string[]
+  /** 跳转地址 */
+  target: string
+  /** 标题 */
+  title: string
+  /** 推荐类型 */
+  type: string
+}
+
+/** 猜你喜欢-商品类型 */
+export type GuessItem = GoodsItem

src/utils/http.ts

@@ -51,7 +51,7 @@ uni.addInterceptor('uploadFile', interceptorOptions)
  *    3.2 其他错误 -> 根据后端错误信息轻提示
  *    3.3 网络错误 -> 提示用户换网络
  */
-interface Data<T> {
+type Data<T> = {
   code: number
   msg: string
   result: T