黑马 小兔鲜儿 uniapp 小程序开发- 商品详情(登录前)- day05

 本课程是全网首套用 vue3 加 TS 写的 uniapp 项目， 里面大量封装自己的组件库，课程从 uni-app 基础入手，按照9大电商业务模块逐步实现完整的电商购物流程业务；涵盖了猜你喜欢、热门推荐、商品分类、商品详情、微信登录、用户管理、地址管理、购物车管理、订单管理等功能。包含微信登录，微信支付等业务。一套代码多端全面覆盖微信小程序端、H5端、APP端。

学完本课程能够收获：使用 uni-app + Vue3 开发中型项目的能力

小兔鲜儿 - 商品详情(登录前)-day05

商品详情页分为两部分讲解：

1. 登录前：展示商品信息，轮播图交互（当前模块）
2. 登录后：加入购物车，立即购买（SKU 模块）

准备工作

参考效果

用户点击商品列表，跳转到对应的商品详情页。

静态结构

新建商品详情页。

// src/pages/goods/goods.vue

获取数据

获取页面参数

根据商品的 id 查询到某个商品的详细信息，如图片、价格、型号等展示给用户。

// 接收页面参数
const query = defineProps<{
  id: string
}>()

接口调用

接口信息如下：

接口地址：/goods

请求方式：GET

请求参数：

Query

字段名称	是否必须	默认值	备注
id	是	无	商品 id

请求封装

/**
 * 商品详情
 * @param id 商品id
 */
export const getGoodsByIdAPI = (id: string) => {
  return http({
    method: 'GET',
    url: '/goods',
    data: { id },
  })
}

类型声明

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
}

接下来，将获取到的数据结合模板语法渲染到页面中。

轮播图交互

参考效果

当轮播图滑动切换的时候更新自定义下标，当图片被点击的时候大图预览。

参考代码

商品详情页轮播图交互

弹出层交互

参考效果

uni-ui 弹出层组件：uni-popup

静态结构

提供 服务说明 和 收获地址 两个组件的静态结构，实现弹出层交互。

组件 1：服务说明

// ServicePanel.vue

组件 2：收获地址组件

// AddressPanel.vue

参考代码

商品详情页：通过组件 ref 获取弹出层组件实例，调用打开弹出层方法。

服务说明 和 收获地址 组件通讯：通过子调父，关闭弹出层。

骨架屏

参考效果

课后练习，大家自主独立完成。

参考代码(总)

商品详情页

---