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

这篇我们来实现商品评价栏目。

完成评分组件的结构：

我们先来设置一个ratings容器，还是熟悉的老情况，ratings-wrapper的高度可能会超过ratings，这时候我们肯定会让ratings内出现滚动条的，ref也是老朋友了，配合Bscroll实现ratings-wrapper的滚动。

接着我们通过overview来构建商家评分内容。

最后评论的内容content部分，我们通过点击全部，有图，点评，来显示不同的内容，content这个部分就是我们经常遇到的俗称选项卡。

    

      

        

          

            
{{ratings.comment_score}}
            
商家评分
          
          

            

              口味
      
              {{ratings.quality_score}}
            
            

              包装
             
              {{ratings.pack_score}}
            
          
        
        

          

            
{{ratings.delivery_score}}
            
配送评分
          
        
      
      

        

          {{ratings.tab[0].comment_score_title}}
          {{ratings.tab[1].comment_score_title}}
          
            
            
            {{ratings.tab[2].comment_score_title}}
          
        

        

          {{item.content}}{{item.label_count}}
        

        

          

            

              
              
            
            

              
{{comment.user_name}}
              
{{fotmatDate(comment.comment_time)}}
              

                评分
              
              

              

                
              
            
          
        
      
    
  

获取评分数据

我们定义了评分展示的种类，全部，带图片，点评。

接着通过data初始化我们的需要的数据。

然后我们通过get请求，拿到数据通过this.ratings覆盖初始化数据。

在拿到数据后紧接着使用selectTypeFn方法，为展示的内容铺路，分为三种展示形式。

处理时间上我们使用了fotmatDate方法，这里关于正则这部分，我们用了RegExp.$1属性，会匹配到第一个符合正则表达式的元素。

同样使用正则的地方还有commentStr函数，主要对评论内容进行过滤。

最终由计算属性selectComments完成展示的对应内容，当然这个展示逻辑依据于我们selectTypeFn方法的规定。

组件的样式

总结

本篇实现商品评价栏目,其中，在处理日期，过滤文字的需求上我们使用了正则，简化了我们程序的复杂度。重要的逻辑在于用selectTypeFn（）的方法处理模板显隐的展示，内容显示逻辑在selectComments（）计算属性上，这两个主要逻辑我们需要了解清楚。
好，今天就到这里，我们下期再会。