评价列表ratings组件

成倅
• 阅读 3169

需要注意的是main.js里面需要取消vue-router的默认路由,src/main.js的router.replace('/goods');需要去掉
原因是在添加了其他页面(原来路由只有一个页面goods,现在多了页面ratings)之后,在浏览器加载页面的时候:

  1. 首先会先加载所有页面

  2. 在各个页面都在加载的过程中,会跳到默认路由

  3. 然后这些页面被中断了加载,导致了页面内部的一些靠dom渲染的代码无法执行,例如bs-scroll

  4. 所以会出现一些报错,TypeError: Cannot read property 'children' of undefined
    所以要做默认路由的时候,直接用url做,不用vue-router自己去跳转,直接写第一个url的地址

主体框架

<div class="ratings" ref="ratings">
 <div class="overview">
    
 </div>
<!--里面是所有的内容-->
</div>

  • 需要加一个ref,为了让bscroll可以初始化dom

ratings内容

html代码

<div class="ratings-content">
      <div class="overview">
        <div class="overview-left">
          <h1 class="score">{{seller.score}}</h1>
          <div class="title">综合评分</div>
          <div class="rank">高于周边商家{{seller.rankRate}}%</div>
        </div>
        <div class="overview-right">
        <!--三个一样的模块,服务态度,商品评分,送达时间-->
          <div class="score-wrapper">
            <span class="title">服务态度</span>
            <!--引入了star组件-->
            <star :size="36" :score="seller.serviceScore"></star>
            <span class="score">{{seller.serviceScore}}</span>
          </div>
          <div class="score-wrapper">
            <span class="title">商品评分</span>
            <star :size="36" :score="seller.foodScore"></star>
            <span class="score">{{seller.foodScore}}</span>
          </div>
          <div class="delivery-wrapper">
            <span class="title">送达时间</span>
            <span class="delivery">{{seller.deliveryTime}}分钟</span>
          </div>
        </div>
</div>

  • 三个一样的模块共用一套样式代码,分别代入不同的数据

  • 这里的数据都是获取seller的数据,是父组件传入的props

js代码

  import star from '../star/star';

  export default {
    props: {
      seller: {
        type: Object
      }
    },
    components: {
      star
    }
  };

css代码

  .ratings
    position: absolute
    top: 174px //留空一部分,给header使用
    bottom: 0
    left: 0
    width: 100%
    overflow: hidden
    .overview
      display: flex
      padding: 18px 0
      .overview-left
        flex: 0 0 137px //flex布局,固定左边,右边自动适配
        padding: 6px 0
        width: 137px
        border-right: 1px solid rgba(7, 17, 27, 0.1)
        text-align: center
        @media only screen and (max-width: 320px) //适配i5屏幕
          flex: 0 0 120px //适配的flex数值可以从根据设计稿计算
          width: 120px
        .score
          margin-bottom: 6px
          line-height: 28px
          font-size: 24px
          color: rgb(255, 153, 0)
        .title
          margin-bottom: 8px
          line-height: 12px
          font-size: 12px
          color: rgb(7, 17, 27)
        .rank
          line-height: 10px
          font-size: 10px
          color: rgb(147, 153, 159)
      .overview-right
        flex: 1 //flex布局,固定左边,右边自动适配
        padding: 6px 0 6px 24px
        @media only screen and (max-width: 320px) //适配i5屏幕
          padding-left: 6px
        .score-wrapper //三个一样的模块的共用样式
          margin-bottom: 8px
          font-size: 0
          .title
            display: inline-block
            line-height: 18px //针对模块内部的元素的对齐行,所以需要写到内部元素里面去
            vertical-align: top 
            font-size: 12px
            color: rgb(7, 17, 27)
          .star
            display: inline-block
            margin: 0 12px
            vertical-align: top
          .score
            display: inline-block
            line-height: 18px
            vertical-align: top
            font-size: 12px
            color: rgb(255, 153, 0)
        .delivery-wrapper
          font-size: 0
          .title
            line-height: 18px
            font-size: 12px
            color: rgb(7, 17, 27)
          .delivery
            margin-left: 12px
            font-size: 12px
            color: rgb(147, 153, 159)

  • 关于适配iphone5,因为设计稿是以iphone6为模板设计的,如果不适配一些小的屏幕的话,对于一些比较宽的div(例如overview-left,overview-right)就会出现换行,被挤压的显示清空,所以需要使用media query来做一些基本的适配,这里只是以iphone5为适配参考,具体做法就是针对不同的屏幕宽度做处理

ratingselect组件

这个引入类似ratingselect组件

html代码

<!--引入split组件-->
<split></split>
<!-- 引入ratingselect组件 -->
      <ratingselect @select="selectRating" @toggle="toggleContent" :selectType="selectType" :onlyContent="onlyContent"
                    :ratings="ratings"></ratingselect>

ratings列表

html代码

<div class="rating-wrapper">
        <ul>
        <!--使用needShow方法控制显示-->
          <li v-for="rating in ratings" v-show="needShow(rating.rateType, rating.text)" class="rating-item">
            <div class="avatar">
              <img width="28" height="28" :src="rating.avatar">
            </div>
            <div class="content">
              <h1 class="name">{{rating.username}}</h1>
              <div class="star-wrapper">
              <!--引入star组件-->
                <star :size="24" :score="rating.score"></star>
                <span class="delivery" v-show="rating.deliveryTime">{{rating.deliveryTime}}</span>
              </div>
              <p class="text">{{rating.text}}</p>
              <!--recommend的处理,尤其注意class跟布局的使用-->
              <div class="recommend" v-show="rating.recommend && rating.recommend.length">
                <span class="icon-thumb_up"></span>
                <span class="item" v-for="item in rating.recommend">{{item}}</span>
              </div>
              <!--过滤时间格式-->
              <div class="time">
                {{rating.rateTime | formatDate}}
              </div>
            </div>
          </li>
        </ul>
</div>

js代码

  import BScroll from 'better-scroll';
  import { formatDate } from '../../common/js/date'; //相对路径导入
  import star from '../star/star';

  const ALL = 2; //设置常量,比较好的代码风格,代替直接写数字到代码里面去
  const ERR_OK = 0;

  export default {
    props: {
      seller: {
        type: Object
      }
    },
    data() {
      return {
        ratings: []
      };
    },
    created() { //初始化数据,从api那里获取
      this.$http.get('/api/ratings').then((response) => {
        response = response.body;
        if (response.errno === ERR_OK) {
          this.ratings = response.data;
          this.$nextTick(() => { //异步初始化滚动
            this.scroll = new BScroll(this.$refs.ratings, {
              click: true
            });
          });
        }
      });
    },
    methods: {
      needShow(type, text) { //控制显示是否有内容的rate
        if (this.onlyContent && !text) {
          return false;
        }
        if (this.selectType === ALL) {
          return true;
        } else {
          return type === this.selectType;
        }
      }
    },
    filters: { //过滤时间
      formatDate(time) {
        let date = new Date(time);
        return formatDate(date, 'yyyy-MM-dd hh:mm');
      }
    },
    components: {
      star
    }
  };

css代码

@import "../../common/stylus/mixin.styl"

    .rating-wrapper
      padding: 0 18px
      .rating-item
        display: flex //使用flex布局
        padding: 18px 0
        border-1px(rgba(7, 17, 27, 0.1))
        .avatar
          flex: 0 0 28px //使用flex布局
          width: 28px
          margin-right: 12px
          img
            border-radius: 50%
        .content
          position: relative //重新定义相对布局的参考父div,被内部元素做绝对布局使用
          flex: 1 //使用flex布局
          .name
            margin-bottom: 4px
            line-height: 12px
            font-size: 10px
            color: rgb(7, 17, 27)
          .star-wrapper
            margin-bottom: 6px
            font-size: 0
            .star
              display: inline-block
              margin-right: 6px
              vertical-align: top
            .delivery
              display: inline-block
              vertical-align: top
              line-height: 12px
              font-size: 10px
              color: rgb(147, 153, 159)
          .text
            margin-bottom: 8px
            line-height: 18px
            color: rgb(7, 17, 27)
            font-size: 12px
          .recommend
            line-height: 16px
            font-size: 0
            .icon-thumb_up, .item //共有属性
              display: inline-block
              margin: 0 8px 4px 0 //分配右外边距和下外边距
              font-size: 9px
            .icon-thumb_up //个别属性,因为icon没有颜色,需要配置
              color: rgb(0, 160, 220)
            .item //个别属性
              padding: 0 6px //设置左右内边距,撑开布局,形成类似button的效果
              border: 1px solid rgba(7, 17, 27, 0.1)
              border-radius: 1px
              color: rgb(147, 153, 159)
              background: #fff
          .time
            position: absolute
            top: 0
            right: 0
            line-height: 12px
            font-size: 10px
            color: rgb(147, 153, 159)

  • 这里的flex布局是左边固定28px,然后右边占满剩下的空间

    • flex: 0 0 28px 是flex-grow为0(项目不放大比例),flex-shrink为0(项目不缩小比例),flex-basis为28px(固定占用28px)

    • flex: 1是flex 1 1 auto的缩写,就是会放大项目比例,并且剩余的项目空间也占有
      参考:Flex 布局教程：语法篇

  • 针对recommend的布局:

    • 每一个内容都是一个span,span是行内元素,可以并列一行

    • 设置外边距是为了span之间能够形成独立的间隙

    • 设置内边距是为了让span和文字形成button的效果

点赞
收藏
评论区
推荐文章
blueju blueju
•
4年前
umi +qiankun 主应用动态装载子应用（路由）解决方案
<aname"p1boA"</a前言接上一篇（），上一篇中使用的都是运行时动态注册子应用，子应用路由仍然是写死的、非动态获取。<br/<br/然后真实项目中除了需要动态注册子应用，还很有可能需要动态装载子应用（路由），比如说：不同权限的用户需要给予他们不同的路由。<br/<br/此篇blog的代码是基于上一篇进行改动的，上一篇
2711
0
0
昔不亏 昔不亏
•
4年前
「Vue — 插件」导入导出excel表格vue-xlsx-table
1：npminstallvuexlsxtablesave（excel转json）2：在main.js中jsimportvueXlsxTablefrom'vuexlsxtable';Vue.use(vueXlsxTable,{rABS:false});3：在需要使用的页面中js<vuexlsxtable@
2118
0
0
编程范儿 编程范儿
•
3年前
Vue刷新页面有哪几种方式
在Vue项目中，刷新当前页除了window.reload()，你还能想到什么办法？而且这种办法会重新加载资源出现短暂的空白页面。体验不是很好。在某个详情页面的时候，我们经常需要通过路由中的详情id去获取内容，当我们在不同的详情页来回切换的时候，打开的页面是同一个，只是需要通过监听路由中的参数id的变化去重新请求详情接口。如果这个详情页只需要一个接口
2260
0
0
海军 海军
•
4年前
Vue | 路由守卫面试常考
前言最近在整理基础，欢迎一起交流学习<br/结尾有彩蛋哦！🎉🎉🎉VueRouter路由守卫导图目录1.路由守卫分类2.全局路由守卫3.单个路由守卫4.组件路由守卫5.路由守卫执行的完整过程<hr/路由守卫分类全局路由单个路由独享组件内部
1743
0
0
Stella981 Stella981
•
3年前
React Hooks实现异步请求实例—useReducer、useContext和useEffect代替Redux方案
<blockquote本文是学习了2018年新鲜出炉的ReactHooks提案之后，针对<strong异步请求数据</strong写的一个案例。注意，本文假设了：<br1.你已经初步了解<codehooks</code的含义了，如果不了解还请移步<ahref"https://reactjs.org/docs/hooksintro.html
1214
0
0
Stella981 Stella981
•
3年前
Linux自动检测网站心跳通知shell脚本
!/bin/bashLIST("http://xxxx.com")NAME("评价系统getwindowList接口")for((i0;i<${LIST@};i))doHTTP_CODEcurlo/dev/nullsw"%{http_code}""${LIST
947
0
0
Stella981 Stella981
•
3年前
Django之Django模板
1、问：html页面从数据库中读出DateTimeField字段时，显示的时间格式和数据库中存放的格式不一致，比如数据库字段内容为2012082616:00:00，但是页面显示的却是Aug.26,2012,4p.m.答：为了页面和数据库中显示一致，需要在页面格式化时间，需要添加<td{{dayrecord.p\_time|date:
1219
0
0
Wesley13 Wesley13
•
3年前
ES6部分特性学习
/testes6@authorsYourName(you@example.org)@date2017121519:29:39@version$Id$///由于学习vuerouter需要，学学ES6；在babel中文网看到tr
802
0
0
Stella981 Stella981
•
3年前
MPLS VPN随堂笔记1
MPLSVPN基础1、MPLSvpn架构的特点1.1.允许不同CE传递相同私网路由1.2.SP内部（所有P路由器）不需要学习CE路由1.3.无安全保障但有带宽保障（跟SP租用服务）2、MPLSvpn架构的主要组件CE客户边缘路由器C客户内部路由器PE运营商边缘路由器P运营商内部路由
1091
0
0
Stella981 Stella981
•
3年前
Django中Admin中的一些参数配置
设置在列表中显示的字段，id为django模型默认的主键list_display('id','name','sex','profession','email','qq','phone','status','create_time')设置在列表可编辑字段list_editable
1661
0
0
美凌格栋栋酱 美凌格栋栋酱
•
5个月前
Oracle 分组与拼接字符串同时使用
SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(
1958
0
0
成倅
成倅
Lv1
日日望乡国，空歌白苎词。
文章
9
粉丝
0
获赞
0
热门文章
Spring Boot使用Spring Mobile组件快速判断请求来源的设备
服务注册与发现
用什么软件可以把歌曲截取一部分
java位运算和字节编码（一）
JavaScript实现类与继承的方法（全面整理）