近期将旧的商城系统统一迁移到JAVA商城平台,新的商城系统采用市场上成熟的产品。上线后将不使用默认的模板,我们将开发一套适合自己风格的模板。自带的手机端模板没有对移动端的自定义评论功能进行适配,我们将为它增加富文本功能。
使用的这套巡云商城系统对每个功能都分成模块,全部支持传统页面访问方式和json访问方式。
1.我们将新建一个布局
2.在布局"查询添加评论页(移动版)"上添加版块
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;">发表评论</mt-button></div> <!-- 发表评论 --> <mt-popup v-model="popup_comment" position="right" style="width: 100%;height: 100%;"> <mt-header fixed title="发表评论" 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文件
增加js代码
//评论组件 var comment_component = Vue.extend({ template : '#comment-template', data : function data() { return { popup_comment :false,//发表评论弹出层 customItemId : '',//自定义评论项目Id commentContent:'',//发表评论内容 showCaptcha : false, //是否显示验证码 imgUrl : '', //验证码图片 captchaKey : '', //验证码key captchaValue : '', //验证码value error : { commentContent: '', captchaValue : '', customComment: '', }, }; }, created : function created() { //从URL中获取自定义评论项目Id this.customItemId = "5";//这里先固定测试这个 }, components:{ //发表评论富文本 "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 : { //发表评论界面 addCommentUI : function() { this.popup_comment = true; //查询添加评论页 this.queryAddComment(); }, //查询添加评论页 queryAddComment : function() { //是否显示验证码 }, //添加评论 addComment : function(event) { if (!event._constructed) { //如果不存在这个属性,则不执行下面的函数 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; }
完成效果图