发布视频模块的开发

src/api/act/submitinfo.js

 import request from '@/utils/request'
 
-export function submitForm (params){
-    //console.log("文章列表",params)
+export function submitForm (data){
+    console.log("文章列表",data)
     return request({
         url: '/api/acticle/createacticle',
-        method: 'Get',
-        params: params
+        method: 'Post',
+        data: data
     })
 }
 
      })
 }
 
-export function EditArticleCategory(MenuId,data){
+export function EditArticleCategory(id,data){
+    console.log("abc",data)
     return request({
-        url:'/api/acticle/edit?MenuId='+MenuId,
-        method:'put',
-        data,data
+        url:'/api/acticle/edit?id='+id,
+        method:'Post',
+        data:data
+    })
+}
+
+export function DeleteCategorys(data){
+     return request({
+         url:'/api/acticle/delete',
+         method:'delete',
+         data:data
+     })
+}
+
+export function addVido(data){
+    console.log("发布视频",data)
+    return request({
+        url:"/api/acticle/addvido",
+        method:"post",
+        data:data,
+    })
+}
+
+export function Savedraft(data){
+    return request({
+        url:"/api/acticle/savedraft",
+        method:"post",
+        data:data,
     })
 }

src/scrm_pages/article/acticleCategory.vue

       </div>
       <div class="app-container">
         <div class="filter-container" style="margin-top: 10px;margin-left: 5px">
-          <el-checkbox style="width: 30px">全选</el-checkbox>
-          <el-button size="small" icon="el-icon-delete">批量删除</el-button>
+          <el-checkbox style="width: 30px" @change="changeCheck" v-model="checkAllStatus">全选</el-checkbox>
+          <el-button size="small" icon="el-icon-delete" @click="openDeleteCategorys">批量删除</el-button>
 
         </div>
 
             ref="multipleTable"
             :header-cell-style="{ backgroundColor: 'rgb(245, 247, 250)'}"
             :data="articsData"
+            @selection-change="handleSelectionChange"
           >
             <el-table-column
               type="selection"
 
             <el-table-column label="分类名称" align="center">
               <template slot-scope="scope">
-                {{scope.row.Name}}
+                {{scope.row.name}}
               </template>
             </el-table-column>
 
 
             <el-table-column label="分类排序" align="center">
               <template slot-scope="scope">
-                {{scope.row.Order}}
+                {{scope.row.order}}
               </template>
             </el-table-column>
 
                     size="mini"
                     type="danger"
                     icon="el-icon-delete"
-                    @click="handleDelete(scope.$index, scope.row)">
+                    @click="openDelete(scope.row,scope.$index)">
                   </el-button>
                 </el-tooltip>
 
   import BreadCrumb from '../components/bread-crumb'
   import CreateArticleForm from "./components/CreateArticleForm";
   import EditArticleForm from "./components/EditArticleForm";
-  import { GetCategorys } from '@/api/act/submitinfo'
+  import { GetCategorys,DeleteCategorys } from '@/api/act/submitinfo';
   export default {
     name: 'acticleCategory',
     components:{
         ],
         articsData:[],
         articData:{
-          Name:'',
-          Summary:'',
-          Order:'',
-          MenuId:0,
+          name:'',
+          summary:'',
+          order:'',
+          id:0,
         },
         total:0,
         listQuery:{
           page:1,
           limit:10,
           name:'',
-          content:'',
-          sort:'',
+          summary:'',
+          order:'',
         },
-         artilceIndex:-1,
+         artilceIndex:0,
+         checkAllStatus:false,
       }
     },
 
             console.log("heh",this.articsData)  
              this.artilceIndex = index 
              this.$refs.editArticleForm.open();        
-        }
+        },
+          changeCheck(){
+          this.$refs.multipleTable.clearSelection();
+          if (this.checkAllStatus) {
+            this.$refs.multipleTable.toggleAllSelection();
+            }
+           },
+        openDelete(row,index){
+          this.$confirm('确认要删除该分类名称吗？<br>删除后，该分类名称信息将无法恢复',{
+             dangerouslyUseHTMLString:true,
+             confirmButtonText: '确定',
+             cancelButtonText: '取消',
+             type: 'warning'   
+          }).then(()=>{
+            var ids = [];
+            ids.push(row.id);
+            DeleteCategorys({ids:ids}).then(response=>{
+                var res = response.data;
+                if(res.state === 1){
+                    this.articsData.splice(index,1);
+                    this.$message.success("删除会员成功");
+                }else{
+                   this.$message.error(res.msg);
+                }
+            }).catch(e=>{});
+          }).catch(() => {
+            return false        
+          });
+        },
+          handleSelectionChange(val){
+          this.selectedMembers = val;
+        },
+        openDeleteCategorys(){
+            if (this.selectedMembers.length==0) {
+            this.$message.error("请选择要删除的会员");
+            return false;
+          }   
+
+          this.$confirm('确认要删除所选的分类名称吗？<br>删除后，分类名称信息将无法恢复', '删除提示',{
+             dangerouslyUseHTMLString:true,
+             confirmButtonText: '确定',
+             cancelButtonText: '取消',
+             type: 'warning'
+          }).then(()=>{
+              var ids = [];
+              var idMap = {};
+              for (const index in this.selectedMembers) {
+                ids.push(this.selectedMembers[index].id);
+                idMap[this.selectedMembers[index].id] = this.selectedMembers[index].id;
+            }
+            DeleteCategorys({ids:ids}).then(response=>{
+               var res = response.data;
+               if(res.state ===1){
+                 var articsDatalength = this.articsData.length;
+                  for (let index = articsDatalength-1; index >= 0; index--) {
+                  if(this.articsData[index].id in idMap) {
+                    this.articsData.splice(index, 1);
+                  }                  
+                }
+                 this.$message.success("删除会员成功");
+               }else{
+                 this.$message.error(res.msg);
+              }
+            }).catch(e=>{});
+          }).catch(() => {
+            return false        
+          });
+        },
     },
      created(){
          this.GetCategorys()

src/scrm_pages/article/commentList.vue

           <bread-crumb :crumbs='crumbs'></bread-crumb>
         </div>
         <div class="app-container">
-         评论列表
+           评论列表
+           <el-form-item ref="videocontentvideo" style="display:none;">
+              <img :src="imgurl">
+              <video width="320" height="240" controls id="upvideo">
+              </video>
+              <img :src="modlevidel" />
+            </el-form-item>
+
+            <el-form-item class="upload-demo-content" v-show="formLabelAlign.type==2">
+            <el-upload class="upload-demo" :limit="1" :on-exceed="exceedhandle" drag :file-list="filsListArray" :action="configuploadurl" :on-success="successuploadhandle" accept="video" name="fileList" :before-upload="beforeUploadVideo">
+              <i class="el-icon-upload"></i>
+              <div class="el-upload__text">将视频文件拖到此处，或
+                <em>点击上传</em>
+              </div>
+              <div class="el-upload__tip" slot="tip"></div>
+            </el-upload>
+          </el-form-item>
         </div>
     </div>
 </template>
           { path: false, name: '文章管理' },
           { path: '/articles/commentList', name: '评论列表' }
         ],
+        imgurl:'',
+        modlevidel:'',
+        formLabelAlign:'',
+        modlevidel:'',
+        filsListArray:[],
+        elForm:'',
+        configuploadurl:'',
+      }
+    },
+    methods:{
+      successuploadhandle(response, file, fileList) {
+      this.formLabelAlign.video = this.modlevidel =
+        response.data.fileList[0].url;
+        this.filsListArray = [];
+        this.filsListArray.push({
+        name: this.formLabelAlign.video,
+        url: this.formLabelAlign.video
+       });
+        this.findvideocover();
+    },
+      exceedhandle(files, fileList) {
+      this.$message.error("只能上传一个视频额");
+      },
+      beforeUploadVideo(file) {
+      if (
+        [
+          "video/mp4",
+          "video/ogg",
+          "video/flv",
+          "video/avi",
+          "video/wmv",
+          "video/rmvb"
+        ].indexOf(file.type) == -1
+      ) {
+        this.$message.error("请上传正确的视频格式");
+        return false;
       }
+     },
+
+     findvideocover() {
+      let _this = this;
+      this.$nextTick(() => {
+        let video = document.getElementById("upvideo");
+        let source = document.createElement("source");
+        // source.src = require("../../assets/5b086751dbb7af1ea8fa8d05e66fe5c3.mp4");this.formLabelAlign.video
+        source.src = this.formLabelAlign.video;
+        source.type = "video/mp4";
+        video.appendChild(source);
+        video.addEventListener("loadeddata", function() {
+          var canvas = document.createElement("canvas");
+          canvas.width = "320";
+          canvas.height = "320";
+          canvas
+            .getContext("2d")
+            .drawImage(video, 0, 0, canvas.width, canvas.width);
+          var img = document.createElement("img");
+          let imgsrc = canvas.toDataURL("image/png");
+          _this.Videoframehandle(imgsrc.split(",")[1]);
+        });
+      });
+      },
+
+      showvideohandle() {
+       this.$alert(
+        `<video width="320" height="240" controls>
+                      <source src="${
+                        this.filsListArray[0].url
+                      }"  type="video/mp4">
+                      您的浏览器不支持 HTML5 video 标签。
+                    </video>`,
+        "视频预览",
+        {
+          dangerouslyUseHTMLString: true
+        }
+      );
+    },
     }
   }
 </script>

src/scrm_pages/article/components/CreateArticleForm.vue

 <template>
-
     <div id="create-article-form-box">
       <el-dialog
         title="添加分类"
             </el-form-item>
           </el-row>
           <el-row :span=20>
-            <el-form-item label="分类描述:" required prop="content">
-              <keep-alive>
-                <neditor ref="neditor"
-                         id="editor"
-                         v-bind:r_content="form.content">
-                </neditor>
-              </keep-alive>
+            <el-form-item label="分类描述:" required prop="summary">      
+                <div style="margin: 10px 0;"></div>
+                <el-input
+                 type="textarea"
+                :autosize="{ minRows: 2, maxRows: 4}"
+                 v-model="form.summary">
+                </el-input>
             </el-form-item>
           </el-row>
           <el-row :span=20>
-            <el-form-item label="排序" required prop="sort">
-              <el-input v-model="form.sort">
+            <el-form-item label="排序:" required prop="order">
+              <el-input v-model="form.order">
 
               </el-input>
             </el-form-item>
 </template>
 
 <script>
-    import Neditor from '@/components/Neditor'
     import { addCategory } from '@/api/act/submitinfo'
     export default {
-        name: "CreateArticleForm",
-         components:{
-           Neditor,
-        },
+        name: "CreateArticleForm",       
+           props:{
+             articsData:{
+             type: Array,
+             default: function () {
+             return [];
+        }
+      }
+           },
             data(){
                 return {
                     centerDialogVisible:false,
                     rules: {
                     name: [{required: true, message: "请填写分类名称",},],
-                    content: [{required: true,message:"请填写分类描述"}],
-                    sort: [{required: true,message:"请填写排序"}]
-                },
-                 form:{
-                   name:"",
-                   content:"",
-                   sort:"",
-                },
+                    summary: [{required: true,message:"请填写分类描述"}],
+                    order: [{required: true,message:"请填写排序"}]
+                 },
                 acticleform:[],
+                 form:{
+                    name:"",
+                    summary:"",
+                    order:"",
+                   },
              }
           },   
            methods:{
                      this.$refs[formName].resetFields();
                    }
                   },
-               addCategory(formName){
-                  this.form.content = this.$refs.neditor.content
+               addCategory(formName){                 
                    this.$refs[formName].validate((valid)=>{
-                       if(valid){
+                       if(valid){                         
                             addCategory(this.form).then(response =>{
-                                  console.log(response.data.state)
+                                  console.log("添加分类响应",response.data.state)
                                   if(response.data.state==1){
                                     var category = response.data.data.category
-                                    this.centerDialogVisible=false
+                                    console.log("category是什么",category)
+                                    this.centerDialogVisible=false;
+                                    this.articsData.unshift(category);
                                     this.resetForm("acticleform");
-                                    this.$message.success("添加分类成功");
-                                    console.log("coo",category)
+                                    this.$message.success("添加分类成功");                           
                                   }
                             });
                        }   

src/scrm_pages/article/components/EditArticleForm.vue

         center>
         <el-form label-width="90px" class="clearfix" :model="form" ref="acticleform" :rules="rules">
           <el-row :span=20>
-            <el-form-item label="分类名称:" required prop="Name">
-              <el-input v-model="form.Name"></el-input>
+            <el-form-item label="分类名称:" required prop="name">
+              <el-input v-model="form.name"></el-input>
             </el-form-item>
           </el-row>
           <el-row :span=20>
-            <el-form-item label="分类描述:" required prop="Summary">
-              <keep-alive>
-                <neditor ref="neditor"
-                         id="editor"
-                         v-bind:r_content="form.Summary">
-                </neditor>
-              </keep-alive>
+            <el-form-item label="分类描述:" required prop="summary">
+              <div style="margin: 10px 0;"></div>
+              <el-input
+                 type="textarea"
+                :autosize="{minRows: 2, maxRows: 4}"
+                 v-model="form.summary">
+                </el-input>
             </el-form-item>
           </el-row>
           <el-row :span=20>
-            <el-form-item label="排序" required prop="Order">
-              <el-input v-model="form.Order"></el-input>
+            <el-form-item label="排序" required prop="order">
+              <el-input v-model="form.order"></el-input>
             </el-form-item>
           </el-row>
         </el-form>
         <span slot="footer" class="dialog-footer">
-               <el-button type="primary" @click="submitForm('acticleform')">保存</el-button>
+               <el-button 
+               type="primary" 
+               @click="submitForm('acticleform')">保存
+               </el-button>
               <el-button  @click="centerDialogVisible = false">取消</el-button>
              </span>
       </el-dialog>   
     </div>
 </template>
 <script>
-import Neditor from '@/components/Neditor'
  import { EditArticleCategory } from '@/api/act/submitinfo'
 export default {
     name: "EditArticleForm",
-     components:{
-        Neditor,
-      },
       props:{
         form:{
-           Name:'',
-          Summary:'',
-          Order:'',
-          MenuId:0,
+           name:'',
+           summary:'',
+           order:'',
+           id:0,
         },
       artilceIndex:{
           type:Number,
           return {
           centerDialogVisible:false,
            rules: {
-             Name: [{required: true, message: "请填写分类名称",},],
-             Summary: [{required: true,message:"请填写分类描述"}],
-             Order: [{required: true,message:"请填写排序"}]
+             name: [{required: true, message: "请填写分类名称",},],
+             summary: [{required: true,message:"请填写分类描述"}],
+             order: [{required: true,message:"请填写排序"}]
               },
              }
           }, 
                    }
                 },  
               submitForm(forname){ 
-                alert("aaa")
                 this.$refs[forname].validate((valid)=>{
                    if(valid){
-                      EditArticleCategory(this.form.MenuId,this.form).then(response=>{
-                            console.log("id是谁",this.form.MenuId)
-                            console.log(this.form)
+                       var order = this.form.order
+                       var ord = parseInt(order)
+                       this.form.order = ord
+                      EditArticleCategory(this.form.id,this.form).then(response=>{                        
                            var res =  response.data;
-                           console.log(res.state)
+                           console.log("返回响应",res.state)
                            if(res.state ===1 ){
-                              var categorys = res.data.categorys; 
+                              var categorys = res.data.category; 
                               console.log("categorys是什么",categorys)
-                              this.articsData[this.artilceIndex].name = categorys.Name;
-                              this.articsData[this.artilceIndex].content = categorys.Summary;
-                              this.articsData[this.artilceIndex].sort = categorys.Order;
+                              this.articsData[this.artilceIndex].name = categorys.name;
+                              this.articsData[this.artilceIndex].summary = categorys.summary;
+                              this.articsData[this.artilceIndex].order = categorys.order;
+                              //this.articsData.unshift(categorys);
+                              // this.resetForm("acticleform");
                               this.centerDialogVisible = false;
                               this.$message.success("编辑文章分类成功");
                            }

src/scrm_pages/article/createArticle.vue

     <div class="app-container">
     <el-tabs type="border-card">
       <el-tab-pane label="文章">
-        <el-form label-width="80px" class="clearfix" :model="form" ref="form"  :element-loading-text="loadingText">
+        <el-form label-width="100px" class="clearfix" :model="form" ref="arctileform"  :element-loading-text="loadingText" :rules="artilcrules">
           <el-row>
             <el-col :span="23">
-                <el-form-item label="文章标题:">
-                    <el-input v-model="form.act_name"  placeholder="文章标题"></el-input>
+                <el-form-item label="文章标题:" required prop="act_name">
+                    <el-input v-model="form.act_name"></el-input>
                 </el-form-item>
-              <el-form-item label="文章内容:">
+              <el-form-item label="文章内容:" required prop="act_content">
                 <keep-alive>
                   <neditor ref="neditor"
                            id="editor"
                   <el-radio v-model="radio" label="1" @click.native.prevent="select()" >单图</el-radio>
                   <el-radio v-model="radio" label="2" @click.native.prevent="clickitem()" >三图</el-radio>
               </el-form-item>
-              <el-form-item prop="org_log">
+              <el-form-item>
                 <el-col :span="3">
                   <div>
                     <el-upload
                       :on-error="handleAvatarError"
                       :on-success="handleAvatarSuccess"
                       :before-upload="beforeAvatarUpload">
-                      <img v-if="imageUrl" :src="imageUrl" class="avatar">
+                      <img v-if="form.org_logo" :src="form.org_logo" class="avatar">
                       <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                     </el-upload>
                   </div>
                 <el-col :span="3">
                   <div v-if="show">
                     <el-upload
-                      v-loading="guploading"
+                      v-loading="uploading"
                       :element-loading-text="loadingText"
                       class="avatar-uploader"
                       :data="uploadData"
                   </div>
                 </el-col>
               </el-form-item>
-               <el-form-item label="所属分类:">
+               <el-form-item label="所属分类:" prop="act_type">
                  <el-select v-model="form.act_type" placeholder="请先选择文章所属分类"  @change="changeActtype()">
                    <el-option
                      v-for="item in options"
-                     :key="item.MenuId"
-                     :label="item.Name"
-                     :value="item.MenuId">
+                     :key="item.id"
+                     :label="item.name"
+                     :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
           <el-row :span="24">
             <el-col :span="24">
                 <el-form-item>
-                      <el-button size="small" type="primary" style="width: 100px"  @click="submitForm();centerDialogVisible = true">发布</el-button>
-                      <el-button size="small" style="width: 100px">预览</el-button>
+                      <el-button size="small" type="primary" style="width: 100px"  @click="submitForm('arctileform');centerDialogVisible=false">发布</el-button>
+                      <el-button size="small" style="width: 100px" @click="preview('arctileform')">预览</el-button>
                       <el-button size="small" style="width: 100px">保存草稿</el-button>
                   <el-button size="small" style="width: 100px">取消</el-button>
                 </el-form-item>
         </el-form>
       </el-tab-pane>
       <el-tab-pane label="视频">
-        <el-form label-width="80px" class="clearfix">
+        <el-form label-width="100px" class="clearfix"  :rules="rules" :model="form" ref="vidoform">
            <el-row>
              <el-col :span="24">
                  <div style="margin-bottom: 100px">
-                 <el-form-item>
-                 <div class="video-select">
-                   <el-upload
-                   class="upload-demo"
-                   action="https://upload.qiniup.com"
-                   :on-preview="handlePreview"
-                   :on-remove="handleRemove"
-                   :before-remove="beforeRemove"
-                   multiple
-                   :limit="3"
-                   :on-exceed="handleExceed"
-                   :file-list="fileList"
-                   :before-upload="beforeUpload">
-                   <el-button size="small" type="primary">点击上传</el-button>
-                   <div slot="tip" class="el-upload__tip">只能上传jpg/exe文件，且不超过2G</div>
-                   </el-upload>
-                   </div>
-                   <div class="progressbar probar" style="text-align: center">
-                   <span class="videotitle"></span>
-                   <input type="hidden" name="videoUrl" id="videopath">
-                   <div class="barpic"></div>
-                   <span class="chaimg"></span>
-                   <span class="videoupload"></span>
-                   </div>
-                 </el-form-item>
+                   <el-form-item  required prop="vio_upload">
+                       <div class="video-select" v-if="show">
+                        <el-upload
+                            class="upload-demo"
+                            :data="uploadFileData"
+                            action="https://upload.qiniup.com"
+                            :on-change="handleChange"
+                            :on-success="handleSuccess"
+                            :on-error="handleError"
+                            :before-upload="beforeUploadFile"
+                             accept="video/x-flv,video/mpeg,video/avi,video/x-ms-wmv,video/quicktime,.asf,.rm,.rmvb,video/x-matroska,video/x-m4v,video/mp4">                         
+                             <el-button size="small" type="primary" v-if="show">点击上传</el-button>
+                             <div slot="tip" class="el-upload__tip" v-if="show">支持大多视频文件格式,大小不超过2G</div>
+                        </el-upload>
+                       </div>
+                         <div class="video" v-if="shows">
+                         <img v-if="form.vio_upload" :src="form.vio_upload+'?vframe/jpg/offset/1/w/300/h/200'" class="avatar" id="upvideo">
+                       </div>
+                        <div id="upvideo"></div>                  
+                    </el-form-item>
                   </div>
-                 <el-form-item label="视频标题:">
-                   <el-input placeholder="视频标题"></el-input>
+
+                 <el-form-item label="视频标题:" required prop="vid_name">
+                   <el-input v-model="form.vid_name"></el-input>
                  </el-form-item>
-                 <el-form-item label="视频封面:"></el-form-item>
-                 <el-form-item>
-                   <el-upload  class="avatar-uploader" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
-                     <img v-if="imageUrl" :src="imageUrl" class="avatar">
+
+                 <el-form-item label="视频封面:">
+                   <el-upload  class="avatar-uploader" :show-file-list="false" 
+                   :on-success="handlevioSuccess" 
+                   :before-upload="beforevidoFile" 
+                   :on-change="handleChange"
+                   action="https://upload.qiniup.com"
+                   :data="uploadvidoData">
+                     <img v-if="form.vid_pic" :src="form.vid_pic" class="avatar">                  
+                     <img v-if="form.vio_upload" :src="form.vio_upload+'?vframe/jpg/offset/1/w/300/h/200'" class="avatar">
                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                  </el-form-item>
-                  <el-form-item label="所属分类:">
-                    <el-select v-model="form.act_type" placeholder="请选择">
+                 <div class="eltip">
+                   视频封面若不上传，系统会根据视频内容进行自动截取<br>
+                   目前支持PNG和JPG格式，图片大小不能超过1MB
+                   </div>
+                  <el-form-item label="所属分类:" required prop="vid_type">
+                    <el-select v-model="form.vid_type">
                       <el-option
-                         v-for="item in options"
-                         :key="item.value"
-                        :label="item.label"
-                         :value="item.value">
+                          v-for="item in options"
+                          :key="item.id"
+                          :label="item.name"
+                          :value="item.id"> 
                       </el-option>
                       </el-select>
                   </el-form-item>
                    <el-row :span="24">
                      <el-col :span="24">
                        <el-form-item>
-                         <el-button size="small" type="primary" style="width: 100px">发布</el-button>
-                         <el-button size="small" style="width: 100px">保存草稿</el-button>
-                         <el-button size="small" style="width: 100px">取消</el-button>
+                         <el-button size="small" type="primary" style="width: 100px" @click="SumitVido('vidoform');centerDialogVisible = false">发布</el-button>
+                         <el-button size="small" style="width: 100px" @click="Savedraft('vidoform');centerdraftVisible = false">保存草稿</el-button>
+                         <el-button size="small" style="width: 100px" @click="centercancelVisible = true">取消</el-button>
                        </el-form-item>
                      </el-col>
-                   </el-row>
+                   </el-row>                   
              </el-col>
            </el-row>
         </el-form>
         :visible.sync="centerDialogVisible"
          width="30%"
          center>
-         <!-- <span>需要注意的是内容是默认不居中的</span> -->
          <span slot="footer" class="dialog-footer">
-        <el-button @click="gotolink;centerDialogVisible = false">再发一条</el-button>
+        <el-button @click="gotolink()">再发一条</el-button>
         <el-button type="primary" @click="gobacklist">返回文章列表</el-button>
        </span>
       </el-dialog>
+
+      <el-dialog
+       title="保存草稿成功"
+       :visible.sync = "centerdraftVisible"
+        width="30%"
+        center>
+        <span slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="gobacklist">返回文章列表</el-button>  
+         </span>
+      </el-dialog>
+
+      <el-dialog
+       title="提示"
+       :visible.sync = "centercancelVisible"
+       width="30%"
+       center>
+       <span style="center">是否确定取消编辑此文章/视频</span>
+       <span slot="footer" class="dialog-footer">
+       <el-button type="primary" @click="centercancelVisible = false" >确认</el-button>
+       <el-button @click="centercancelVisible = false">取消</el-button>   
+        </span>   
+      </el-dialog>
   </div>
 </template>
 
   import 'quill/dist/quill.snow.css'
   import 'quill/dist/quill.bubble.css'
   import Neditor from '@/components/Neditor'
-  import {submitForm,getArticleType} from '@/api/act/submitinfo'
+  import {submitForm,getArticleType,addVido,Savedraft} from '@/api/act/submitinfo'
   import { getToken } from '@/api/qiniu'
   import { getFileExtension} from '@/utils/tools'
   export default {
         show:false,
         content: '',
         editorOption: {},
-        uploadUrl:"",//你要上传视频到你后台的地址
-        videoFlag:false , //是否显示进度条
-        videoUploadPercent:"", //进度条的进度，
-        isShowUploadVideo:false, //显示上传按钮
         company:"",
-        fileList: [{name: '123', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}],
+        fileList: [],
         form:{
           act_name:'',
           act_content:'',
           act_category:'',
           org_logo:'',
           act_type:'',
+          file:'',
+          vid_pic:'',
+          vio_upload:'',
+          vid_name:'',
+          vid_type:'',
         },
          acttypes:[],
          imageUrl:'',
          uploading:false,
          loadingText:'',
          uploadData: { token: '', key: '' },
-         myConfig: {
-                // 如果需要上传功能,找后端小伙伴要服务器接口地址
-                serverUrl: '/api/web/upload/ueditor',
-                // 你的UEditor资源存放的路径,相对于打包后的index.html
-                UEDITOR_HOME_URL: '/NEditor/',
-                // 编辑器不自动被内容撑高
-                autoHeightEnabled: false,
-                // 初始容器高度
-                initialFrameHeight: 240,
-                // 初始容器宽度
-                initialFrameWidth: '100%',
-                // 关闭自动保存
-                enableAutoSave: false
-            },
+         uploadFileData:{token:'',key:''},
+         uploadvidoData:{token:'',key:''},
          centerDialogVisible: false,
+         centerdraftVisible:false,
+         centercancelVisible:false,
+         formLabelAlign:true,
+         modlevidel:'',
+         filsListArray:[],
+         show:true,
+         shows:false,
+         rules: {
+            vid_name: [{required: true, message: "视频标题不能为空"},],
+            vio_upload: [{required: true,message:"请上传视频"}],
+            vid_type: [{required: true,message:"所属分类不能为空"}]
+          },
+        artilcrules:{
+            act_name: [{required: true, message: "文章标题不能为空"},],
+            act_content: [{required: true,message:"文章内容不能为空"}],
+            act_type: [{required: true,message:"所属分类不能为空"}]
+        },
+        vidoform:[],
+        ue:'',
       }
     },
     created(){
-        this.getArticleType()
+        this.getArticleType();
     },
     methods: {
       //第一个图片
       handleAvatarSuccess(res, file) {
-        this.imageUrl = URL.createObjectURL(file.raw);
-        this.form.org_logo = this.qiniuDomain + res.url;
+       this.form.org_logo = this.qiniuDomain + res.url;
         this.uploading = false
       },
        handleAvatarError(err, file, fileList) {
                     this.uploading = false;
                 })
             })
-
-          //return isJPG && isLt2M;
       },
       //第二个图片
       handleAvatartwoSuccess(res, file) {
       },
 
       //第三张图片
-      //第二个图片
       handleAvatarlastSuccess(res, file) {
         this.imageUrlLast = URL.createObjectURL(file.raw);
         this.form.org_logo = this.qiniuDomain + res.url;
             var date = new Date()
             var ext = getFileExtension(file.name)
             var key = date.getFullYear() + (date.getMonth() + 1) + date.getDate() + date.getHours()  + date.getMinutes()  + date.getSeconds()  +'_o_' + file.uid + '.' + ext;
-            this.uploading = true;
             this.loadingText = '封面图片上传中'
 
             const _self = this
                     resolve(true)
                 }).catch(err => {
                     reject(false)
-                    this.uploading = false;
                 })
-            })
+            }) 
+        }, 
+        //视频上传
+        handleChange(file, fileList) {
+          this.form.file =  file.raw
+        }, 
+        handleSuccess(res,file,fileList){  
+            this.$message.success("视频上传成功")               
+             this.form.vio_upload = this.qiniuDomain + res.url;           
+             console.log("是什么",this.form.vio_upload)
 
-          //return isJPG && isLt2M;
+             this.show=false;
+             this.shows = true;
+        },
+        handlevioSuccess(res,file,fileList){
+           this.form.vid_pic = this.qiniuDomain + res.url;  
+        },
+        changeImg(url){
+          console.log("路径是多少?",url)
+        },
+         handleError(err, file, fileList) {
+             this.$message.error("视频上传失败")
+         },
+        beforeUploadFile(file) {
+        const isLt2M = file.size / 1024 / 1024 < 2048;
+        if (!isLt2M) {
+          this.$message.error('上传视频大小不能超过 2G!');
+        }
+            var date = new Date()
+            var ext = getFileExtension(file.name)
+            var key = date.getFullYear() + (date.getMonth() + 1) + date.getDate() + date.getHours()  + date.getMinutes()  + date.getSeconds()  +'_o_' + file.uid + '.' + ext;
+            const _self = this
+            return new Promise((resolve, reject) => {
+                getToken().then(response => {
+                    const token = response.data.data.uptoken
+                    //console.log("token2是什么?",token)
+                    _self._data.uploadFileData.token = token
+                    _self._data.uploadFileData.key = key
+                    resolve(true)
+                }).catch(err => {
+                    reject(false)                  
+                })
+            })
       },
-
-      beforeUpload(file) {
-        var testmsg=file.name.substring(file.name.lastIndexOf('.')+1)
-        const extension = testmsg === 'mp4'
-        const extension2 = testmsg === 'exe'
-        const isLt2M = file.size / 1024 / 1024 < 2048     //这里做文件大小限制
-        if(!extension && !extension2) {
-          this.$message({
-            message: '上传文件只能是 mp4、exe格式!',
-            type: 'warning'
-          });
+      beforevidoFile(file){
+          const isJPG = file.type === 'png/jpg';
+          if (!isJPG) {
+          this.$message.error('上传头像图片只能是 png或者jpg格式!');
         }
-        if(!isLt2M) {
-          this.$message({
-            message: '上传文件大小不能超过 2G!',
-            type: 'warning'
-          });
+          const isLt2M = file.size / 1024 / 1024 < 1;
+        if (!isLt2M) {
+          this.$message.error('上传视频大小不能超过 1M!');
         }
-        return extension || extension2 && isLt2M
-      },
+            var date = new Date()
+            var ext = getFileExtension(file.name)
+            var key = date.getFullYear() + (date.getMonth() + 1) + date.getDate() + date.getHours()  + date.getMinutes()  + date.getSeconds()  +'_o_' + file.uid + '.' + ext;
+            const _self = this
+            return new Promise((resolve, reject) => {
+                getToken().then(response => {
+                    const token = response.data.data.uptoken
+                    //console.log("token2是什么?",token)
+                    _self._data.uploadvidoData.token = token
+                    _self._data.uploadvidoData.key = key
+                    resolve(true)
+                }).catch(err => {
+                    reject(false)                  
+                })
+            })
+       },
       select(){
         this.show = false
       },
       changeActtype(){
          console.log("所属分类",this.form.act_type)
       },
-      submitForm(){
-        console.log("提交文章")
-        var params  = new Object()
-        params.act_name = this.form.act_name
-        params.act_content = this.$refs.neditor.content
-        params.org_logo = this.form.org_logo
-        params.act_type = this.form.act_type
-        this.formloading=true
-        this.submitForm =true
-        console.log("文章标题",params.act_name)
-        console.log("文章内容",params.act_content)
-        console.log("富文本编辑器的内容",params.act_content)
-        console.log("图片",params.org_logo)  
-        console.log("所属分类",params.act_type)    
-        submitForm(params).then(response => {
-         
-        })
+      submitForm(formName){
+        this.form.act_content = this.$refs.neditor.content;
+        console.log("文章内容",this.$refs.neditor.content)
+        this.$refs[formName].validate((valid)=>{
+            if(valid){
+              submitForm(this.form).then(response => {
+                   if(response.data.state == 1){
+                     this.centerDialogVisible = true;
+                     var articles = response.data.data.articles;
+                     console.log("返回的数据是啥?",articles);
+                   }
+              })
+            }
+        });
       },
       getArticleType(){
         getArticleType().then(response =>{
-            //console.log("好嗨我")
+            console.log(response.data.state)
             if(response.data.state === 1){
             var category = response.data.data.category
             this.options = response.data.data.category
-            // console.log("文章内容:",category)
-            // console.log("文章",this.options)
+             //console.log("文章内容:",category)
+             //console.log("文章",this.options)
             }
         })
       },
       gotolink(){
-        this.$router.push({path:"/articles/createArticle"})
+         this.$router.go(0);
       },
       gobacklist(){
         this.$router.push({path:'/articles/articleList'})
+      },
+      SumitVido(formName){
+         this.$refs[formName].validate((valid)=>{
+           if(valid){
+               addVido(this.form).then(response=>{
+                   if(response.data.state == 1){
+                     this.centerDialogVisible = true;
+                     var vido = response.data.data.vido;
+                     console.log("返回数据",vido)
+                   }
+               });
+           }
+         });
+      },
+      Savedraft(formName){
+        this.$refs[formName].validate((valid)=>{
+           if(valid){
+               Savedraft(this.form).then(response=>{
+                   if(response.data.state==1){
+                     this.centerdraftVisible = true;
+                     var savedraft = response.data.data.savedraft;
+                     console.log("保存草稿数据",savedraft)
+                   }
+               });
+           }
+        });
+      },
+      preview(formName){
+         this.form.act_content = this.$refs.neditor.content;
+         console.log("文章内容",this.$refs.neditor.content)
+         this.$refs[formName].validate((valid)=>{
+            if(valid){
+               preview(this.form).then(response=>{
+                    this.$router.go(0);
+               });
+            }
+         });
       }
     },
   }
     height: 200px;
     position: relative;
     left: 500px;
+    margin-bottom: 1px;
+  }
+  .video{
+    padding: 150px 0 30px;
+    background-position: center 0;
+    background-size: 192px 132px;
+    text-align: center;
+    width: 200px;
+    height: 200px;
+    position: relative;
+    left: 500px;
+    margin-bottom: 60px;
+    margin-top: -140px;
+  }
+  .eltip{
+    font-size: 12px;
+    position: relative;
+    left: 80px;
+    margin-bottom: 20px;
   }
-
 </style>