Vue實戰—如何實現商品評價欄目（14）

這篇咱們來實現商品評價欄目。

完成評分組件的結構：

咱們先來設置一個ratings容器，仍是熟悉的老狀況，ratings-wrapper的高度可能會超過ratings，這時候咱們確定會讓ratings內出現滾動條的，ref也是老朋友了，配合Bscroll實現ratings-wrapper的滾動。

接着咱們經過overview來構建商家評份內容。

最後評論的內容content部分，咱們經過點擊所有，有圖，點評，來顯示不一樣的內容，content這個部分就是咱們常常遇到的俗稱選項卡。

<div class="ratings" ref="ratingView">
    <div class="ratings-wrapper">
      <div class="overview">
        <div class="overview-left">
          <div class="comment-score">
            <p class="score">{{ratings.comment_score}}</p>
            <p class="text">商家評分</p>
          </div>
          <div class="other-score">
            <div class="quality-score item">
              <span class="text">口味</span>
      
              <span class="score">{{ratings.quality_score}}</span>
            </div>
            <div class="pack-score item">
              <span class="text">包裝</span>
             
              <span class="score">{{ratings.pack_score}}</span>
            </div>
          </div>
        </div>
        <div class="overview-right">
          <div class="delivery-score">
            <p class="score">{{ratings.delivery_score}}</p>
            <p class="text">配送評分</p>
          </div>
        </div>
      </div>
      <div class="content">
        <div class="rating-select" v-if="ratings.tab">
          <span
            class="item"
            @click="selectTypeFn(2)"
            :class="{'active':selectType==2}"
          >{{ratings.tab[0].comment_score_title}}</span>
          <span
            class="item"
            @click="selectTypeFn(1)"
            :class="{'active':selectType==1}"
          >{{ratings.tab[1].comment_score_title}}</span>
          <span class="item" @click="selectTypeFn(0)" :class="{'active':selectType==0}">
            <img src="./icon_sub_tab_dp_normal@2x.png" v-show="selectType!=0">
            <img src="./icon_sub_tab_dp_highlighted@2x.png" v-show="selectType==0">
            {{ratings.tab[2].comment_score_title}}
          </span>
        </div>

        <div class="labels-view">
          <span
            v-for="item in ratings.labels"
            class="item"
            :class="{'highligh':item.label_star>0}"
          >{{item.content}}{{item.label_count}}</span>
        </div>

        <ul class="rating-list">
          <li v-for="comment in selectComments" class="comment-item">
            <div class="comment-header">
              <img :src="comment.user_pic_url" v-if="comment.user_pic_url">
              <img src="./anonymity.png" v-if="!comment.user_pic_url">
            </div>
            <div class="comment-main">
              <div class="user">{{comment.user_name}}</div>
              <div class="time">{{fotmatDate(comment.comment_time)}}</div>
              <div class="star-wrapper">
                <span class="text">評分</span>
              </div>
              <div class="c_content" v-html="commentStr(comment.comment)"></div>
              <div class="img-wrapper" v-if="comment.comment_pics.length">
                <img v-for="item in comment.comment_pics" :src="item.thumbnail_url">
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

獲取評分數據

咱們定義了評分展現的種類，所有，帶圖片，點評。

接着經過data初始化咱們的須要的數據。

而後咱們經過get請求，拿到數據經過this.ratings覆蓋初始化數據。

在拿到數據後緊接着使用selectTypeFn方法，爲展現的內容鋪路，分爲三種展現形式。

處理時間上咱們使用了fotmatDate方法，這裏關於正則這部分，咱們用了RegExp.$1屬性，會匹配到第一個符合正則表達式的元素。

一樣使用正則的地方還有commentStr函數，主要對評論內容進行過濾。

最終由計算屬性selectComments完成展現的對應內容，固然這個展現邏輯依據於咱們selectTypeFn方法的規定。

<script>
// 導入BScroll
import BScroll from "better-scroll";

const ALL = 2; // 所有
const PICTURE = 1; // 帶圖片
const COMMENT = 0; // 點評

export default {
  data() {
    return {
      ratings: {},
      selectType: ALL
    };
  },
  created() {
    // 經過axios發起get請求
    let that = this;
    this.$axios
      .get("/api/rates")
      .then(function(response) {
        // 獲取到數據
        var dataSource = response.data;
        if (dataSource.code == 0) {
          that.ratings = dataSource.data;

          // 初始化滾動
          that.$nextTick(() => {
            if (!that.scroll) {
              that.scroll = new BScroll(that.$refs.ratingView, {
                click: true
              });
            } else {
              that.scroll.refresh();
            }
          });
        }
      })
      .catch(function(error) {
        // 出錯處理
        console.log(error);
      });
  },
  methods: {
    selectTypeFn(type) {
      this.selectType = type;

      // 刷新操做
      this.$nextTick(() => {
        this.scroll.refresh();
      });
    },
    fotmatDate(time) {
      let date = new Date(time * 1000);

      // 時間格式
      let fmt = "yyyy.MM.dd";

      if (/(y+)/.test(fmt)) {
        // 年
        let year = date.getFullYear().toString();
        fmt = fmt.replace(RegExp.$1, year);
      }
      if (/(M+)/.test(fmt)) {
        // 月
        let mouth = date.getMonth() + 1;
        if (mouth < 10) {
          mouth = "0" + mouth;
        }
        fmt = fmt.replace(RegExp.$1, mouth);
      }
      if (/(d+)/.test(fmt)) {
        // 日
        let mydate = date.getDate();
        if (mydate < 10) {
          mydate = "0" + mydate;
        }
        fmt = fmt.replace(RegExp.$1, mydate);
      }

      return fmt;
    },
    commentStr(content) {
      let rel = /#[^#]+#/g;

      return content.replace(rel, "<i>$&</i>");
    }
  },
  computed: {
    selectComments() {
      if (this.selectType == ALL) {
        // 所有
        return this.ratings.comments;
      } else if (this.selectType == PICTURE) {
        // 有圖
        let arr = [];
        this.ratings.comments.forEach(comment => {
          if (comment.comment_pics.length) {
            arr.push(comment);
          }
        });
        return arr;
      } else {
        // 點評
        return this.ratings.comments_dp.comments;
      }
    }
  },
  components: {
    BScroll
  }
};
</script>

組件的樣式

<style>
.ratings {
  position: absolute;
  left: 0;
  top: 191px;
  bottom: 0;
  width: 100%;
  overflow: hidden;
}

.ratings .ratings-wrapper .overview {
  padding: 20px 0 18px 0;
  display: flex;
}

.ratings .ratings-wrapper .overview .overview-left {
  flex: 1;
  padding-left: 26px;
}

.ratings .ratings-wrapper .overview .overview-left .comment-score {
  float: left;
  width: 48px;
  text-align: center;
  margin-right: 26px;
}

.ratings .ratings-wrapper .overview .overview-left .comment-score .score {
  font-size: 23px;
  font-weight: 800;
  color: #ffb000;
  margin-bottom: 9px;
}

.ratings .ratings-wrapper .overview .overview-left .comment-score .text {
  font-size: 11px;
  color: #666666;
}

.ratings .ratings-wrapper .overview .overview-left .other-score {
  float: left;
  margin-top: 3px;
}

.ratings .ratings-wrapper .overview .overview-left .other-score .item {
  height: 11px;
}

.ratings .ratings-wrapper .overview .overview-left .other-score .item .text {
  font-size: 11px;
  color: #666666;
  margin-right: 11px;
  float: left;
}

.ratings .ratings-wrapper .overview .overview-left .other-score .item .star {
  float: left;
  margin-right: 11px;
}

.ratings .ratings-wrapper .overview .overview-left .other-score .item .score {
  font-size: 11px;
  color: #ffb000;
  float: left;
}

.ratings .ratings-wrapper .overview .overview-left .other-score .quality-score {
  margin-bottom: 14px;
}

.ratings .ratings-wrapper .overview .overview-right {
  flex: 0 0 100px;
  text-align: center;
  border-left: 1px solid #9d9d9d;
}

.ratings .ratings-wrapper .overview .overview-right .delivery-score {
}

.ratings .ratings-wrapper .overview .overview-right .delivery-score .score {
  font-size: 19px;
  font-weight: 500;
  color: #999999;
  margin-bottom: 10px;
  margin-top: 3px;
}

.ratings .ratings-wrapper .overview .overview-right .delivery-score .text {
  font-size: 11px;
  color: #999999;
}

.ratings .ratings-wrapper .content {
  padding: 16px;
}

.ratings .ratings-wrapper .content .rating-select {
  width: 100%;
  box-sizing: border-box;
  font-size: 0;
  border: 1px solid #ffb000;
  border-right: 0;
  margin-bottom: 11px;
  border-radius: 3px;
}

.ratings .ratings-wrapper .content .rating-select .item {
  width: 33.3%;
  display: inline-block;
  height: 33px;
  line-height: 33px;
  font-size: 14px;
  text-align: center;
  border-right: 1px solid #ffb000;
  box-sizing: border-box;
  color: #ffb000;
}

.ratings .ratings-wrapper .content .rating-select .item:last-child img {
  height: 14px;
  vertical-align: middle;
}

.ratings .ratings-wrapper .content .rating-select .item.active {
  background: #ffb000;
  color: black;
}

.ratings .ratings-wrapper .content .labels-view {
  /*margin-bottom: 14px;*/
}

.ratings .ratings-wrapper .content .labels-view .item {
  display: inline-block;
  height: 27px;
  line-height: 27px;
  padding: 0 10px;
  font-size: 12px;
  background: #f4f4f4;
  margin-right: 6px;
  margin-bottom: 6px;
  border-radius: 3px;
  color: #999999;
}

.ratings .ratings-wrapper .content .labels-view .item.highligh {
  color: #656565;
}

.ratings .ratings-wrapper .content .rating-list {
}

.ratings .ratings-wrapper .content .rating-list .comment-item {
  padding: 16px 16px 16px 0;
  border-bottom: 1px solid #f4f4f4;
  width: 100%;
  box-sizing: border-box;
  display: flex;
}

.ratings .ratings-wrapper .content .rating-list .comment-item .comment-header {
  flex: 0 0 35px;
  margin-right: 11px;
}

.ratings
  .ratings-wrapper
  .content
  .rating-list
  .comment-item
  .comment-header
  img {
  width: 35px;
  height: 35px;
  border-radius: 50%;
}

.ratings .ratings-wrapper .content .rating-list .comment-item .comment-main {
  flex: 1;
}

.ratings
  .ratings-wrapper
  .content
  .rating-list
  .comment-item
  .comment-main
  .user {
  width: 50%;
  float: left;
  font-size: 11px;
  color: #333333;
}

.ratings
  .ratings-wrapper
  .content
  .rating-list
  .comment-item
  .comment-main
  .time {
  width: 50%;
  float: right;
  text-align: right;
  font-size: 9px;
  color: #666666;
}

.ratings
  .ratings-wrapper
  .content
  .rating-list
  .comment-item
  .comment-main
  .star-wrapper {
  float: left;
  margin-top: 12px;
  margin-bottom: 15px;
  width: 100%;
}

.ratings
  .ratings-wrapper
  .content
  .rating-list
  .comment-item
  .comment-main
  .star-wrapper
  .text {
  color: #999999;
  font-size: 11px;
  float: left;
}

.ratings
  .ratings-wrapper
  .content
  .rating-list
  .comment-item
  .comment-main
  .star-wrapper
  .star {
  float: left;
  margin-left: 7px;
}

.ratings
  .ratings-wrapper
  .content
  .rating-list
  .comment-item
  .comment-main
  .c_content {
  font-size: 13px;
  line-height: 19px;
  float: left;
  width: 100%;
}

.ratings
  .ratings-wrapper
  .content
  .rating-list
  .comment-item
  .comment-main
  .c_content
  i {
  color: #576b95;
}

.ratings
  .ratings-wrapper
  .content
  .rating-list
  .comment-item
  .comment-main
  .img-wrapper {
  margin-top: 9px;
  float: left;
}

.ratings
  .ratings-wrapper
  .content
  .rating-list
  .comment-item
  .comment-main
  .img-wrapper
  img {
  width: 175px;
}
</style>

總結

本篇實現商品評價欄目,其中，在處理日期，過濾文字的需求上咱們使用了正則，簡化了咱們程序的複雜度。重要的邏輯在於用selectTypeFn（）的方法處理模板顯隱的展現，內容顯示邏輯在selectComments（）計算屬性上，這兩個主要邏輯咱們須要瞭解清楚。好，今天就到這裏，咱們下期再會。