猜你喜欢布局与接口

src/components/XtxGuess.vue

@@ -0,0 +1,119 @@
+<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"> 正在加载... </view>
+</template>
+
+<script setup lang="ts">
+import type { GuessItem } from '@/types/home'
+import { getHomeGoodsGuessLikeAPI } from '@/services/home'
+import { onMounted, ref } from 'vue'
+// 猜你喜欢的列表
+const guessList = ref<GuessItem[]>([])
+
+// 获取猜你喜欢数据
+const getHomeGoodsGuessLikeData = async () => {
+  const res = await getHomeGoodsGuessLikeAPI()
+  guessList.value = res.result.items
+}
+
+// 组件挂载完毕
+onMounted(() => {
+  getHomeGoodsGuessLikeData()
+})
+</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: 345rpx;
+    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/index.vue

@@ -1,14 +1,18 @@
 <template>
-  <view>
+  <view class="viewport">
     <!-- 自定义导航栏 -->
     <CustomNavbar />
-    <PageSkeleton v-if="isLoading" />
-    <!-- 自定义轮播图 -->
-    <XtxSwiper :list="bannerList" />
-    <!-- 分类面板 -->
-    <CategoryPanel :list="categoryList" />
-    <!-- 热门推荐 -->
-    <HotPanel :list="hotList" />
+    <scroll-view class="scroll-view" scroll-y>
+      <PageSkeleton v-if="isLoading" />
+      <!-- 自定义轮播图 -->
+      <XtxSwiper :list="bannerList" />
+      <!-- 分类面板 -->
+      <CategoryPanel :list="categoryList" />
+      <!-- 热门推荐 -->
+      <HotPanel :list="hotList" />
+      <!-- 猜你喜欢 -->
+      <XtxGuess />
+    </scroll-view>
   </view>
 </template>
 
@@ -16,7 +20,6 @@
 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, getHomeHotAPI } from '@/services/home'
@@ -55,5 +58,20 @@ onLoad(async () => {
 </script>
 
 <style lang="scss">
-//
+page {
+  background-color: #f7f7f7;
+  height: 100%;
+  overflow: hidden;
+}
+
+.viewport {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.scroll-view {
+  flex: 1;
+  overflow: hidden;
+}
 </style>

src/services/home.ts

@@ -1,6 +1,7 @@
 // 请求封装调用
 import { http } from '@/utils/http'
-import type { BannerItem, CategoryItem, HotItem } from '@/types/home'
+import type { BannerItem, CategoryItem, HotItem, GuessItem } from '@/types/home'
+import type { PageParams, PageResult } from '@/types/global'
 /**
  * 首页-广告区域-小程序
  * @param distributionSite 广告区域展示位置（投放位置 投放位置，1为首页，2为分类商品页） 默认是1
@@ -34,3 +35,14 @@ export const getHomeHotAPI = () => {
     url: '/home/hot/mutli',
   })
 }
+
+/**
+ * 猜你喜欢-小程序
+ */
+export const getHomeGoodsGuessLikeAPI = (data?: PageParams) => {
+  return http<PageResult<GuessItem>>({
+    method: 'GET',
+    url: '/home/goods/guessLike',
+    data,
+  })
+}

src/types/component.d.ts

@@ -7,5 +7,6 @@ import 'vue'
 declare module 'vue' {
   export interface GlobalComponents {
     XtxSwiper: typeof XtxSwiper
+    XtxGuess: typeof XtxGuess
   }
 }

src/types/global.d.ts

@@ -0,0 +1,13 @@
+/** 通用分页结果类型 */
+export type PageResult<T> = {
+  /** 列表数据 */
+  items: T[]
+  /** 总条数 */
+  counts: number
+  /** 当前页数 */
+  page: number
+  /** 总页数 */
+  pages: number
+  /** 每页条数 */
+  pageSize: number
+}

src/types/home.d.ts

@@ -35,3 +35,21 @@ export type HotItem = {
   /** 推荐类型 */
   type: string
 }
+
+/** 猜你喜欢-商品类型 */
+export type GuessItem = {
+  /** 商品描述 */
+  desc: string
+  /** 商品折扣 */
+  discount: number
+  /** id */
+  id: string
+  /** 商品名称 */
+  name: string
+  /** 商品已下单数量 */
+  orderNum: number
+  /** 商品图片 */
+  picture: string
+  /** 商品价格 */
+  price: number
+}