From f0c91322f7fbcd3da470f8a592921a11df11dff7 Mon Sep 17 00:00:00 2001
From: liruiqiang <3151805288@qq.com>
Date: Wed, 13 Aug 2025 16:17:47 +0800
Subject: [PATCH] =?UTF-8?q?=E7=83=AD=E9=97=A8=E6=8E=A8=E8=8D=90=E5=B8=83?=
 =?UTF-8?q?=E5=B1=80=E4=B8=8E=E6=8E=A5=E5=8F=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/index/components/HotPanel.vue | 84 +++++++++++++++++++++++++++++++++
 src/pages/index/index.vue               | 16 +++++--
 src/services/home.ts                    | 12 ++++-
 src/types/home.d.ts                     | 16 +++++++
 4 files changed, 124 insertions(+), 4 deletions(-)
 create mode 100644 src/pages/index/components/HotPanel.vue

diff --git a/src/pages/index/components/HotPanel.vue b/src/pages/index/components/HotPanel.vue
new file mode 100644
index 0000000..2fae43f
--- /dev/null
+++ b/src/pages/index/components/HotPanel.vue
@@ -0,0 +1,84 @@
+<template>
+  <!-- 推荐专区 -->
+  <view class="panel hot">
+    <view class="item" v-for="item in list" :key="item.id">
+      <view class="title">
+        <text class="title-text">{{ item.title }}</text>
+        <text class="title-desc">{{ item.alt }}</text>
+      </view>
+      <navigator hover-class="none" :url="`/pages/hot/hot?type=${item.type}`" class="cards">
+        <image
+          v-for="src in item.pictures"
+          :key="src"
+          class="image"
+          mode="aspectFit"
+          :src="src"
+        ></image>
+      </navigator>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import type { HotItem } from '@/types/home'
+
+// 定义 props 接收数据
+defineProps<{
+  list: HotItem[]
+}>()
+</script>
+
+<style lang="scss">
+/* 热门推荐 */
+.hot {
+  display: flex;
+  flex-wrap: wrap;
+  min-height: 508rpx;
+  margin: 20rpx 20rpx 0;
+  border-radius: 10rpx;
+  background-color: #fff;
+
+  .title {
+    display: flex;
+    align-items: center;
+    padding: 24rpx 24rpx 0;
+    font-size: 32rpx;
+    color: #262626;
+    position: relative;
+    .title-desc {
+      font-size: 24rpx;
+      color: #7f7f7f;
+      margin-left: 18rpx;
+    }
+  }
+
+  .item {
+    display: flex;
+    flex-direction: column;
+    width: 50%;
+    height: 254rpx;
+    border-right: 1rpx solid #eee;
+    border-top: 1rpx solid #eee;
+    .title {
+      justify-content: start;
+    }
+    &:nth-child(2n) {
+      border-right: 0 none;
+    }
+    &:nth-child(-n + 2) {
+      border-top: 0 none;
+    }
+    .image {
+      width: 150rpx;
+      height: 150rpx;
+    }
+  }
+  .cards {
+    flex: 1;
+    padding: 15rpx 20rpx;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+}
+</style>
diff --git a/src/pages/index/index.vue b/src/pages/index/index.vue
index 5266179..ae3f83d 100644
--- a/src/pages/index/index.vue
+++ b/src/pages/index/index.vue
@@ -7,17 +7,20 @@
     <XtxSwiper :list="bannerList" />
     <!-- 分类面板 -->
     <CategoryPanel :list="categoryList" />
+    <!-- 热门推荐 -->
+    <HotPanel :list="hotList" />
   </view>
 </template>
 
 <script setup lang="ts">
 import CustomNavbar from './components/CustomNavbar.vue'
 import CategoryPanel from './components/CategoryPanel.vue'
+import HotPanel from './components/HotPanel.vue'
 import XtxSwiper from '../../components/XtxSwiper.vue'
 import { ref } from 'vue'
 import { onLoad } from '@dcloudio/uni-app'
-import { getHomeBannerAPI, getHomeCategoryAPI } from '@/services/home'
-import type { BannerItem, CategoryItem } from '@/types/home'
+import { getHomeBannerAPI, getHomeCategoryAPI, getHomeHotAPI } from '@/services/home'
+import type { BannerItem, CategoryItem, HotItem } from '@/types/home'
 
 // 获取轮播图数据
 const bannerList = ref<BannerItem[]>([])
@@ -33,13 +36,20 @@ const getHomeCategoryData = async () => {
   categoryList.value = res.result
 }
 
+// 获取热门推荐数据
+const hotList = ref<HotItem[]>([])
+const getHomeHotData = async () => {
+  const res = await getHomeHotAPI()
+  hotList.value = res.result
+}
+
 // 是否加载中标记
 const isLoading = ref(false)
 
 // 页面加载
 onLoad(async () => {
   isLoading.value = true
-  await Promise.all([getHomeBannerData(), getHomeCategoryData()])
+  await Promise.all([getHomeBannerData(), getHomeCategoryData(), getHomeHotData()])
   isLoading.value = false
 })
 </script>
diff --git a/src/services/home.ts b/src/services/home.ts
index b527858..1e04d55 100644
--- a/src/services/home.ts
+++ b/src/services/home.ts
@@ -1,6 +1,6 @@
 // 请求封装调用
 import { http } from '@/utils/http'
-import type { BannerItem, CategoryItem } from '@/types/home'
+import type { BannerItem, CategoryItem, HotItem } from '@/types/home'
 /**
  * 首页-广告区域-小程序
  * @param distributionSite 广告区域展示位置（投放位置 投放位置，1为首页，2为分类商品页） 默认是1
@@ -24,3 +24,13 @@ export const getHomeCategoryAPI = () => {
     url: '/home/category/mutli',
   })
 }
+
+/**
+ * 首页-热门推荐-小程序
+ */
+export const getHomeHotAPI = () => {
+  return http<HotItem[]>({
+    method: 'GET',
+    url: '/home/hot/mutli',
+  })
+}
diff --git a/src/types/home.d.ts b/src/types/home.d.ts
index 364837e..a4e9753 100644
--- a/src/types/home.d.ts
+++ b/src/types/home.d.ts
@@ -19,3 +19,19 @@ export type CategoryItem = {
   /** 分类名称 */
   name: string
 }
+
+/** 首页-热门推荐数据类型 */
+export type HotItem = {
+  /** 说明 */
+  alt: string
+  /** id */
+  id: string
+  /** 图片集合[ 图片路径 ] */
+  pictures: string[]
+  /** 跳转地址 */
+  target: string
+  /** 标题 */
+  title: string
+  /** 推荐类型 */
+  type: string
+}