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 相关文章推荐
jquery 实现二级/三级/多级联动菜单的思路及代码
Apr 08 Javascript
js实现的四级左侧网站分类菜单实例
May 06 Javascript
Bootstrap显示与隐藏简单实现代码
Mar 06 Javascript
微信小程序 input输入及动态设置按钮的实现
Oct 27 Javascript
基于vue-ssr服务端渲染入门详解
Jan 08 Javascript
详解vue几种主动刷新的方法总结
Feb 19 Javascript
微信小程序云开发之模拟后台增删改查
May 16 Javascript
vue实现输入框的模糊查询的示例代码(节流函数的应用场景)
Sep 01 Javascript
jquery实现吸顶导航效果
Jan 08 jQuery
让mocha支持ES6模块的方法实现
Jan 14 Javascript
JS实现烟花爆炸效果
Mar 10 Javascript
简介JavaScript错误处理机制
Aug 04 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
PHP调用Linux命令权限不足问题解决方法
2015/02/07 PHP
php防止sql注入简单分析
2015/03/18 PHP
PHP使用逆波兰式计算工资的方法
2015/07/29 PHP
php在windows环境下获得cpu内存实时使用率(推荐)
2018/02/08 PHP
使用jQuery的将桌面应用程序引入浏览器
2010/11/19 Javascript
jquery插件制作 自增长输入框实现代码
2012/08/17 jQuery
jquery入门—编写一个导航条(可伸缩)
2013/01/07 Javascript
火狐textarea输入法的bug的触发及解决
2013/07/24 Javascript
javascript 模拟坦克大战游戏(html5版)附源码下载
2014/04/08 Javascript
原生javascript+css3编写的3D魔方动画旋扭特效
2016/03/14 Javascript
js 弹出虚拟键盘修改密码的简单实例
2016/10/10 Javascript
jQuery+json实现动态创建复杂表格table的方法
2016/10/25 Javascript
AngularJS中run方法的巧妙运用
2017/01/04 Javascript
详解网站中图片日常使用以及优化手法
2017/01/09 Javascript
基于vue2.0+vuex+localStorage开发的本地记事本示例
2017/02/28 Javascript
JavaScript对象引用与赋值实例详解
2017/03/15 Javascript
Vue表单类的父子组件数据传递示例
2018/05/03 Javascript
webpack4 升级迁移的实现
2018/09/12 Javascript
layer.confirm点击第一个按钮关闭弹出框的方法
2019/09/09 Javascript
Python threading多线程编程实例
2014/09/18 Python
python多线程threading.Lock锁用法实例
2014/11/01 Python
python非递归全排列实现方法
2017/04/10 Python
利用Pandas读取文件路径或文件名称包含中文的csv文件方法
2018/07/04 Python
python之pexpect实现自动交互的例子
2019/07/25 Python
Tornado实现多进程/多线程的HTTP服务详解
2019/07/25 Python
OpenCV Python实现拼图小游戏
2020/03/23 Python
浅谈python锁与死锁问题
2020/08/14 Python
解决Python 写文件报错TypeError的问题
2020/10/23 Python
使用css3背景渐变中的透明度来设置不同颜色的背景渐变
2014/03/31 HTML / CSS
HTML5实现签到 功能
2018/10/09 HTML / CSS
播音主持女孩的自我评价分享
2013/11/20 职场文书
幼儿园毕业园长感言
2014/02/24 职场文书
硕士研究生求职自荐信范文
2014/03/11 职场文书
辩论赛开场白大全(主持人+辩手)
2015/05/29 职场文书
通讯稿格式及范文
2015/07/22 职场文书
汽车车尾标语大全
2015/08/11 职场文书