课包编辑 编写

src/components/mould/lookBlock.vue

@@ -2,7 +2,14 @@
   <div>
     <el-row :gutter="40">
       <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-row>
   </div>
@@ -10,14 +17,30 @@
 
 <script>
   import AreaBlcok from '../textarea'
+  import background from '../../assets/mould/lookBlock.png'
   export default {
     name: "lookBlock",
+    props:[
+      'formData'
+    ],
+    data(){
+      return {
+        background:background
+      }
+    },
     components:{
       AreaBlcok
     }
   }
 </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>

src/components/resources/editorDialog.vue

@@ -15,13 +15,13 @@
         <lesson-content :formData="formData"/>
       </el-tab-pane>
       <el-tab-pane label="爸妈看一看" name="look">
-        <look-block :formData="formData"/>
+        <look-block :formData="formData.content"/>
       </el-tab-pane>
       <el-tab-pane label="宝贝玩一玩" name="play">
-        <play-block :formData="formData"/>
+        <play-block :formData="formData.content"/>
       </el-tab-pane>
       <el-tab-pane label="磨磨小耳朵" name="fun">
-        <fun-block :formData="formData"/>
+        <fun-block :formData="formData.content"/>
       </el-tab-pane>
     </el-tabs>
   </el-dialog>
@@ -52,8 +52,16 @@
           cover:'',
           content:{
             base:{},
-            tips:{},
-            look:{},
+            tips:{
+              content:'',
+              title1:'',
+              title1_content:'',
+              title2:'',
+              title2_content:''
+            },
+            look:{
+              content:'',
+            },
             play:{},
             fun:{}
           },

src/components/textarea/index.vue

 <template>
   <div class='tinymce'>
-    <editor id='tinymce' v-model='tinymceHtml' :init='init'></editor>
+    <editor id='tinymce' v-model='lookData.content' :init='init'></editor>
     <div>
       <div class="imgInter" @click="showDialog()">插入图片</div>
+      <div class="MP3Inter" @click="showDialogMP3()">插入音频</div>
     </div>
     <el-dialog
       title="插入图片"
@@ -11,7 +12,7 @@
       :close-on-click-modal="false"
       center
       :append-to-body="true"
-      width="30%">
+      width="550px">
       <el-form label-width="80px">
         <el-form-item label="图片">
           <el-upload
@@ -44,6 +45,36 @@
         <el-button type="primary" @click="imgInter">确 定</el-button>
       </span>
     </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>
 </template>
 
@@ -65,9 +96,13 @@
 
   export default {
     name: 'tinymce',
+    props:[
+      'lookData'
+    ],
     data () {
       return {
-        tinymceHtml: '请输入内容',
+        dialogVisibleMp3:false,
+        radio:[],
         form:{
           imgList:[],
           big:false,
@@ -81,7 +116,7 @@
           language: 'zh_CN',
           skin_url: '/static/tinymce/skins/lightgray',
           height: 500,
-          plugins: 'preview lists code colorpicker textcolor wordcount contextmenu',
+          plugins: 'preview lists code colorpicker textcolor wordcount contextmenu media',
           branding: false
         }
       }
@@ -116,17 +151,26 @@
         this.insertContent(str)
         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){
         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=>{
             this.$message({
               type: 'success',
               message: '上传成功!'
             });
             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 {
           this.$message({
@@ -135,8 +179,27 @@
           });
           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(){
         this.dialogVisible = true
@@ -170,6 +233,7 @@
         }
       },
       removeFile(){},
+      removeFileMp3(){},
       handleExceed(){}
     },
     created:function(){
@@ -181,15 +245,29 @@
 <style scoped lang="less">
   @import "../../util/public";
   .tinymce{
-    padding: 10px;
     position: relative;
     .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{
       position: absolute;
       display: inline-block;
       text-shadow: 0 1px 1px rgba(255,255,255,0.75);
-      top: 13px;
-      left: 290px;
+      top: 3px;
+      left: 330px;
       box-shadow: none;
       filter: none;
       padding: 4px 6px;

src/util/menuList.js

@@ -299,7 +299,6 @@ export default  [
           component: e=>require(['@/components/weChatStatistics'],e),
         }
       },
-
     ]
   },{
     name: '',