feat: ✨ 首页热门

src/pages.json

@@ -47,6 +47,12 @@
       "style": {
         "navigationBarTitleText": "登录"
       }
+    },
+    {
+      "path": "pages/hot/hot",
+      "style": {
+        "navigationBarTitleText": "hot"
+      }
     }
   ],
   // 全局样式

src/pages/hot/hot.vue

@@ -0,0 +1,7 @@
+<template>
+  <view class="hot">hot</view>
+</template>
+
+<script lang="ts" setup></script>
+
+<style lang="scss"></style>

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: calc(50% - 1rpx);
+    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>

src/pages/index/index.vue

@@ -1,38 +1,53 @@
 <template>
-  <CustomNavbar />
+  <view class="viewport">
-  <JbcSwiper :list="bannerList" />
+    <!-- 自定义导航栏 -->
-  <CategoryPanel :list="categoryList" />
+    <CustomNavbar />
-  <view class="content"> home </view>
+    <!-- 滚动容器 -->
+    <scroll-view scroll-y class="scrool-view" refresher-enabled>
+      <!-- 轮播图 -->
+      <JbcSwiper :list="bannerList" />
+      <!-- 分类 -->
+      <CategoryPanel :list="categoryList" />
+      <!-- 热门 -->
+      <HotPanel :list="hotList" />
+    </scroll-view>
+  </view>
 </template>
 
 <script setup lang="ts">
-import type { BannerItem, CategoryItem } from '@/types/home'
+import type { BannerItem, CategoryItem, HotItem } from '@/types/home'
 import CustomNavbar from './components/CustomNavbar.vue'
 import { ref } from 'vue'
-import { getCategory, getHomeBanner } from '@/services/home'
+import { getCategory, getHomeBanner, getHomeHot } from '@/services/home'
 import { onLoad } from '@dcloudio/uni-app'
 import CategoryPanel from './components/CategoryPanel.vue'
+import HotPanel from './components/HotPanel.vue'
 
 // 获取轮播图数据
 const bannerList = ref<BannerItem[]>([])
 const getBannerList = async () => {
   const res = await getHomeBanner()
   bannerList.value = res.result
-  console.log('bannerList: ', bannerList.value)
 }
-onLoad(() => {
-  getBannerList()
-})
 
 // 获取分类数据
 const categoryList = ref<CategoryItem[]>([])
 const getCategoryList = async () => {
   const res = await getCategory()
   categoryList.value = res.result
-  console.log('categoryList: ', categoryList.value)
+}
+
+// 获取热门商品数据
+const hotList = ref<HotItem[]>([])
+const getHotList = async () => {
+  const res = await getHomeHot()
+  hotList.value = res.result
+  console.log('hotList: ', hotList.value)
 }
 onLoad(() => {
+  getBannerList()
   getCategoryList()
+  getHotList()
 })
 </script>
 
@@ -42,4 +57,15 @@ page {
   height: 100%;
   overflow: hidden;
 }
+
+.viewport {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.scroll-view {
+  flex: 1;
+  overflow: hidden;
+}
 </style>

src/services/home.ts

@@ -1,4 +1,4 @@
-import type { BannerItem, CategoryItem } from '@/types/home'
+import type { BannerItem, CategoryItem, HotItem } from '@/types/home'
 import { http } from '@/utils/http'
 
 /**
@@ -26,3 +26,14 @@ export const getCategory = () => {
     method: 'GET',
   })
 }
+
+/**
+ * 获取首页热门商品
+ * @returns 热门商品数据
+ */
+export const getHomeHot = () => {
+  return http<HotItem[]>({
+    url: '/home/hot/mutli',
+    method: 'GET',
+  })
+}