{{rating.username}}
{{rating.text}}
{{item}}
{{rating.rateTime | formatDate}}
vue2.0 饿了么学习笔记（16）rating组件的开发
首先编写ratings，要用到betterScroll
并添加样式：
和good组件一样，我们要固定视口的高度，所以将其定位绝对定位，top为header组件的高度
.ratings
position absolute
top 174px
bottom 0
left 0
width 100%
overflow hidden
接下来编写overview部分，左边是综合评分，右边是star组件+商品评分+送达时间,下边是左侧部分的样式
{{seller.score}}
综合评分
高于周边商家{{seller.rankRate}}%
.....
其中，seller的数据由App.vue中的routerview进行传递，在rating组件中使用props进行接收，这样在模板中就可以直接引用seller的数据了
props: {
seller: {
type: Object
}
}
添加CSS样式：左侧部分
.overview
display flex
padding 18px 0 18px 18px
.overview-left
padding-bottom 6px 0
flex 0 0 137px
width 137px // 防止出现兼容性问题
border-right 1px solid rgba(7,17,27,0.1)
text-align center
@media only screen and (max-width 320px)
flex 0 0 110px
width 110px
.score
margin-bottom 6px
line-height 28px
font-size 24px
color rgb(255, 153, 0)
.title
margin-bottom 8px
line-height 12px
font-size 12px
color rgb(7, 17, 27)
.rank
line-height 10px
font-size 10px
color rgb(147, 153, 159)
.overview-right
flex 1
padding 6px 0 6px 24px
接下来填充坐左侧部分的样式，先写布局，不要忘记引入并注册star组件，尺寸是36的
...
服务态度
之后，为右侧部分添加布局
.overview-right
flex 1
padding 6px 0 6px 24px
@media only screen and (max-width 320px)
padding-left 6px
.score-wrapper
line-height 18px
margin-top 8px
font-size 0
.title
display inline-block
vertical-align top
line-height 18px
font-size 12px
color rgb(7, 17, 27)
.star
display inline-block
vertical-align top
margin 0 12px
.score
display inline-block
vertical-align top
line-height 18px
font-size 12px
color rgb(255, 153, 0)
.delivery-wrapper
font-size 0
.title //span文字和文字之间默认是垂直居中的，可以不用加display vertical-align
display inline-block
vertical-align top
line-height 18px
font-size 12px
color rgb(7, 17, 27)
.delivery
display inline-block
margin-left 12px
vertical-align top
line-height 18px
font-size 12px
color rgb(147, 153, 159)
还有一个问题，当屏幕宽度变短时，右侧部分过长会出现折行，这不是想要的，添加一个mediea Query即媒体查询进行解决
.overview-left
padding-bottom 6px 0
flex 0 0 137px
width 137px // 防止出现兼容性问题
border-right 1px solid rgba(7,17,27,0.1)
text-align center
@media only screen and (max-width 320px)
flex 0 0 110px
width 110px
.overview-right
flex 1
padding 6px 0 6px 24px
@media only screen and (max-width 320px)
padding-left 6px
4)引入并注册split.vue和ratingselect.vue组件中调用
现在data中添加ratingselect组件中需要维护的值，上边模板中的ratings是所有商品的ratings，不是一种商品的food.ratings
5）food.vue和rating.vue都将评价类型或者是选择类型传递给ratingselect.vue组件，但是传递的数值是不一样的，在这里，:ratings="ratings"，指的是随商家的评价，在foods.vue中是:ratings="food.ratings"，是对商家店里某一种食物的评价
data () {
return {
ratings: [],
showFlag: false,
selectType: ALL,
onlyContent: true
};
}
6)同goods.vue，在created()函数中拿到rating的API数据,将得到的ratings传到raqtings的组件中
created() {
//请求的ajex地址,成功的回调，拿到一个response
this.$http.get('/api/ratings').then((response) => {
//response是一个属性，将其转化为json对象
response = response.body;
//console.log(response);
if (response.errno === ERR_OK) {
// 数据在data字段中,将goods对象传给header组件，通过:goods
this.ratings = response.data;
// console.log(this.goods);
this.$nextTick(() => {
this.scroll = new BScroll(this.$refs.ratings, {
click: true //允许点击
});
});
}
});
},
7）拿到数据之后在raring组件中编写样式，填充html中的DOM数据
-
![]()
完成样式：
.rating-wrapper
padding 0 18px
.rating-item
display flex
padding 18px 0
border-1px(rgba(1, 17, 27, 0.1))
.avatar
flex 0 0 28px
width 28px
margin-right 12px
img
border-radius 50%
.content
position relative
flex 1
.name
margin-bottom 4px
line-height 12px
font-weight 700
font-size 10px
color rgb(7, 17, 27)
.star-wrapper
margin-bottom 6px
font-size 0
.star
display inline-block
margin-right 16px
vertical-align top
.delivery
display inline-block
vertical-align top
font-size 10px
line-height 12px
color rgb(147, 153, 159)
.text
line-height 18px
color rgb(7, 17, 27)
font-size 12px
margin-bottom 8px
.recommend
line-height 16px
font-size 0
.icon-thumb_up, .item
display inline-block
margin 0 8px 4px 0
font-size 9px
.icon-thumb_up
color rgb(0, 160, 220)
.item
padding 0 6px
border 1px solid rgba(7, 17, 27, 0.1)
border-radius 1px
color rgb(147, 153, 159)
background #fffff
.time
position absolute
top 0
right 0
line-height 12px
font-size 10px
color rgb(147, 153, 159)
8）绑定BScroll进行滚动
8.1 拿到DOM数据，ref="ratings"，将BS初始化写在created函数拿到api数据之后
8.2.默认进图商品界面还会导致rating界面来不及渲染,因为nextTicks是异步执行的,所以将默认进入商品界面去除
在main.js中//router.push('/goods'); // 默认进入商家页面
8.3 .点击切换评价列表，和商品详情页类似，引入子组件
子组件已经定义好了data数据和派发函数，在food详情页展示的时候已经写过了
data() {
return {
sType: this.selectType,
oContent: this.onlyContent,
}
},
select (type, event) { //点击的时候外层是有一个BScroll的，所以要传递event阻止默认点击
if (!event._constructed) { //浏览器直接return掉,去掉自带click事件的点击
return;
}
//将this.selectType设置成传入的参数,而不是food传过来的初始化的值，之后样式就可以随着点击改变了
this.sType = type;
//派发事件通知父组件food.vue selectType的改变,将type值传出去
console.log('ratingselect.vue ' + type);
//this.$emit('se-type', type);
this.$emit('increment', 'selectType', this.sType);
},
toggleContent (event) {
if (!event._constructed) { //浏览器直接return掉,去掉自带click事件的点击
return;
}
this.oContent = !this.oContent;
console.log('ratingselect.vue ' + this.oContent);
// this.$emit('toggle-content', this.oContent);
this.$emit('increment', 'onlyContent', this.oContent);
}
},
在父组件rating.vue中
incrementTotal(type, data) {
this[type] = data;
this.$nextTick(() => {
this.scroll.refresh();
});
},
9. 点击满意不满意和只看内容的评价，评价列表进行刷新，在li列表展示里添加needshow();,needshow中改变的是selectType的值