更新视频稿件相关页面和接口

src/api/video.js

@@ -1,46 +1,35 @@
 import { get, post, delete0 } from '@/utils/request'
 
 const videoApi = {
-  videoCategoryApi: '/api/content/video/category',
-  videoSubmitApi: '/api/content/video/submit',
-  updateVideoScopeApi: '/api/content/video/update/scope',
-  updateVideoInfoApi: '/api/content/video/update/info',
-  updateVideoCoverApi: '/api/content/video/update/cover',
-  updateVideoFileApi: '/api/content/video/update/file',
-  videoErrorReportApi: '/api/content/video/report',
+  videoPostApi: '/api/content/post/video',
+  updateVideoScopeApi: '/api/content/post/video/update/scope',
+  updateVideoInfoApi: '/api/content/post/video/update/info',
+  updateVideoCoverApi: '/api/content/post/video/update/cover',
+  updateVideoFileApi: '/api/content/post/video/update/file',
+  videoResourceApi: '/api/content/post/video/resource',
+  convertVideoApi: '/api/content/post/video/convert',
+
+  videoCategoryApi: '/api/content/video/categories',
+  categoryVideoApi: '/api/content/video/category',
+  userVideoPostApi: '/api/content/video/user',
+  tagVideoPostApi: '/api/content/video/tag',
   videoInfoApi: '/api/content/video/detail',
   videoUrlApi: '/api/content/video/url',
+
+  videoErrorReportApi: '/api/content/video/report',
   videoDownloadApi: '/api/content/video/download',
   cacheBiliApi: '/api/content/video/cache',
-  videoDeleteApi: '/api/content/video/delete',
-  userVideoPostApi: '/api/content/video/user',
-  userVideoCardApi: '/api/content/video/card/user',
-  convertVideoApi: '/api/content/video/convert',
 
-  videoPageApi: '/api/content/video/page',
   videoRecommendApi: '/api/content/video/recommend',
   similarVideoApi: '/api/content/video/similar',
-  videoTagApi: '/api/content/video/tag',
   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 videoCategory() {
-  return get(videoApi.videoCategoryApi)
-}
-
-// 发布新视频
-export function submitVideo(video) {
-  return post(videoApi.videoSubmitApi, video)
-}
-
-// 视频转码
-export function convertVideo(videoId) {
-  return post(videoApi.convertVideoApi + '/' + videoId)
+/*********************************************************************************************************************/
+// 添加视频贴
+export function addVideoPost(video) {
+  return post(videoApi.videoPostApi, video)
 }
 
 // 更新视频可见范围
@@ -63,87 +52,95 @@ export function updateVideoFile(data) {
   return post(videoApi.updateVideoFileApi, data)
 }
 
-export function videoErrorReport(data) {
-  return post(videoApi.videoErrorReportApi, data)
+// 删除视频贴
+export function deleteVideoPost(videoId) {
+  return delete0(videoApi.videoPostApi + '/' + videoId)
 }
 
-// 视频详情接口
-export function videoInfo(videoId) {
-  return get(videoApi.videoInfoApi + '/' + videoId)
-}
-
-// 视频 URL 接口
-export function videoUrl(videoId) {
-  return get(videoApi.videoUrlApi + '/' + videoId)
+// 获取视频贴列表
+export function getVideoPosts(page) {
+  return get(videoApi.videoPostApi + '?page=' + page)
 }
 
-// 下载视频接口
-export function downloadVideo(videoId) {
-  return get(videoApi.videoDownloadApi + '/' + videoId)
+// 获取视频贴详情
+export function getVideoPost(videoId) {
+  return get(videoApi.videoPostApi + '/' + videoId)
 }
 
-// 缓存 bili 视频接口
-export function cacheBiliVideo(bvId) {
-  return post(videoApi.cacheBiliApi + '/' + bvId)
+// 获取视频资源
+export function getVideoResource(videoId) {
+  return get(videoApi.videoResourceApi + '/' + videoId)
 }
 
-// 视频 URL 接口
-export function deleteVideo(videoId) {
-  return delete0(videoApi.videoDeleteApi + '/' + videoId)
+// 视频转码
+export function convertVideo(videoId) {
+  return post(videoApi.convertVideoApi + '/' + videoId)
 }
 
-/***********************************************************************************************************************/
-// 视频推荐接口
-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 categoryVideos(categoryId, page) {
+  return get(videoApi.categoryVideoApi + '?categoryId=' + categoryId + '&page=' + page)
 }
 
-// 相似视频接口
-export function similarVideo(videoId) {
-  return get(videoApi.similarVideoApi + '?videoId=' + videoId)
+// 获取用户视频
+export function getUserVideos(userId, page) {
+  return get(videoApi.userVideoPostApi + '?userId=' + userId + '&page=' + page)
 }
 
-// 视频分类接口
-export function categoryVideos(categoryId, nextId) {
-  return get(videoApi.videoPageApi + '?categoryId=' + categoryId + '&nextId=' + nextId)
+// 获取相同标签的视频
+export function getTagVideos(tag, page) {
+  return get(videoApi.tagVideoPostApi + '?tag=' + tag + '&page=' + page)
 }
 
-// 播放记录
-export function submitPlayRecord(playerRecord) {
-  return post(videoApi.playerRecordApi, playerRecord)
+// 获取视频详情
+export function videoInfo(videoId) {
+  return get(videoApi.videoInfoApi + '/' + videoId)
 }
 
-export function userVideoPost(pageNumber) {
-  return get(videoApi.userVideoPostApi + '?pageNumber=' + pageNumber)
+// 获取视频 URL
+export function videoUrl(videoId) {
+  return get(videoApi.videoUrlApi + '/' + videoId)
 }
 
-export function getUserVideoPost(videoId) {
-  return get(videoApi.userVideoPostApi + '/' + videoId)
+/*********************************************************************************************************************/
+// 报告视频错误
+export function videoErrorReport(data) {
+  return post(videoApi.videoErrorReportApi, data)
 }
 
-// 用户视频列表
-export function userVideoCard(pageNumber, userId) {
-  return get(videoApi.userVideoCardApi + '?pageNumber=' + pageNumber + '&userId=' + userId)
+// 下载视频
+export function downloadVideo(videoId) {
+  return get(videoApi.videoDownloadApi + '/' + videoId)
 }
 
-// 用户最近投稿的视频
-export function userRecentlyVideoList(userId) {
-  return get(videoApi.userRecentlyVideoListApi + '?userId=' + userId)
+// 缓存 bili 视频
+export function cacheBiliVideo(bvId) {
+  return post(videoApi.cacheBiliApi + '/' + bvId)
 }
 
-export function getDisplayedVideoList() {
-  return get(videoApi.testVideoApi)
+/***********************************************************************************************************************/
+// 获取推荐视频
+export function videoRecommend(page) {
+  return get(videoApi.videoRecommendApi + '/' + page)
 }
 
-export function getUserContentData(userId) {
-  return get(videoApi.userContentDataApi + '?userId=' + userId)
+// 获取相似视频
+export function similarVideo(videoId) {
+  return get(videoApi.similarVideoApi + '?videoId=' + videoId)
 }
 
+// 获取热门视频
 export function getHotVideo() {
   return get(videoApi.hotVideoApi)
 }
+
+// 获取用户内容统计
+export function getUserContentData(userId) {
+  return get(videoApi.userContentDataApi + '?userId=' + userId)
+}

src/components/admin/AdminEditVideo.vue

@@ -1,384 +1,21 @@
 <template>
   <el-row class="movie-list">
-    <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
-      <el-col :md="24" style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
-        <el-card class="box-card">
-          <div class="text item">
-            <el-button style="float: left; padding: 3px 0" type="text" @click="onReturnVideo">返回视频稿件列表</el-button>
-          </div>
-        </el-card>
-      </el-col>
-    </el-row>
-    <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
-      <el-col :md="8" 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="onUpdateVideoInfo">更新</el-button>
-          </div>
-          <div class="text item">
-            <el-form ref="form" :model="videoInfoForm" label-width="80px">
-              <el-form-item label="标题">
-                <el-input v-model="videoInfoForm.title" style="padding-right: 1px" placeholder="标题不能超过 50 个字符" />
-              </el-form-item>
-              <el-form-item label="描述">
-                <el-input v-model="videoInfoForm.description" type="textarea" autosize style="padding-right: 1px;" />
-              </el-form-item>
-              <el-form-item label="发布时间">
-                <el-date-picker
-                  v-model="videoInfoForm.pubDate"
-                  type="datetime"
-                  placeholder="选择发布的时间">
-                </el-date-picker>
-              </el-form-item>
-            </el-form>
-          </div>
-        </el-card>
-      </el-col>
-      <el-col :md="8" 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="onUpdateVideoCover">更新</el-button>
-          </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"
-                :with-credentials="true"
-                :show-file-list="false"
-                :before-upload="beforeAvatarUpload"
-                :on-success="handleAvatarSuccess"
-                :on-change="handleOnChange"
-              >
-                <img :src="coverUrl" class="avatar">
-              </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="onUpdateVideoFile">更新</el-button>
-          </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>
 </template>
 
 <script>
-import { getServerInfo } from '@/api/file'
-import { getUserVideoPost, updateVideoInfo, updateVideoCover, updateVideoFile } from '@/api/video'
-
 export default {
   name: 'AdminEditVideo',
   data() {
     return {
-      /***********************************************************************/
-      options: {
-        target: '//oss.reghao.cn/',
-        chunkSize: 1024 * 1024 * 1024 * 5, // 5GiB
-        fileParameterName: 'file',
-        testChunks: false,
-        query: (file, chunk) => {
-          return {
-            channelId: 2
-          }
-        },
-        headers: {
-          Authorization: ''
-        },
-        withCredentials: true,
-      },
-      attrs: {
-        accept: 'video/*'
-      },
-      imgHeaders: {
-        Authorization: ''
-      },
-      imgData: {
-        channelId: 5
-      },
-      /***********************************************************************/
-      coverUrl: null,
-      coverUrl1: null,
-      coverFileId: null,
-      videoFileId: null,
-      // 提交给后端的数据
-      videoInfoForm: {
-        videoId: null,
-        title: null,
-        description: null,
-        pubDate: null
-      },
-      ossToken: null,
     }
   },
   created() {
     document.title = '管理员编辑视频'
 
     const videoId = this.$route.params.videoId
-    getUserVideoPost(videoId).then(res => {
-      if (res.code === 0) {
-        const userVideoPost = res.data
-        this.coverUrl = userVideoPost.coverUrl
-        this.videoInfoForm.videoId = userVideoPost.videoId
-        this.videoInfoForm.title = userVideoPost.title
-        this.videoInfoForm.description = userVideoPost.description
-        this.videoInfoForm.pubDate = userVideoPost.pubDate
-      } else {
-        this.$notify({
-          title: '提示',
-          message: '获取 OSS 服务器地址失败, 暂时无法上传文件',
-          type: 'error',
-          duration: 3000
-        })
-      }
-    }).catch(error => {
-      this.$notify({
-        title: '提示',
-        message: error.message,
-        type: 'warning',
-        duration: 3000
-      })
-    })
-
-    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 {
-        this.$notify({
-          title: '提示',
-          message: '获取 OSS 服务器地址失败, 暂时无法上传文件',
-          type: 'error',
-          duration: 3000
-        })
-      }
-    }).catch(error => {
-      this.$notify({
-        title: '提示',
-        message: '视频上传配置失败 ' + error.message,
-        type: 'warning',
-        duration: 3000
-      })
-    })
-
-    getServerInfo(5).then(res => {
-      if (res.code === 0) {
-        const resData = res.data
-        this.imgHeaders.Authorization = 'Bearer ' + resData.token
-      } else {
-        this.$notify({
-          title: '提示',
-          message: '获取 OSS 服务器地址失败, 暂时无法上传文件',
-          type: 'error',
-          duration: 3000
-        })
-      }
-    }).catch(error => {
-      this.$notify({
-        title: '提示',
-        message: '图片上传配置失败 ' + error.message,
-        type: 'warning',
-        duration: 3000
-      })
-    })
   },
   methods: {
-    /***********************************************************************/
-    onFileAdded(file) {
-      if (file.file.size > 1024*1024*1024*5) {
-        file.cancel()
-        this.$notify(
-          {
-            title: '提示',
-            message: '视频文件应小于 5GiB',
-            type: 'warning',
-            duration: 3000
-          }
-        )
-        return
-      }
-    },
-    onFileProgress(rootFile, file, chunk) {
-    },
-    onFileSuccess(rootFile, file, response, chunk) {
-      const res = JSON.parse(response)
-      if (res.code === 0) {
-        const resData = res.data
-        this.videoFileId = resData.uploadId
-
-        this.$notify(
-          {
-            title: '提示',
-            message: '视频已上传',
-            type: 'warning',
-            duration: 3000
-          }
-        )
-      }
-    },
-    onFileError(rootFile, file, response, chunk) {
-      this.$notify(
-        {
-          title: '提示',
-          message: '文件上传错误',
-          type: 'warning',
-          duration: 3000
-        }
-      )
-    },
-    /***********************************************************************/
-    beforeAvatarUpload(file) {
-      const isJPG = file.type === 'image/jpeg'
-      const isLt2M = file.size / 1024 / 1024 < 2
-      if (!isJPG) {
-        this.$message.error('上传头像图片只能是 JPG 格式!')
-      }
-      if (!isLt2M) {
-        this.$message.error('上传头像图片大小不能超过 2MB!')
-      }
-      return isJPG && isLt2M
-    },
-    handleAvatarSuccess(res, file) {
-      const localImageUrl = URL.createObjectURL(file.raw)
-      if (res.code === 0) {
-        const resData = res.data
-        this.coverFileId = resData.uploadId
-        this.coverUrl = localImageUrl
-        this.coverUrl1 = resData.url
-      } else {
-        this.$notify({
-          title: '提示',
-          message: '视频封面上传失败，请重试！' + res.msg,
-          type: 'warning',
-          duration: 3000
-        })
-      }
-    },
-    handleOnChange(file, fileList) {
-    },
-    /***********************************************************************/
-    onReturnVideo() {
-      this.$router.push('/admin/post/video')
-    },
-    onUpdateVideoInfo() {
-      updateVideoInfo(this.videoInfoForm).then(res => {
-        if (res.code === 0) {
-          this.$notify({
-            title: '提示',
-            message: '视频信息已更新',
-            type: 'warning',
-            duration: 3000
-          })
-        }
-      }).catch(error => {
-        this.$notify({
-          title: '提示',
-          message: error.message,
-          type: 'warning',
-          duration: 3000
-        })
-      })
-    },
-    onUpdateVideoCover() {
-      if (this.coverUrl1 === null) {
-        this.$notify({
-          title: '提示',
-          message: '你还没有上传视频封面',
-          type: 'warning',
-          duration: 3000
-        })
-        return
-      }
-
-      const videoCover = {
-        videoId: this.videoInfoForm.videoId,
-        coverUrl: this.coverUrl1,
-        coverFileId: this.coverFileId
-      }
-
-      updateVideoCover(videoCover).then(res => {
-        if (res.code === 0) {
-          this.$notify({
-            title: '提示',
-            message: '视频封面已更新',
-            type: 'warning',
-            duration: 3000
-          })
-        }
-      }).catch(error => {
-        this.$notify({
-          title: '提示',
-          message: error.message,
-          type: 'warning',
-          duration: 3000
-        })
-      })
-    },
-    onUpdateVideoFile() {
-      if (this.videoFileId === null) {
-        this.$notify({
-          title: '提示',
-          message: '你还没有上传视频文件',
-          type: 'warning',
-          duration: 3000
-        })
-        return
-      }
-
-      const videoFile = {
-        videoId: this.videoInfoForm.videoId,
-        videoFileId: this.videoFileId
-      }
-
-      updateVideoFile(videoFile).then(res => {
-        if (res.code === 0) {
-          this.$notify({
-            title: '提示',
-            message: '视频文件已更新',
-            type: 'warning',
-            duration: 3000
-          })
-        }
-      }).catch(error => {
-        this.$notify({
-          title: '提示',
-          message: error.message,
-          type: 'warning',
-          duration: 3000
-        })
-      })
-    },
   }
 }
 </script>
@@ -391,10 +28,6 @@ export default {
     padding-left: 0.5%;
     padding-right: 0.5%;
   }
-
-  .coverImg {
-    height: 120px !important;
-  }
 }
 
 .movie-list {
@@ -402,45 +35,4 @@ export default {
   padding-left: 6%;
   padding-right: 6%;
 }
-
-.uploader-example {
-  width: 500px;
-  padding: 15px;
-  margin: 40px auto 0;
-  font-size: 12px;
-  box-shadow: 0 0 10px rgba(0, 0, 0, .4);
-}
-.uploader-example .uploader-btn {
-  margin-right: 4px;
-}
-.uploader-example .uploader-list {
-  max-height: 440px;
-  overflow: auto;
-  overflow-x: hidden;
-  overflow-y: auto;
-}
-
-.avatar-uploader .el-upload {
-  border: 1px dashed #d9d9d9;
-  border-radius: 6px;
-  cursor: pointer;
-  position: relative;
-  overflow: hidden;
-}
-.avatar-uploader .el-upload:hover {
-  border-color: #409EFF;
-}
-.avatar-uploader-icon {
-  font-size: 28px;
-  color: #8c939d;
-  width: 320px;
-  height: 240px;
-  line-height: 178px;
-  text-align: center;
-}
-.avatar {
-  width: 320px;
-  height: 240px;
-  display: block;
-}
 </style>

src/components/upload/EditVideo.vue

@@ -10,7 +10,60 @@
       </el-col>
     </el-row>
     <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
-      <el-col :md="8" 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-row 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="onUpdateVideoCover">更新</el-button>
+            </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"
+                  :with-credentials="true"
+                  :show-file-list="false"
+                  :before-upload="beforeAvatarUpload"
+                  :on-success="handleAvatarSuccess"
+                  :on-change="handleOnChange"
+                >
+                  <img :src="coverUrl" class="avatar">
+                </el-upload>
+              </el-tooltip>
+            </div>
+          </el-card>
+        </el-row>
+        <el-row 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="onUpdateVideoFile">更新</el-button>
+            </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-row>
+      </el-col>
+      <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>
@@ -35,66 +88,13 @@
           </div>
         </el-card>
       </el-col>
-      <el-col :md="8" 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="onUpdateVideoCover">更新</el-button>
-          </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"
-                :with-credentials="true"
-                :show-file-list="false"
-                :before-upload="beforeAvatarUpload"
-                :on-success="handleAvatarSuccess"
-                :on-change="handleOnChange"
-              >
-                <img :src="coverUrl" class="avatar">
-              </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="onUpdateVideoFile">更新</el-button>
-          </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>
 </template>
 
 <script>
 import { getServerInfo } from '@/api/file'
-import { getUserVideoPost, updateVideoInfo, updateVideoCover, updateVideoFile } from '@/api/video'
+import { getVideoPost, updateVideoInfo, updateVideoCover, updateVideoFile } from '@/api/video'
 
 export default {
   name: 'EditVideo',
@@ -144,7 +144,7 @@ export default {
     document.title = '编辑视频稿件'
 
     const videoId = this.$route.params.videoId
-    getUserVideoPost(videoId).then(res => {
+    getVideoPost(videoId).then(res => {
       if (res.code === 0) {
         const userVideoPost = res.data
         this.coverUrl = userVideoPost.coverUrl

src/components/upload/PublishVideo.vue

@@ -111,7 +111,7 @@
 
 <script>
 import { getServerInfo } from '@/api/file'
-import { videoCategory, submitVideo } from '@/api/video'
+import {videoCategory, addVideoPost } from '@/api/video'
 
 export default {
   name: 'PublishVideo',
@@ -496,7 +496,7 @@ export default {
         }
       }
 
-      submitVideo(this.form).then(res => {
+      addVideoPost(this.form).then(res => {
         if (res.code === 0) {
           this.$notify({
             title: '提示',

src/components/upload/UploadFile.vue

@@ -41,7 +41,6 @@
 </template>
 
 <script>
-import { submitVideo } from '@/api/video'
 import { hashFile } from '@/utils/hash'
 
 export default {
@@ -211,40 +210,7 @@ export default {
             duration: 3000
           }
         )
-        return
       }
-      submitVideo(this.form)
-        .then(res => {
-          if (res.code === 0) {
-            this.$notify(
-              {
-                title: '提示',
-                message: '投稿成功,等待审核通过后其他人就可以看到你的视频了',
-                type: 'warning',
-                duration: 3000
-              }
-            )
-            this.$router.push('/post/list')
-          } else {
-            this.$notify(
-              {
-                title: '提示',
-                message: res.msg,
-                type: 'warning',
-                duration: 3000
-              }
-            )
-          }
-        }).catch(error => {
-        this.$notify(
-          {
-            title: '提示',
-            message: error.message,
-            type: 'warning',
-            duration: 3000
-          }
-        )
-        })
     }
   }
 }

src/views/home/Video.vue

@@ -87,9 +87,7 @@ export default {
       totalPages: 0,
       totalSize: 0,
       dataList: [],
-      prevId: '0',
-      nextId: '0',
-      categoryId: 1,
+      categoryId: 19,
       currentIndex: 0,
       currentCategory: 0,
       currentChildCategory: 0,
@@ -133,7 +131,7 @@ export default {
         duration: 3000
       })
     })
-    this.videoPageWrapper(this.categoryId, this.nextId)
+    this.videoPageWrapper(this.categoryId, this.currentPage)
   },
   mounted() {
     // 当窗口宽度改变时获取屏幕宽度
@@ -151,27 +149,13 @@ export default {
       // 回到顶部
       scrollTo(0, 0)
     },
-    prevClick(pageNumber) {
-      this.currentPage = pageNumber
-      this.videoPageWrapper(this.categoryId, this.prevId)
-      // 回到顶部
-      scrollTo(0, 0)
-    },
-    nextClick(pageNumber) {
-      this.currentPage = pageNumber
-      this.videoPageWrapper(this.categoryId, this.nextId)
-      // 回到顶部
-      scrollTo(0, 0)
-    },
-    videoPageWrapper(categoryId, nextId) {
-      categoryVideos(categoryId, nextId).then(resp => {
+    videoPageWrapper(categoryId, currentPage) {
+      categoryVideos(categoryId, currentPage).then(resp => {
         if (resp.code === 0) {
           const respData = resp.data
           this.dataList = respData.list
           this.totalPages = respData.totalPages
           this.totalSize = respData.totalSize
-          this.nextId = respData.nextId
-          this.prevId = nextId
         } else {
           this.$notify({
             title: '提示',
@@ -196,10 +180,7 @@ export default {
     getVideoList(categoryId) {
       this.currentChildCategory = categoryId
       this.categoryId = categoryId;
-      this.prevId = 0
-      this.nextId = 0
       this.currentPage = 1
-
       this.dataList = []
       this.videoPageWrapper(this.categoryId, this.nextId)
     }

src/views/message/Message.vue

@@ -23,8 +23,6 @@
 </template>
 
 <script>
-import { getUserInfo } from '@/utils/auth'
-
 export default {
   name: 'Profile',
   data() {
@@ -35,120 +33,12 @@ export default {
         { path: '/message/comment/receive', name: '收到的评论', icon: 'el-icon-user' },
         { path: '/message/commend/send', name: '发出的评论', icon: 'el-icon-user' }
       ],
-      form: {
-        videoObjectName: null,
-        coverFileId: null,
-        title: null,
-        description: null,
-        categoryId: 0,
-        tags: null,
-        scope: null,
-        width: 0,
-        height: 0,
-        duration: 0
-      }
     }
   },
   created() {
-    const userInfo = getUserInfo()
-    if (userInfo != null) {
-      document.title = userInfo.screenName + '的个人资料'
-    }
+    document.title = '我的消息'
   },
   methods: {
-    onSubmit() {
-      if (!this.form.videoObjectName) {
-        this.$notify(
-          {
-            title: '提示',
-            message: '你还没有上传视频',
-            type: 'warning',
-            duration: 3000
-          }
-        )
-        return
-      }
-
-      if (!this.form.coverFileId) {
-        this.$notify(
-          {
-            title: '提示',
-            message: '你还没有上传视频封面',
-            type: 'warning',
-            duration: 3000
-          }
-        )
-        return
-      }
-
-      if (this.form.title === '' || this.form.categoryId === -1) {
-        this.$notify(
-          {
-            title: '提示',
-            message: '分区和稿件标题不能为空',
-            type: 'warning',
-            duration: 3000
-          }
-        )
-        return
-      }
-
-      if (this.form.scope === null) {
-        this.$notify(
-          {
-            title: '提示',
-            message: '稿件可见范围不能为空',
-            type: 'warning',
-            duration: 3000
-          }
-        )
-        return
-      }
-
-      /*if (this.form.tags.length === 0 || this.videoPost.tags.length > 10) {
-        this.$notify(
-          {
-            title: '提示',
-            message: '标签最少 1 个, 最多 10 个',
-            type: 'warning',
-            duration: 3000
-          }
-        )
-        return
-      }*/
-      submitVideo(this.form)
-        .then(res => {
-          if (res.code === 0) {
-            this.$notify(
-              {
-                title: '提示',
-                message: '投稿成功,等待审核通过后其他人就可以看到你的视频了',
-                type: 'warning',
-                duration: 3000
-              }
-            )
-            this.$router.push('/post/list')
-          } else {
-            this.$notify(
-              {
-                title: '提示',
-                message: res.msg,
-                type: 'warning',
-                duration: 3000
-              }
-            )
-          }
-        }).catch(error => {
-        this.$notify(
-          {
-            title: '提示',
-            message: error.message,
-            type: 'warning',
-            duration: 3000
-          }
-        )
-      })
-    }
   }
 }
 </script>

src/views/post/PostList.vue

@@ -54,7 +54,7 @@ import AudioPost from "@/views/post/AudioPost";
 import ImagePost from "@/views/post/ImagePost";
 import ArticlePost from "@/views/post/ArticlePost";
 
-import { userVideoPost } from "@/api/video";
+import { getVideoPosts } from "@/api/video";
 import { getAudioPosts } from "@/api/audio";
 import { getUserAlbums } from "@/api/image";
 import { getArticlePosts } from "@/api/article";
@@ -130,7 +130,7 @@ export default {
     getData() {
       this.dataList = []
       if (this.activeName === 'video') {
-        userVideoPost(this.currentPage).then(res => {
+        getVideoPosts(this.currentPage).then(res => {
           if (res.code === 0) {
             const resData = res.data
             this.dataList = resData.list

src/views/post/PostList1.vue

@@ -0,0 +1,186 @@
+<template>
+  <el-row class="movie-list">
+    <el-col :md="4">
+      <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
+        <el-card class="box-card">
+          <div class="text item" v-for="(item,i) in navList" :key="i">
+            <el-row>
+              <span>
+                <i :class="item.icon" />
+                <router-link target="_blank" :to="`${item.path}`">
+                </router-link>
+                <span slot="title">{{ item.name }}</span>
+              </span>
+            </el-row>
+          </div>
+        </el-card>
+      </el-row>
+    </el-col>
+    <el-col :md="20">
+      <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
+        <el-card class="box-card">
+          <div class="text item" v-for="(item, index) in dataList" :key="index" :md="6" :sm="12" :xs="12">
+            <el-row>
+              <el-col :md="4">
+                <router-link target="_blank" :to="`/article/${item.articleId}`">
+                  <el-image
+                    lazy
+                    fit="cover"
+                    :src="item.coverUrl"
+                    class="coverImg"
+                  />
+                </router-link>
+              </el-col>
+              <el-col :md="20">
+                <router-link target="_blank" :to="`/article/${item.articleId}`">
+                  <el-row>
+                    <div style="padding: 14px">
+                      <span style="left: 0;margin-bottom: 0px;color: black;">{{ item.title | ellipsis }}</span>
+                    </div>
+                  </el-row>
+                </router-link>
+                <el-row>
+                  <div style="padding: 14px">
+                    <span style="left: 0;margin-bottom: 0px;color: black;">{{ item.excerpt }}</span>
+                  </div>
+                </el-row>
+              </el-col>
+            </el-row>
+            <el-row>
+              <div style="padding: 14px">
+                <span style="left: 0;margin-bottom: 0px;color: black;">发布于: {{ item.publishAt }}</span>
+              </div>
+            </el-row>
+            <el-divider />
+          </div>
+          <el-col :span="18" class="pagination">
+            <el-pagination
+              :small="screenWidth <= 768"
+              layout="prev, pager, next"
+              :page-size="pageSize"
+              :current-page="currentPage"
+              :total="totalSize"
+              @current-change="handleCurrentChange"
+            />
+          </el-col>
+        </el-card>
+      </el-row>
+    </el-col>
+  </el-row>
+</template>
+
+<script>
+import {getArticles} from "@/api/article";
+
+export default {
+  name: 'Article',
+  filters: {
+    ellipsis(value) {
+      if (!value) return ''
+      const max = 50
+      if (value.length > max) {
+        return value.slice(0, max) + '...'
+      }
+      return value
+    }
+  },
+  components: {},
+  data() {
+    return {
+      navList: [
+        { path: '/post/publish', name: '发布', icon: 'el-icon-upload' },
+        { path: '/post/list', name: '稿件', icon: 'el-icon-files' },
+        { path: '/post/analysis', name: '数据', icon: 'el-icon-data-analysis' }
+      ],
+      // 屏幕宽度, 为了控制分页条的大小
+      screenWidth: document.body.clientWidth,
+      currentPage: 1,
+      pageSize: 12,
+      totalSize: 0,
+      dataList: [],
+    }
+  },
+  created() {
+    document.title = '文章主页'
+
+    this.getArticlesWrapper(this.currentPage)
+  },
+  mounted() {
+    // 当窗口宽度改变时获取屏幕宽度
+    window.onresize = () => {
+      return () => {
+        window.screenWidth = document.body.clientWidth
+        this.screenWidth = window.screenWidth
+      }
+    }
+  },
+  methods: {
+    handleCurrentChange(currentPage) {
+      this.currentPage = currentPage
+      this.getArticlesWrapper(this.currentPage)
+      // 回到顶部
+      scrollTo(0, 0)
+    },
+    getArticlesWrapper(page) {
+      getArticles(page).then(resp => {
+        if (resp.code === 0) {
+          const respData = resp.data
+          this.dataList = respData.list
+          this.totalSize = respData.totalSize
+        }
+      })
+    },
+    refresh() {
+      this.$notify({
+        message: '接口未实现',
+        type: 'info',
+        duration: 3000
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+/*处于手机屏幕时*/
+@media screen and (max-width: 768px) {
+  .movie-list {
+    padding-top: 8px;
+    padding-left: 0.5%;
+    padding-right: 0.5%;
+  }
+
+  .coverImg {
+    height: 120px !important;
+  }
+}
+
+.movie-list {
+  padding-top: 15px;
+  padding-left: 6%;
+  padding-right: 6%;
+}
+
+.coverImg {
+  width: 100%;
+  height: 120px;
+  display: block;
+}
+
+.clearfix:before,
+.clearfix:after {
+  display: table;
+  content: "";
+}
+
+.clearfix:after {
+  clear: both;
+}
+
+.not-result {
+  padding-top: 100px;
+  padding-bottom: 100px;
+  text-align: center;
+}
+
+</style>

src/views/post/VideoPost.vue

@@ -8,6 +8,7 @@
       >
         <el-table-column
           fixed="left"
+          label="No"
           type="index">
         </el-table-column>
         <el-table-column
@@ -41,22 +42,26 @@
         <el-table-column
           prop="description"
           label="描述">
+          <template slot-scope="scope">
+            <span v-if="scope.row.description !== null">-</span>
+            <span v-else>{{scope.row.description}}</span>
+          </template>
         </el-table-column>
         <el-table-column
           prop="duration"
           label="时长">
         </el-table-column>
-        <el-table-column
-          prop="quality"
-          label="画质">
-        </el-table-column>
         <el-table-column
           prop="direction"
           label="方向">
         </el-table-column>
         <el-table-column
-          prop="codec"
-          label="编码">
+          label="视频资源">
+          <template slot-scope="scope">
+            <el-button
+              size="mini"
+              @click="handleVideoResource(scope.$index, scope.row)">查看</el-button>
+          </template>
         </el-table-column>
         <el-table-column
           prop="scope"
@@ -110,9 +115,6 @@
           label="操作"
           width="280">
           <template slot-scope="scope">
-            <el-button
-              size="mini"
-              @click="handleConvert(scope.$index, scope.row)">转码</el-button>
             <el-button
               size="mini"
               @click="handlePreview(scope.$index, scope.row)">预览</el-button>
@@ -128,6 +130,58 @@
       </el-table>
     </el-row>
 
+    <!-- 视频资源对话框 -->
+    <el-dialog
+      append-to-body
+      :visible.sync="showVideoResourceDialog"
+      width="70%"
+      center
+    >
+      <el-table
+        :data="videoResources"
+        border
+        style="width: 100%"
+      >
+        <el-table-column
+          label="No"
+          type="index">
+        </el-table-column>
+        <el-table-column
+          prop="videoCodec"
+          label="原始视频">
+        </el-table-column>
+        <el-table-column
+          prop="videoCodec"
+          label="视频编码">
+        </el-table-column>
+        <el-table-column
+          prop="audioCodec"
+          label="音频编码">
+        </el-table-column>
+        <el-table-column
+          prop="quality"
+          label="画质">
+        </el-table-column>
+        <el-table-column
+          prop="urlType"
+          label="URL 类型">
+        </el-table-column>
+        <el-table-column
+          prop="url"
+          label="URL">
+        </el-table-column>
+        <el-table-column
+          fixed="right"
+          label="操作"
+          width="280">
+          <template slot-scope="scope">
+            <el-button
+              size="mini"
+              @click="handleConvert(scope.$index, scope.row)">转码</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-dialog>
     <!-- 修改视频可见范围对话框 -->
     <el-dialog
       append-to-body
@@ -168,7 +222,7 @@
 
 <script>
 import VideoPreviewPlayer from 'components/VideoPreviewPlayer'
-import { updateVideoScope, videoInfo, deleteVideo, convertVideo } from "@/api/video";
+import { updateVideoScope, videoInfo, deleteVideoPost, getVideoResource, convertVideo } from "@/api/video";
 
 export default {
   name: 'VideoPost',
@@ -182,17 +236,29 @@ export default {
   data() {
     return {
       videoProp: null,
-      showPreviewDialog: false,
+      showVideoResourceDialog: false,
       showEditScopeDialog: false,
+      showPreviewDialog: false,
       form: {
         videoId: null,
         scope: 1
-      }
+      },
+      videoResources: []
     }
   },
   created() {
   },
   methods: {
+    handleVideoResource(index, row) {
+      const videoId = row.videoId
+      this.showVideoResourceDialog = true
+
+      getVideoResource(videoId).then(resp => {
+        if (resp.code === 0) {
+          this.videoResources = resp.data
+        }
+      })
+    },
     handleScope(index, row) {
       this.form.videoId = row.videoId
       this.form.scope = ''+row.scope
@@ -228,24 +294,33 @@ export default {
           }
         }
       })
-      console.log('预览 ' + row.videoId);
     },
     handleEdit(index, row) {
-      console.log(row.videoId);
       const path = '/post/edit/video/' + row.videoId
       this.$router.push(path)
     },
     handleDelete(index, row) {
-      deleteVideo(row.videoId).then(res => {
-         if (res.code === 0) {
-           this.$notify({
-             title: '提示',
-             message: '视频稿件已删除',
-             type: 'warning',
-             duration: 3000
-           })
-           this.$router.go(0)
-         }
+      this.$confirm('确定要删除 ' + row.title + '?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        deleteVideoPost(row.videoId).then(res => {
+          if (res.code === 0) {
+            this.$notify({
+              title: '提示',
+              message: '稿件已删除',
+              type: 'warning',
+              duration: 3000
+            })
+            this.$router.go(0)
+          }
+        })
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: '已取消'
+        })
       })
     },
     onUpdateScope() {

src/views/user/Home.vue

@@ -139,11 +139,11 @@ import ImageAlbumCard from '@/components/card/ImageAlbumCard'
 import ArticleCard from '@/components/card/ArticleCard'
 
 import { getUserInfo, checkRelation, followUser, unfollowUser } from "@/api/user";
-import { getUserContentData, userVideoCard } from "@/api/video";
+import { getUserContentData, getUserVideos } from "@/api/video";
 import { getUserAlbums1 } from "@/api/image";
 import { getUserAudios } from "@/api/audio";
-import { userStatus } from "@/api/status";
 import { getUserArticles } from "@/api/article";
+import { userStatus } from "@/api/status";
 
 export default {
   name: 'Home',
@@ -312,7 +312,7 @@ export default {
       }
     },
     userVideoListWrapper(pageNumber, userId) {
-      userVideoCard(pageNumber, userId).then(resp => {
+      getUserVideos(userId, pageNumber).then(resp => {
         if (resp.code === 0) {
           const respData = resp.data
           this.dataList = respData.list