相似推荐的展示和底部导航条的实现思路

相似推荐的数据请求是独立的，对应的接口为“/recommend”。

export function getRecommend(){
  return request({
    url: '/recommend',
  })
}

仍然是在created函数中：

    //  3、获取推荐数据
    getRecommend().then((res) => {
      this.recommendInfo = res.data.list;
    });

这里复用了GoodsList组件来完成推荐数据的展示：

<goods-list :goods="recommendInfo" ref="recommend"></goods-list>

注意到GoodsListItem中的图片加载完成后会将事件通过事件总线暴露出去，为了区分当前GoodsList组件是作为商品列表在使用，还是作为推荐列表在使用，需要对当前路由进行判断：

    imageLoad(){
      if(this.$route.path.indexOf('/home') !== -1){
        this.$bus.$emit('homeItemImageLoad') // 事件总线发送事件
      }else{
        this.$bus.$emit('detailItemImageLoad')
      }     
    }

推荐图片加载完成后，父组件中对滚动高度进行刷新：

  mounted() {
    const refresh = debounce(this.$refs.scroll.refresh, 200);
    this.$bus.$on("detailItemImageLoad", () => {
      refresh();
    });
  }

推荐图片是滚动区域中的最后一个组件。接下来便只剩一个固定在视口底部的导航条了，它包含“加入购物车”、“收藏”等按钮。

底部导航条的显示内容是固定的，不需要通过props从外部接受数据，所以直接来看它的模板代码：

<template>
  <div class="bottom-bar">
    <div class="bar-item bar-left">
      <div>
        <i class="icon service"></i>
        <span class="text">客服</span>
      </div>
      <div>
        <i class="icon shop"></i>
        <span class="text">店铺</span>
      </div>
      <div>
        <i class="icon select"></i>
        <span class="text">收藏</span>
      </div>
    </div>
    <div class="bar-item bar-right">
      <div class="cart" @click="addToCart">加入购物车</div>
      <div class="buy">购买</div>
    </div>
  </div>
</template>

第18行有一个“加入购物车”的单击响应函数，在其内部我们将事件发送给父组件Detail：

    addToCart(){   
      this.$emit('addCart')
    }

在父组件中：

<detail-bottom-bar @addCart="addToCart"></detail-bottom-bar>

    addToCart(){
      //  获取购物车需要展示的商品的信息
      const product = {}
      product.image = this.topImages[0]
      product.title = this.goods.title
      product.desc = this.goods.desc
      product.price = this.goods.realPrice
      product.iid = this.iid
      console.log(product)
      //  将商品添加到购物车中
      this.$store.dispatch('addCart',product)
    }

可以看到，点击“加入购物车后”，将当前商品信息保存在product对象中。关于最后一行的dispatch方法，我们在Cart组件实现中再说，它用到了Vuex的知识。