快捷導(dǎo)航

Vue實(shí)現(xiàn)商品詳情頁的評(píng)價(jià)列表功能

更新時(shí)間：2019年09月04日 15:33:48 作者：前端大彬哥

這篇文章主要介紹了Vue實(shí)現(xiàn)商品詳情頁的評(píng)價(jià)列表功能，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

本篇我們來實(shí)現(xiàn)商品詳情頁的評(píng)價(jià)列表。

必要的數(shù)據(jù)

這里咱們舉一個(gè)數(shù)據(jù)的例子，明明白白地了解這些數(shù)據(jù)是如何綁定到模板中的。

數(shù)據(jù)來自于Foods父組件，當(dāng)我們選中商品，跳轉(zhuǎn)到商品詳情頁，那么就需要依賴父組件中的商品數(shù)據(jù)，在商品詳情頁面展示評(píng)論，當(dāng)然也可能沒有如下“rating”數(shù)據(jù)。那我們在后面的模板中，就不展示對(duì)應(yīng)的html結(jié)構(gòu)。

{
            "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": "非可售時(shí)間",
            "product_label_picture": "http://p1.meituan.net/aichequan/04789347d755465713550540942265d36475.png",
            "rating": {
              "comment_count": 4,
              "title": "外賣評(píng)價(jià)",
              "snd_title": "4條評(píng)論",
              "praise_friends": "",
              "like_ratio_desc": "好評(píng)度",
              "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": "#奶油堅(jiān)果醬中套餐#不好吃。還是奧爾良，麥辣雞腿那些最經(jīng)典的漢堡好吃。薯?xiàng)l軟得不能再軟了。我備注了可樂換芬達(dá)也沒有換。#麥辣雞翅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塊#送錯(cuò)"
                }
              ]
            }
          }

Food組件添加商品評(píng)價(jià)結(jié)構(gòu)

好，現(xiàn)在讓我們將評(píng)價(jià)結(jié)構(gòu)搭出來，并且綁定對(duì)應(yīng)的數(shù)據(jù)。

<templete>
  <transtition name="food-detail">
    <div class="food" v-show="showFlag" ref="foodView">
      <div class="food-wrapper">
        <div class="food-content"></div>
         <!-- 商品評(píng)價(jià)列表結(jié)構(gòu)，數(shù)據(jù)的綁定渲染 -->
        <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>

導(dǎo)入，注冊組件

<script>
  // 導(dǎo)入BScroll
  import BScroll from "better-scroll";
  // 導(dǎo)入Cartcontrol
  import Cartcontrol from "components/Cartcontrol/Cartcontrol";
  // 導(dǎo)入Vue
  import Vue from "vue";
  
  export default {
   data() {
    return {
     showFlag: false
    };
   },
    //接收來自Goods父組件中選中的food；
   props: {
    food: {
     type: Object
    }
   },
   methods: {
    //這里是上篇我們實(shí)現(xiàn)商品詳情頁的方法
   },
   components: {
    Cartcontrol,
    BScroll
   }
};
</script>

到這里我們就完成了商品詳情頁面的評(píng)論列表，下篇我們來實(shí)現(xiàn)商品評(píng)價(jià)欄目。

總結(jié)

以上所述是小編給大家介紹的Vue實(shí)現(xiàn)商品詳情頁的評(píng)價(jià)列表功能,希望對(duì)大家有所幫助，如果大家有任何疑問請給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！

您可能感興趣的文章: