1.0 创建 goodslist 分支
1.1 定义请求参数对象
- 为了方便发起请求获取商品列表的数据,我们要根据接口的要求,事先定义一个请求参数对象:
data() {
return {
queryObj: {
query: '',
cid: '',
pagenum: 1,
pagesize: 10
}
}
}
- 将页面跳转时携带的参数,转存到 queryObj 对象中:
onLoad(options) {
this.queryObj.query = options.query || ''
this.queryObj.cid = options.cid || ''
}
- 为了方便开发商品分类页面,建议大家通过微信开发者工具,新建商品列表页面的编译模式:
1.2 获取商品列表数据
- 在 data 中新增如下的数据节点:
- 在 onLoad 生命周期函数中,调用 getGoodsList 方法获取商品列表数据:
- 在 methods 节点中,声明 getGoodsList 方法如下:
data() {
return {
goodsList: [],
total: 0
}
}
onLoad(options) {
this.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
}
}
1.3 渲染商品列表结构
- 在页面中,通过 v-for 指令,循环渲染出商品的 UI 结构:(用到了 block 空白符)
- 为了防止某些商品的图片不存在,需要在 data 中定义一个默认的图片、并在页面渲染时按需使用:
- 美化商品列表的 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() {
return {
defaultPic: 'https://img3.doubanio.com/f/movie/8dd0c794499fe925ae2ae89ee30cd225750457b4/pics/movie/celebrity-default-medium.png'
}
}
.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;
}
}
}
1.4 把商品 item 项封装为自定义组件
- 在 components 目录上鼠标右键,选择 新建组件 my-goods: (没有 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: {
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>