feat: ✨ 首页猜你喜欢

src/components/JbcGuess.vue

@@ -0,0 +1,153 @@
+<template>
+  <!-- 猜你喜欢 -->
+  <view class="caption">
+    <text class="text">猜你喜欢</text>
+  </view>
+  <view class="guess">
+    <navigator
+      class="guess-item"
+      v-for="item in guessList"
+      :key="item.id"
+      :url="`/pages/goods/goods?id=${item.id}`"
+    >
+      <image class="image" mode="aspectFill" :src="item.picture"></image>
+      <view class="name"> {{ item.name }} </view>
+      <view class="price">
+        <text class="small">¥</text>
+        <text>{{ item.price }}</text>
+      </view>
+    </navigator>
+  </view>
+  <view class="loading-text">
+    {{ finish ? '没有更多数据~' : '正在加载...' }}
+  </view>
+</template>
+
+<script setup lang="ts">
+import type { GuessItem } from '@/types/home'
+import { getGuessLike } from '@/services/home'
+import { onBeforeMount, ref, defineExpose } from 'vue'
+import type { PageParams } from '@/types/global'
+
+// 分页参数
+const pageParams: Required<PageParams> = {
+  page: 1,
+  pageSize: 10,
+}
+
+// 获取猜你喜欢数据
+const guessList = ref<GuessItem[]>([])
+// 已结束标记
+const finish = ref(false)
+const getGuessList = async () => {
+  // 退出分页判断
+  if (finish.value === true) {
+    return uni.showToast({ icon: 'none', title: '没有更多数据~' })
+  }
+  const res = await getGuessLike(pageParams)
+  // 追加数据
+  guessList.value.push(...res.result.items)
+  // 更新分页参数
+  if (res.result.page < res.result.pages) {
+    pageParams.page++
+  } else {
+    finish.value = true
+  }
+}
+
+// 重置数据
+const resetData = () => {
+  pageParams.page = 1
+  guessList.value = []
+  finish.value = false
+}
+
+// 页面挂载前
+onBeforeMount(() => {
+  getGuessList()
+})
+
+// 暴露方法
+defineExpose({
+  resetData,
+  getMore: getGuessList,
+})
+</script>
+
+<style lang="scss">
+:host {
+  display: block;
+}
+/* 分类标题 */
+.caption {
+  display: flex;
+  justify-content: center;
+  line-height: 1;
+  padding: 36rpx 0 40rpx;
+  font-size: 32rpx;
+  color: #262626;
+  .text {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 0 28rpx 0 30rpx;
+
+    &::before,
+    &::after {
+      content: '';
+      width: 20rpx;
+      height: 20rpx;
+      background-image: url(@/static/images/bubble.png);
+      background-size: contain;
+      margin: 0 10rpx;
+    }
+  }
+}
+
+/* 猜你喜欢 */
+.guess {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  padding: 0 20rpx;
+  .guess-item {
+    width: calc(375rpx - 60rpx);
+    padding: 24rpx 20rpx 20rpx;
+    margin-bottom: 20rpx;
+    border-radius: 10rpx;
+    overflow: hidden;
+    background-color: #fff;
+  }
+  .image {
+    width: 304rpx;
+    height: 304rpx;
+  }
+  .name {
+    height: 75rpx;
+    margin: 10rpx 0;
+    font-size: 26rpx;
+    color: #262626;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+  }
+  .price {
+    line-height: 1;
+    padding-top: 4rpx;
+    color: #cf4444;
+    font-size: 26rpx;
+  }
+  .small {
+    font-size: 80%;
+  }
+}
+// 加载提示文字
+.loading-text {
+  text-align: center;
+  font-size: 28rpx;
+  color: #666;
+  padding: 20rpx 0;
+}
+</style>

src/pages/index/components/HotPanel.vue

@@ -45,6 +45,7 @@ defineProps<{
     font-size: 32rpx;
     color: #262626;
     position: relative;
+
     .title-desc {
       font-size: 24rpx;
       color: #7f7f7f;
@@ -59,20 +60,25 @@ defineProps<{
     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;

src/pages/index/index.vue

@@ -3,13 +3,15 @@
     <!-- 自定义导航栏 -->
     <CustomNavbar />
     <!-- 滚动容器 -->
-    <scroll-view scroll-y class="scrool-view" refresher-enabled>
+    <scroll-view scroll-y enable-back-to-top class="scrool-view" @scrolltolower="onScrollToLower">
       <!-- 轮播图 -->
       <JbcSwiper :list="bannerList" />
       <!-- 分类 -->
       <CategoryPanel :list="categoryList" />
       <!-- 热门 -->
       <HotPanel :list="hotList" />
+      <!-- 猜你喜欢 -->
+      <JbcGuess ref="guessRef" />
     </scroll-view>
   </view>
 </template>
@@ -22,6 +24,7 @@ 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'
+import type { JbcGuessInstance } from '@/types/components'
 
 // 获取轮播图数据
 const bannerList = ref<BannerItem[]>([])
@@ -42,8 +45,17 @@ const hotList = ref<HotItem[]>([])
 const getHotList = async () => {
   const res = await getHomeHot()
   hotList.value = res.result
-  console.log('hotList: ', hotList.value)
 }
+
+// 猜你喜欢 实例
+const guessRef = ref<JbcGuessInstance>()
+
+// 滚动到底部调用子组件的方法
+const onScrollToLower = () => {
+  guessRef.value?.getMore()
+}
+
+// 页面加载勾子
 onLoad(() => {
   getBannerList()
   getCategoryList()
@@ -59,12 +71,12 @@ page {
 }
 
 .viewport {
-  height: 100%;
   display: flex;
   flex-direction: column;
+  height: 100%;
 }
 
-.scroll-view {
+.scrool-view {
   flex: 1;
   overflow: hidden;
 }

src/services/home.ts

@@ -1,4 +1,5 @@
-import type { BannerItem, CategoryItem, HotItem } from '@/types/home'
+import type { PageParams, PageResult } from '@/types/global'
+import type { BannerItem, CategoryItem, GuessItem, HotItem } from '@/types/home'
 import { http } from '@/utils/http'
 
 /**
@@ -37,3 +38,16 @@ export const getHomeHot = () => {
     method: 'GET',
   })
 }
+
+/**
+ * 获取首页猜你喜欢
+ * @param data - 分页参数
+ * @returns 猜你喜欢数据
+ */
+export const getGuessLike = (data?: PageParams) => {
+  return http<PageResult<GuessItem>>({
+    url: '/home/goods/guessLike',
+    method: 'GET',
+    data,
+  })
+}

src/types/components.d.ts

@@ -1,10 +1,13 @@
 import JbcSwiper from '@/components/JbcSwiper.vue'
+import JbcGuess from '@/components/JbcGuess.vue'
 
 declare module 'vue' {
   export interface GlobalComponents {
     JbcSwiper: typeof JbcSwiper
+    JbcGuess: typeof JbcGuess
   }
 }
 
 // 组件实例类型
 export type JbcSwiperInstance = InstanceType<typeof JbcSwiper>
+export type JbcGuessInstance = InstanceType<typeof JbcGuess>