标签：end The select 客服 列表 cli 响应 exp home
相似推荐的数据请求是独立的，对应的接口为“/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从外部接受数据，所以直接来看它的模板代码：
1 <template> 2 <div class="bottom-bar"> 3 <div class="bar-item bar-left"> 4 <div> 5 <i class="icon service"></i> 6 <span class="text">客服</span> 7 </div> 8 <div> 9 <i class="icon shop"></i> 10 <span class="text">店铺</span> 11 </div> 12 <div> 13 <i class="icon select"></i> 14 <span class="text">收藏</span> 15 </div> 16 </div> 17 <div class="bar-item bar-right"> 18 <div class="cart" @click="addToCart">加入购物车</div> 19 <div class="buy">购买</div> 20 </div> 21 </div> 22 </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的知识。
标签：end The select 客服 列表 cli 响应 exp home
原文地址：https://www.cnblogs.com/creationMarvel/p/14952576.html
