In the first part, we realized the detailed page of the commodity. In this part, we realized the evaluation list of the detailed page of the commodity.

Necessary data

Here we give an example of data to clearly understand how these data are bound to the template.

Data comes from the Foods parent component. When we select a product and jump to the product details page, we need to rely on the product data in the parent component to display comments on the product details page. Of course, there may not be the following "rating" data. So we don't show the corresponding html structure in the later template.

{
                        "id": 96985579,
                        "name": "Two spicy chicken wings",
                        "min_price": 11,
                        "praise_num": 22,
                        "praise_content": "Zan 22",
                        "tread_num": 0,
                        "praise_num_new": 22,
                        "unit": "example",
                        "description": "",
                        "picture": "http://p0.meituan.net/xianfu/38bbfa3f955cbce3330f1cb6818d0ce6216794.png.webp",
                        "month_saled": 948,
                        "month_saled_content": "Monthly sales 948",
                        "status": 3,
                        "status_description": "Non-saleable time",
                        "product_label_picture": "http://p1.meituan.net/aichequan/04789347d755465713550540942265d36475.png",
                        "rating": {
                            "comment_count": 4,
                            "title": "Takeaway evaluation",
                            "snd_title": "4 Article comment",
                            "praise_friends": "",
                            "like_ratio_desc": "Praise degree",
                            "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": "#Set of Butter Nut Paste#Poor taste. The best hamburgers are spicy chicken legs. French fries are too soft to soften any more. I wrote coke instead of changing it.#Two spicy chicken wings#Luckily, the meat inside is very tender and delicious. "
                                }, {
                                    "user_icon": "https://img.meituan.net/avatar/6571c42526237b0118f437418e989d1187445.jpg",
                                    "user_name": "EAG789830055",
                                    "comment_time": "2017.08.18",
                                    "comment_unix_time": 1503030166,
                                    "comment_content": "#Two spicy chicken wings#Wrong delivery "
                                }
                            ]
                        }
                    }

Food Component Adding Commodity Evaluation Structure

OK, now let's build the evaluation structure and bind the corresponding data.

<templete>
    <transtition name="food-detail">
        <div class="food" v-show="showFlag" ref="foodView">
            <div class="food-wrapper">
                <div class="food-content"></div>
                 <!-- List structure of commodity evaluation, binding rendering of data -->
                <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>

Import, register components

<script>
    // Import BScroll
    import BScroll from "better-scroll";
    // Import Cartcontrol
    import Cartcontrol from "components/Cartcontrol/Cartcontrol";
    // Import Vue
    import Vue from "vue";
    
    export default {
      data() {
        return {
          showFlag: false
        };
      },
        //Receive the selected food from the Goods parent component;
      props: {
        food: {
          type: Object
        }
      },
      methods: {
       //Here's how we implemented the product details page in the previous article.
      },
      components: {
        Cartcontrol,
        BScroll
      }
};
</script>

At this point, we have completed the comment list of the commodity details page. In the next section, we will implement the commodity evaluation column.