摘要：本篇文章我們進(jìn)一步深入項(xiàng)目設(shè)計(jì)評(píng)價(jià)組件。使得組件更加便于維護(hù)。路徑配置內(nèi)自動(dòng)補(bǔ)全設(shè)置通過(guò)重命名設(shè)置對(duì)組件導(dǎo)入模塊時(shí)進(jìn)行了重命名。全部有圖點(diǎn)評(píng)使用引入的組件組件就是上圖標(biāo)記的分隔線(xiàn)。

在上篇文章我們將項(xiàng)目頭部模塊進(jìn)行了編寫(xiě)與數(shù)據(jù)渲染。

本篇文章我們進(jìn)一步深入項(xiàng)目設(shè)計(jì)評(píng)價(jià)組件。

分析頁(yè)面

如圖所示，點(diǎn)菜，評(píng)價(jià)，商家，為導(dǎo)航，我們點(diǎn)擊評(píng)價(jià)的時(shí)候，直接跳轉(zhuǎn)評(píng)價(jià)頁(yè)面。

評(píng)價(jià)頁(yè)面由商家評(píng)分一欄，評(píng)論列表構(gòu)成，評(píng)論列表支持：全部，有圖，點(diǎn)評(píng)三種篩選。

綜上我們現(xiàn)在開(kāi)始設(shè)計(jì)評(píng)論組件：

建立組件文件夾

1.css圖片的存放

針對(duì)組件引用的圖片可能產(chǎn)生變動(dòng)性，我們將組件內(nèi)的圖片放入組件文件夾內(nèi)，進(jìn)行引用。使得組件更加便于維護(hù)。

2.路徑配置

build/webpack.base.conf.js內(nèi)：

alias: {
    "vue$": "vue/dist/vue.esm.js",//自動(dòng)補(bǔ)全設(shè)置
    "@": resolve("src"),
    "components": resolve("./src/components")
}

通過(guò)alias重命名設(shè)置對(duì)組件導(dǎo)入模塊時(shí)進(jìn)行了重命名。

實(shí)際在導(dǎo)入需要的組件寫(xiě)法：

// 舉個(gè)例子，導(dǎo)入Ratings組價(jià)可以寫(xiě)成
    import Ratings from "components/Ratings/Ratings"

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

根據(jù)分析頁(yè)面結(jié)構(gòu)整理以后所以我們先把頁(yè)面結(jié)構(gòu)搭建出來(lái)：

在Ratings.vue中：

//設(shè)置容器存放評(píng)論組件

現(xiàn)在我們?cè)O(shè)計(jì)商家評(píng)分，口味，包裝，等結(jié)構(gòu)如下圖：

    

        

            
{{ratings.comment_score}}
            
商家評(píng)分
        
        

            

                口味
                
                {{ratings.quality_score}}
            
            

                包裝
                
                {{ratings.pack_score}}
            
        
    
    

        

            
{{ratings.delivery_score}}
            
配送評(píng)分
        
    

實(shí)現(xiàn)評(píng)論中選項(xiàng)卡（全部，有圖，點(diǎn)評(píng)），列表頁(yè)面：

                

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

                

                    0}">
                        {{item.content}}{{item.label_count}}
                    
                
                //評(píng)論列表
                

                    

                        

                            
                            
                        
                        

                            

                                {{comment.user_name}}
                            
                            

                                {{fotmatDate(comment.comment_time)}}
                            
                            

                                評(píng)分
                                
                            
                            

                            

                                
                            
                        
                    
                
            

結(jié)構(gòu)搭建完成，下面我們?yōu)榻M件傳入對(duì)應(yīng)的數(shù)據(jù)。

父子組件通信

Ratings.vue

導(dǎo)入依賴(lài)的子組件：

    //設(shè)置選項(xiàng)卡變量
    const ALL = 2; // 全部 
    const PICTURE = 1; // 帶圖片
    const COMMENT = 0; // 點(diǎn)評(píng)

下面我們開(kāi)始初始化data，在created鉤子內(nèi)發(fā)起請(qǐng)求。

ratings數(shù)據(jù)部分展示：

   
    export default {
        data() {
            return {
                ratings: {},//存放請(qǐng)求到的數(shù)據(jù)
                selectType: ALL,//默認(rèn)展示全部
            }
        },
        created() {
            // 通過(guò)axios發(fā)起get請(qǐng)求
            let that = this;
            this.$axios.get("/api/ratings")
                .then(function(response) { // 獲取到數(shù)據(jù)
                    var dataSource = response.data;
                    if(dataSource.code == 0) {
                        that.ratings = dataSource.data;//將請(qǐng)求到的數(shù)據(jù)引用到data（）中
                        // 初始化滾動(dòng)
                        that.$nextTick(() => {
                            if(!that.scroll) {
                                that.scroll = new BScroll(that.$refs.ratingView, {
                                    click: true
                                });
                            } else {
                                that.scroll.refresh();
                            }
                        });
                    }

                })
                .catch(function(error) { // 出錯(cuò)處理
                    console.log(error);
                });
        }
    }
    

注意$refs與設(shè)置容器中的ref="ratingView"我們用BScroll來(lái)操作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);

                // 時(shí)間格式
                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中點(diǎn)擊事件執(zhí)行的切換函數(shù)；

fotmatDate（time）設(shè)置時(shí)間展示格式函數(shù)；

commentStr（content）插入文本函數(shù)；

注意selectTypeFn函數(shù)內(nèi)在我們點(diǎn)擊對(duì)應(yīng)的選項(xiàng)卡后使用 $nextTick（）條用scroll刷新列表；

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

通過(guò)計(jì)算屬性將數(shù)據(jù)傳入class為rating-list模板中：

selectType的值決定了評(píng)論列表展示的數(shù)據(jù)內(nèi)容

需要再次注意方法與計(jì)算屬性調(diào)用方法等區(qū)別，之前我們對(duì)比過(guò)，需要詳細(xì)了解，還請(qǐng)閱讀之前文章，或官方文檔。

        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 { // 點(diǎn)評(píng)
                    return this.ratings.comments_dp.comments;
                }
            }
        },

使用引入的組件：

        components: {
            Star,
            Split,
            BScroll
        }

Split組件就是上圖標(biāo)記的分隔線(xiàn)。

星級(jí)評(píng)分的邏輯實(shí)現(xiàn)

新建Star文件

星星展示形式為 全星，半星，無(wú)星 通過(guò)for循環(huán)搭建好star結(jié)構(gòu)：

通過(guò)props接受父組件傳來(lái)的score值，并在star內(nèi)使用，

通過(guò)計(jì)算屬性對(duì)star內(nèi)的score進(jìn)行處理，

到此我們從評(píng)價(jià)組件的頁(yè)面分析，拆出了合理的模板結(jié)構(gòu)，接著配置圖片，組件引用的路徑，節(jié)省了我們?cè)陂_(kāi)發(fā)中的時(shí)間，最后也是最重要的是數(shù)據(jù)的渲染，以及星級(jí)評(píng)分的實(shí)現(xiàn)。過(guò)程中，我們?cè)俅渭由顚?duì)vue的props，methods，computed，$nextTick()等理解。

以上就是本篇全部?jī)?nèi)容，下篇我們將會(huì)細(xì)化商品展示頁(yè)面，我們下篇見(jiàn)。