摘要：本篇文章我們進一步深入項目設計評價組件。使得組件更加便于維護。路徑配置內自動補全設置通過重命名設置對組件導入模塊時進行了重命名。全部有圖點評使用引入的組件組件就是上圖標記的分隔線。

在上篇文章我們將項目頭部模塊進行了編寫與數據渲染。

本篇文章我們進一步深入項目設計評價組件。

分析頁面

如圖所示，點菜，評價，商家，為導航，我們點擊評價的時候，直接跳轉評價頁面。

評價頁面由商家評分一欄，評論列表構成，評論列表支持：全部，有圖，點評三種篩選。

綜上我們現在開始設計評論組件：

建立組件文件夾

1.css圖片的存放

針對組件引用的圖片可能產生變動性，我們將組件內的圖片放入組件文件夾內，進行引用。使得組件更加便于維護。

2.路徑配置

build/webpack.base.conf.js內：

alias: {
    "vue$": "vue/dist/vue.esm.js",//自動補全設置
    "@": resolve("src"),
    "components": resolve("./src/components")
}

通過alias重命名設置對組件導入模塊時進行了重命名。

實際在導入需要的組件寫法：

// 舉個例子，導入Ratings組價可以寫成
    import Ratings from "components/Ratings/Ratings"

圖片存放，路徑配置完成以后我們建立Ratings文件夾并進入：

根據分析頁面結構整理以后所以我們先把頁面結構搭建出來：

在Ratings.vue中：

//設置容器存放評論組件

現在我們設計商家評分，口味，包裝，等結構如下圖：

    

        

            
{{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}}
                    
                

                

                    0}">
                        {{item.content}}{{item.label_count}}
                    
                
                //評論列表
                

                    

                        

                            
                            
                        
                        

                            

                                {{comment.user_name}}
                            
                            

                                {{fotmatDate(comment.comment_time)}}
                            
                            

                                評分
                                
                            
                            

                            

                                
                            
                        
                    
                
            

結構搭建完成，下面我們為組件傳入對應的數據。

父子組件通信

Ratings.vue

導入依賴的子組件：

    //設置選項卡變量
    const ALL = 2; // 全部 
    const PICTURE = 1; // 帶圖片
    const COMMENT = 0; // 點評

下面我們開始初始化data，在created鉤子內發起請求。

ratings數據部分展示：

   
    export default {
        data() {
            return {
                ratings: {},//存放請求到的數據
                selectType: ALL,//默認展示全部
            }
        },
        created() {
            // 通過axios發起get請求
            let that = this;
            this.$axios.get("/api/ratings")
                .then(function(response) { // 獲取到數據
                    var dataSource = response.data;
                    if(dataSource.code == 0) {
                        that.ratings = dataSource.data;//將請求到的數據引用到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);
                });
        }
    }
    

注意$refs與設置容器中的ref="ratingView"我們用BScroll來操作dom，所以使用了vue的ref API

https://cn.vuejs.org/v2/api/#ref

        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, "$&");
            }
        }

在methods中我們定義：

selectTypeFn(type) 在template中點擊事件執行的切換函數；

fotmatDate（time）設置時間展示格式函數；

commentStr（content）插入文本函數；

注意selectTypeFn函數內在我們點擊對應的選項卡后使用 $nextTick（）條用scroll刷新列表；

$nextTick()https://cn.vuejs.org/v2/guide...

通過計算屬性將數據傳入class為rating-list模板中：

selectType的值決定了評論列表展示的數據內容

需要再次注意方法與計算屬性調用方法等區別，之前我們對比過，需要詳細了解，還請閱讀之前文章，或官方文檔。

        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: {
            Star,
            Split,
            BScroll
        }

Split組件就是上圖標記的分隔線。

星級評分的邏輯實現

新建Star文件

星星展示形式為 全星，半星，無星 通過for循環搭建好star結構：

通過props接受父組件傳來的score值，并在star內使用，

通過計算屬性對star內的score進行處理，

到此我們從評價組件的頁面分析，拆出了合理的模板結構，接著配置圖片，組件引用的路徑，節省了我們在開發中的時間，最后也是最重要的是數據的渲染，以及星級評分的實現。過程中，我們再次加深對vue的props，methods，computed，$nextTick()等理解。

以上就是本篇全部內容，下篇我們將會細化商品展示頁面，我們下篇見。