前端学习笔记-8.13学习饿了么-商品详情页

我们要实现点击商品，跳转至商品详情页，商品详情页分为头图，基本信息，split组件，商品介绍，split组件，商品评价。
首先设置food.vue的整体属性，设置动画。
然后设置头图的样式，头图左上角有个返回按钮，记得给他设置点击事件。
接着是基本信息，商品名称，价格，加入购物车等。
此时设置split组件。
商品介绍。
商品评价。这是个组件ratingselect.vue。说说这个组件怎么设置。
如下图

这是ratingselect组件，要实现点击全部，推荐，吐槽的切换，意味着数据会改变，父组件要接收。在vue1.0中,可以隐式的双向绑定传输数据。但是vue2.0中的props只能单向传递。
方法：
在props中接收到父组件传来的值，重新在data中定义变量接收，监测值的变化，从新定义方法，把变化在传回给父组件。

1.创建ratingselect\ratingselect.vue。设置ratingselect.vue中需要接收的props的值，值应该从父组件food.vue中传入子组件ratingselect.vue中，props接收。
我们要的props值：
首先是一个变量是否只看有评论的内容；接着是控制选择的类型；然后是要维护所有评价的数据，因为有评价数量；最后，要维护描述，是全部满意不满意，是全部推荐吐槽。
设置传入props的值：

在父组件（商品详情页）food.vue中引入ratingselect.vue（评价组件）

引入

把ratingselect需要的数据从food.vue中传入ratingselect.vue

2.我们做了上述变量的操作后，希望切换不同的商品有相同的初始化状态，所以初始化一下。show函数作为goods组件中调用food组件的函数。就是点开商品详情的显示函数，把初始化操作传入show中

绑定data属性中的值，传入到ratingselect中，

此时desc有满意不满意变为全部推荐吐槽
在food.vue中编写title，ratingselect的样式

css


应用到dom中，我们为其添加了active类和点击按钮。

3.为ratingType（是否满意）和switch（是否查看所有评价）编写点击事件，ratingselect改变了selectType的值，要将改变的值传给food.vue的show方法，通过派发事件完成
父组件food.vue将selectType和onlyContent传给ratingselect.
子组件在props中接受来自food.vue传过来的selectType和onlyContent的值之后，在data中新建变量，监测值的改变（子组件还要将改变的数据传回父组件）

但是之前定义的rating-type和switch的属性是不变的。

来编写rating-type和switch有内容切换的绑定函数事件
select函数中，点击的时候把类型传入，外层是better-Scroll，需要传入event做判断。将sType的值改变以后通过$emit函数传递回父组件

在父组件监听，关联

4.统计不同的评价数量，过滤（filter）评价，添加positions，negatives数组，长度为评价数量。

ratingselect.vue组件完成。与

联动。

完成评价列表的dom

css


为列表的显示添加

添加needShow函数，因为我们是在子组件中进行的rating的rateType的切换，变量更改后数据要传回父组件，这时用到了incrementTotal方法，对子组件的切换进行监测（在子组件中使用select和toggleContent中用emit传递），所以子组件中进行切换，父组件也能进行相应的变换



5.为时间添加过滤器，将时间戳转化为时间字符串


新建date.js,如下