uni-app 小程序项目三 1. 商品列表、过滤器、封装商品item组件、上拉加载、节流阀、下拉刷新、2. 商品详情、轮播图、商品价格闪烁问题 3.加入购物车、vuex、持久化存储、mixiins

1.0 创建 goodslist 分支

1.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. 为了方便开发商品分类页面，建议大家通过微信开发者工具，新建商品列表页面的编译模式：

1.2 获取商品列表数据

1. 在 data 中新增如下的数据节点：
2. 在 onLoad 生命周期函数中，调用 getGoodsList 方法获取商品列表数据：
3. 在 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 渲染商品列表结构

1. 在页面中，通过 v-for 指令，循环渲染出商品的 UI 结构：（用到了 block 空白符）
2. 为了防止某些商品的图片不存在，需要在 data 中定义一个默认的图片、并在页面渲染时按需使用：
3. 美化商品列表的 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 项封装为自定义组件

1. 在 components 目录上鼠标右键，选择 新建组件 my-goods： （没有 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>