热门推荐的数据获取类型定义和页面渲染还有tab交互

热门推荐-获取热门推荐数据

封装通用接口-》初始化调用

我们看接口文档

我们发现这个参数的格式都是一样的，同样的返回值，只有路径不同,因此我们做了如下的封装操作

这里的分页是调用的这里

从后台获取数据

下面开始类型的定义

这个可以观察一下，发现

// src/types/global.d.ts
/** 通用商品类型 */
export type GoodsItem = {
  /** 商品描述 */
  desc: string
  /** 商品折扣 */
  discount: number
  /** id */
  id: string
  /** 商品名称 */
  name: string
  /** 商品已下单数量 */
  orderNum: number
  /** 商品图片 */
  picture: string
  /** 商品价格 */
  price: number
}

发现是一样的因此我们直接可以：

热门推荐类型如下，新建 src/types/hot.d.ts 文件：

import type { PageResult, GoodsItem } from './global'

/** 热门推荐 */
export type HotResult = {
  /** id信息 */
  id: string
  /** 活动图片 */
  bannerPicture: string
  /** 活动标题 */
  title: string
  /** 子类选项 */
  subTypes: SubTypeItem[]
}

/** 热门推荐-子类选项 */
export type SubTypeItem = {
  /** 子类id */
  id: string
  /** 子类标题 */
  title: string
  /** 子类对应的商品集合 */
  goodsItems: PageResult<GoodsItem>
}