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

本篇我们来实现商品详情页的评价列表。

必要的数据

这里咱们举一个数据的例子，明明白白地了解这些数据是如何绑定到模板中的。

数据来自于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>

到这里我们就完成了商品详情页面的评论列表，下篇我们来实现商品评价栏目。

以上所述是小编给大家介绍的Vue实现商品详情页的评价列表功能,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！