Vue实现商品详情页的评价列表功能

{
 "id": 96985579,
 "name": "麦辣鸡翅2块",
 "min_price": 11,
 "praise_num": 22,
 "praise_content": "赞22",
 "tread_num": 0,
 "praise_num_new": 22,
 "unit": "例",
 "description": "",
 "picture": "http://p0.meituan.net/xianfu/38bbfa3f955cbce3330f1cb6818d0ce6216794.png.webp",
 "month_saled": 948,
 "month_saled_content": "月售948",
 "status": 3,
 "status_description": "非可售时间",
 "product_label_picture": "http://p1.meituan.net/aichequan/04789347d755465713550540942265d36475.png",
 "rating": {
 "comment_count": 4,
 "title": "外卖评价",
 "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块#送错"
 }
 ]
 }
 }

<templete>
 <transtition name="food-detail">
 <div class="food" v-show="showFlag" ref="foodView">
 <div class="food-wrapper">
 <div class="food-content"></div>
 <!-- 商品评价列表结构，数据的绑定渲染 -->
 <div class="rating-wrapper">
 <div class="rating-title">
 <div class="like-ratio" v-if="food.rating">
 <span class="title">{{food.rating.title}}</span>
 <span class="ratio">
 (
 {{food.rating.like_ratio_desc}}
 <i>{{food.rating.like_ratio}}</i>
 )
 </span>
 </div>
 <div class="snd-title" v-if="food.rating">
 <span class="text">{{food.rating.snd_title}}</span>
 <span class="icon icon-keyboard_arrow_right"></span>
 </div>
 </div>
 <ul class="rating-content" v-if="food.rating">
 <li v-for="comment in food.rating.comment_list" class="comment-item">
 <div class="comment-header">
 <img :src="comment.user_icon" v-if="comment.user_icon">
 <img src="./anonymity.png" v-if="!comment.user_icon">
 </div>
 <div class="comment-main">
 <div class="user">{{comment.user_name}}</div>
 <div class="time">{{comment.comment_time}}</div>
 <div class="content">{{comment.comment_content}}</div>
 </div>
 </li>
 </ul>
 </div>
 </div>
 </div>
 </transition>
</templete>

<script>
 // 导入BScroll
 import BScroll from "better-scroll";
 // 导入Cartcontrol
 import Cartcontrol from "components/Cartcontrol/Cartcontrol";
 // 导入Vue
 import Vue from "vue";
 
 export default {
 data() {
 return {
 showFlag: false
 };
 },
 //接收来自Goods父组件中选中的food；
 props: {
 food: {
 type: Object
 }
 },
 methods: {
 //这里是上篇我们实现商品详情页的方法
 },
 components: {
 Cartcontrol,
 BScroll
 }
};
</script>