近期將舊的商城系統(tǒng)統(tǒng)一遷移到JAVA商城平臺，新的商城系統(tǒng)采用市場上成熟的產品。上線后將不使用默認的模板,我們將開發(fā)一套適合自己風格的模板。自帶的手機端模板沒有對移動端的自定義評論功能進行適配,我們將為它增加富文本功能。

使用的這套巡云商城系統(tǒng)對每個功能都分成模塊，全部支持傳統(tǒng)頁面訪問方式和json訪問方式。

1.我們將新建一個布局

新1.png

2.在布局"查詢添加評論頁(移動版)"上添加版塊

新2.png

3.打開單頁應用模板布局文件

 模板： 全部模板  >> 新模板[new]  >> 單頁應用模板(移動版)  >>  布局編輯

引入vue-html5-editor文件

<link href="${commonPath}js/vue-html5-editor/style.css" type="text/css" rel="stylesheet">
<script src="${commonPath}js/vue-html5-editor/vue-html5-editor.js" type="text/javascript"/>

增加評論模板

<!-- 自定義評論 -->
<template id="comment-template">
    <div>
        <div class="commentModule">
            <div class="button"><mt-button type="primary"  @click.native="addCommentUI();" style="height: 28px;font-size: 16px;">發(fā)表評論</mt-button></div>
        
            <!-- 發(fā)表評論 -->
            <mt-popup v-model="popup_comment" position="right" style="width: 100%;height: 100%;">
                <mt-header fixed title="發(fā)表評論" style="background: #fafafa; color: #000000;font-size: 14px">
                    <mt-button icon="back" @click.native="popup_comment = false" slot="left" >返回</mt-button>
                    <router-link to="/index" slot="right" @click.native="popup_comment = false" >
                        <span class="cms-home" style="font-size: 18px;"></span>
                    </router-link>
                </mt-header> 
                <div class="addCommentScroll">
                    <div class="box" >
                        <div class="addCommentForm" >
                            <ul>
                                <li>
                                    <editor :content="commentContent" :height="200" :z-index="99999" @change="updateData"></editor>
                                    <p class="tips">
                                        <span>{{error.commentContent}}</span>   
                                    </p>
                                </li>

                                <li style="margin-left: 10px;margin-right: 10px; margin-top: 10px; ">
                                    <mt-button  type="primary" size="large"  @click.native="addComment">提交</mt-button>
                                    <p class="tips">
                                        <span>{{error.customComment}}</span>    
                                    </p>
                                    
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </mt-popup>
        </div>
    </div>
</div>

4.增加評論js模塊
打開移動版js文件

新3.png

增加js代碼

//評論組件
var comment_component = Vue.extend({
    template : '#comment-template',
    data : function data() {
        return {
            popup_comment :false,//發(fā)表評論彈出層
            customItemId : '',//自定義評論項目Id
            commentContent:'',//發(fā)表評論內容
            showCaptcha : false, //是否顯示驗證碼
            imgUrl : '', //驗證碼圖片
            captchaKey : '', //驗證碼key
            captchaValue : '', //驗證碼value
            error : {
                commentContent: '',
                captchaValue : '',
                customComment: '',
            },
        };
    },
    created : function created() {
        //從URL中獲取自定義評論項目Id
        this.customItemId = "5";//這里先固定測試這個
    },
    components:{
        
        //發(fā)表評論富文本
        "editor" : new VueHtml5Editor({
            name: "editor",
            language: "zh-cn",
            // 自定義各個圖標的class，默認使用的是font-awesome提供的圖標
            icons: {
                text: "fa fa-pencil",
                color: "fa fa-paint-brush",
                font: "fa fa-font",
                align: "fa fa-align-justify",
                list: "fa fa-list",
                link: "fa fa-link",
                unlink: "fa fa-unlink",
                tabulation: "fa fa-table",
                image: "fa fa-file-image-o",
                hr: "fa fa-minus",
                eraser: "fa fa-eraser",
                undo: "fa-undo fa",
                full: "fa fa-arrows-alt",
                info: "fa fa-info",
            },
            visibleModules: [
                "text",
                "color",
                "align",
                "link",
                "unlink",
                "eraser",
                "undo",
                "full-screen",
             ],
        })
    },
    methods : {

        //發(fā)表評論界面
        addCommentUI : function() {
            this.popup_comment = true;

            //查詢添加評論頁
            this.queryAddComment();
        },
        //查詢添加評論頁
        queryAddComment : function() {
        
            //是否顯示驗證碼
            
        },
        //添加評論
        addComment : function(event) {
            if (!event._constructed) { //如果不存在這個屬性,則不執(zhí)行下面的函數(shù)
                return;
            }
            
            //提交內容
            
        },
        

        //vue-html5-editor 富文本編輯器更新值
        updateData: function(data) {
            this.commentContent = data;
        },
    }
});

增加css代碼

.commentModule .addCommentScroll {
    width: 100%;
    height: 100%;
    background: #fff;
    right:0;
    margin-bottom: 0;
    border-bottom: none;
    overflow-y:hidden;
    -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch;
}
.commentModule .addCommentScroll .box{
    padding-top: 40px;
}
.commentModule .addCommentScroll .box .addCommentForm{margin-left:5px; margin-right: 5px;}
.commentModule .addCommentScroll .box .addCommentForm .tips{line-height:30px; margin-left: 115px}
.commentModule .addCommentScroll .box .addCommentForm .tips span{color: red;}
.commentModule .addCommentScroll .box .addCommentForm .tag{
    position: relative;min-height:40px;margin-top: 10px;
}

完成效果圖

新4.png