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/manifest.json

@@ -1,28 +1,28 @@
 {
-    "name" : "",
-    "appid" : "",
-    "description" : "",
-    "versionName" : "1.0.0",
-    "versionCode" : "100",
-    "transformPx" : false,
+  "name": "",
+  "appid": "",
+  "description": "",
+  "versionName": "1.0.0",
+  "versionCode": "100",
+  "transformPx": false,
   /* 5+App特有相关 */
-    "app-plus" : {
-        "usingComponents" : true,
-        "nvueStyleCompiler" : "uni-app",
-        "compilerVersion" : 3,
-        "splashscreen" : {
-            "alwaysShowBeforeRender" : true,
-            "waiting" : true,
-            "autoclose" : true,
-            "delay" : 0
+  "app-plus": {
+    "usingComponents": true,
+    "nvueStyleCompiler": "uni-app",
+    "compilerVersion": 3,
+    "splashscreen": {
+      "alwaysShowBeforeRender": true,
+      "waiting": true,
+      "autoclose": true,
+      "delay": 0
     },
     /* 模块配置 */
-        "modules" : {},
+    "modules": {},
     /* 应用发布信息 */
-        "distribute" : {
+    "distribute": {
       /* android打包配置 */
-            "android" : {
-                "permissions" : [
+      "android": {
+        "permissions": [
           "<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
           "<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
           "<uses-permission android:name=\"android.permission.VIBRATE\"/>",
@@ -41,32 +41,32 @@
         ]
       },
       /* ios打包配置 */
-            "ios" : {},
+      "ios": {},
       /* SDK配置 */
-            "sdkConfigs" : {}
+      "sdkConfigs": {}
     }
   },
   /* 快应用特有相关 */
-    "quickapp" : {},
+  "quickapp": {},
   /* 小程序特有相关 */
-    "mp-weixin" : {
-        "appid" : "",
-        "setting" : {
-            "urlCheck" : false
+  "mp-weixin": {
+    "appid": "",
+    "setting": {
+      "urlCheck": false
     },
-        "usingComponents" : true
+    "usingComponents": true
   },
-    "mp-alipay" : {
-        "usingComponents" : true
+  "mp-alipay": {
+    "usingComponents": true
   },
-    "mp-baidu" : {
-        "usingComponents" : true
+  "mp-baidu": {
+    "usingComponents": true
   },
-    "mp-toutiao" : {
-        "usingComponents" : true
+  "mp-toutiao": {
+    "usingComponents": true
   },
   "uniStatistics": {
     "enable": false
   },
-    "vueVersion" : "3"
+  "vueVersion": "3"
 }

src/pages.json

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

src/pages/index/index.vue

@@ -1,14 +1,26 @@
 <template>
   <CustomNavbar />
-  <view class="content">
-    {{ title }}
-  </view>
+  <JbcSwiper :list="bannerList" />
+  <view class="content"> home </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