Commit 39df0d60 authored by wangwei's avatar wangwei

课包编辑 编写

parent bd6bd99b
...@@ -2,7 +2,14 @@ ...@@ -2,7 +2,14 @@
<div> <div>
<el-row :gutter="40"> <el-row :gutter="40">
<el-col :span="12"> <el-col :span="12">
<area-blcok/> <area-blcok :lookData="formData.look"/>
</el-col>
<el-col :span="12">
<div :style="{backgroundImage:`url(${background})`}" class="view">
<div v-html="formData.look.content">
</div>
</div>
</el-col> </el-col>
</el-row> </el-row>
</div> </div>
...@@ -10,14 +17,30 @@ ...@@ -10,14 +17,30 @@
<script> <script>
import AreaBlcok from '../textarea' import AreaBlcok from '../textarea'
import background from '../../assets/mould/lookBlock.png'
export default { export default {
name: "lookBlock", name: "lookBlock",
props:[
'formData'
],
data(){
return {
background:background
}
},
components:{ components:{
AreaBlcok AreaBlcok
} }
} }
</script> </script>
<style scoped> <style scoped lang="less">
@import "../../util/public";
.view{
width: 275px;
height: 447px;
background-size: 100% 100%;
padding: 97px 49px 93px 51px;
margin: auto;
}
</style> </style>
...@@ -15,13 +15,13 @@ ...@@ -15,13 +15,13 @@
<lesson-content :formData="formData"/> <lesson-content :formData="formData"/>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="爸妈看一看" name="look"> <el-tab-pane label="爸妈看一看" name="look">
<look-block :formData="formData"/> <look-block :formData="formData.content"/>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="宝贝玩一玩" name="play"> <el-tab-pane label="宝贝玩一玩" name="play">
<play-block :formData="formData"/> <play-block :formData="formData.content"/>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="磨磨小耳朵" name="fun"> <el-tab-pane label="磨磨小耳朵" name="fun">
<fun-block :formData="formData"/> <fun-block :formData="formData.content"/>
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
</el-dialog> </el-dialog>
...@@ -52,8 +52,16 @@ ...@@ -52,8 +52,16 @@
cover:'', cover:'',
content:{ content:{
base:{}, base:{},
tips:{}, tips:{
look:{}, content:'',
title1:'',
title1_content:'',
title2:'',
title2_content:''
},
look:{
content:'',
},
play:{}, play:{},
fun:{} fun:{}
}, },
......
<template> <template>
<div class='tinymce'> <div class='tinymce'>
<editor id='tinymce' v-model='tinymceHtml' :init='init'></editor> <editor id='tinymce' v-model='lookData.content' :init='init'></editor>
<div> <div>
<div class="imgInter" @click="showDialog()">插入图片</div> <div class="imgInter" @click="showDialog()">插入图片</div>
<div class="MP3Inter" @click="showDialogMP3()">插入音频</div>
</div> </div>
<el-dialog <el-dialog
title="插入图片" title="插入图片"
...@@ -11,7 +12,7 @@ ...@@ -11,7 +12,7 @@
:close-on-click-modal="false" :close-on-click-modal="false"
center center
:append-to-body="true" :append-to-body="true"
width="30%"> width="550px">
<el-form label-width="80px"> <el-form label-width="80px">
<el-form-item label="图片"> <el-form-item label="图片">
<el-upload <el-upload
...@@ -44,6 +45,36 @@ ...@@ -44,6 +45,36 @@
<el-button type="primary" @click="imgInter">确 定</el-button> <el-button type="primary" @click="imgInter">确 定</el-button>
</span> </span>
</el-dialog> </el-dialog>
<el-dialog
title="插入音频"
:visible.sync="dialogVisibleMp3"
:modal-append-to-body="false"
:close-on-click-modal="false"
center
:append-to-body="true"
width="550px">
<el-form label-width="80px">
<el-form-item label="音频">
<el-upload
action="/api/public/upload"
:http-request="uploadFileMp3"
:on-remove="removeFileMp3"
drag
:on-exceed="handleExceed"
multiple
:limit="1"
:file-list="radio">
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
<div class="el-upload__tip" slot="tip">只能上传MP3文件,且不超过5MB</div>
</el-upload>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisibleMp3 = false">取 消</el-button>
<el-button type="primary" @click="audioInter">确 定</el-button>
</span>
</el-dialog>
</div> </div>
</template> </template>
...@@ -65,9 +96,13 @@ ...@@ -65,9 +96,13 @@
export default { export default {
name: 'tinymce', name: 'tinymce',
props:[
'lookData'
],
data () { data () {
return { return {
tinymceHtml: '请输入内容', dialogVisibleMp3:false,
radio:[],
form:{ form:{
imgList:[], imgList:[],
big:false, big:false,
...@@ -81,7 +116,7 @@ ...@@ -81,7 +116,7 @@
language: 'zh_CN', language: 'zh_CN',
skin_url: '/static/tinymce/skins/lightgray', skin_url: '/static/tinymce/skins/lightgray',
height: 500, height: 500,
plugins: 'preview lists code colorpicker textcolor wordcount contextmenu', plugins: 'preview lists code colorpicker textcolor wordcount contextmenu media',
branding: false branding: false
} }
} }
...@@ -116,17 +151,26 @@ ...@@ -116,17 +151,26 @@
this.insertContent(str) this.insertContent(str)
this.dialogVisible = false this.dialogVisible = false
}, },
audioInter(){
if(this.radio < 1){
this.$message({
type: 'error',
message: '请选择音频'
});
return false
}
let str = `<audio src='${this.radio[0]}' controls controlsList="nodownload">`
this.insertContent(str);
this.dialogVisible = false
},
uploadFile(a){ uploadFile(a){
if(a.file.size < 100*1024 && a.file.type === 'image/png'){ if(a.file.size < 100*1024 && a.file.type === 'image/png'){
this.$store.dispatch('setProgress',{type:'new',id:a.file.uid});
uploadFileApi({file:a.file,type:'local'}).then(res=>{ uploadFileApi({file:a.file,type:'local'}).then(res=>{
this.$message({ this.$message({
type: 'success', type: 'success',
message: '上传成功!' message: '上传成功!'
}); });
this.form.imgList = [process.env.IMAGE_URL_HEAD + res.url]; this.form.imgList = [process.env.IMAGE_URL_HEAD + res.url];
this.selectedMould[this.nowIndex].content.banner[0] = {name:res.name,url:process.env.IMAGE_URL_HEAD + res.url,title:'',lable:''};
this.$store.dispatch('setProgress',{type:'delete',id:a.file.uid});
}) })
}else { }else {
this.$message({ this.$message({
...@@ -135,8 +179,27 @@ ...@@ -135,8 +179,27 @@
}); });
this.form.imgList = []; this.form.imgList = [];
} }
},
uploadFileMp3(a){
console.log(a);
if(a.file.size < 1024*1024*5 && a.file.type === 'audio/mp3'){
uploadFileApi({file:a.file,type:'local'}).then(res=>{
this.$message({
type: 'success',
message: '上传成功!'
});
this.radio = [process.env.IMAGE_URL_HEAD + res.url];
})
}else {
this.$message({
type: 'error',
message: '上传失败,音频格式或大小不正确!'
});
this.form.imgList = [];
}
},
showDialogMP3(){
this.dialogVisibleMp3 = true
}, },
showDialog(){ showDialog(){
this.dialogVisible = true this.dialogVisible = true
...@@ -170,6 +233,7 @@ ...@@ -170,6 +233,7 @@
} }
}, },
removeFile(){}, removeFile(){},
removeFileMp3(){},
handleExceed(){} handleExceed(){}
}, },
created:function(){ created:function(){
...@@ -181,15 +245,29 @@ ...@@ -181,15 +245,29 @@
<style scoped lang="less"> <style scoped lang="less">
@import "../../util/public"; @import "../../util/public";
.tinymce{ .tinymce{
padding: 10px;
position: relative; position: relative;
.clear-both; .clear-both;
.MP3Inter{
position: absolute;
display: inline-block;
text-shadow: 0 1px 1px rgba(255,255,255,0.75);
top: 3px;
left: 400px;
box-shadow: none;
filter: none;
padding: 4px 6px;
border: 1px solid transparent;
&:hover{
border-color: #e2e4e7;
cursor: pointer;
}
}
.imgInter{ .imgInter{
position: absolute; position: absolute;
display: inline-block; display: inline-block;
text-shadow: 0 1px 1px rgba(255,255,255,0.75); text-shadow: 0 1px 1px rgba(255,255,255,0.75);
top: 13px; top: 3px;
left: 290px; left: 330px;
box-shadow: none; box-shadow: none;
filter: none; filter: none;
padding: 4px 6px; padding: 4px 6px;
......
...@@ -299,7 +299,6 @@ export default [ ...@@ -299,7 +299,6 @@ export default [
component: e=>require(['@/components/weChatStatistics'],e), component: e=>require(['@/components/weChatStatistics'],e),
} }
}, },
] ]
},{ },{
name: '', name: '',
......
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