6. 商品列表

6.0 创建 goodslist 分支

运行如下的命令，基于 master 分支在本地创建 goodslist 子分支，用来开发商品列表相关的功能：

git checkout -b search

6.1 定义请求参数对象

1. 为了方便发起请求获取商品列表的数据，我们要根据接口的要求，事先定义一个请求参数对象：

   data() {
     return {
       // 请求参数对象
       queryObj: {
         // 查询关键词
         query: '',
         // 商品分类Id
         cid: '',
         // 页码值
         pagenum: 1,
         // 每页显示多少条数据
         pagesize: 10
       }
     }
   }
   

2. 将页面跳转时携带的参数，转存到 queryObj 对象中：

   onLoad(options) {
     // 将页面参数转存到 this.queryObj 对象中
     this.queryObj.query = options.query || ''
     this.queryObj.cid = options.cid || ''
   }
   

3. 为了方便开发商品分类页面，建议大家通过微信开发者工具，新建商品列表页面的编译模式：

   

6.2 获取商品列表数据

1. 在 data 中新增如下的数据节点：

   data() {
     return {
       // 商品列表的数据
       goodsList: [],
       // 总数量，用来实现分页
       total: 0
     }
   }
   

2. 在 onLoad 生命周期函数中，调用 getGoodsList 方法获取商品列表数据：

   onLoad(options) {
     // 调用获取商品列表数据的方法
     this.getGoodsList()
   }
   

3. 在 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 渲染商品列表结构

1. 在页面中，通过 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>
   

2. 为了防止某些商品的图片不存在，需要在 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>
   

3. 美化商品列表的 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 项封装为自定义组件

1. 在 components 目录上鼠标右键，选择 新建组件：

   

2. 将 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>
   

3. 在 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 使用过滤器处理价格

1. 在 my-goods 组件中，和 data 节点平级，声明 filters 过滤器节点如下：

   filters: {
     // 把数字处理为带两位小数点的数字
     tofixed(num) {
       return Number(num).toFixed(2)
     }
   }
   

2. 在渲染商品价格的时候，通过管道符 | 调用过滤器：

   <!-- 商品价格 -->
   <view class="goods-price">￥{{goods.goods_price | tofixed}}</view>
   

6.6 上拉加载更多

6.6.1 初步实现上拉加载更多

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": {}
          }
        ]
      }
    ]
   

2. 在 goods_list 页面中，和 methods 节点平级，声明 onReachBottom 事件处理函数，用来监听页面的上拉触底行为：

   // 触底的事件
   onReachBottom() {
     // 让页码值自增 +1
     this.queryObj.pagenum += 1
     // 重新获取列表数据
     this.getGoodsList()
   }
   

3. 改造 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 通过节流阀防止发起额外的请求

1. 在 data 中定义 isloading 节流阀如下：

   data() {
     return {
       // 是否正在请求数据
       isloading: false
     }
   }
   

2. 修改 getGoodsList 方法，在请求数据前后，分别打开和关闭节流阀：

   // 获取商品列表数据的方法
   async getGoodsList() {
     // ** 打开节流阀
     this.isloading = true
     // 发起请求
     const { data: res } = await uni.$http.get('/api/public/v1/goods/search', this.queryObj)
     // ** 关闭节流阀
     this.isloading = false
   
     // 省略其它代码...
   }
   

3. 在 onReachBottom 触底事件处理函数中，根据节流阀的状态，来决定是否发起请求：

   // 触底的事件
   onReachBottom() {
     // 判断是否正在请求其它数据，如果是，则不发起额外的请求
     if (this.isloading) return
   
     this.queryObj.pagenum += 1
     this.getGoodsList()
   }
   

6.6.3 判断数据是否加载完毕

1. 如果下面的公式成立，则证明没有下一页数据了：

   当前的页码值 * 每页显示多少条数据 >= 总数条数
   pagenum * pagesize >= total
   

2. 修改 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 下拉刷新

1. 在 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": {}
     }]
   }]
   

2. 监听页面的 onPullDownRefresh 事件处理函数：

   // 下拉刷新的事件
   onPullDownRefresh() {
     // 1. 重置关键数据
     this.queryObj.pagenum = 1
     this.total = 0
     this.isloading = false
     this.goodsList = []
   
     // 2. 重新发起请求
     this.getGoodsList(() => uni.stopPullDownRefresh())
   }
   

3. 修改 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 项跳转到详情页面

1. 将循环时的 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>
   

2. 在 methods 节点中，定义 gotoDetail 事件处理函数：

   // 点击跳转到商品详情页面
   gotoDetail(item) {
     uni.navigateTo({
       url: '/subpkg/goods_detail/goods_detail?goods_id=' + item.goods_id
     })
   }
   

6.9 分支的合并与提交

1. 将 goodslist 分支进行本地提交：

   git add .
   git commit -m "完成了商品列表页面的开发"
   

2. 将本地的 goodslist 分支推送到码云：

   git push -u origin goodslist
   

3. 将本地 goodslist 分支中的代码合并到 master 分支：

   git checkout master
   git merge goodslist
   git push
   

4. 删除本地的 goodslist 分支：

   git branch -d goodslist