一 首页-广告区域-小程序
首页-广告区域-小程序
GET
/home/banner
1.1 请求封装 首页-广告区域
home.ts
export const getHomeBannerApi = (distributionSite = 1) => {return http<BannerItem[]>({method: 'GET',url: '/home/banner',data: {distributionSite,},})
}
函数定义：
- getHomeBannerApi 是一个导出的常量函数。
- 它接收一个可选参数 distributionSite，默认值为 1。
HTTP 请求配置：
-
method: ‘GET’：指定请求方法为 GET。
-
url: ‘/home/banner’：请求的 URL。
-
data: { distributionSite }：请求的参数。
返回值：
- 函数返回 http<BannerItem[]>(…) 的结果。
{"msg": "string","result": [{"id": "string","imgUrl": "string","hrefUrl": "string","type": 0}]
}
2 定义返回值类型
/** 首页-广告区域数据类型 */
export type BannerItem = {/** 跳转链接 */hrefUrl : string/** id */id : string/** 图片链接 */imgUrl : string/** 跳转类型 */type : number
}
3 方法调用
const bannerList = ref<BannerItem[]>([])const getBannerData = () => {getHomeBannerApi().then((res) => {bannerList.value = res.result})}
二 猜你喜欢-小程序
1 封装请求
export const getGuessListApi=((data?:PageParams)=>{return http<PageResult<GuessItem[]>>({method:"GET",url:'/home/goods/guessLike',data})
})函数定义：
- getGuessListApi 是一个导出的常量函数。
- 它接收一个可选参数 data，类型为 PageParams。
HTTP 请求配置：
-
method: ‘GET’：指定请求方法为 GET。
-
url: ‘/home/goods/guessLike’：请求的 URL。
-
data：请求的参数（可选）。
返回值：
- 函数返回 http<PageResult<GuessItem[]>>(…) 的结果。
- http 是一个泛型函数，<PageResult<GuessItem[]>> 表示期望的响应数据类型是一个分页结果，其中 data 字段是 GuessItem 数组。
2 返回值类型定义
/** 通用分页结果类型 */
export type PageResult<T> = {/** 列表数据 */items: T[]/** 总条数 */counts: number/** 当前页数 */page: number/** 总页数 */pages: number/** 每页条数 */pageSize: number
}
- PageResult 是一个泛型类型，T 表示列表中每一项的数据类型。
- 例如，如果 T 是 GuessItem，那么 items 的类型就是 GuessItem[]。
3 请求值类型定义
export type PageParams = {/** 页码：默认值为 1 */page?: number/** 页大小：默认值为 10 */pageSize?: number
}
4 方法调用
const guessList = ref<GuressItem[]>([]);// 分页参数const pageParams : Required<PageParams> = {page: 1,pageSize: 10}const flag = ref(false)const getGuessLike = (() => {if (flag.value) {return uni.showToast({icon: 'none',title: "没有更多数据了"})}getGuessListApi(pageParams).then(res => {guessList.value = guessList.value.concat(res.result.items)if (pageParams.page < res.result.pages) {pageParams.page++} else {flag.value = true}})})
三 商品详情
1 请求封装
/*** 商品详情* @param id 商品id*/
export const getGoodsByIdAPI = (id: string) => {return http<GoodsResult>({method: 'GET',url: '/goods',data: { id },})
}2 返回值类型定义
import type { GoodsItem } from './global'/** 商品信息 */
export type GoodsResult = {/** id */id: string/** 商品名称 */name: string/** 商品描述 */desc: string/** 当前价格 */price: number/** 原价 */oldPrice: number/** 商品详情: 包含详情属性 + 详情图片 */details: Details/** 主图图片集合[ 主图图片链接 ] */mainPictures: string[]/** 同类商品[ 商品信息 ] */similarProducts: GoodsItem[]/** sku集合[ sku信息 ] */skus: SkuItem[]/** 可选规格集合备注[ 可选规格信息 ] */specs: SpecItem[]/** 用户地址列表[ 地址信息 ] */userAddresses: AddressItem[]
}/** 商品详情: 包含详情属性 + 详情图片 */
export type Details = {/** 商品属性集合[ 属性信息 ] */properties: DetailsPropertyItem[]/** 商品详情图片集合[ 图片链接 ] */pictures: string[]
}/** 属性信息 */
export type DetailsPropertyItem = {/** 属性名称 */name: string/** 属性值 */value: string
}/** sku信息 */
export type SkuItem = {/** id */id: string/** 库存 */inventory: number/** 原价 */oldPrice: number/** sku图片 */picture: string/** 当前价格 */price: number/** sku编码 */skuCode: string/** 规格集合[ 规格信息 ] */specs: SkuSpecItem[]
}/** 规格信息 */
export type SkuSpecItem = {/** 规格名称 */name: string/** 可选值名称 */valueName: string
}/** 可选规格信息 */
export type SpecItem = {/** 规格名称 */name: string/** 可选值集合[ 可选值信息 ] */values: SpecValueItem[]
}/** 可选值信息 */
export type SpecValueItem = {/** 是否可售 */available: boolean/** 可选值备注 */desc: string/** 可选值名称 */name: string/** 可选值图片链接 */picture: string
}/** 地址信息 */
export type AddressItem = {/** 收货人姓名 */receiver: string/** 联系方式 */contact: string/** 省份编码 */provinceCode: string/** 城市编码 */cityCode: string/** 区/县编码 */countyCode: string/** 详细地址 */address: string/** 默认地址，1为是，0为否 */isDefault: number/** 收货地址 id */id: string/** 省市区 */fullLocation: string
}3 方法调用
const goods = ref<GoodsResult>()const getGoodsInfo = (() => {getGoodsByIdAPI(query.id).then(res => {goods.value = res.result})})
四 小程序登录
1 请求封装
export const postLoginWxMinAPI = (data:LoginParams) => {return http<LoginResult>({method: 'POST',url: '/login/wxMin',data,})
}
2 定义请求值类型
/*** 小程序登录* @param data 请求参数*/
type LoginParams={code:string,encryptedData:string,iv:string
}
3 定义返回值类型
//通用的用户信息
type BaseProfile={/** 用户ID */id: number/** 头像 */avatar: string/** 账户名 */account: string/** 昵称 */nickname?: string
}/** 小程序登录 登录用户信息 */
export type LoginResult = BaseProfile & {/** 手机号 */mobile: string/** 登录凭证 */token: string
}
- LoginResult 是基于 BaseProfile 的扩展类型，使用 &（相当于javaextend继承） 进行类型合并。
- 它包含了 BaseProfile 的所有字段，并新增了 mobile 和 token 字段。
4 方法调用
const onGetphonenumber : UniHelper.ButtonOnGetphonenumber = ((e) => {const encryptedData = e.detail!.encryptedData!const iv = e.detail!.iv!postLoginWxMinAPI({code,encryptedData,iv}).then(res => {console.log(res);loginSuccess(res.result)})})const loginSuccess = (profile : LoginResult) => {// 保存会员信息const memberStore = useMemberStore()memberStore.setProfile(profile)// 成功提示uni.showToast({ icon: 'success', title: '登录成功' })setTimeout(() => {// 页面跳转uni.navigateBack()}, 500)}
五 新建地址
1 请求封装
/*** 添加收货地址* @param data 请求参数*/
export const postMemberAddressAPI = (data: AddressParams) => {return http({method: 'POST',url: '/member/address',data,})
}
2 参数定义
/** 添加收货地址: 请求参数 */
export type AddressParams = {/** 收货人姓名 */receiver: string/** 联系方式 */contact: string/** 省份编码 */provinceCode: string/** 城市编码 */cityCode: string/** 区/县编码 */countyCode: string/** 详细地址 */address: string/** 默认地址，1为是，0为否 */isDefault: number
}
3 方法调用
// 表单数据
const form = ref({receiver: '', // 收货人contact: '', // 联系方式fullLocation: '', // 省市区(前端展示)provinceCode: '', // 省份编码(后端参数)cityCode: '', // 城市编码(后端参数)countyCode: '', // 区/县编码(后端参数)address: '', // 详细地址isDefault: 0, // 默认地址，1为是，0为否})
postMemberAddressAPI(form.value)
六 修改地址
1 请求封装
export const putMemberAddressByIdApi=((id:string,data:AddressItem)=>{return http({method:"PUT",url:`/member/address/${id}`,data})
})
2 参数定义
/** 添加收货地址: 请求参数 */
export type AddressParams = {/** 收货人姓名 */receiver: string/** 联系方式 */contact: string/** 省份编码 */provinceCode: string/** 城市编码 */cityCode: string/** 区/县编码 */countyCode: string/** 详细地址 */address: string/** 默认地址，1为是，0为否 */isDefault: number
}export type AddressItem= AddressParams &{id:string,fullLocation:string,
}
3 方法调用
// 表单数据const form = ref({receiver: '', // 收货人contact: '', // 联系方式fullLocation: '', // 省市区(前端展示)provinceCode: '', // 省份编码(后端参数)cityCode: '', // 城市编码(后端参数)countyCode: '', // 区/县编码(后端参数)address: '', // 详细地址isDefault: 0, // 默认地址，1为是，0为否})
putMemberAddressByIdApi(query.id, form.value)
