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 相关文章推荐
点击按钮或链接不跳转只刷新页面的脚本整理
Oct 22 Javascript
JavaScript跨浏览器获取页面中相同class节点的方法
Mar 03 Javascript
jQuery 判断图片是否加载完成方法汇总
Aug 10 Javascript
jquery马赛克拼接翻转效果代码分享
Aug 24 Javascript
JavaScript判断按钮被点击的方法
Dec 13 Javascript
基于JavaScript实现在新的tab页打开url
Aug 04 Javascript
修改jquery中dialog的title属性方法(推荐)
Aug 26 Javascript
Vue 兄弟组件通信的方法(不使用Vuex)
Oct 26 Javascript
Vue2.0中集成UEditor富文本编辑器的方法
Mar 03 Javascript
vue渲染时闪烁{{}}的问题及解决方法
Mar 28 Javascript
vuex中store存储store.commit和store.dispatch的用法
Jul 24 Javascript
JavaScript常用工具函数库汇总
Sep 17 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
声音就能俘获人心,蕾姆,是哪个漂亮小姐姐配音呢?
2020/03/03 日漫
让这部DC动画新作刷新你的认知
2020/03/03 欧美动漫
YII路径的用法总结
2014/07/09 PHP
php实现word转html的方法
2016/01/22 PHP
PHP递归实现层级树状展开
2016/04/01 PHP
PHP解压ZIP文件到指定文件夹的方法
2016/11/17 PHP
微信公众平台开发教程⑤ 微信扫码支付模式介绍
2019/04/10 PHP
ThinkPHP 5.x远程命令执行漏洞复现
2019/09/23 PHP
鼠标事件延时切换插件
2011/03/12 Javascript
分享几个超级震憾的图片特效
2012/01/08 Javascript
JS加jquery简单实现标签元素的显示或隐藏
2013/09/23 Javascript
Node.js 去掉种子(torrent)文件里的邪恶信息
2015/03/27 Javascript
详解Angularjs filter过滤器
2016/02/06 Javascript
dedecms页面如何获取会员状态的实例代码
2016/03/15 Javascript
javascript正则表达式中分组详解
2016/07/17 Javascript
15位和18位身份证JS校验的简单实例
2016/07/18 Javascript
使用JavaScript为一张图片设置备选路径的方法
2017/01/04 Javascript
canvas实现爱心和彩虹雨效果
2017/03/09 Javascript
JS原生带小白点轮播图实例讲解
2017/07/22 Javascript
vue中$refs的用法及作用详解
2018/04/24 Javascript
jQuery+PHP实现上传裁剪图片
2020/06/29 jQuery
JS实现随机点名器
2020/04/12 Javascript
python通过yield实现数组全排列的方法
2015/03/18 Python
Python WSGI的深入理解
2018/08/01 Python
python使用MQTT给硬件传输图片的实现方法
2019/05/05 Python
python输出决策树图形的例子
2019/08/09 Python
python 利用turtle模块画出没有角的方格
2019/11/23 Python
python多进程 主进程和子进程间共享和不共享全局变量实例
2020/04/25 Python
基于HTML5的齿轮动画特效
2016/02/29 HTML / CSS
深入理解HTML5定时器requestAnimationFrame的使用
2018/12/12 HTML / CSS
大学生活学习的自我评价
2013/12/03 职场文书
收款委托书范本
2014/09/11 职场文书
夫妻忠诚协议书范本
2014/11/17 职场文书
未中标通知书
2015/04/17 职场文书
goland 恢复已更改文件的操作
2021/04/28 Golang
详解CSS玩转图片Base64编码
2021/05/25 HTML / CSS