update

src/api/file.js

@@ -1,5 +1,14 @@
-import { post } from '@/utils/request'
+import { get, post } from '@/utils/request'
 
 const fileApi = {
-  ossPolicyApi: '/api/file/oss/policy'
+  serverInfoApi: '/api/file/oss/serverinfo',
+  albumSubmitApi: '/api/file/oss/token',
+}
+
+export function getServerInfo(channelId) {
+  return post(fileApi.serverInfoApi + '?channelId=' + channelId)
+}
+
+export function submitAlbum(album) {
+  return post(fileApi.albumSubmitApi, album)
 }

src/api/video.js

@@ -1,43 +1,55 @@
 import { get, post } from '@/utils/request'
 
 const videoApi = {
+  videoCategoryApi: '/api/content/video/category',
+  videoSubmitApi: '/api/content/video/submit',
+  updateVideoScopeApi: '/api/content/video/submit',
+  updateVideoInfoApi: '/api/content/video/submit',
+  updateVideoCoverApi: '/api/content/video/submit',
+  updateVideoFileApi: '/api/content/video/submit',
+  videoInfoApi: '/api/content/video/detail',
+  videoUrlApi: '/api/content/video/url',
+
   videoRecommendApi: '/api/content/video/recommend',
   similarVideoApi: '/api/content/video/similar',
   videoPageApi: '/api/content/video/page',
-  videoInfoApi: '/api/content/video/detail',
-  videoCategoryApi: '/api/content/video/category',
   videoTagApi: '/api/content/video/tag',
-  videoUrlApi: '/api/content/video/url',
-  videoSubmitApi: '/api/content/video/submit',
   userVideoListApi: '/api/content/video/user',
   hotVideoApi: '/api/content/video/hot',
-
   userContentDataApi: '/api/content/userdata',
-
   playerRecordApi: '/api/media/video/play/record',
   userRecentlyVideoListApi: '/api/media/video/post/user/recently',
   testVideoApi: '/api/media/video/post/display'
 }
 
-// 视频推荐接口
-export function videoRecommend(page) {
-  return get(videoApi.videoRecommendApi + '/' + page)
+// 视频分类接口
+export function videoCategory() {
+  return get(videoApi.videoCategoryApi)
 }
 
-// 视频标签接口
-export function videoTag(tag, page) {
-  return get(videoApi.videoTagApi + '?tag=' + tag + '&page=' + page)
+// 发布新视频
+export function submitVideo(video) {
+  return post(videoApi.videoSubmitApi, video)
 }
 
-// 相似视频接口
-export function similarVideo(videoId) {
-  return get(videoApi.similarVideoApi + '?videoId=' + videoId)
+// 更新视频可见范围
+export function updateVideoScope(data) {
+  return post(videoApi.updateVideoScopeApi, data)
 }
 
-// 视频分页接口
-export function videoPage(pageNumber, prevId, nextId, categoryId) {
-  return get(videoApi.videoPageApi +
-    '?pageNumber=' + pageNumber + '&prevId=' + prevId + '&nextId=' + nextId + '&categoryId=' + categoryId)
+// 更新视频信息
+export function updateVideoInfo(data) {
+  return post(videoApi.updateVideoInfoApi, data)
+}
+
+// 更新视频封面
+export function updateVideoCover(data) {
+  return post(videoApi.updateVideoCoverApi, data)
+}
+
+// 更新视频文件
+export function updateVideoFile(data) {
+  return post(videoApi.updateVideoFileApi, data)
 }
 
 // 视频详情接口
@@ -50,33 +62,25 @@ export function videoUrl(videoId) {
   return get(videoApi.videoUrlApi + '/' + videoId)
 }
 
-// 视频分类接口
-export function videoCategory() {
-  return get(videoApi.videoCategoryApi)
-}
-
-export function submitVideo(video) {
-  return post(videoApi.videoSubmitApi, video)
-}
-
-// 更新视频信息
-export function updateVideoInfo(data) {
-  return post(videoApi.videoSubmitApi, data)
+// 视频推荐接口
+export function videoRecommend(page) {
+  return get(videoApi.videoRecommendApi + '/' + page)
 }
 
-// 更新视频可见范围
-export function updateVideoScope(data) {
-  return post(videoApi.videoSubmitApi, data)
+// 视频标签接口
+export function videoTag(tag, page) {
+  return get(videoApi.videoTagApi + '?tag=' + tag + '&page=' + page)
 }
 
-// 更新视频封面
-export function updateVideoCover(data) {
-  return post(videoApi.videoSubmitApi, data)
+// 相似视频接口
+export function similarVideo(videoId) {
+  return get(videoApi.similarVideoApi + '?videoId=' + videoId)
 }
 
-// 更新视频文件
-export function updateVideoFile(data) {
-  return post(videoApi.videoSubmitApi, data)
+// 视频分页接口
+export function videoPage(pageNumber, prevId, nextId, categoryId) {
+  return get(videoApi.videoPageApi +
+    '?pageNumber=' + pageNumber + '&prevId=' + prevId + '&nextId=' + nextId + '&categoryId=' + categoryId)
 }
 
 // 播放记录

src/components/upload/EditVideo.vue

@@ -39,23 +39,18 @@
           <div class="text item">
             <el-form ref="form" :model="form" label-width="80px">
               <el-form-item label="标题">
-                <el-input v-model="form.title" style="width: 70%; padding-right: 2px" placeholder="标题不能超过 50 个字符" />
+                <el-input v-model="form.title" style="padding-right: 1px" placeholder="标题不能超过 50 个字符" />
               </el-form-item>
               <el-form-item label="描述">
-                <el-input v-model="form.description" type="textarea" style="width: 70%; padding-right: 2px" />
+                <el-input v-model="form.description" type="textarea" autosize style="padding-right: 1px;" />
               </el-form-item>
-              <el-form-item label="分区">
-                <el-select v-model="category" placeholder="请选择分区">
-                  <el-option label="新闻" value="shanghai" />
-                  <el-option label="教育" value="beijing" />
-                </el-select>
-                <el-select v-model="childCategory" placeholder="请选择子分区">
-                  <el-option label="历史" value="shanghai" />
-                  <el-option label="计算机" value="beijing" />
-                </el-select>
-              </el-form-item>
-              <el-form-item label="标签">
-                <el-input v-model="tagsStr" style="width: 70%; padding-right: 2px" placeholder="多个标签之间使用英文逗号分隔" />
+              <el-form-item label="发布时间">
+                <el-col :span="11">
+                  <el-date-picker v-model="form.date" type="date" placeholder="选择日期" style="width: 100%;" />
+                </el-col>
+                <el-col :span="11">
+                  <el-time-picker v-model="form.time" placeholder="选择时间" style="width: 100%;" />
+                </el-col>
               </el-form-item>
             </el-form>
           </div>
@@ -117,7 +112,8 @@
 </template>
 
 <script>
-import { videoCategory, submitVideo, videoInfo, updateVideoInfo, updateVideoScope, updateVideoCover, updateVideoFile } from '@/api/video'
+import { getServerInfo } from '@/api/file'
+import { videoCategory, videoInfo, updateVideoInfo, updateVideoScope, updateVideoCover, updateVideoFile } from '@/api/video'
 
 export default {
   name: 'EditVideo',
@@ -135,14 +131,14 @@ export default {
           }
         },
         headers: {
-          Authorization: '1234567890'
+          Authorization: 'Bearer '
         }
       },
       attrs: {
         accept: 'video/*'
       },
       imgHeaders: {
-        Authorization: '1234567890'
+        Authorization: 'Bearer '
       },
       imgData: {
         channelId: 3
@@ -174,7 +170,8 @@ export default {
         height: 0,
         duration: 0
       },
-      videoInfo: null
+      videoInfo: null,
+      ossToken: null,
     }
   },
   created() {
@@ -193,6 +190,12 @@ export default {
       }
     })
     //this.getVideoCategory()
+    getServerInfo(1).then(res => {
+      if (res.code === 0) {
+        this.imgHeaders.Authorization = 'Bearer ' + res.data
+        this.options.headers.Authorization = 'Bearer ' + res.data
+      }
+    })
   },
   methods: {
     /***********************************************************************/
@@ -209,8 +212,6 @@ export default {
         )
         return
       }
-      this.setTitle(file.file.name)
-      this.processVideo(file.file)
     },
     onFileProgress(rootFile, file, chunk) {
     },
@@ -263,104 +264,6 @@ export default {
 
       }
     },
-    /***********************************************************************/
-    // 选择视频后获取视频的分辨率和时长, 并截取第一秒的内容作为封面
-    processVideo(file) {
-      return new Promise((resolve, reject) => {
-        const canvas = document.createElement('canvas')
-        const canvasCtx = canvas.getContext('2d')
-
-        const videoElem = document.createElement('video')
-        const dataUrl = window.URL.createObjectURL(file)
-        // 当前帧的数据是可用的
-        videoElem.onloadeddata = function() {
-          resolve(videoElem)
-        }
-        videoElem.onerror = function() {
-          reject('video 后台加载失败')
-        }
-        // 设置 auto 预加载数据， 否则会出现截图为黑色图片的情况
-        videoElem.setAttribute('preload', 'auto')
-        videoElem.src = dataUrl
-        // 预加载完成后才会获取到视频的宽高和时长数据
-        videoElem.addEventListener('canplay', this.onCanPlay(videoElem, canvas, canvasCtx))
-      })
-    },
-    onCanPlay(videoElem, canvas, canvasCtx) {
-      setTimeout(() => {
-        // 视频视频分辨率
-        const videoWidth = videoElem.videoWidth
-        const videoHeight = videoElem.videoHeight
-        this.form.width = videoWidth
-        this.form.height = videoHeight
-        this.form.duration = videoElem.duration
-
-        videoElem.pause()
-        // 设置画布尺寸
-        canvas.width = videoWidth
-        canvas.height = videoHeight
-        canvasCtx.drawImage(videoElem, 0, 0, canvas.width, canvas.height)
-        // 把图标base64编码后变成一段url字符串
-        const urlData = canvas.toDataURL('image/jpeg')
-        if (typeof urlData !== 'string') {
-          alert('urlData不是字符串')
-          return
-        }
-
-        var arr = urlData.split(',')
-        var bstr = atob(arr[1])
-        var n = bstr.length
-        var u8arr = new Uint8Array(n)
-        while (n--) {
-          u8arr[n] = bstr.charCodeAt(n)
-        }
-
-        const coverFile = new File([u8arr], 'cover.jpg', { type: 'image/jpeg' })
-        if (coverFile instanceof File) {
-          const formData = new FormData()
-          formData.append('file', coverFile)
-          formData.append('channelId', 3)
-          fetch(`//oss.reghao.cn/`, {
-            headers: {
-              Authorization: '1234567890'
-            },
-            method: 'POST',
-            credentials: 'include',
-            body: formData
-          }).then(response => response.json())
-            .then(json => {
-              if (json.code === 0) {
-                const resData = json.data
-                this.form.coverUrl = resData.url
-                this.imageUrl = resData.url
-              } else {
-                this.$notify(
-                  {
-                    title: '提示',
-                    message: '视频封面上传失败，请重试！' + json.msg,
-                    type: 'warning',
-                    duration: 3000
-                  }
-                )
-              }
-            })
-            .catch(e => {
-              return null
-            })
-        }
-      }, 1000) // 1000毫秒，就是截取第一秒，2000毫秒就是截取第2秒，视频1秒通常24帧，也可以换算成截取第几帧。
-      // 防止拖动进度条的时候重复触发
-      // videoElem.removeEventListener('canplay', arguments.callee)
-    },
-    /***********************************************************************/
-    setTitle(title) {
-      if (title.length > 50) {
-        this.form.title = title.substring(0, 50)
-        this.form.description = title
-      } else {
-        this.form.title = title
-      }
-    },
     getVideoCategory() {
       videoCategory()
         .then(res => {
@@ -416,16 +319,32 @@ export default {
       this.$router.push('/post/video')
     },
     onUpdateVideoFile() {
-      console.log('更新视频文件')
+      updateVideoFile().then(res => {
+        if (res.code === 0) {
+          console.log('更新视频文件')
+        }
+      })
     },
     onUpdateVideoCover() {
-      console.log('更新视频封面')
+      updateVideoCover().then(res => {
+        if (res.code === 0) {
+          console.log('更新视频封面')
+        }
+      })
     },
     onUpdateVideoInfo() {
-      console.log('更新视频信息')
+      updateVideoInfo().then(res => {
+        if (res.code === 0) {
+          console.log('更新视频信息')
+        }
+      })
     },
     onUpdateVideoScope() {
-      console.log('更新视频作用域')
+      updateVideoScope().then(res => {
+        if (res.code === 0) {
+          console.log('更新视频作用域')
+        }
+      })
     }
   }
 }

src/components/upload/PublishVideo.vue

@@ -1,83 +1,111 @@
 <template>
-  <el-col>
-    <el-card>
-      <el-row>
-        <h2>发布视频</h2>
-        <uploader
-          class="uploader-example"
-          :options="options"
-          :auto-start="true"
-          @file-added="onFileAdded"
-          @file-success="onFileSuccess"
-          @file-progress="onFileProgress"
-          @file-error="onFileError"
-        >
-          <uploader-unsupport />
-          <uploader-drop>
-            <p>拖动视频文件到此处或</p>
-            <uploader-btn :attrs="attrs">选择视频文件</uploader-btn>
-          </uploader-drop>
-          <uploader-list />
-        </uploader>
-      </el-row>
-      <el-divider />
-      <el-row style="position: center">
-        <h2>上传封面</h2>
-        <el-upload
-          class="avatar-uploader"
-          action="//oss.reghao.cn/"
-          :headers="imgHeaders"
-          :data="imgData"
-          :show-file-list="false"
-          :before-upload="beforeAvatarUpload"
-          :on-success="handleAvatarSuccess"
-        >
-          <img v-if="imageUrl" :src="imageUrl" class="avatar">
-          <i v-else class="el-icon-plus avatar-uploader-icon" />
-        </el-upload>
-      </el-row>
-      <el-divider />
-      <el-row>
-        <h2>稿件信息</h2>
-      </el-row>
-      <el-form ref="form" :model="form" label-width="80px">
-        <el-form-item label="标题">
-          <el-input v-model="form.title" style="width: 70%; padding-right: 2px" placeholder="标题不能超过 50 个字符" />
-        </el-form-item>
-        <el-form-item label="描述">
-          <el-input v-model="form.description" type="textarea" style="width: 70%; padding-right: 2px" />
-        </el-form-item>
-        <el-form-item label="分区">
-          <el-select v-model="category" placeholder="请选择分区">
-            <el-option label="新闻" value="shanghai" />
-            <el-option label="教育" value="beijing" />
-          </el-select>
-          <el-select v-model="childCategory" placeholder="请选择子分区">
-            <el-option label="历史" value="shanghai" />
-            <el-option label="计算机" value="beijing" />
-          </el-select>
-        </el-form-item>
-        <el-form-item label="标签">
-          <el-input v-model="tagsStr" style="width: 70%; padding-right: 2px" placeholder="多个标签之间使用英文逗号分隔" />
-        </el-form-item>
-        <el-form-item label="可见范围">
-          <el-select v-model="form.scope" placeholder="选择可见范围">
-            <el-option label="所有人可见" value="1" />
-            <el-option label="验证码可见" value="2" />
-            <el-option label="VIP 可见" value="3" />
-            <el-option label="仅自己可见" value="4" />
-          </el-select>
-        </el-form-item>
-        <el-form-item>
-          <el-button type="primary" @click="onSubmit">立即投稿</el-button>
-          <el-button>取消</el-button>
-        </el-form-item>
-      </el-form>
-    </el-card>
-  </el-col>
+  <el-row class="movie-list">
+    <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
+      <el-col :md="12" style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
+        <el-card class="box-card">
+          <div slot="header" class="clearfix">
+            <span>上传视频文件</span>
+          </div>
+          <div class="text item">
+            <uploader
+              class="uploader-example"
+              :options="options"
+              :auto-start="true"
+              @file-added="onFileAdded"
+              @file-success="onFileSuccess"
+              @file-progress="onFileProgress"
+              @file-error="onFileError"
+            >
+              <uploader-unsupport />
+              <uploader-drop>
+                <p>拖动视频文件到此处或</p>
+                <uploader-btn :attrs="attrs">选择视频文件</uploader-btn>
+              </uploader-drop>
+              <uploader-list />
+            </uploader>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+    <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
+      <el-col :md="12" style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
+        <el-card class="box-card">
+          <div slot="header" class="clearfix">
+            <span>上传视频封面</span>
+          </div>
+          <div class="text item">
+            <el-tooltip class="item" effect="dark" content="点击上传图片" placement="top-end">
+              <el-upload
+                class="avatar-uploader"
+                action="//oss.reghao.cn/"
+                :headers="imgHeaders"
+                :data="imgData"
+                :show-file-list="false"
+                :before-upload="beforeAvatarUpload"
+                :on-success="handleAvatarSuccess"
+              >
+                <img v-if="form.coverUrl" :src="form.coverUrl" class="avatar">
+                <i v-else class="el-icon-plus avatar-uploader-icon" />
+              </el-upload>
+            </el-tooltip>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+    <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
+      <el-col :md="12" style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
+        <el-card class="box-card">
+          <div slot="header" class="clearfix">
+            <span>稿件信息</span>
+            <el-button style="float: right; padding: 3px 0" type="text" @click="onSubmit">发布</el-button>
+          </div>
+          <div class="text item">
+            <el-form ref="form" :model="form" label-width="80px">
+              <el-form-item label="标题">
+                <el-input v-model="form.title" style="padding-right: 1px" placeholder="标题不能超过 50 个字符" />
+              </el-form-item>
+              <el-form-item label="描述">
+                <el-input v-model="form.description" type="textarea" autosize style="padding-right: 1px;" />
+              </el-form-item>
+              <el-form-item label="分区">
+                <el-select v-model="category" placeholder="请选择分区">
+                  <el-option label="新闻" value="shanghai" />
+                  <el-option label="教育" value="beijing" />
+                </el-select>
+                <el-select v-model="childCategory" placeholder="请选择子分区">
+                  <el-option label="历史" value="shanghai" />
+                  <el-option label="计算机" value="beijing" />
+                </el-select>
+              </el-form-item>
+              <el-form-item label="标签">
+                <el-input v-model="tagsStr" style="width: 70%; padding-right: 2px" placeholder="多个标签使用英文逗号分隔" />
+              </el-form-item>
+              <el-form-item label="可见范围">
+                <el-select v-model="form.scope" placeholder="选择可见范围">
+                  <el-option label="所有人可见" value="1" />
+                  <el-option label="验证码可见" value="2" />
+                  <el-option label="VIP 可见" value="3" />
+                  <el-option label="仅自己可见" value="4" />
+                </el-select>
+              </el-form-item>
+              <el-form-item label="定时发布">
+                <el-col :span="11">
+                  <el-date-picker v-model="form.date" type="date" placeholder="选择日期" style="width: 100%;" />
+                </el-col>
+                <el-col :span="11">
+                  <el-time-picker v-model="form.time" placeholder="选择时间" style="width: 100%;" />
+                </el-col>
+              </el-form-item>
+            </el-form>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+  </el-row>
 </template>
 
 <script>
+import { getServerInfo } from '@/api/file'
 import { videoCategory, submitVideo } from '@/api/video'
 
 export default {
@@ -96,20 +124,22 @@ export default {
           }
         },
         headers: {
-          Authorization: '1234567890'
-        }
+          Authorization: ''
+        },
+        withCredentials: true,
       },
       attrs: {
         accept: 'video/*'
       },
+      /***********************************************************************/
+      imgOssUrl: null,
       imgHeaders: {
-        Authorization: '1234567890'
+        Authorization: ''
       },
       imgData: {
-        channelId: 3
+        channelId: 5
       },
       /***********************************************************************/
-      coverUrl: null,
       categoryMap: {
         Set: function(key, value) { this[key] = value },
         Get: function(key) { return this[key] },
@@ -118,9 +148,6 @@ export default {
       },
       category: [],
       childCategory: [],
-      coverFile: null,
-      imageList: [],
-      imageUrl: '',
       // 提交给后端的数据
       tagsStr: null,
       form: {
@@ -134,12 +161,32 @@ export default {
         width: 0,
         height: 0,
         duration: 0
-      }
+      },
     }
   },
   created() {
+    getServerInfo(2).then(res => {
+      if (res.code === 0) {
+        const resData = res.data
+        this.options.target = resData.ossUrl
+        this.options.chunkSize = resData.maxSize
+        this.options.headers.Authorization = "Bearer " + resData.token
+      } else {
+      }
+    })
+
+    getServerInfo(5).then(res => {
+      if (res.code === 0) {
+        const resData = res.data
+        this.imgOssUrl = resData.ossUrl
+        this.imgHeaders.Authorization = "Bearer " + resData.token
+      } else {
+      }
+    })
     this.getVideoCategory()
   },
+  mounted() {
+  },
   methods: {
     /***********************************************************************/
     onFileAdded(file) {
@@ -196,16 +243,16 @@ export default {
       return isJPG && isLt2M
     },
     handleAvatarSuccess(res, file) {
-      this.imageList.push(file)
-      this.imageUrl = URL.createObjectURL(file.raw)
+      const localUrl = URL.createObjectURL(file.raw)
       if (res.code === 0) {
         const resData = res.data
         const uploadId = resData.uploadId
-        const url = resData.url
+        this.form.coverUrl = resData.url
       } else {
 
       }
     },
+    /***********************************************************************/
     // 选择视频后获取视频的分辨率和时长, 并截取第一秒的内容作为封面
     processVideo(file) {
       return new Promise((resolve, reject) => {
@@ -261,11 +308,9 @@ export default {
         if (coverFile instanceof File) {
           const formData = new FormData()
           formData.append('file', coverFile)
-          formData.append('channelId', 3)
+          formData.append('channelId', 5)
           fetch(`//oss.reghao.cn/`, {
-            headers: {
-              Authorization: '1234567890'
-            },
+            headers: this.imgHeaders,
             method: 'POST',
             credentials: 'include',
             body: formData
@@ -273,7 +318,6 @@ export default {
               if (json.code === 0) {
                 const resData = json.data
                 this.form.coverUrl = resData.url
-                this.imageUrl = resData.url
               } else {
                 this.$notify(
                   {
@@ -293,6 +337,7 @@ export default {
       // 防止拖动进度条的时候重复触发
       // videoElem.removeEventListener('canplay', arguments.callee)
     },
+    /***********************************************************************/
     setTitle(title) {
       if (title.length > 50) {
         this.form.title = title.substring(0, 50)

src/views/post/PostAnalysis.vue

@@ -1,75 +1,73 @@
 <template>
-  <div>
-    <el-row>
-      <el-col :md="4">
-        <el-menu
-          :default-active="this.$route.path"
-          router
-          class="el-menu-vertical-demo"
-        >
-          <el-menu-item v-for="(item,i) in navList" :key="i" :index="item.path">
-            <i :class="item.icon" />
-            <span slot="title">{{ item.name }}</span>
-          </el-menu-item>
-        </el-menu>
-      </el-col>
-      <el-col :md="20">
-        <el-table
-          :data="dataList"
-          style="width: 100%"
-        >
-          <el-table-column
-            type="index">
-          </el-table-column>
-          <el-table-column
-            prop="coverUrl"
-            label="视频封面"
-            width="150">
-            <template   slot-scope="scope">
-              <el-image :src="scope.row.coverUrl" min-width="40" height="30" />
-            </template>
-          </el-table-column>
-          <el-table-column
-            prop="pubDate"
-            label="发布时间">
-          </el-table-column>
-          <el-table-column
-            prop="videoId"
-            label="视频 ID"
-            width="180">
-          </el-table-column>
-          <el-table-column
-            prop="title"
-            label="标题"
-            width="180">
-          </el-table-column>
-          <el-table-column
-            prop="viewCount"
-            label="播放量">
-          </el-table-column>
-          <el-table-column
-            prop="commentCount"
-            label="评论量">
-          </el-table-column>
-          <el-table-column
-            prop="commentCount"
-            label="收藏量">
-          </el-table-column>
-          <el-table-column label="操作">
-            <template slot-scope="scope">
-              <el-button
-                size="mini"
-                @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
-              <el-button
-                size="mini"
-                type="danger"
-                @click="handleDelete(scope.$index, scope.row)">删除</el-button>
-            </template>
-          </el-table-column>
-        </el-table>
-      </el-col>
-    </el-row>
-  </div>
+  <el-row>
+    <el-col :md="2">
+      <el-menu
+        :default-active="this.$route.path"
+        router
+        class="el-menu-vertical-demo"
+      >
+        <el-menu-item v-for="(item,i) in navList" :key="i" :index="item.path">
+          <i :class="item.icon" />
+          <span slot="title">{{ item.name }}</span>
+        </el-menu-item>
+      </el-menu>
+    </el-col>
+    <el-col :md="22">
+      <el-table
+        :data="dataList"
+        style="width: 100%"
+      >
+        <el-table-column
+          type="index">
+        </el-table-column>
+        <el-table-column
+          prop="coverUrl"
+          label="视频封面"
+          width="150">
+          <template   slot-scope="scope">
+            <el-image :src="scope.row.coverUrl" min-width="40" height="30" />
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="pubDate"
+          label="发布时间">
+        </el-table-column>
+        <el-table-column
+          prop="videoId"
+          label="视频 ID"
+          width="180">
+        </el-table-column>
+        <el-table-column
+          prop="title"
+          label="标题"
+          width="180">
+        </el-table-column>
+        <el-table-column
+          prop="viewCount"
+          label="播放量">
+        </el-table-column>
+        <el-table-column
+          prop="commentCount"
+          label="评论量">
+        </el-table-column>
+        <el-table-column
+          prop="commentCount"
+          label="收藏量">
+        </el-table-column>
+        <el-table-column label="操作">
+          <template slot-scope="scope">
+            <el-button
+              size="mini"
+              @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
+            <el-button
+              size="mini"
+              type="danger"
+              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-col>
+  </el-row>
 </template>
 
 <script>

src/views/post/PostPublish.vue

@@ -1,39 +1,37 @@
 <template>
-  <div>
-    <el-row>
-      <el-col :md="4">
-        <el-menu
-          :default-active="this.$route.path"
-          router
-          class="el-menu-vertical-demo"
-        >
-          <el-menu-item v-for="(item,i) in navList" :key="i" :index="item.path">
-            <i :class="item.icon" />
-            <span slot="title">{{ item.name }}</span>
-          </el-menu-item>
-        </el-menu>
-      </el-col>
-      <el-col :md="20">
-        <el-tabs v-model="activeName" @tab-click='tabClick'>
-          <el-tab-pane label="视频" name="video">
-            <publish-video v-if="activeName === 'video'" />
-          </el-tab-pane>
-          <el-tab-pane label="相册" name="image">
-            <publish-image v-if="activeName === 'image'" />
-          </el-tab-pane>
-          <el-tab-pane label="音频" name="audio">
-            <publish-audio v-if="activeName === 'audio'" />
-          </el-tab-pane>
-          <el-tab-pane label="文章" name="article">
-            <publish-article v-if="activeName === 'article'" />
-          </el-tab-pane>
-          <el-tab-pane label="文件" name="file">
-            <upload-file v-if="activeName === 'file'" />
-          </el-tab-pane>
-        </el-tabs>
-      </el-col>
-    </el-row>
-  </div>
+  <el-row>
+    <el-col :md="2">
+      <el-menu
+        :default-active="this.$route.path"
+        router
+        class="el-menu-vertical-demo"
+      >
+        <el-menu-item v-for="(item,i) in navList" :key="i" :index="item.path">
+          <i :class="item.icon" />
+          <span slot="title">{{ item.name }}</span>
+        </el-menu-item>
+      </el-menu>
+    </el-col>
+    <el-col :md="22">
+      <el-tabs v-model="activeName" @tab-click='tabClick'>
+        <el-tab-pane label="视频" name="video">
+          <publish-video v-if="activeName === 'video'" />
+        </el-tab-pane>
+        <el-tab-pane label="相册" name="image">
+          <publish-image v-if="activeName === 'image'" />
+        </el-tab-pane>
+        <el-tab-pane label="音频" name="audio">
+          <publish-audio v-if="activeName === 'audio'" />
+        </el-tab-pane>
+        <el-tab-pane label="文章" name="article">
+          <publish-article v-if="activeName === 'article'" />
+        </el-tab-pane>
+        <el-tab-pane label="文件" name="file">
+          <upload-file v-if="activeName === 'file'" />
+        </el-tab-pane>
+      </el-tabs>
+    </el-col>
+  </el-row>
 </template>
 
 <script>