Skip to content

G
gk
Commit a90d382d authored by daniel's avatar daniel
Browse files
Options

style(service): 新增富文本编辑器

parent 39a1e160
Hide whitespace changes
Inline Side-by-side
Showing with 32 additions and 16 deletions
src/main/webapp/WEB-INF/views/cmpt/service.jsp
View file @ a90d382d
...@@ -41,6 +41,11 @@ ...@@ -41,6 +41,11 @@
<script type="text/javascript" charset="utf-8" src="${ctxStatic}/layer/layer.js"></script> <script type="text/javascript" charset="utf-8" src="${ctxStatic}/layer/layer.js"></script>
<link rel="stylesheet" href="${ctxStatic}/layer/skin/layer.css"> <link rel="stylesheet" href="${ctxStatic}/layer/skin/layer.css">
<script
src="https://enroll.geexek.com/js/ueditor/ueditor.config-zs.js?v=<%=System.currentTimeMillis()%>"></script>
<script
src="https://enroll.geexek.com/js/ueditor/ueditor.all.js?v=<%=System.currentTimeMillis()%>"></script>
<link rel="stylesheet" href="/static/cmpt/score.css?<%=System.currentTimeMillis()%>"> <link rel="stylesheet" href="/static/cmpt/score.css?<%=System.currentTimeMillis()%>">
<style> <style>
.action { .action {
...@@ -186,17 +191,23 @@ ...@@ -186,17 +191,23 @@
.cover { .cover {
width: 100%; width: 100%;
height: 200px; height: 100px;
background: rgba(247, 247, 247, 1); background: rgba(247, 247, 247, 1);
border-radius: 4px; border-radius: 4px;
border: 1px solid rgba(238, 238, 238, 1); border: 1px solid rgba(238, 238, 238, 1);
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
}
.cover-img {
width: 300px;
cursor: pointer; cursor: pointer;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
background-size: auto; background-size: cover;
height: 300px;
} }
.icon-cover { .icon-cover {
...@@ -325,8 +336,8 @@ ...@@ -325,8 +336,8 @@
</ul> </ul>
</nav> </nav>
</div> </div>
<div class="dialog" v-show="dialog" <div class="dialog" v-show="dialog" style="width:auto;height: 80vh; z-index: 99;display: flex;flex-direction: column;left: 50%;
style="width: 60vw; height: 80vh; z-index: 99;display: flex;flex-direction: column;"> transform: translateX(-50%);margin-left:0;">
<div> <div>
<span class="title" style="margin-bottom: 10px; color: #CE3939">{{title}}</span> <span class="title" style="margin-bottom: 10px; color: #CE3939">{{title}}</span>
</div> </div>
...@@ -372,21 +383,14 @@ ...@@ -372,21 +383,14 @@
<span class="title-new">经度</span> <span class="title-new">经度</span>
<div> <div>
<input class="input" type="number" v-model="service.lng" <input class="input" type="number" v-model="service.lng"
placeholder="请输入经度"> placeholder="请输入经度（如：106.639824000000000）">
</div> </div>
</div> </div>
<div class="func"> <div class="func">
<span class="title-new">纬度</span> <span class="title-new">纬度</span>
<div> <div>
<input class="input" type="number" v-model="service.lat" <input class="input" type="number" v-model="service.lat"
placeholder="请输入纬度"> placeholder="请输入纬度（如：26.672005000000000）">
</div>
</div>
<div class="func">
<span class="title-new">内容</span>
<div>
<textarea class="input" v-model="service.content"
placeholder="请输入内容"></textarea>
</div> </div>
</div> </div>
<div class="func"> <div class="func">
...@@ -394,18 +398,22 @@ ...@@ -394,18 +398,22 @@
<span style="font-size: 16px;color: #ce3939;margin:10px 0;"> <span style="font-size: 16px;color: #ce3939;margin:10px 0;">
<span <span
style="font-size: 12px;display: inline-block;border-radius: 50%;height: 18px;width: 18px;background: #ce3939;color: white;text-align: center;">注</span> style="font-size: 12px;display: inline-block;border-radius: 50%;height: 18px;width: 18px;background: #ce3939;color: white;text-align: center;">注</span>
<span style="display: inline">建议分辨率710*242</span> <span style="display: inline">建议分辨率500*500</span>
</span> </span>
<div> <div>
<label for="file"> <label for="file">
<div v-if="!service.imgUrl" class="cover"> <div v-if="!service.imgUrl" class="cover">
<span class="icon-cover"></span> <span class="icon-cover"></span>
</div> </div>
<img v-else class="cover" :src="service.imgUrl" /> <img v-else class="cover cover-img" :src="service.imgUrl" />
</label> </label>
<input id="file" type="file" style="display: none" @change="uploadFile"> <input id="file" type="file" style="display: none" @change="uploadFile">
</div> </div>
</div> </div>
<div class="func">
<span class="title-new">内容</span>
<div id="container"></div>
</div>
<div class="func"> <div class="func">
<span class="title-new">备注 1</span> <span class="title-new">备注 1</span>
<div> <div>
...@@ -465,6 +473,7 @@ ...@@ -465,6 +473,7 @@
var app = new Vue({ var app = new Vue({
el: '#sevice', el: '#sevice',
data: { data: {
editor: null,
list: [], list: [],
dialog: false, dialog: false,
title: '新增自助服务', title: '新增自助服务',
...@@ -521,6 +530,10 @@ ...@@ -521,6 +530,10 @@
1: '发布' 1: '发布'
} }
}, },
mounted() {
const editor = UE.getEditor('container');
this.editor = editor
},
methods: { methods: {
// 展示dialog // 展示dialog
addService() { addService() {
...@@ -612,11 +625,13 @@ ...@@ -612,11 +625,13 @@
layer.msg("经纬度不能为空！", { icon: 5, duration: 1500 }); layer.msg("经纬度不能为空！", { icon: 5, duration: 1500 });
return; return;
} }
var content = this.editor.getContent();
if (!service.content) { if (!content) {
layer.msg("内容不能为空！", { icon: 5, duration: 1500 }); layer.msg("内容不能为空！", { icon: 5, duration: 1500 });
return; return;
} }
this.service.content = content
const url = this.service.id ? '/api/joyfulRoad/updJoyfulRichText' : '/api/joyfulRoad/insJoyfulRichText' const url = this.service.id ? '/api/joyfulRoad/updJoyfulRichText' : '/api/joyfulRoad/insJoyfulRichText'
$.ajax({ $.ajax({
...@@ -673,6 +688,7 @@ ...@@ -673,6 +688,7 @@
success: (data) => { success: (data) => {
if (data.content) { if (data.content) {
this.service = data.content; this.service = data.content;
this.editor.setContent(data.content.content)
this.dialog = true; this.dialog = true;
} }
}, },
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment