uniapp项目之小兔鲜儿小程序商城(三) 热门推荐页的实现,商品分类页的实现

一.热门推荐页Hot.vue

在首页中的热门推荐功能区域<HotPanel />点击时,会跳转到真正的热门推荐页hot.vue
在首页中有四个跳转方案:特惠推荐,爆款推荐,一站买全,新鲜好物
但是只要做一个热门推荐页来复用就够了,因为它们之间的结构和样式都是相同的,只有展示的数据不同

1.实现静态布局和查询参数路由跳转

1.1.新建hot页

新建uniapp页面>hot 热门推荐
粘贴静态页面结构代码如下:

// src/pages/hot/hot.vue

<script setup lang="ts">
// 热门推荐页 标题和url
const hotMap = [
  {
   
    type: '1', title: '特惠推荐', url: '/hot/preference' },
  {
   
    type: '2', title: '爆款推荐', url: '/hot/inVogue' },
  {
   
    type: '3', title: '一站买全', url: '/hot/oneStop' },
  {
   
    type: '4', title: '新鲜好物', url: '/hot/new' },
]
</script>
<template>
  <view class="viewport">
    <!-- 推荐封面图 -->
    <view class="cover">
      <image
        src="http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-05-20/84abb5b1-8344-49ae-afc1-9cb932f3d593.jpg"
      ></image>
    </view>
    <!-- 推荐选项 -->
    <view class="tabs">
      <text class="text active">抢先尝鲜</text>
      <text class="text">新品预告</text>
    </view>
    <!-- 推荐列表 -->
    <scroll-view scroll-y class="scroll-view">
      <view class="goods">
        <navigator
          hover-class="none"
          class="navigator"
          v-for="goods in 10"
          :key="goods"
          :url="`/pages/goods/goods?id=`"
        >
          <image
            class="thumb"
            src="https://yanxuan-item.nosdn.127.net/5e7864647286c7447eeee7f0025f8c11.png"
          ></image>
          <view class="name ellipsis">不含酒精，使用安心爽肤清洁湿巾</view>
          <view class="price">
            <text class="symbol">¥</text>
            <text class="number">29.90</text>
          </view>
        </navigator>
      </view>
      <view class="loading-text">正在加载...</view>
    </scroll-view>
  </view>
</template>
<style lang="scss">
page {
   
   
  height: 100%;
  background-color: #f4f4f4;
}
.viewport {
   
   
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 180rpx 0 0;
  position: relative;
}
.cover {
   
   
  width: 750rpx;
  height: 225rpx;
  border-radius: 0 0 40rpx 40rpx;
  overflow: hidden;
  position: absolute;
  left: 0;
  top: 0;
}
.scroll-view {
   
   
  flex: 1;
}
.tabs {
   
   
  display: flex;
  justify-content: space-evenly;
  height: 100rpx;
  line-height: 90rpx;
  margin: 0 20rpx;
  font-size: 28rpx;
  border-radius: 10rpx;
  box-shadow: 0 4rpx 5rpx rgba(200, 200, 200, 0.3);
  color: #333;
  background-color: #fff;
  position: relative;
  z-index: 9;
  .text {
   
   
    margin: 0 20rpx;
    position: relative;
  }
  .active {
   
   
    &::after {
   
   
      content: '';
      width: 40rpx;
      height: 4rpx;
      transform: translate(-50%);
      background-color: #27ba9b;
      position: absolute;
      left: 50%;
      bottom: 24rpx;
    }
  }
}
.goods {
   
   
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0 20rpx 20rpx;
  .navigator {
   
   
    width: 345rpx;
    padding: 20rpx;
    margin-top: 20rpx;
    border-radius: 10rpx;
    background-color: #fff;
  }
  .thumb {
   
   
    width: 305rpx;
    height: 305rpx;
  }
  .name {
   
   
    height: 88rpx;
    font-size: 26rpx;
  }
  .price {
   
   
    line-height: 1;
    color: #cf4444;
    font-size: 30rpx;
  }
  .symbol {
   
   
    font-size: 70%;
  }
  .decimal {
   
   
    font-size: 70%;
  }
}
.loading-text {
   
   
  text-align: center;
  font-size: 28rpx;
  color: #666;
  padding: 20rpx 0 50rpx;
}
</style>

1.2.查询参数传参并跳转

• 首页-热门推荐子组件HotPanel.vue==>传参

    <view class="item" v-for="item in list" :key="item.id">
		......
      <navigator hover-class="none" :url="`/pages/hot/hot?type=${item.type}`" class="cards">
  		......
      </navigator>
    </view>

• 热门推荐页hot.vue==>接收参数

// 热门推荐页 标题和url
const hotMap = [
  {
   
    type: '1', title: '特惠推荐', url: '/hot/preference' },
  {
   
    type: '2', title: '爆款推荐', url: '/hot/inVogue' },
  {
   
    type: '3', title: '一站买全', url: '/hot/oneStop' },
  {
   
    type: '4', title: '新鲜好物', url: '/hot/new' },
]

// uniapp 获取页面参数
const query = defineProps<{
   
   
  type: string
}>()
// console.log(query)
// 当前推荐类型: 1 特惠推荐,2 爆款推荐,3 一站买全,4 新鲜好物 中的一个
const currHot = hotMap.find((v) => v.type === query.type)
// 动态设置标题
uni.setNavigationBarTitle({
   
    title: currHot!.title })

疑问:hot.vue和hotPanel.vue并非父子组件关系,为何能用defineProps传值?

2.获取数据

type    推荐类型    接口路径
1    特惠推荐    /hot/preference
2    爆款推荐    /hot/inVogue
3    一站买全    /hot/oneStop
4    新鲜好物    /hot/new

Query:
字段名称    是否必须    默认值    备注
subType    否    无    推荐列表  Tab 项的 id
page       否    1     页码
pageSize

观察接口文档,四个推荐分区的接口的请求方式和请求参数是一样的,除了请求路径有所区别,
考虑把四个接口封装成同一个通用接口

2.1.封装通用接口

新建services/hot.ts
使用到了两个类型声明变量,其中

• HotParams是由PageParams(它声明过pageType和page)加上subType构成的
• 而HotResult后续会实现

import {
   
    http } from '@/utils/http'
import type {
   
    PageParams } from '@/types/global'
import type {
   
    HotResult } from '@/types/hot'

type HotParams = PageParams &