热门推荐的数据获取类型定义和页面渲染还有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>
}

 现在类型定义就完成了，下面进行渲染，tab交互

 

 我们下面就可以看一下效果了