評價列表ratings元件

線上猛如虎發表於2017-05-08
元件

需要注意的是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的效果

相關文章