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 相关文章推荐
破除一些网站复制、右键限制
Nov 04 Javascript
对YUI扩展的Gird组件 Part-1
Mar 10 Javascript
UI Events 用户界面事件
Jun 27 Javascript
现代 JavaScript 开发编程风格Idiomatic.js指南中文版
May 28 Javascript
JavaScript 学习笔记之数据类型
Jan 14 Javascript
微信jssdk在iframe页面失效问题的解决措施
Mar 03 Javascript
在微信、支付宝、百度钱包实现点击返回按钮关闭当前页面和窗口的方法
Aug 05 Javascript
基于HTML5+JS实现本地图片裁剪并上传功能
Mar 24 Javascript
vue 通过下拉框组件学习vue中的父子通讯
Dec 19 Javascript
vue.js实现格式化时间并每秒更新显示功能示例
Jul 07 Javascript
详解ES7 Decorator 入门解析
Feb 18 Javascript
原生js实现瀑布流效果
Mar 09 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 addslashes()函数讲解
2019/02/03 PHP
php use和include区别总结
2019/10/13 PHP
CSS中一些@规则的用法小结
2021/03/09 HTML / CSS
Prototype使用指南之hash.js
2007/01/10 Javascript
Google的跟踪代码 动态加载js代码方法应用
2012/11/12 Javascript
javascript中typeof的使用示例
2013/12/19 Javascript
jQuery 删除/替换DOM元素的几种方式
2014/05/20 Javascript
JavaScript实现找出数组中最长的连续数字序列
2014/09/03 Javascript
jquery处理json对象
2014/11/03 Javascript
jquery实现勾选复选框触发事件给input赋值
2015/02/01 Javascript
javascript获取本机操作系统类型的方法
2015/08/13 Javascript
RGB和YUV 多媒体编程基础详细介绍
2016/11/04 Javascript
JQuery和HTML5 Canvas实现弹幕效果
2017/01/04 Javascript
jQuery实现多张图片上传预览(不经过后端处理)
2017/04/29 jQuery
Node.js使用orm2进行update操作时关联字段无法修改的解决方法
2017/06/13 Javascript
微信小程序 跳转传递数据的实例
2017/07/06 Javascript
JavaScript实现删除数组重复元素的5种常用高效算法总结
2018/01/18 Javascript
关于Mac下安装nodejs、npm和cnpm的教程
2018/04/11 NodeJs
改进 JavaScript 和 Rust 的互操作性并深入认识 wasm-bindgen 组件
2019/07/13 Javascript
vue-resource post数据时碰到Django csrf问题的解决
2020/03/13 Javascript
JS一次前端面试经历记录
2020/03/19 Javascript
python pickle 和 shelve模块的用法
2013/09/16 Python
python在回调函数中获取返回值的方法
2019/02/22 Python
Python-openCV开运算实例
2020/07/05 Python
利用python制作拼图小游戏的全过程
2020/12/04 Python
来自圣地亚哥的实惠太阳镜:Knockaround
2018/08/27 全球购物
尼克松手表官网:Nixon手表
2019/03/17 全球购物
Elemental Herbology官网:英国美容品牌
2019/04/27 全球购物
粗加工管理制度
2014/02/04 职场文书
揭牌仪式策划方案
2014/05/28 职场文书
校本教研活动总结
2014/07/01 职场文书
党的群众路线教育实践活动学习笔记范文
2014/11/06 职场文书
保管员岗位职责
2015/02/14 职场文书
审美与表现自我评价
2015/03/09 职场文书
Mysql 设置boolean类型的操作
2021/06/04 MySQL
python编程实现清理微信重复缓存文件
2021/11/01 Python