Parcourir la source

发布视频模块的开发

xiaoming_global il y a 5 ans
Parent
révision
264485734c

+ 34 - 8
src/api/act/submitinfo.js Voir le fichier

@@ -1,11 +1,11 @@
1 1
 import request from '@/utils/request'
2 2
 
3
-export function submitForm (params){
4
-    //console.log("文章列表",params)
3
+export function submitForm (data){
4
+    console.log("文章列表",data)
5 5
     return request({
6 6
         url: '/api/acticle/createacticle',
7
-        method: 'Get',
8
-        params: params
7
+        method: 'Post',
8
+        data: data
9 9
     })
10 10
 }
11 11
 
@@ -43,10 +43,36 @@ export function GetCategorys(params){
43 43
      })
44 44
 }
45 45
 
46
-export function EditArticleCategory(MenuId,data){
46
+export function EditArticleCategory(id,data){
47
+    console.log("abc",data)
47 48
     return request({
48
-        url:'/api/acticle/edit?MenuId='+MenuId,
49
-        method:'put',
50
-        data,data
49
+        url:'/api/acticle/edit?id='+id,
50
+        method:'Post',
51
+        data:data
52
+    })
53
+}
54
+
55
+export function DeleteCategorys(data){
56
+     return request({
57
+         url:'/api/acticle/delete',
58
+         method:'delete',
59
+         data:data
60
+     })
61
+}
62
+
63
+export function addVido(data){
64
+    console.log("发布视频",data)
65
+    return request({
66
+        url:"/api/acticle/addvido",
67
+        method:"post",
68
+        data:data,
69
+    })
70
+}
71
+
72
+export function Savedraft(data){
73
+    return request({
74
+        url:"/api/acticle/savedraft",
75
+        method:"post",
76
+        data:data,
51 77
     })
52 78
 }

+ 83 - 14
src/scrm_pages/article/acticleCategory.vue Voir le fichier

@@ -6,8 +6,8 @@
6 6
       </div>
7 7
       <div class="app-container">
8 8
         <div class="filter-container" style="margin-top: 10px;margin-left: 5px">
9
-          <el-checkbox style="width: 30px">全选</el-checkbox>
10
-          <el-button size="small" icon="el-icon-delete">批量删除</el-button>
9
+          <el-checkbox style="width: 30px" @change="changeCheck" v-model="checkAllStatus">全选</el-checkbox>
10
+          <el-button size="small" icon="el-icon-delete" @click="openDeleteCategorys">批量删除</el-button>
11 11
 
12 12
         </div>
13 13
 
@@ -18,6 +18,7 @@
18 18
             ref="multipleTable"
19 19
             :header-cell-style="{ backgroundColor: 'rgb(245, 247, 250)'}"
20 20
             :data="articsData"
21
+            @selection-change="handleSelectionChange"
21 22
           >
22 23
             <el-table-column
23 24
               type="selection"
@@ -26,7 +27,7 @@
26 27
 
27 28
             <el-table-column label="分类名称" align="center">
28 29
               <template slot-scope="scope">
29
-                {{scope.row.Name}}
30
+                {{scope.row.name}}
30 31
               </template>
31 32
             </el-table-column>
32 33
 
@@ -38,7 +39,7 @@
38 39
 
39 40
             <el-table-column label="分类排序" align="center">
40 41
               <template slot-scope="scope">
41
-                {{scope.row.Order}}
42
+                {{scope.row.order}}
42 43
               </template>
43 44
             </el-table-column>
44 45
 
@@ -58,7 +59,7 @@
58 59
                     size="mini"
59 60
                     type="danger"
60 61
                     icon="el-icon-delete"
61
-                    @click="handleDelete(scope.$index, scope.row)">
62
+                    @click="openDelete(scope.row,scope.$index)">
62 63
                   </el-button>
63 64
                 </el-tooltip>
64 65
 
@@ -92,7 +93,7 @@
92 93
   import BreadCrumb from '../components/bread-crumb'
93 94
   import CreateArticleForm from "./components/CreateArticleForm";
94 95
   import EditArticleForm from "./components/EditArticleForm";
95
-  import { GetCategorys } from '@/api/act/submitinfo'
96
+  import { GetCategorys,DeleteCategorys } from '@/api/act/submitinfo';
96 97
   export default {
97 98
     name: 'acticleCategory',
98 99
     components:{
@@ -108,20 +109,21 @@
108 109
         ],
109 110
         articsData:[],
110 111
         articData:{
111
-          Name:'',
112
-          Summary:'',
113
-          Order:'',
114
-          MenuId:0,
112
+          name:'',
113
+          summary:'',
114
+          order:'',
115
+          id:0,
115 116
         },
116 117
         total:0,
117 118
         listQuery:{
118 119
           page:1,
119 120
           limit:10,
120 121
           name:'',
121
-          content:'',
122
-          sort:'',
122
+          summary:'',
123
+          order:'',
123 124
         },
124
-         artilceIndex:-1,
125
+         artilceIndex:0,
126
+         checkAllStatus:false,
125 127
       }
126 128
     },
127 129
 
@@ -157,7 +159,74 @@
157 159
             console.log("heh",this.articsData)  
158 160
              this.artilceIndex = index 
159 161
              this.$refs.editArticleForm.open();        
160
-        }
162
+        },
163
+          changeCheck(){
164
+          this.$refs.multipleTable.clearSelection();
165
+          if (this.checkAllStatus) {
166
+            this.$refs.multipleTable.toggleAllSelection();
167
+            }
168
+           },
169
+        openDelete(row,index){
170
+          this.$confirm('确认要删除该分类名称吗?<br>删除后,该分类名称信息将无法恢复',{
171
+             dangerouslyUseHTMLString:true,
172
+             confirmButtonText: '确定',
173
+             cancelButtonText: '取消',
174
+             type: 'warning'   
175
+          }).then(()=>{
176
+            var ids = [];
177
+            ids.push(row.id);
178
+            DeleteCategorys({ids:ids}).then(response=>{
179
+                var res = response.data;
180
+                if(res.state === 1){
181
+                    this.articsData.splice(index,1);
182
+                    this.$message.success("删除会员成功");
183
+                }else{
184
+                   this.$message.error(res.msg);
185
+                }
186
+            }).catch(e=>{});
187
+          }).catch(() => {
188
+            return false        
189
+          });
190
+        },
191
+          handleSelectionChange(val){
192
+          this.selectedMembers = val;
193
+        },
194
+        openDeleteCategorys(){
195
+            if (this.selectedMembers.length==0) {
196
+            this.$message.error("请选择要删除的会员");
197
+            return false;
198
+          }   
199
+
200
+          this.$confirm('确认要删除所选的分类名称吗?<br>删除后,分类名称信息将无法恢复', '删除提示',{
201
+             dangerouslyUseHTMLString:true,
202
+             confirmButtonText: '确定',
203
+             cancelButtonText: '取消',
204
+             type: 'warning'
205
+          }).then(()=>{
206
+              var ids = [];
207
+              var idMap = {};
208
+              for (const index in this.selectedMembers) {
209
+                ids.push(this.selectedMembers[index].id);
210
+                idMap[this.selectedMembers[index].id] = this.selectedMembers[index].id;
211
+            }
212
+            DeleteCategorys({ids:ids}).then(response=>{
213
+               var res = response.data;
214
+               if(res.state ===1){
215
+                 var articsDatalength = this.articsData.length;
216
+                  for (let index = articsDatalength-1; index >= 0; index--) {
217
+                  if(this.articsData[index].id in idMap) {
218
+                    this.articsData.splice(index, 1);
219
+                  }                  
220
+                }
221
+                 this.$message.success("删除会员成功");
222
+               }else{
223
+                 this.$message.error(res.msg);
224
+              }
225
+            }).catch(e=>{});
226
+          }).catch(() => {
227
+            return false        
228
+          });
229
+        },
161 230
     },
162 231
      created(){
163 232
          this.GetCategorys()

+ 92 - 1
src/scrm_pages/article/commentList.vue Voir le fichier

@@ -4,7 +4,23 @@
4 4
           <bread-crumb :crumbs='crumbs'></bread-crumb>
5 5
         </div>
6 6
         <div class="app-container">
7
-         评论列表
7
+           评论列表
8
+           <el-form-item ref="videocontentvideo" style="display:none;">
9
+              <img :src="imgurl">
10
+              <video width="320" height="240" controls id="upvideo">
11
+              </video>
12
+              <img :src="modlevidel" />
13
+            </el-form-item>
14
+
15
+            <el-form-item class="upload-demo-content" v-show="formLabelAlign.type==2">
16
+            <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">
17
+              <i class="el-icon-upload"></i>
18
+              <div class="el-upload__text">将视频文件拖到此处,或
19
+                <em>点击上传</em>
20
+              </div>
21
+              <div class="el-upload__tip" slot="tip"></div>
22
+            </el-upload>
23
+          </el-form-item>
8 24
         </div>
9 25
     </div>
10 26
 </template>
@@ -22,7 +38,82 @@
22 38
           { path: false, name: '文章管理' },
23 39
           { path: '/articles/commentList', name: '评论列表' }
24 40
         ],
41
+        imgurl:'',
42
+        modlevidel:'',
43
+        formLabelAlign:'',
44
+        modlevidel:'',
45
+        filsListArray:[],
46
+        elForm:'',
47
+        configuploadurl:'',
48
+      }
49
+    },
50
+    methods:{
51
+      successuploadhandle(response, file, fileList) {
52
+      this.formLabelAlign.video = this.modlevidel =
53
+        response.data.fileList[0].url;
54
+        this.filsListArray = [];
55
+        this.filsListArray.push({
56
+        name: this.formLabelAlign.video,
57
+        url: this.formLabelAlign.video
58
+       });
59
+        this.findvideocover();
60
+    },
61
+      exceedhandle(files, fileList) {
62
+      this.$message.error("只能上传一个视频额");
63
+      },
64
+      beforeUploadVideo(file) {
65
+      if (
66
+        [
67
+          "video/mp4",
68
+          "video/ogg",
69
+          "video/flv",
70
+          "video/avi",
71
+          "video/wmv",
72
+          "video/rmvb"
73
+        ].indexOf(file.type) == -1
74
+      ) {
75
+        this.$message.error("请上传正确的视频格式");
76
+        return false;
25 77
       }
78
+     },
79
+
80
+     findvideocover() {
81
+      let _this = this;
82
+      this.$nextTick(() => {
83
+        let video = document.getElementById("upvideo");
84
+        let source = document.createElement("source");
85
+        // source.src = require("../../assets/5b086751dbb7af1ea8fa8d05e66fe5c3.mp4");this.formLabelAlign.video
86
+        source.src = this.formLabelAlign.video;
87
+        source.type = "video/mp4";
88
+        video.appendChild(source);
89
+        video.addEventListener("loadeddata", function() {
90
+          var canvas = document.createElement("canvas");
91
+          canvas.width = "320";
92
+          canvas.height = "320";
93
+          canvas
94
+            .getContext("2d")
95
+            .drawImage(video, 0, 0, canvas.width, canvas.width);
96
+          var img = document.createElement("img");
97
+          let imgsrc = canvas.toDataURL("image/png");
98
+          _this.Videoframehandle(imgsrc.split(",")[1]);
99
+        });
100
+      });
101
+      },
102
+
103
+      showvideohandle() {
104
+       this.$alert(
105
+        `<video width="320" height="240" controls>
106
+                      <source src="${
107
+                        this.filsListArray[0].url
108
+                      }"  type="video/mp4">
109
+                      您的浏览器不支持 HTML5 video 标签。
110
+                    </video>`,
111
+        "视频预览",
112
+        {
113
+          dangerouslyUseHTMLString: true
114
+        }
115
+      );
116
+    },
26 117
     }
27 118
   }
28 119
 </script>

+ 33 - 30
src/scrm_pages/article/components/CreateArticleForm.vue Voir le fichier

@@ -1,5 +1,4 @@
1 1
 <template>
2
-
3 2
     <div id="create-article-form-box">
4 3
       <el-dialog
5 4
         title="添加分类"
@@ -15,18 +14,18 @@
15 14
             </el-form-item>
16 15
           </el-row>
17 16
           <el-row :span=20>
18
-            <el-form-item label="分类描述:" required prop="content">
19
-              <keep-alive>
20
-                <neditor ref="neditor"
21
-                         id="editor"
22
-                         v-bind:r_content="form.content">
23
-                </neditor>
24
-              </keep-alive>
17
+            <el-form-item label="分类描述:" required prop="summary">      
18
+                <div style="margin: 10px 0;"></div>
19
+                <el-input
20
+                 type="textarea"
21
+                :autosize="{ minRows: 2, maxRows: 4}"
22
+                 v-model="form.summary">
23
+                </el-input>
25 24
             </el-form-item>
26 25
           </el-row>
27 26
           <el-row :span=20>
28
-            <el-form-item label="排序" required prop="sort">
29
-              <el-input v-model="form.sort">
27
+            <el-form-item label="排序:" required prop="order">
28
+              <el-input v-model="form.order">
30 29
 
31 30
               </el-input>
32 31
             </el-form-item>
@@ -42,27 +41,31 @@
42 41
 </template>
43 42
 
44 43
 <script>
45
-    import Neditor from '@/components/Neditor'
46 44
     import { addCategory } from '@/api/act/submitinfo'
47 45
     export default {
48
-        name: "CreateArticleForm",
49
-         components:{
50
-           Neditor,
51
-        },
46
+        name: "CreateArticleForm",       
47
+           props:{
48
+             articsData:{
49
+             type: Array,
50
+             default: function () {
51
+             return [];
52
+        }
53
+      }
54
+           },
52 55
             data(){
53 56
                 return {
54 57
                     centerDialogVisible:false,
55 58
                     rules: {
56 59
                     name: [{required: true, message: "请填写分类名称",},],
57
-                    content: [{required: true,message:"请填写分类描述"}],
58
-                    sort: [{required: true,message:"请填写排序"}]
59
-                },
60
-                 form:{
61
-                   name:"",
62
-                   content:"",
63
-                   sort:"",
64
-                },
60
+                    summary: [{required: true,message:"请填写分类描述"}],
61
+                    order: [{required: true,message:"请填写排序"}]
62
+                 },
65 63
                 acticleform:[],
64
+                 form:{
65
+                    name:"",
66
+                    summary:"",
67
+                    order:"",
68
+                   },
66 69
              }
67 70
           },   
68 71
            methods:{
@@ -74,18 +77,18 @@
74 77
                      this.$refs[formName].resetFields();
75 78
                    }
76 79
                   },
77
-               addCategory(formName){
78
-                  this.form.content = this.$refs.neditor.content
80
+               addCategory(formName){                 
79 81
                    this.$refs[formName].validate((valid)=>{
80
-                       if(valid){
82
+                       if(valid){                         
81 83
                             addCategory(this.form).then(response =>{
82
-                                  console.log(response.data.state)
84
+                                  console.log("添加分类响应",response.data.state)
83 85
                                   if(response.data.state==1){
84 86
                                     var category = response.data.data.category
85
-                                    this.centerDialogVisible=false
87
+                                    console.log("category是什么",category)
88
+                                    this.centerDialogVisible=false;
89
+                                    this.articsData.unshift(category);
86 90
                                     this.resetForm("acticleform");
87
-                                    this.$message.success("添加分类成功");
88
-                                    console.log("coo",category)
91
+                                    this.$message.success("添加分类成功");                           
89 92
                                   }
90 93
                             });
91 94
                        }   

+ 33 - 32
src/scrm_pages/article/components/EditArticleForm.vue Voir le fichier

@@ -7,47 +7,46 @@
7 7
         center>
8 8
         <el-form label-width="90px" class="clearfix" :model="form" ref="acticleform" :rules="rules">
9 9
           <el-row :span=20>
10
-            <el-form-item label="分类名称:" required prop="Name">
11
-              <el-input v-model="form.Name"></el-input>
10
+            <el-form-item label="分类名称:" required prop="name">
11
+              <el-input v-model="form.name"></el-input>
12 12
             </el-form-item>
13 13
           </el-row>
14 14
           <el-row :span=20>
15
-            <el-form-item label="分类描述:" required prop="Summary">
16
-              <keep-alive>
17
-                <neditor ref="neditor"
18
-                         id="editor"
19
-                         v-bind:r_content="form.Summary">
20
-                </neditor>
21
-              </keep-alive>
15
+            <el-form-item label="分类描述:" required prop="summary">
16
+              <div style="margin: 10px 0;"></div>
17
+              <el-input
18
+                 type="textarea"
19
+                :autosize="{minRows: 2, maxRows: 4}"
20
+                 v-model="form.summary">
21
+                </el-input>
22 22
             </el-form-item>
23 23
           </el-row>
24 24
           <el-row :span=20>
25
-            <el-form-item label="排序" required prop="Order">
26
-              <el-input v-model="form.Order"></el-input>
25
+            <el-form-item label="排序" required prop="order">
26
+              <el-input v-model="form.order"></el-input>
27 27
             </el-form-item>
28 28
           </el-row>
29 29
         </el-form>
30 30
         <span slot="footer" class="dialog-footer">
31
-               <el-button type="primary" @click="submitForm('acticleform')">保存</el-button>
31
+               <el-button 
32
+               type="primary" 
33
+               @click="submitForm('acticleform')">保存
34
+               </el-button>
32 35
               <el-button  @click="centerDialogVisible = false">取消</el-button>
33 36
              </span>
34 37
       </el-dialog>   
35 38
     </div>
36 39
 </template>
37 40
 <script>
38
-import Neditor from '@/components/Neditor'
39 41
  import { EditArticleCategory } from '@/api/act/submitinfo'
40 42
 export default {
41 43
     name: "EditArticleForm",
42
-     components:{
43
-        Neditor,
44
-      },
45 44
       props:{
46 45
         form:{
47
-           Name:'',
48
-          Summary:'',
49
-          Order:'',
50
-          MenuId:0,
46
+           name:'',
47
+           summary:'',
48
+           order:'',
49
+           id:0,
51 50
         },
52 51
       artilceIndex:{
53 52
           type:Number,
@@ -64,9 +63,9 @@ export default {
64 63
           return {
65 64
           centerDialogVisible:false,
66 65
            rules: {
67
-             Name: [{required: true, message: "请填写分类名称",},],
68
-             Summary: [{required: true,message:"请填写分类描述"}],
69
-             Order: [{required: true,message:"请填写排序"}]
66
+             name: [{required: true, message: "请填写分类名称",},],
67
+             summary: [{required: true,message:"请填写分类描述"}],
68
+             order: [{required: true,message:"请填写排序"}]
70 69
               },
71 70
              }
72 71
           }, 
@@ -80,20 +79,22 @@ export default {
80 79
                    }
81 80
                 },  
82 81
               submitForm(forname){ 
83
-                alert("aaa")
84 82
                 this.$refs[forname].validate((valid)=>{
85 83
                    if(valid){
86
-                      EditArticleCategory(this.form.MenuId,this.form).then(response=>{
87
-                            console.log("id是谁",this.form.MenuId)
88
-                            console.log(this.form)
84
+                       var order = this.form.order
85
+                       var ord = parseInt(order)
86
+                       this.form.order = ord
87
+                      EditArticleCategory(this.form.id,this.form).then(response=>{                        
89 88
                            var res =  response.data;
90
-                           console.log(res.state)
89
+                           console.log("返回响应",res.state)
91 90
                            if(res.state ===1 ){
92
-                              var categorys = res.data.categorys; 
91
+                              var categorys = res.data.category; 
93 92
                               console.log("categorys是什么",categorys)
94
-                              this.articsData[this.artilceIndex].name = categorys.Name;
95
-                              this.articsData[this.artilceIndex].content = categorys.Summary;
96
-                              this.articsData[this.artilceIndex].sort = categorys.Order;
93
+                              this.articsData[this.artilceIndex].name = categorys.name;
94
+                              this.articsData[this.artilceIndex].summary = categorys.summary;
95
+                              this.articsData[this.artilceIndex].order = categorys.order;
96
+                              //this.articsData.unshift(categorys);
97
+                              // this.resetForm("acticleform");
97 98
                               this.centerDialogVisible = false;
98 99
                               this.$message.success("编辑文章分类成功");
99 100
                            }

+ 253 - 127
src/scrm_pages/article/createArticle.vue Voir le fichier

@@ -7,13 +7,13 @@
7 7
     <div class="app-container">
8 8
     <el-tabs type="border-card">
9 9
       <el-tab-pane label="文章">
10
-        <el-form label-width="80px" class="clearfix" :model="form" ref="form"  :element-loading-text="loadingText">
10
+        <el-form label-width="100px" class="clearfix" :model="form" ref="arctileform"  :element-loading-text="loadingText" :rules="artilcrules">
11 11
           <el-row>
12 12
             <el-col :span="23">
13
-                <el-form-item label="文章标题:">
14
-                    <el-input v-model="form.act_name"  placeholder="文章标题"></el-input>
13
+                <el-form-item label="文章标题:" required prop="act_name">
14
+                    <el-input v-model="form.act_name"></el-input>
15 15
                 </el-form-item>
16
-              <el-form-item label="文章内容:">
16
+              <el-form-item label="文章内容:" required prop="act_content">
17 17
                 <keep-alive>
18 18
                   <neditor ref="neditor"
19 19
                            id="editor"
@@ -25,7 +25,7 @@
25 25
                   <el-radio v-model="radio" label="1" @click.native.prevent="select()" >单图</el-radio>
26 26
                   <el-radio v-model="radio" label="2" @click.native.prevent="clickitem()" >三图</el-radio>
27 27
               </el-form-item>
28
-              <el-form-item prop="org_log">
28
+              <el-form-item>
29 29
                 <el-col :span="3">
30 30
                   <div>
31 31
                     <el-upload
@@ -38,7 +38,7 @@
38 38
                       :on-error="handleAvatarError"
39 39
                       :on-success="handleAvatarSuccess"
40 40
                       :before-upload="beforeAvatarUpload">
41
-                      <img v-if="imageUrl" :src="imageUrl" class="avatar">
41
+                      <img v-if="form.org_logo" :src="form.org_logo" class="avatar">
42 42
                       <i v-else class="el-icon-plus avatar-uploader-icon"></i>
43 43
                     </el-upload>
44 44
                   </div>
@@ -46,7 +46,7 @@
46 46
                 <el-col :span="3">
47 47
                   <div v-if="show">
48 48
                     <el-upload
49
-                      v-loading="guploading"
49
+                      v-loading="uploading"
50 50
                       :element-loading-text="loadingText"
51 51
                       class="avatar-uploader"
52 52
                       :data="uploadData"
@@ -78,13 +78,13 @@
78 78
                   </div>
79 79
                 </el-col>
80 80
               </el-form-item>
81
-               <el-form-item label="所属分类:">
81
+               <el-form-item label="所属分类:" prop="act_type">
82 82
                  <el-select v-model="form.act_type" placeholder="请先选择文章所属分类"  @change="changeActtype()">
83 83
                    <el-option
84 84
                      v-for="item in options"
85
-                     :key="item.MenuId"
86
-                     :label="item.Name"
87
-                     :value="item.MenuId">
85
+                     :key="item.id"
86
+                     :label="item.name"
87
+                     :value="item.id">
88 88
                    </el-option>
89 89
                  </el-select>
90 90
                </el-form-item>
@@ -94,8 +94,8 @@
94 94
           <el-row :span="24">
95 95
             <el-col :span="24">
96 96
                 <el-form-item>
97
-                      <el-button size="small" type="primary" style="width: 100px"  @click="submitForm();centerDialogVisible = true">发布</el-button>
98
-                      <el-button size="small" style="width: 100px">预览</el-button>
97
+                      <el-button size="small" type="primary" style="width: 100px"  @click="submitForm('arctileform');centerDialogVisible=false">发布</el-button>
98
+                      <el-button size="small" style="width: 100px" @click="preview('arctileform')">预览</el-button>
99 99
                       <el-button size="small" style="width: 100px">保存草稿</el-button>
100 100
                   <el-button size="small" style="width: 100px">取消</el-button>
101 101
                 </el-form-item>
@@ -104,65 +104,71 @@
104 104
         </el-form>
105 105
       </el-tab-pane>
106 106
       <el-tab-pane label="视频">
107
-        <el-form label-width="80px" class="clearfix">
107
+        <el-form label-width="100px" class="clearfix"  :rules="rules" :model="form" ref="vidoform">
108 108
            <el-row>
109 109
              <el-col :span="24">
110 110
                  <div style="margin-bottom: 100px">
111
-                 <el-form-item>
112
-                 <div class="video-select">
113
-                   <el-upload
114
-                   class="upload-demo"
115
-                   action="https://upload.qiniup.com"
116
-                   :on-preview="handlePreview"
117
-                   :on-remove="handleRemove"
118
-                   :before-remove="beforeRemove"
119
-                   multiple
120
-                   :limit="3"
121
-                   :on-exceed="handleExceed"
122
-                   :file-list="fileList"
123
-                   :before-upload="beforeUpload">
124
-                   <el-button size="small" type="primary">点击上传</el-button>
125
-                   <div slot="tip" class="el-upload__tip">只能上传jpg/exe文件,且不超过2G</div>
126
-                   </el-upload>
127
-                   </div>
128
-                   <div class="progressbar probar" style="text-align: center">
129
-                   <span class="videotitle"></span>
130
-                   <input type="hidden" name="videoUrl" id="videopath">
131
-                   <div class="barpic"></div>
132
-                   <span class="chaimg"></span>
133
-                   <span class="videoupload"></span>
134
-                   </div>
135
-                 </el-form-item>
111
+                   <el-form-item  required prop="vio_upload">
112
+                       <div class="video-select" v-if="show">
113
+                        <el-upload
114
+                            class="upload-demo"
115
+                            :data="uploadFileData"
116
+                            action="https://upload.qiniup.com"
117
+                            :on-change="handleChange"
118
+                            :on-success="handleSuccess"
119
+                            :on-error="handleError"
120
+                            :before-upload="beforeUploadFile"
121
+                             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">                         
122
+                             <el-button size="small" type="primary" v-if="show">点击上传</el-button>
123
+                             <div slot="tip" class="el-upload__tip" v-if="show">支持大多视频文件格式,大小不超过2G</div>
124
+                        </el-upload>
125
+                       </div>
126
+                         <div class="video" v-if="shows">
127
+                         <img v-if="form.vio_upload" :src="form.vio_upload+'?vframe/jpg/offset/1/w/300/h/200'" class="avatar" id="upvideo">
128
+                       </div>
129
+                        <div id="upvideo"></div>                  
130
+                    </el-form-item>
136 131
                   </div>
137
-                 <el-form-item label="视频标题:">
138
-                   <el-input placeholder="视频标题"></el-input>
132
+
133
+                 <el-form-item label="视频标题:" required prop="vid_name">
134
+                   <el-input v-model="form.vid_name"></el-input>
139 135
                  </el-form-item>
140
-                 <el-form-item label="视频封面:"></el-form-item>
141
-                 <el-form-item>
142
-                   <el-upload  class="avatar-uploader" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
143
-                     <img v-if="imageUrl" :src="imageUrl" class="avatar">
136
+
137
+                 <el-form-item label="视频封面:">
138
+                   <el-upload  class="avatar-uploader" :show-file-list="false" 
139
+                   :on-success="handlevioSuccess" 
140
+                   :before-upload="beforevidoFile" 
141
+                   :on-change="handleChange"
142
+                   action="https://upload.qiniup.com"
143
+                   :data="uploadvidoData">
144
+                     <img v-if="form.vid_pic" :src="form.vid_pic" class="avatar">                  
145
+                     <img v-if="form.vio_upload" :src="form.vio_upload+'?vframe/jpg/offset/1/w/300/h/200'" class="avatar">
144 146
                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
145 147
                    </el-upload>
146 148
                  </el-form-item>
147
-                  <el-form-item label="所属分类:">
148
-                    <el-select v-model="form.act_type" placeholder="请选择">
149
+                 <div class="eltip">
150
+                   视频封面若不上传,系统会根据视频内容进行自动截取<br>
151
+                   目前支持PNG和JPG格式,图片大小不能超过1MB
152
+                   </div>
153
+                  <el-form-item label="所属分类:" required prop="vid_type">
154
+                    <el-select v-model="form.vid_type">
149 155
                       <el-option
150
-                         v-for="item in options"
151
-                         :key="item.value"
152
-                        :label="item.label"
153
-                         :value="item.value">
156
+                          v-for="item in options"
157
+                          :key="item.id"
158
+                          :label="item.name"
159
+                          :value="item.id"> 
154 160
                       </el-option>
155 161
                       </el-select>
156 162
                   </el-form-item>
157 163
                    <el-row :span="24">
158 164
                      <el-col :span="24">
159 165
                        <el-form-item>
160
-                         <el-button size="small" type="primary" style="width: 100px">发布</el-button>
161
-                         <el-button size="small" style="width: 100px">保存草稿</el-button>
162
-                         <el-button size="small" style="width: 100px">取消</el-button>
166
+                         <el-button size="small" type="primary" style="width: 100px" @click="SumitVido('vidoform');centerDialogVisible = false">发布</el-button>
167
+                         <el-button size="small" style="width: 100px" @click="Savedraft('vidoform');centerdraftVisible = false">保存草稿</el-button>
168
+                         <el-button size="small" style="width: 100px" @click="centercancelVisible = true">取消</el-button>
163 169
                        </el-form-item>
164 170
                      </el-col>
165
-                   </el-row>
171
+                   </el-row>                   
166 172
              </el-col>
167 173
            </el-row>
168 174
         </el-form>
@@ -175,12 +181,33 @@
175 181
         :visible.sync="centerDialogVisible"
176 182
          width="30%"
177 183
          center>
178
-         <!-- <span>需要注意的是内容是默认不居中的</span> -->
179 184
          <span slot="footer" class="dialog-footer">
180
-        <el-button @click="gotolink;centerDialogVisible = false">再发一条</el-button>
185
+        <el-button @click="gotolink()">再发一条</el-button>
181 186
         <el-button type="primary" @click="gobacklist">返回文章列表</el-button>
182 187
        </span>
183 188
       </el-dialog>
189
+
190
+      <el-dialog
191
+       title="保存草稿成功"
192
+       :visible.sync = "centerdraftVisible"
193
+        width="30%"
194
+        center>
195
+        <span slot="footer" class="dialog-footer">
196
+        <el-button type="primary" @click="gobacklist">返回文章列表</el-button>  
197
+         </span>
198
+      </el-dialog>
199
+
200
+      <el-dialog
201
+       title="提示"
202
+       :visible.sync = "centercancelVisible"
203
+       width="30%"
204
+       center>
205
+       <span style="center">是否确定取消编辑此文章/视频</span>
206
+       <span slot="footer" class="dialog-footer">
207
+       <el-button type="primary" @click="centercancelVisible = false" >确认</el-button>
208
+       <el-button @click="centercancelVisible = false">取消</el-button>   
209
+        </span>   
210
+      </el-dialog>
184 211
   </div>
185 212
 </template>
186 213
 
@@ -191,7 +218,7 @@
191 218
   import 'quill/dist/quill.snow.css'
192 219
   import 'quill/dist/quill.bubble.css'
193 220
   import Neditor from '@/components/Neditor'
194
-  import {submitForm,getArticleType} from '@/api/act/submitinfo'
221
+  import {submitForm,getArticleType,addVido,Savedraft} from '@/api/act/submitinfo'
195 222
   import { getToken } from '@/api/qiniu'
196 223
   import { getFileExtension} from '@/utils/tools'
197 224
   export default {
@@ -212,12 +239,8 @@
212 239
         show:false,
213 240
         content: '',
214 241
         editorOption: {},
215
-        uploadUrl:"",//你要上传视频到你后台的地址
216
-        videoFlag:false , //是否显示进度条
217
-        videoUploadPercent:"", //进度条的进度,
218
-        isShowUploadVideo:false, //显示上传按钮
219 242
         company:"",
220
-        fileList: [{name: '123', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}],
243
+        fileList: [],
221 244
         form:{
222 245
           act_name:'',
223 246
           act_content:'',
@@ -225,6 +248,11 @@
225 248
           act_category:'',
226 249
           org_logo:'',
227 250
           act_type:'',
251
+          file:'',
252
+          vid_pic:'',
253
+          vio_upload:'',
254
+          vid_name:'',
255
+          vid_type:'',
228 256
         },
229 257
          acttypes:[],
230 258
          imageUrl:'',
@@ -236,31 +264,37 @@
236 264
          uploading:false,
237 265
          loadingText:'',
238 266
          uploadData: { token: '', key: '' },
239
-         myConfig: {
240
-                // 如果需要上传功能,找后端小伙伴要服务器接口地址
241
-                serverUrl: '/api/web/upload/ueditor',
242
-                // 你的UEditor资源存放的路径,相对于打包后的index.html
243
-                UEDITOR_HOME_URL: '/NEditor/',
244
-                // 编辑器不自动被内容撑高
245
-                autoHeightEnabled: false,
246
-                // 初始容器高度
247
-                initialFrameHeight: 240,
248
-                // 初始容器宽度
249
-                initialFrameWidth: '100%',
250
-                // 关闭自动保存
251
-                enableAutoSave: false
252
-            },
267
+         uploadFileData:{token:'',key:''},
268
+         uploadvidoData:{token:'',key:''},
253 269
          centerDialogVisible: false,
270
+         centerdraftVisible:false,
271
+         centercancelVisible:false,
272
+         formLabelAlign:true,
273
+         modlevidel:'',
274
+         filsListArray:[],
275
+         show:true,
276
+         shows:false,
277
+         rules: {
278
+            vid_name: [{required: true, message: "视频标题不能为空"},],
279
+            vio_upload: [{required: true,message:"请上传视频"}],
280
+            vid_type: [{required: true,message:"所属分类不能为空"}]
281
+          },
282
+        artilcrules:{
283
+            act_name: [{required: true, message: "文章标题不能为空"},],
284
+            act_content: [{required: true,message:"文章内容不能为空"}],
285
+            act_type: [{required: true,message:"所属分类不能为空"}]
286
+        },
287
+        vidoform:[],
288
+        ue:'',
254 289
       }
255 290
     },
256 291
     created(){
257
-        this.getArticleType()
292
+        this.getArticleType();
258 293
     },
259 294
     methods: {
260 295
       //第一个图片
261 296
       handleAvatarSuccess(res, file) {
262
-        this.imageUrl = URL.createObjectURL(file.raw);
263
-        this.form.org_logo = this.qiniuDomain + res.url;
297
+       this.form.org_logo = this.qiniuDomain + res.url;
264 298
         this.uploading = false
265 299
       },
266 300
        handleAvatarError(err, file, fileList) {
@@ -298,8 +332,6 @@
298 332
                     this.uploading = false;
299 333
                 })
300 334
             })
301
-
302
-          //return isJPG && isLt2M;
303 335
       },
304 336
       //第二个图片
305 337
       handleAvatartwoSuccess(res, file) {
@@ -347,7 +379,6 @@
347 379
       },
348 380
 
349 381
       //第三张图片
350
-      //第二个图片
351 382
       handleAvatarlastSuccess(res, file) {
352 383
         this.imageUrlLast = URL.createObjectURL(file.raw);
353 384
         this.form.org_logo = this.qiniuDomain + res.url;
@@ -372,7 +403,6 @@
372 403
             var date = new Date()
373 404
             var ext = getFileExtension(file.name)
374 405
             var key = date.getFullYear() + (date.getMonth() + 1) + date.getDate() + date.getHours()  + date.getMinutes()  + date.getSeconds()  +'_o_' + file.uid + '.' + ext;
375
-            this.uploading = true;
376 406
             this.loadingText = '封面图片上传中'
377 407
 
378 408
             const _self = this
@@ -385,32 +415,76 @@
385 415
                     resolve(true)
386 416
                 }).catch(err => {
387 417
                     reject(false)
388
-                    this.uploading = false;
389 418
                 })
390
-            })
419
+            }) 
420
+        }, 
421
+        //视频上传
422
+        handleChange(file, fileList) {
423
+          this.form.file =  file.raw
424
+        }, 
425
+        handleSuccess(res,file,fileList){  
426
+            this.$message.success("视频上传成功")               
427
+             this.form.vio_upload = this.qiniuDomain + res.url;           
428
+             console.log("是什么",this.form.vio_upload)
391 429
 
392
-          //return isJPG && isLt2M;
430
+             this.show=false;
431
+             this.shows = true;
432
+        },
433
+        handlevioSuccess(res,file,fileList){
434
+           this.form.vid_pic = this.qiniuDomain + res.url;  
435
+        },
436
+        changeImg(url){
437
+          console.log("路径是多少?",url)
438
+        },
439
+         handleError(err, file, fileList) {
440
+             this.$message.error("视频上传失败")
441
+         },
442
+        beforeUploadFile(file) {
443
+        const isLt2M = file.size / 1024 / 1024 < 2048;
444
+        if (!isLt2M) {
445
+          this.$message.error('上传视频大小不能超过 2G!');
446
+        }
447
+            var date = new Date()
448
+            var ext = getFileExtension(file.name)
449
+            var key = date.getFullYear() + (date.getMonth() + 1) + date.getDate() + date.getHours()  + date.getMinutes()  + date.getSeconds()  +'_o_' + file.uid + '.' + ext;
450
+            const _self = this
451
+            return new Promise((resolve, reject) => {
452
+                getToken().then(response => {
453
+                    const token = response.data.data.uptoken
454
+                    //console.log("token2是什么?",token)
455
+                    _self._data.uploadFileData.token = token
456
+                    _self._data.uploadFileData.key = key
457
+                    resolve(true)
458
+                }).catch(err => {
459
+                    reject(false)                  
460
+                })
461
+            })
393 462
       },
394
-
395
-      beforeUpload(file) {
396
-        var testmsg=file.name.substring(file.name.lastIndexOf('.')+1)
397
-        const extension = testmsg === 'mp4'
398
-        const extension2 = testmsg === 'exe'
399
-        const isLt2M = file.size / 1024 / 1024 < 2048     //这里做文件大小限制
400
-        if(!extension && !extension2) {
401
-          this.$message({
402
-            message: '上传文件只能是 mp4、exe格式!',
403
-            type: 'warning'
404
-          });
463
+      beforevidoFile(file){
464
+          const isJPG = file.type === 'png/jpg';
465
+          if (!isJPG) {
466
+          this.$message.error('上传头像图片只能是 png或者jpg格式!');
405 467
         }
406
-        if(!isLt2M) {
407
-          this.$message({
408
-            message: '上传文件大小不能超过 2G!',
409
-            type: 'warning'
410
-          });
468
+          const isLt2M = file.size / 1024 / 1024 < 1;
469
+        if (!isLt2M) {
470
+          this.$message.error('上传视频大小不能超过 1M!');
411 471
         }
412
-        return extension || extension2 && isLt2M
413
-      },
472
+            var date = new Date()
473
+            var ext = getFileExtension(file.name)
474
+            var key = date.getFullYear() + (date.getMonth() + 1) + date.getDate() + date.getHours()  + date.getMinutes()  + date.getSeconds()  +'_o_' + file.uid + '.' + ext;
475
+            const _self = this
476
+            return new Promise((resolve, reject) => {
477
+                getToken().then(response => {
478
+                    const token = response.data.data.uptoken
479
+                    //console.log("token2是什么?",token)
480
+                    _self._data.uploadvidoData.token = token
481
+                    _self._data.uploadvidoData.key = key
482
+                    resolve(true)
483
+                }).catch(err => {
484
+                    reject(false)                  
485
+                })
486
+            })
487
+       },
414 488
       select(){
415 489
         this.show = false
416 490
       },
@@ -432,40 +506,74 @@
432 506
       changeActtype(){
433 507
          console.log("所属分类",this.form.act_type)
434 508
       },
435
-      submitForm(){
436
-        console.log("提交文章")
437
-        var params  = new Object()
438
-        params.act_name = this.form.act_name
439
-        params.act_content = this.$refs.neditor.content
440
-        params.org_logo = this.form.org_logo
441
-        params.act_type = this.form.act_type
442
-        this.formloading=true
443
-        this.submitForm =true
444
-        console.log("文章标题",params.act_name)
445
-        console.log("文章内容",params.act_content)
446
-        console.log("富文本编辑器的内容",params.act_content)
447
-        console.log("图片",params.org_logo)  
448
-        console.log("所属分类",params.act_type)    
449
-        submitForm(params).then(response => {
450
-         
451
-        })
509
+      submitForm(formName){
510
+        this.form.act_content = this.$refs.neditor.content;
511
+        console.log("文章内容",this.$refs.neditor.content)
512
+        this.$refs[formName].validate((valid)=>{
513
+            if(valid){
514
+              submitForm(this.form).then(response => {
515
+                   if(response.data.state == 1){
516
+                     this.centerDialogVisible = true;
517
+                     var articles = response.data.data.articles;
518
+                     console.log("返回的数据是啥?",articles);
519
+                   }
520
+              })
521
+            }
522
+        });
452 523
       },
453 524
       getArticleType(){
454 525
         getArticleType().then(response =>{
455
-            //console.log("好嗨我")
526
+            console.log(response.data.state)
456 527
             if(response.data.state === 1){
457 528
             var category = response.data.data.category
458 529
             this.options = response.data.data.category
459
-            // console.log("文章内容:",category)
460
-            // console.log("文章",this.options)
530
+             //console.log("文章内容:",category)
531
+             //console.log("文章",this.options)
461 532
             }
462 533
         })
463 534
       },
464 535
       gotolink(){
465
-        this.$router.push({path:"/articles/createArticle"})
536
+         this.$router.go(0);
466 537
       },
467 538
       gobacklist(){
468 539
         this.$router.push({path:'/articles/articleList'})
540
+      },
541
+      SumitVido(formName){
542
+         this.$refs[formName].validate((valid)=>{
543
+           if(valid){
544
+               addVido(this.form).then(response=>{
545
+                   if(response.data.state == 1){
546
+                     this.centerDialogVisible = true;
547
+                     var vido = response.data.data.vido;
548
+                     console.log("返回数据",vido)
549
+                   }
550
+               });
551
+           }
552
+         });
553
+      },
554
+      Savedraft(formName){
555
+        this.$refs[formName].validate((valid)=>{
556
+           if(valid){
557
+               Savedraft(this.form).then(response=>{
558
+                   if(response.data.state==1){
559
+                     this.centerdraftVisible = true;
560
+                     var savedraft = response.data.data.savedraft;
561
+                     console.log("保存草稿数据",savedraft)
562
+                   }
563
+               });
564
+           }
565
+        });
566
+      },
567
+      preview(formName){
568
+         this.form.act_content = this.$refs.neditor.content;
569
+         console.log("文章内容",this.$refs.neditor.content)
570
+         this.$refs[formName].validate((valid)=>{
571
+            if(valid){
572
+               preview(this.form).then(response=>{
573
+                    this.$router.go(0);
574
+               });
575
+            }
576
+         });
469 577
       }
470 578
     },
471 579
   }
@@ -507,6 +615,24 @@
507 615
     height: 200px;
508 616
     position: relative;
509 617
     left: 500px;
618
+    margin-bottom: 1px;
619
+  }
620
+  .video{
621
+    padding: 150px 0 30px;
622
+    background-position: center 0;
623
+    background-size: 192px 132px;
624
+    text-align: center;
625
+    width: 200px;
626
+    height: 200px;
627
+    position: relative;
628
+    left: 500px;
629
+    margin-bottom: 60px;
630
+    margin-top: -140px;
631
+  }
632
+  .eltip{
633
+    font-size: 12px;
634
+    position: relative;
635
+    left: 80px;
636
+    margin-bottom: 20px;
510 637
   }
511
-
512 638
 </style>