From 62559f7ac184401352e44b858c95fed7d77958db Mon Sep 17 00:00:00 2001
From: jqtmviyu <jqtmviyu@gmail.com>
Date: Sun, 20 Apr 2025 17:17:58 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20:sparkles:=20=E9=A6=96=E9=A1=B5?=
 =?UTF-8?q?=E5=88=86=E7=B1=BB=E6=A8=A1=E5=9D=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/index/components/CategoryPanel.vue | 51 ++++++++++++++++++++
 src/pages/index/index.vue                    | 25 ++++++++--
 src/services/home.ts                         | 13 ++++-
 3 files changed, 85 insertions(+), 4 deletions(-)
 create mode 100644 src/pages/index/components/CategoryPanel.vue

diff --git a/src/pages/index/components/CategoryPanel.vue b/src/pages/index/components/CategoryPanel.vue
new file mode 100644
index 0000000..4a6134a
--- /dev/null
+++ b/src/pages/index/components/CategoryPanel.vue
@@ -0,0 +1,51 @@
+<template>
+  <view class="category">
+    <navigator
+      class="category-item"
+      hover-class="none"
+      url="/pages/index/index"
+      v-for="item in props.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'
+
+const 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>
diff --git a/src/pages/index/index.vue b/src/pages/index/index.vue
index 8975062..9189995 100644
--- a/src/pages/index/index.vue
+++ b/src/pages/index/index.vue
@@ -1,15 +1,17 @@
 <template>
   <CustomNavbar />
   <JbcSwiper :list="bannerList" />
+  <CategoryPanel :list="categoryList" />
   <view class="content"> home </view>
 </template>
 
 <script setup lang="ts">
-import type { BannerItem } from '@/types/home'
+import type { BannerItem, CategoryItem } from '@/types/home'
 import CustomNavbar from './components/CustomNavbar.vue'
 import { ref } from 'vue'
-import { getHomeBanner } from '@/services/home'
+import { getCategory, getHomeBanner } from '@/services/home'
 import { onLoad } from '@dcloudio/uni-app'
+import CategoryPanel from './components/CategoryPanel.vue'
 
 // 获取轮播图数据
 const bannerList = ref<BannerItem[]>([])
@@ -21,6 +23,23 @@ const getBannerList = async () => {
 onLoad(() => {
   getBannerList()
 })
+
+// 获取分类数据
+const categoryList = ref<CategoryItem[]>([])
+const getCategoryList = async () => {
+  const res = await getCategory()
+  categoryList.value = res.result
+  console.log('categoryList: ', categoryList.value)
+}
+onLoad(() => {
+  getCategoryList()
+})
 </script>
 
-<style></style>
+<style lang="scss">
+page {
+  background-color: #f7f7f7;
+  height: 100%;
+  overflow: hidden;
+}
+</style>
diff --git a/src/services/home.ts b/src/services/home.ts
index 350bed1..7707a5e 100644
--- a/src/services/home.ts
+++ b/src/services/home.ts
@@ -1,4 +1,4 @@
-import type { BannerItem } from '@/types/home'
+import type { BannerItem, CategoryItem } from '@/types/home'
 import { http } from '@/utils/http'
 
 /**
@@ -15,3 +15,14 @@ export const getHomeBanner = (distributionSite = 1) => {
     },
   })
 }
+
+/**
+ * 获取首页分类
+ * @returns 分类数据
+ */
+export const getCategory = () => {
+  return http<CategoryItem[]>({
+    url: '/home/category/mutli',
+    method: 'GET',
+  })
+}