本篇我们来实现商品详情页的评价列表。
{
“id”: 96985579,
“名称”:“麦辣鸡翅2块”,
“min_price”: 11日
“praise_num”: 22日
22“praise_content”:“赞”,
“tread_num”: 0,
“praise_num_new”: 22日
“单位”:“例”,
“描述”:“”,
“照片”:“http://p0.meituan.net/xianfu/38bbfa3f955cbce3330f1cb6818d0ce6216794.png.webp”,
“month_saled”: 948年,
“month_saled_content”:“月售948”,
“状态”:3,
“status_description”:“非可售时间”,
“product_label_picture”:“http://p1.meituan.net/aichequan/04789347d755465713550540942265d36475.png”,
“等级”:{
“comment_count”: 4
“标题”:“外卖评价”,
:“snd_title 4条评论”,
“praise_friends”:“”,
“like_ratio_desc”:“好评度”,
“like_ratio”:“100%”,
“filter_type”: 1、
“comment_list”:(
{
“user_icon”:“https://img.meituan.net/avatar/71ef89fa000e783d5b8d86c2767a9d28195580.jpg”,
:“user_name ejX309524666”,
:“comment_time 2017.08.31”,
“comment_unix_time”: 1504161290,
“comment_content”:“#奶油坚果酱中套餐#不好吃。还是奥尔良,麦辣鸡腿那些最经典的汉堡好吃。薯条软得不能再软了。我备注了可乐换芬达也没有换。#麦辣鸡翅2块#就还好,里面的肉挺嫩的,很入味。”
},{
“user_icon”:“https://img.meituan.net/avatar/6571c42526237b0118f437418e989d1187445.jpg”,
:“user_name EAG789830055”,
:“comment_time 2017.08.18”,
“comment_unix_time”: 1503030166,
“comment_content”:“#麦辣鸡翅2块#送错”
}
]
}
}
食物组件添加商品评价结构
好,现在让我们将评价结构搭出来,并且绑定对应的数据。
& lt; templete>
& lt;国铁name=" food-detail比;
& lt; div类="食物" v-show=皊howFlag ref=癴oodView”比;
& lt; div类=笆称钒爸健北?
& lt; div类="食物成分"祝辞& lt;/div>
& lt; !——商品评价列表结构,数据的绑定渲染——比;
& lt; div类=皉ating-wrapper”比;
& lt; div类=皉ating-title”比;
& lt; div类=v=癴ood.rating”比“like-ratio”;
& lt;跨类="标题"在{{food.rating.title}} & lt;/span>
& lt;跨类=氨壤北?
（
{{food.rating.like_ratio_desc}}
& lt; i> {{food.rating.like_ratio}} & lt;/i>
)
& lt;/span>
& lt;/div>
& lt; div类=v=癴ood.rating”比“snd-title”;
& lt;跨类="文本"在{{food.rating.snd_title}} & lt;/span>
& lt;跨类="图标icon-keyboard_arrow_right "祝辞& lt;/span>
& lt;/div>
& lt;/div>
& lt; ul类=v=癴ood.rating”比“rating-content”;
& lt;李v=癴ood.rating.comment_list评论”class=癱omment-item”比;
& lt; div类=癱omment-header”比;
& lt; img src=" https://www.yisu.com/zixun/comment.user_icon " v=癱omment.user_icon”比;
& lt; img src=" https://www.yisu.com/zixun/anonymity.png " v=? comment.user_icon”比;
& lt;/div>
& lt; div类=癱omment-main”比;
& lt; div类="用户"在{{comment.user_name}} & lt;/div>
& lt; div类=笆奔洹痹趝{comment.comment_time}} & lt;/div>
& lt; div类=澳谌荨痹趝{comment.comment_content}} & lt;/div>
& lt;/div>
& lt;/li>
& lt;/ul>
& lt;/div>
& lt;/div>
& lt;/div>
& lt;/transition>
& lt;/templete>
导入,注册组件
& lt; script>//导入BScroll
从“进口BScroll better-scroll”;//导入Cartcontrol
从“组件/导入Cartcontrol Cartcontrol/Cartcontrol”;//导入Vue
从“进口Vue Vue”;
出口默认{
数据(){
返回{
showFlag:假
};
}，//接收来自货物父组件中选中的食物;
道具:{
食物:{
对象类型:
}
}，
方法:{//这里是上篇我们实现商品详情页的方法
}，
组件:{
Cartcontrol,
BScroll
}
};
& lt;/script>
