Vue實戰—實現商品詳情頁的評價列表（13）

上篇我們實現商品的詳情頁，本篇我們來實現商品詳情頁的評價列表。

必要的數據

這裏咱們舉一個數據的例子，明明白白地瞭解這些數據是如何綁定到模板中的。

數據來自於Foods父組件，當我們選中商品，跳轉到商品詳情頁，那麼就需要依賴父組件中的商品數據，在商品詳情頁面展示評論，當然也可能沒有如下“rating”數據。那我們在後面的模板中，就不展示對應的html結構。

{
                        "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塊#送錯"
                                }
                            ]
                        }
                    }

Food組件添加商品評價結構

好，現在讓我們將評價結構搭出來，並且綁定對應的數據。

<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>

到這裏我們就完成了商品詳情頁面的評論列表，下篇我們來實現商品評價欄目。