近期将旧的商城系统统一迁移到JAVA商城平台，新的商城系统采用市场上成熟的产品。上线后将不使用默认的模板,我们将开发一套适合自己风格的模板。自带的手机端模板没有对移动端的自定义评论功能进行适配,我们将为它增加富文本功能。
使用的这套巡云商城系统对每个功能都分成模块，全部支持传统页面访问方式和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;">发表评论</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文件
新3.png
增加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;
}
完成效果图
新4.png
网友评论