首页分类布局与接口

src/pages/index/components/CategoryPanel.vue

@@ -0,0 +1,52 @@
+<template>
+  <view class="category">
+    <navigator
+      class="category-item"
+      hover-class="none"
+      url="/pages/index/index"
+      v-for="item in list"
+      :key="item.id"
+    >
+      <image class="icon" :src="item.icon"></image>
+      <text class="text">{{ item.name }}</text>
+    </navigator>
+  </view>
+</template>
+
+<script setup lang="ts">
+import type { CategoryItem } from '@/types/home'
+
+// 定义 props 接收数据
+defineProps<{
+  list: CategoryItem[]
+}>()
+</script>
+
+<style lang="scss">
+/* 前台类目 */
+.category {
+  margin: 20rpx 0 0;
+  padding: 10rpx 0;
+  display: flex;
+  flex-wrap: wrap;
+  min-height: 328rpx;
+
+  .category-item {
+    width: 150rpx;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    align-items: center;
+    box-sizing: border-box;
+
+    .icon {
+      width: 100rpx;
+      height: 100rpx;
+    }
+    .text {
+      font-size: 26rpx;
+      color: #666;
+    }
+  }
+}
+</style>

src/pages/index/index.vue

@@ -3,17 +3,21 @@
     <!-- 自定义导航栏 -->
     <CustomNavbar />
     <PageSkeleton v-if="isLoading" />
+    <!-- 自定义轮播图 -->
     <XtxSwiper :list="bannerList" />
+    <!-- 分类面板 -->
+    <CategoryPanel :list="categoryList" />
   </view>
 </template>
 
 <script setup lang="ts">
 import CustomNavbar from './components/CustomNavbar.vue'
+import CategoryPanel from './components/CategoryPanel.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'
+import { getHomeBannerAPI, getHomeCategoryAPI } from '@/services/home'
+import type { BannerItem, CategoryItem } from '@/types/home'
 
 // 获取轮播图数据
 const bannerList = ref<BannerItem[]>([])
@@ -22,13 +26,20 @@ const getHomeBannerData = async () => {
   bannerList.value = res.result
 }
 
+// 获取前台分类数据
+const categoryList = ref<CategoryItem[]>([])
+const getHomeCategoryData = async () => {
+  const res = await getHomeCategoryAPI()
+  categoryList.value = res.result
+}
+
 // 是否加载中标记
 const isLoading = ref(false)
 
 // 页面加载
 onLoad(async () => {
   isLoading.value = true
-  await Promise.all([getHomeBannerData()])
+  await Promise.all([getHomeBannerData(), getHomeCategoryData()])
   isLoading.value = false
 })
 </script>

src/services/home.ts

@@ -1,8 +1,6 @@
 // 请求封装调用
 import { http } from '@/utils/http'
-
-// 存放路径: src/services/home.ts
-import type { BannerItem } from '@/types/home'
+import type { BannerItem, CategoryItem } from '@/types/home'
 /**
  * 首页-广告区域-小程序
  * @param distributionSite 广告区域展示位置（投放位置 投放位置，1为首页，2为分类商品页） 默认是1
@@ -16,3 +14,13 @@ export const getHomeBannerAPI = (distributionSite = 1) => {
     },
   })
 }
+
+/**
+ * 首页-前台分类-小程序
+ */
+export const getHomeCategoryAPI = () => {
+  return http<CategoryItem[]>({
+    method: 'GET',
+    url: '/home/category/mutli',
+  })
+}

src/types/home.d.ts

@@ -9,3 +9,13 @@ export type BannerItem = {
   /** 跳转类型 */
   type: number
 }
+
+/** 首页-前台类目数据类型 */
+export type CategoryItem = {
+  /** 图标路径 */
+  icon: string
+  /** id */
+  id: string
+  /** 分类名称 */
+  name: string
+}