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


Posted in Javascript onSeptember 04, 2019

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

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实现商品详情页的评价列表功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
细说浏览器特性检测(2)-通用事件检测
Nov 05 Javascript
Javascript 面向对象(三)接口代码
May 23 Javascript
javascript中的void运算符语法及使用介绍
Mar 10 Javascript
js传参数受特殊字符影响错误的解决方法
Oct 21 Javascript
jQuery中:header选择器用法实例
Dec 29 Javascript
jQuery获取标签文本内容和html内容的方法
Mar 27 Javascript
jQuery实现弹出带遮罩层的居中浮动窗口效果
Sep 12 Javascript
js实现下拉菜单效果
Mar 01 Javascript
Vue全家桶实践项目总结(推荐)
Nov 04 Javascript
JS+HTML+CSS实现轮播效果
Nov 28 Javascript
浅谈微信小程序flex布局基础
Sep 10 Javascript
Vue+Koa2 打包后进行线上部署的教程详解
Jul 31 Javascript
Layui 数据表格批量删除和多条件搜索的实例
Sep 04 #Javascript
解决layui表格的表头不滚动的问题
Sep 04 #Javascript
解决layui数据表格table的横向滚动条显示问题
Sep 04 #Javascript
微信小程序tab切换可滑动切换导航栏跟随滚动实现代码
Sep 04 #Javascript
微信小程序JS加载esmap地图的实例详解
Sep 04 #Javascript
深入浅出vue图片路径的实现
Sep 04 #Javascript
webpack 如何解析代码模块路径的实现
Sep 04 #Javascript
You might like
Apache+php+mysql在windows下的安装与配置图解(最新版)
2008/11/30 PHP
ThinkPHP调用百度翻译类实现在线翻译
2014/06/26 PHP
Javascript 的addEventListener()及attachEvent()区别分析
2009/05/21 Javascript
基于jquery的滚动条滚动固定div(附演示下载)
2012/10/29 Javascript
在js文件中写el表达式取不到值的原因及解决方法
2013/12/23 Javascript
使用jquery实现放大镜效果
2014/09/02 Javascript
深入分析JSONP跨域的原理
2014/12/10 Javascript
在父页面得到zTree已选中的节点的方法
2015/02/12 Javascript
jQuery中toggle()函数的使用实例
2015/04/17 Javascript
javascript鼠标滑动评分控件完整实例
2015/05/13 Javascript
JavaScript的类型、值和变量小结
2015/07/09 Javascript
js数组与字符串常用方法总结
2017/01/13 Javascript
Vue2.0 从零开始_环境搭建操作步骤
2017/06/14 Javascript
解决vue单页使用keep-alive页面返回不刷新的问题
2018/03/13 Javascript
基于Angular中ng-controller父子级嵌套的相关属性详解
2018/10/08 Javascript
用Electron写个带界面的nodejs爬虫的实现方法
2019/01/29 NodeJs
vue中使用vue-cli接入融云实现即时通信
2019/04/19 Javascript
了解JavaScript中let语句
2019/05/30 Javascript
Vue仿微信app页面跳转动画效果
2019/08/21 Javascript
vue递归获取父元素的元素实例
2020/08/07 Javascript
原生JS实现弹幕效果的简单操作指南
2020/11/10 Javascript
pygame加载中文名mp3文件出现error
2017/03/31 Python
Python编程实现粒子群算法(PSO)详解
2017/11/13 Python
python web.py开发httpserver解决跨域问题实例解析
2018/02/12 Python
在python中pandas的series合并方法
2018/11/12 Python
Python多进程方式抓取基金网站内容的方法分析
2019/06/03 Python
在python中实现调用可执行文件.exe的3种方法
2019/07/07 Python
Python中的 ansible 动态Inventory 脚本
2020/01/19 Python
Python3使用xlrd、xlwt处理Excel方法数据
2020/02/28 Python
python读取hdfs上的parquet文件方式
2020/06/06 Python
K近邻法(KNN)相关知识总结以及如何用python实现
2021/01/28 Python
行政经理岗位职责
2013/11/09 职场文书
新入职员工的自我介绍演讲稿
2014/01/02 职场文书
社区食品安全实施方案
2014/03/28 职场文书
学术会议领导致辞
2015/07/29 职场文书
python中 .npy文件的读写操作实例
2022/04/14 Python