6. 商品列表
接口描述:
- 商品列表搜索
请求URL:
https://api-ugo-web.itheima.net/api/public/v1/goods/search
请求方式:
- GET
参数:
参数名 | 必选 | 类型 | 说明 |
---|---|---|---|
query | 否 | string | 关键字 |
cid | 否 | string | 分类id |
pagenum | 否 | number | 页码 |
pagesize | 否 | number | 页容量 |
返回示例
{
"message": {
"total": 10,
"pagenum": 1,
"goods": [
{
"goods_id": 57445,
"cat_id": 9,
"goods_name": "创维(Skyworth)65V9E 65英寸25核4K HDR高清智能电视",
"goods_price": 6499,
"goods_number": 100,
"goods_weight": 100,
"goods_big_logo": "",
"goods_small_logo": "",
"add_time": 1516663280,
"upd_time": 1516663280,
"hot_mumber": 0,
"is_promote": false,
"cat_one_id": 1,
"cat_two_id": 3,
"cat_three_id": 9
}
]
},
"meta": {
"msg": "获取成功",
"status": 200
}
}
返回参数说明
参数名 | 参数说明 | 备注 |
total | 总条数 | |
pagenum | 当前页数 | |
goods_id | 商品ID | |
cat_id | 分类ID | |
goods_name | 商品名称 | |
goods_price | 商品价格 | |
goods_number | 商品数量 | |
goods_weight | 商品重量 | |
goods_big_logo | 商品大图标 | |
goods_small_logo | 商品小图标 | |
add_time | 商品添加时间 | |
upd_time | 商品更新时间 | |
hot_mumber | 热门商品数 | |
cat_one_id | 所属一级分类 | |
cat_two_id | 所属二级分类 | |
cat_three_id | 所属三级分类 |
6.0 创建 goodslist 分支
运行如下的命令,基于 master
分支在本地创建 goodslist
子分支,用来开发商品列表相关的功能:
git checkout -b goodslist
6.1 定义请求参数对象
为了方便发起请求获取商品列表的数据,我们要根据接口的要求,事先定义一个请求参数对象:
// goods_list.vue data() { return { // 请求参数对象 queryObj: { // 查询关键词 query: '', // 商品分类Id cid: '', // 页码值 pagenum: 1, // 每页显示多少条数据 pagesize: 10 } } }
将页面跳转时携带的参数,转存到
queryObj
对象中:onLoad(options) { // 将页面参数转存到 this.queryObj 对象中 this.queryObj.query = options.query || '' this.queryObj.cid = options.cid || '' }
- 为了方便开发商品分类页面,建议大家通过微信开发者工具,新建商品列表页面的编译模式:
>这里我选的页面参数是`query=a`,这里参数自己可以设置,只要让接口返回的数据多一点,能够测试后面要写的**上拉加载更多**就行
6.2 获取商品列表数据
在
data
中新增如下的数据节点:data() { return { // 商品列表的数据 goodsList: [], // 总数量,用来实现分页 total: 0 } }
在
onLoad
生命周期函数中,调用getGoodsList
方法获取商品列表数据:onLoad(options) { // 调用获取商品列表数据的方法 this.getGoodsList() }
在
methods
节点中,声明getGoodsList
方法如下:methods: { // 获取商品列表数据的方法 async getGoodsList() { // 发起请求 const { data: res } = await uni.$http.get('/api/public/v1/goods/search', this.queryObj) if (res.meta.status !== 200) return uni.$showMsg() // 为数据赋值 this.goodsList = res.message.goods this.total = res.message.total } }
6.3 渲染商品列表结构
在页面中,通过
v-for
指令,循环渲染出商品的 UI 结构:<template> <view> <view class="goods-list"> <block v-for="(goods, i) in goodsList" :key="i"> <view class="goods-item"> <!-- 商品左侧图片区域 --> <view class="goods-item-left"> <image :src="goods.goods_small_logo || defaultPic" class="goods-pic"></image> </view> <!-- 商品右侧信息区域 --> <view class="goods-item-right"> <!-- 商品标题 --> <view class="goods-name">{{goods.goods_name}}</view> <view class="goods-info-box"> <!-- 商品价格 --> <view class="goods-price">¥{{goods.goods_price}}</view> </view> </view> </view> </block> </view> </view> </template>
为了防止某些商品的图片不存在,需要在
data
中定义一个默认的图片:data() { return { // 默认的空图片 defaultPic: 'https://img3.doubanio.com/f/movie/8dd0c794499fe925ae2ae89ee30cd225750457b4/pics/movie/celebrity-default-medium.png' } }
并在页面渲染时按需使用:
<image :src="goods.goods_small_logo || defaultPic" class="goods-pic"></image>
美化商品列表的 UI 结构:
.goods-item { display: flex; padding: 10px 5px; border-bottom: 1px solid #f0f0f0; .goods-item-left { margin-right: 5px; .goods-pic { width: 100px; height: 100px; display: block; } } .goods-item-right { display: flex; flex-direction: column; justify-content: space-between; .goods-name { font-size: 13px; } .goods-price { font-size: 16px; color: #c00000; } } }
6.4 把商品 item 项封装为自定义组件
- 在
components
目录上鼠标右键,选择 新建组件:
将
goods_list
页面中,关于商品item
项相关的 UI 结构、样式、data
数据,封装到my-goods
组件中:<template> <view class="goods-item"> <!-- 商品左侧图片区域 --> <view class="goods-item-left"> <image :src="goods.goods_small_logo || defaultPic" class="goods-pic"></image> </view> <!-- 商品右侧信息区域 --> <view class="goods-item-right"> <!-- 商品标题 --> <view class="goods-name">{{goods.goods_name}}</view> <view class="goods-info-box"> <!-- 商品价格 --> <view class="goods-price">¥{{goods.goods_price}}</view> </view> </view> </view> </template> <script> export default { // 定义 props 属性,用来接收外界传递到当前组件的数据 props: { // 商品的信息对象 goods: { type: Object, defaul: {}, }, }, data() { return { // 默认的空图片 defaultPic: 'https://img3.doubanio.com/f/movie/8dd0c794499fe925ae2ae89ee30cd225750457b4/pics/movie/celebrity-default-medium.png', } }, } </script> <style lang="scss"> .goods-item { display: flex; padding: 10px 5px; border-bottom: 1px solid #f0f0f0; .goods-item-left { margin-right: 5px; .goods-pic { width: 100px; height: 100px; display: block; } } .goods-item-right { display: flex; flex-direction: column; justify-content: space-between; .goods-name { font-size: 13px; } .goods-price { font-size: 16px; color: #c00000; } } } </style>
在
goods_list
组件中,循环渲染my-goods
组件即可:<view class="goods-list"> <block v-for="(item, i) in goodsList" :key="i"> <!-- 为 my-goods 组件动态绑定 goods 属性的值 --> <my-goods :goods="item"></my-goods> </block> </view>
6.5 使用过滤器处理价格
在
my-goods
组件中,和data
节点平级,声明filters
过滤器节点如下:filters: { // 把数字处理为带两位小数点的数字 tofixed(num) { return Number(num).toFixed(2) } }
在渲染商品价格的时候,通过管道符
|
调用过滤器:<!-- 商品价格 --> <view class="goods-price">¥{{goods.goods_price | tofixed}}</view>
管道符可以理解为: 前一个命令的输出作为下一个命令的输入。
6.6 上拉加载更多
6.6.1 初步实现上拉加载更多
打开项目根目录中的
pages.json
配置文件,为subPackages
分包中的goods_list
页面配置上拉触底的距离:"subPackages": [ { "root": "subpkg", "pages": [ { "path": "goods_detail/goods_detail", "style": {} }, { "path": "goods_list/goods_list", "style": { "onReachBottomDistance": 150 } }, { "path": "search/search", "style": {} } ] } ]
在
goods_list
页面中,和methods
节点平级,声明onReachBottom
事件处理函数,用来监听页面的上拉触底行为:// 触底的事件 onReachBottom() { // 让页码值自增 +1 this.queryObj.pagenum += 1 // 重新获取列表数据 this.getGoodsList() }
改造
methods
中的getGoodsList
函数,当列表数据请求成功之后,进行新旧数据的拼接处理:// 获取商品列表数据的方法 async getGoodsList() { // 发起请求 const { data: res } = await uni.$http.get('/api/public/v1/goods/search', this.queryObj) if (res.meta.status !== 200) return uni.$showMsg() // 为数据赋值:通过展开运算符的形式,进行新旧数据的拼接 this.goodsList = [...this.goodsList, ...res.message.goods] this.total = res.message.total }
6.6.2 通过节流阀防止发起额外的请求
在
data
中定义isloading
节流阀如下:data() { return { // 是否正在请求数据 isloading: false } }
修改
getGoodsList
方法,在请求数据前后,分别打开和关闭节流阀:// 获取商品列表数据的方法 async getGoodsList() { // ** 打开节流阀 this.isloading = true // 发起请求 const { data: res } = await uni.$http.get('/api/public/v1/goods/search', this.queryObj) // ** 关闭节流阀 this.isloading = false // 省略其它代码... }
在
onReachBottom
触底事件处理函数中,根据节流阀的状态,来决定是否发起请求:// 触底的事件 onReachBottom() { // 判断是否正在请求其它数据,如果是,则不发起额外的请求 if (this.isloading) return this.queryObj.pagenum += 1 this.getGoodsList() }
6.6.3 判断数据是否加载完毕
如果下面的公式成立,则证明没有下一页数据了:
当前的页码值 * 每页显示多少条数据 >= 总数条数 pagenum * pagesize >= total
修改
onReachBottom
事件处理函数如下:// 触底的事件 onReachBottom() { // 判断是否还有下一页数据 if (this.queryObj.pagenum * this.queryObj.pagesize >= this.total) return uni.$showMsg('数据加载完毕!') // 判断是否正在请求其它数据,如果是,则不发起额外的请求 if (this.isloading) return this.queryObj.pagenum += 1 this.getGoodsList() }
6.7 下拉刷新
在
pages.json
配置文件中,为当前的goods_list
页面单独开启下拉刷新效果:"subPackages": [{ "root": "subpkg", "pages": [{ "path": "goods_detail/goods_detail", "style": {} }, { "path": "goods_list/goods_list", "style": { "onReachBottomDistance": 150, "enablePullDownRefresh": true, "backgroundColor": "#F8F8F8" } }, { "path": "search/search", "style": {} }] }]
监听页面的
onPullDownRefresh
事件处理函数:// 下拉刷新的事件 onPullDownRefresh() { // 1. 重置关键数据 this.queryObj.pagenum = 1 this.total = 0 this.isloading = false this.goodsList = [] // 2. 重新发起请求 this.getGoodsList(() => uni.stopPullDownRefresh()) }
修改
getGoodsList
函数,接收cb
回调函数并按需进行调用:// 获取商品列表数据的方法 async getGoodsList(cb) { this.isloading = true const { data: res } = await uni.$http.get('/api/public/v1/goods/search', this.queryObj) this.isloading = false // 只要数据请求完毕,就立即按需调用 cb 回调函数 cb && cb() if (res.meta.status !== 200) return uni.$showMsg() this.goodsList = [...this.goodsList, ...res.message.goods] this.total = res.message.total }
6.8 点击商品 item 项跳转到详情页面
将循环时的
block
组件修改为view
组件,并绑定click
点击事件处理函数:<view class="goods-list"> <view v-for="(item, i) in goodsList" :key="i" @click="gotoDetail(item)"> <!-- 为 my-goods 组件动态绑定 goods 属性的值 --> <my-goods :goods="item"></my-goods> </view> </view>
在
methods
节点中,定义gotoDetail
事件处理函数:// 点击跳转到商品详情页面 gotoDetail(item) { uni.navigateTo({ url: '/subpkg/goods_detail/goods_detail?goods_id=' + item.goods_id }) }
6.9 分支的合并与提交
将
goodslist
分支进行本地提交:git add . git commit -m "完成了商品列表页面的开发"
将本地的
goodslist
分支推送到码云:git push -u origin goodslist
将本地
goodslist
分支中的代码合并到master
分支:git checkout master git merge goodslist git push
删除本地的
goodslist
分支:git branch -d goodslist
7. 商品详情
简要描述:
- 商品详情
请求URL:
https://api-ugo-web.itheima.net/api/public/v1/goods/detail
请求方式:
- GET
参数:
参数名 | 必选 | 类型 | 说明 |
---|---|---|---|
goods_id | 是 | number | 商品id |
返回示例
{
"message": {
"goods_id": 8888,
"cat_id": 1085,
"goods_name": "spike 经典武士大马士革直刀(微型) 户外野营直刀 收藏礼品刀 饰品刀具",
"goods_price": 500,
"goods_number": 100,
"goods_weight": 100,
"goods_introduce": "富文本内容",
"goods_state": 2,
"is_del": "0",
"add_time": 1516361489,
"upd_time": 1516361489,
"delete_time": null,
"hot_mumber": 0,
"is_promote": false,
"cat_one_id": 995,
"cat_two_id": 1075,
"cat_three_id": 1085,
"goods_cat": "995,1075,1085",
"pics": [
{
"pics_id": 38711,
"goods_id": 8888,
"pics_big": "http://image1.suning.cn/uimg/b2c/newcatentries/0070134290-000000000149003877_1_800x800.jpg",
"pics_mid": "http://image1.suning.cn/uimg/b2c/newcatentries/0070134290-000000000149003877_1_400x400.jpg",
"pics_sma": "http://image1.suning.cn/uimg/b2c/newcatentries/0070134290-000000000149003877_1_200x200.jpg",
"pics_big_url": "http://image1.suning.cn/uimg/b2c/newcatentries/0070134290-000000000149003877_1_800x800.jpg",
"pics_mid_url": "http://image1.suning.cn/uimg/b2c/newcatentries/0070134290-000000000149003877_1_400x400.jpg",
"pics_sma_url": "http://image1.suning.cn/uimg/b2c/newcatentries/0070134290-000000000149003877_1_200x200.jpg"
}
],
"attrs": [
{
"goods_id": 8888,
"attr_id": 9210,
"attr_value": "户外直刀",
"add_price": 0,
"attr_name": "主体参数-类别",
"attr_sel": "only",
"attr_write": "manual",
"attr_vals": "放大镜"
}
]
},
"meta": {
"msg": "获取成功",
"status": 200
}
}
返回参数说明
参数名 | 参数说明 | 备注 |
goods_id | 商品ID | |
cat_id | 分类ID | |
goods_name | 商品名称 | |
goods_price | 商品价格 | |
goods_number | 商品数量 | |
goods_weight | 商品重量 | |
goods_big_logo | 商品大图标 | |
goods_small_logo | 商品小图标 | |
add_time | 商品添加时间 | |
upd_time | 商品更新时间 | |
hot_mumber | 热门商品数 | |
cat_one_id | 所属一级分类 | |
cat_two_id | 所属二级分类 | |
cat_three_id | 所属三级分类 | |
goods_introduce | 商品介绍 | |
pics | 商品图片列表 | |
attrs | 商品属性列表 |
7.0 创建 goodsdetail 分支
运行如下的命令,基于 master 分支在本地创建 goodsdetail 子分支,用来开发商品详情页相关的功能:
git checkout -b goodsdetail
7.1 添加商品详情页的编译模式
- 在微信开发者工具中,点击工具栏上的编译模式下拉菜单,选择
添加编译模式
选项:
- 勾选
启动页面
的路径,并填写了启动参数
之后,点击确定
按钮,添加详情页面的编译模式:
7.2 获取商品详情数据
在
data
中定义商品详情的数据节点:data() { return { // 商品详情对象 goods_info: {} } }
在
onLoad
中获取商品的Id
,并调用请求商品详情的方法:onLoad(options) { // 获取商品 Id const goods_id = options.goods_id // 调用请求商品详情数据的方法 this.getGoodsDetail(goods_id) }
在
methods
中声明getGoodsDetail
方法:methods: { // 定义请求商品详情数据的方法 async getGoodsDetail(goods_id) { const { data: res } = await uni.$http.get('/api/public/v1/goods/detail', { goods_id }) if (res.meta.status !== 200) return uni.$showMsg() // 为 data 中的数据赋值 this.goods_info = res.message } }
7.3 渲染商品详情页的 UI 结构
7.3.1 渲染轮播图区域
使用
v-for
指令,循环渲染如下的轮播图 UI 结构:<!-- 轮播图区域 --> <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true"> <swiper-item v-for="(item, i) in goods_info.pics" :key="i"> <image :src="item.pics_big"></image> </swiper-item> </swiper>
美化轮播图的样式:
swiper { height: 750rpx; image { width: 100%; height: 100%; } }
7.3.2 实现轮播图预览效果
为轮播图中的
image
图片绑定click
事件处理函数:<swiper-item v-for="(item, i) in goods_info.pics" :key="i"> <!-- 把当前点击的图片的索引,传递到 preview() 处理函数中 --> <image :src="item.pics_big" @click="preview(i)"></image> </swiper-item>
在
methods
中定义preview
事件处理函数:// 实现轮播图的预览效果 preview(i) { // 调用 uni.previewImage() 方法预览图片 uni.previewImage({ // 预览时,默认显示图片的索引 current: i, // 所有图片 url 地址的数组 urls: this.goods_info.pics.map(x => x.pics_big) }) }
7.3.3 渲染商品信息区域
定义商品信息区域的 UI 结构如下:
<!-- 商品信息区域 --> <view class="goods-info-box"> <!-- 商品价格 --> <view class="price">¥{{goods_info.goods_price}}</view> <!-- 信息主体区域 --> <view class="goods-info-body"> <!-- 商品名称 --> <view class="goods-name">{{goods_info.goods_name}}</view> <!-- 收藏 --> <view class="favi"> <uni-icons type="star" size="18" color="gray"></uni-icons> <text>收藏</text> </view> </view> <!-- 运费 --> <view class="yf">快递:免运费</view> </view>
美化商品信息区域的样式:
// 商品信息区域的样式 .goods-info-box { padding: 10px; padding-right: 0; .price { color: #c00000; font-size: 18px; margin: 10px 0; } .goods-info-body { display: flex; justify-content: space-between; .goods-name { font-size: 13px; padding-right: 10px; } // 收藏区域 .favi { width: 120px; font-size: 12px; display: flex; flex-direction: column; justify-content: center; align-items: center; border-left: 1px solid #efefef; color: gray; } } // 运费 .yf { margin: 10px 0; font-size: 12px; color: gray; } }
7.3.4 渲染商品详情信息
在页面结构中,使用
rich-text
组件,将带有HTML
标签的内容,渲染为小程序的页面结构:<!-- 商品详情信息 --> <rich-text :nodes="goods_info.goods_introduce"></rich-text>
修改
getGoodsDetail
方法,从而解决图片底部空白间隙
的问题:// 定义请求商品详情数据的方法 async getGoodsDetail(goods_id) { const { data: res } = await uni.$http.get('/api/public/v1/goods/detail', { goods_id }) if (res.meta.status !== 200) return uni.$showMsg() // 使用字符串的 replace() 方法,为 img 标签添加行内的 style 样式,从而解决图片底部空白间隙的问题 res.message.goods_introduce = res.message.goods_introduce.replace(/<img /g, '<img style="display:block;" ') this.goods_info = res.message }
解决
.webp
格式图片在ios
设备上无法正常显示的问题:// 定义请求商品详情数据的方法 async getGoodsDetail(goods_id) { const { data: res } = await uni.$http.get('/api/public/v1/goods/detail', { goods_id }) if (res.meta.status !== 200) return uni.$showMsg() // 使用字符串的 replace() 方法,将 webp 的后缀名替换为 jpg 的后缀名 res.message.goods_introduce = res.message.goods_introduce.replace(/<img /g, '<img style="display:block;" ').replace(/webp/g, 'jpg') this.goods_info = res.message }
7.3.5 解决商品价格闪烁的问题
- 导致问题的原因:在商品详情数据请求回来之前,data 中
goods_info
的值为{}
,因此初次渲染页面时,会导致商品价格、商品名称
等闪烁的问题。 解决方案:判断
goods_info.goods_name
属性的值是否存在,从而使用v-if
指令控制页面的显示与隐藏:<template> <!-- 商品价格 --> <view class="price" v-if="goods_info.goods_price"> <!-- 省略其它代码 --> </view> <!-- 商品名称 --> <view class="goods-name" v-if="goods_info.goods_name"> <!-- 省略其它代码 --> </view> </template>
7.4 渲染详情页底部的商品导航区域
7.4.1 渲染商品导航区域的 UI 结构
基于uni-ui
提供的GoodsNav
组件来实现商品导航区域的效果
在
data
中,通过options
和buttonGroup
两个数组,来声明商品导航组件的按钮配置对象:data() { return { // 商品详情对象 goods_info: {}, // 左侧按钮组的配置对象 options: [{ icon: 'shop', text: '店铺' }, { icon: 'cart', text: '购物车', info: 2 }], // 右侧按钮组的配置对象 buttonGroup: [{ text: '加入购物车', backgroundColor: '#ff0000', color: '#fff' }, { text: '立即购买', backgroundColor: '#ffa200', color: '#fff' } ] } }
在页面中使用
uni-goods-nav
商品导航组件:<!-- 商品导航组件 --> <view class="goods_nav"> <!-- fill 控制右侧按钮的样式 --> <!-- options 左侧按钮的配置项 --> <!-- buttonGroup 右侧按钮的配置项 --> <!-- click 左侧按钮的点击事件处理函数 --> <!-- buttonClick 右侧按钮的点击事件处理函数 --> <uni-goods-nav :fill="true" :options="options" :buttonGroup="buttonGroup" @click="onClick" @buttonClick="buttonClick" /> </view>
美化商品导航组件,使之固定在页面最底部:
.goods-detail-container { // 给页面外层的容器,添加 50px 的内padding, // 防止页面内容被底部的商品导航组件遮盖 padding-bottom: 50px; } .goods_nav { // 为商品导航组件添加固定定位 position: fixed; bottom: 0; left: 0; width: 100%; }
7.4.2 点击跳转到购物车页面
点击商品导航组件左侧的按钮,会触发
uni-goods-nav
的@click
事件处理函数,事件对象e
中会包含当前点击的按钮相关的信息:// 左侧按钮的点击事件处理函数 onClick(e) { console.log(e) }
打印的按钮信息对象如下:
根据
e.content.text
的值,来决定进一步的操作:// 左侧按钮的点击事件处理函数 onClick(e) { if (e.content.text === '购物车') { // 切换到购物车页面 uni.switchTab({ url: '/pages/cart/cart' }) } }
7.5 分支的合并与提交
将
goodsdetail
分支进行本地提交:git add . git commit -m "完成了商品详情页面的开发"
将本地的
goodsdetail
分支推送到码云:git push -u origin goodsdetail
将本地
goodsdetail
分支中的代码合并到master
分支:git checkout master git merge goodsdetail git push
删除本地的
goodsdetail
分支:git branch -d goodsdetail