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（）计算属性上，这两个主要逻辑我们需要了解清楚。
好，今天就到这里，我们下期再会。

Vue实战—如何实现商品评价栏目（14）

彬哥头发多

引用和评论

vue3公司自用项目实战入门（vue3+router4+antdv+pinia实现）

腾讯新闻中心首页改版啦

前端如何入门 Go 语言

100个React最佳实践小技巧

前端开发工具

开发插件集合

JS校验身份证号