評價列表ratings組件

須要注意的是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>

• 須要注意recommend的佈局處理

• needShow和過濾時間相似food.vue組件裏面使用九.商品詳情頁food.vue

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的效果