更新页面

src/api/article.js

@@ -0,0 +1,28 @@
+import {delete0, get, post} from '@/utils/request'
+
+const articleApi = {
+  audioSubmitApi: '/api/content/post/article/submit',
+  userAudioApi: '/api/content/post/article/user',
+  audioInfoApi: '/api/content/post/article',
+  updateAudioScopeApi: '/api/content/post/article/scope',
+}
+
+export function submitArticle(data) {
+  return post(articleApi.audioSubmitApi, data)
+}
+
+export function updateArticleScope(audioScope) {
+  return post(articleApi.updateAudioScopeApi, audioScope)
+}
+
+export function deleteArticle(videoId) {
+  return delete0(articleApi.audioInfoApi + '/' + videoId)
+}
+
+export function getArticles(page) {
+  return get(articleApi.userAudioApi + '?page=' + page)
+}
+
+export function getArticle(articleId) {
+  return get(articleApi.audioInfoApi + '/' + articleId)
+}

src/api/audio.js

@@ -1,15 +1,20 @@
-import { get, post } from '@/utils/request'
+import {delete0, get, post} from '@/utils/request'
 
 const audioApi = {
-  audioSubmitApi: '/api/content/audio/submit',
-  userAudioApi: '/api/content/audio/user',
-  audioInfoApi: '/api/content/audio',
+  audioSubmitApi: '/api/content/post/audio/submit',
+  userAudioApi: '/api/content/post/audio/user',
+  audioInfoApi: '/api/content/post/audio',
+  updateAudioScopeApi: '/api/content/post/audio/scope',
 }
 
 export function submitAudio(video) {
   return post(audioApi.audioSubmitApi, video)
 }
 
+export function updateAudioScope(audioScope) {
+  return post(audioApi.updateAudioScopeApi, audioScope)
+}
+
 export function getUserAudio(userId) {
   return get(audioApi.userAudioApi + '?userId=' + userId)
 }
@@ -17,3 +22,7 @@ export function getUserAudio(userId) {
 export function getAudio(audioId) {
   return get(audioApi.audioInfoApi + '/' + audioId)
 }
+
+export function deleteAudio(videoId) {
+  return delete0(audioApi.audioInfoApi + '/' + videoId)
+}

src/api/image.js

@@ -1,11 +1,16 @@
 import { get, post } from '@/utils/request'
 
 const imageApi = {
+  imagePostApi: '/api/content/post/image',
   userAlbumApi: '/api/content/image/album',
   userAlbumApi1: '/api/content/image/album',
   albumSubmitApi: '/api/content/image/album/submit',
 }
 
+export function getImagePosts() {
+  return get(imageApi.imagePostApi)
+}
+
 export function getUserAlbums(userId) {
   return get(imageApi.userAlbumApi + '?userId=' + userId)
 }

src/components/admin/AdminEditVideo.vue

@@ -4,7 +4,7 @@
       <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>
+            <el-button style="float: left; padding: 3px 0" type="text" @click="onReturnVideo">返回视频稿件列表</el-button>
           </div>
         </el-card>
       </el-col>

src/components/card/ArticleCard.vue

@@ -1,22 +1,22 @@
 <template>
-  <router-link target="_blank" :to="`/video/${video.videoId}`">
-    <el-row>
-      <el-col :md="6">
-        <el-image
-            lazy
-            fit="cover"
-            :src="video.coverUrl"
-            class="coverImg"
-        />
-      </el-col>
-      <el-col :md="12">
-        <div style="padding: 14px">
-          <span style="left: 0;margin-bottom: 0px;color: black;">{{ video.title | ellipsis }}</span>
+  <el-col style="padding-right: 7px; padding-left: 7px">
+    <div style="cursor: pointer" :title="article.title">
+      <el-card class="box-card">
+        <div slot="header" class="clearfix">
+          <el-row>
+            <router-link target="_blank" :to="`/article/${article.articleId}`">
+              <span style="left: 0;margin-bottom: 0px;color: black;">{{ article.title | ellipsis }}</span>
+            </router-link>
+          </el-row>
         </div>
-      </el-col>
-    </el-row>
-    <el-divider />
-  </router-link>
+        <div class="text item">
+          <el-row>
+            <span v-html="article.excerpt"/>
+          </el-row>
+        </div>
+      </el-card>
+    </div>
+  </el-col>
 </template>
 
 <script>
@@ -27,7 +27,7 @@ export default {
   filters: {
     ellipsis(value) {
       if (!value) return ''
-      const max = 20
+      const max = 10
       if (value.length > max) {
         return value.slice(0, max) + '...'
       }
@@ -35,7 +35,7 @@ export default {
     }
   },
   props: {
-    video: {
+    article: {
       type: Object,
       default: null
     },
@@ -48,6 +48,23 @@ export default {
   methods: {
     getVisited(visited) {
       return handleVisited(visited)
+    },
+    convertTimestamp(value) {
+      const date = new Date(value*1000)
+      var month = date.getMonth()
+      if (month < 10) {
+        if (month === 0) {
+          month = '01'
+        } else {
+          month = '0' + month
+        }
+      }
+
+      var day = date.getDay()
+      if (day < 10) {
+        day = '0' + day
+      }
+      return month + '-' + day
     }
   }
 }
@@ -108,7 +125,7 @@ export default {
 
 .coverImg {
   width: 100%;
-  height: 100%;
+  height: 175px;
   display: block;
 }
 

src/components/card/AudioCard.vue

@@ -41,7 +41,7 @@
 import { handleVisited } from 'assets/js/utils'
 
 export default {
-  name: 'VideoCard',
+  name: 'AudioCard',
   filters: {
     ellipsis(value) {
       if (!value) return ''

src/components/upload/EditAudio.vue

@@ -4,7 +4,7 @@
       <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="onReturnAudio">返回音频列表</el-button>
+            <el-button style="float: left; padding: 3px 0" type="text" @click="onReturnAudio">返回音频稿件列表</el-button>
           </div>
         </el-card>
       </el-col>
@@ -13,27 +13,7 @@
       <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="onUpdateVideoScope">更新</el-button>
-          </div>
-          <div class="text item">
-            <el-form ref="form" :model="form" label-width="80px">
-              <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>
-          </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>
+            <span>更新音频稿件信息</span>
             <el-button style="float: right; padding: 3px 0" type="text" @click="onUpdateVideoInfo">更新</el-button>
           </div>
           <div class="text item">
@@ -48,29 +28,6 @@
           </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"
-                :show-file-list="false"
-                :before-upload="beforeAvatarUpload"
-                :on-success="handleAvatarSuccess"
-              >
-                <img :src="imageUrl" 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">

src/components/upload/EditImage.vue

@@ -4,27 +4,12 @@
       <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="onReturnAlbum">返回相册列表</el-button>
+            <el-button style="float: left; padding: 3px 0" type="text" @click="onReturnAlbum">返回相册稿件列表</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="onUpdateAlbumScope">更新</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.albumName" style="width: 70%; padding-right: 2px" placeholder="相册名不能超过 50 个字符" />
-              </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">

src/components/upload/EditVideo.vue

@@ -4,7 +4,7 @@
       <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>
+            <el-button style="float: left; padding: 3px 0" type="text" @click="onReturnVideo">返回视频稿件列表</el-button>
           </div>
         </el-card>
       </el-col>

src/components/upload/PublishArticle.vue

@@ -6,16 +6,15 @@
         <el-form-item label="标题">
           <el-input v-model="form.title" style="width: 70%; padding-right: 2px" />
         </el-form-item>
-        <el-form-item label="分类" style="width: 70%; padding-right: 2px">
-          <el-input v-model="form.category" />
+        <el-form-item label="摘要" style="width: 70%; padding-right: 2px">
+          <el-input v-model="form.excerpt" type="textarea" autosize style="padding-right: 1px;" />
         </el-form-item>
         <el-form-item label="内容">
           <rich-text @content=processContent style="width: 80%; padding-right: 2px" />
           <!-- <mavon-editor v-model="content" style="width: 90%; padding-right: 2px" />-->
         </el-form-item>
         <el-form-item>
-          <el-button type="primary" @click="onSubmit">立即投稿</el-button>
-          <el-button>取消</el-button>
+          <el-button type="primary" @click="onSubmit">发布</el-button>
         </el-form-item>
       </el-form>
     </el-row>
@@ -24,6 +23,7 @@
 
 <script>
 import RichText from '@/components/upload/RichText'
+import { submitArticle } from "@/api/article";
 
 export default {
   name: 'PublishArticle',
@@ -33,7 +33,7 @@ export default {
       content: '',
       form: {
         title: '',
-        category: '',
+        excerpt: '',
         content: ''
       }
     }
@@ -46,6 +46,31 @@ export default {
     },
     onSubmit() {
       console.log(this.form)
+      submitArticle(this.form).then(res => {
+        if (res.code === 0) {
+          this.$notify({
+            title: '提示',
+            message: '投稿成功',
+            type: 'warning',
+            duration: 3000
+          })
+          this.$router.push('/post/article')
+        } else {
+          this.$notify({
+            title: '提示',
+            message: res.msg,
+            type: 'warning',
+            duration: 3000
+          })
+        }
+      }).catch(error => {
+        this.$notify({
+          title: '提示',
+          message: error.message,
+          type: 'warning',
+          duration: 3000
+        })
+      })
     }
   }
 }

src/components/upload/PublishAudio.vue

@@ -1,76 +1,79 @@
 <template>
-  <div>
-    <el-row>
-      <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="//api.reghao.cn/"
-            :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" />
-          </el-form-item>
-          <el-form-item label="描述">
-            <el-input v-model="form.description" type="textarea" />
-          </el-form-item>
-          <el-form-item label="发布时间">
-            <el-col :span="11">
-              <el-date-picker v-model="form.date1" type="date" placeholder="选择日期" style="width: 100%;" />
-            </el-col>
-            <el-col :span="11">
-              <el-time-picker v-model="form.date2" placeholder="选择时间" style="width: 100%;" />
-            </el-col>
-          </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-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>
-  </div>
+    <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="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-date-picker
+                  v-model="form.scheduledPubDate"
+                  type="datetime"
+                  placeholder="选择定时发布的时间">
+                </el-date-picker>
+              </el-form-item>
+            </el-form>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+  </el-row>
 </template>
 
 <script>
-import {submitAudio} from "@/api/audio";
+import { getServerInfo } from '@/api/file'
+import { submitAudio } from "@/api/audio";
 
 export default {
   name: 'PublishAudio',
   data() {
     return {
+      /***********************************************************************/
       options: {
         target: '//oss.reghao.cn/',
         chunkSize: 1024 * 1024 * 1024, // 1GiB
@@ -78,75 +81,55 @@ export default {
         testChunks: false,
         query: (file, chunk) => {
           return {
-            channelId: 6
+            channelId: 3
           }
         },
         headers: {
-          Authorization: '1234567890'
+          Authorization: ''
         }
       },
       attrs: {
         accept: 'audio/*'
       },
-      coverFile: null,
-      imageUrl: '',
+      /***********************************************************************/
       form: {
         audioFileId: null,
         audioUrl: null,
         title: null,
-        description: null
-      }
+        description: null,
+        scope: "1",
+        scheduledPubDate: null
+      },
     }
   },
   created() {
+    getServerInfo(3).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
+      })
+    })
   },
   methods: {
-    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) {
-      this.imageUrl = URL.createObjectURL(file.raw)
-    },
+    /***********************************************************************/
     onFileAdded(file) {
       this.setTitle(file.file.name)
-      /* file.pause()
-      hashFile(file.file).then(res => {
-        const formData = new FormData()
-        formData.append('filename', file.file.name)
-        formData.append('size', file.file.size)
-        formData.append('sha256sum', res.sha256sum)
-        fetch(`//file.reghao.cn` + `/api/file/upload/video/prepare`, {
-          headers: {
-            Authorization: 'Bearer ' + this.$store.getters.token
-          },
-          method: 'POST',
-          credentials: 'include',
-          body: formData
-        }).then(response => response.json())
-          .then(json => {
-            const uploadId = json.data.uploadId
-            const exist = json.data.exist
-            if (exist) {
-              this.message = '视频已存在'
-              this.showMessage = true
-              file.cancel()
-            } else {
-              file.uniqueIdentifier = uploadId
-              file.resume()
-            }
-          })
-          .catch(e => {
-            return null
-          })
-      })*/
     },
     onFileProgress(rootFile, file, chunk) {
     },
@@ -167,23 +150,37 @@ export default {
     onFileError(rootFile, file, response, chunk) {
       console.log('文件上传错误')
     },
-    setFile(value) {
-      this.coverFile = value
-    },
+    /***********************************************************************/
     setTitle(title) {
       if (title.length > 50) {
-        this.videoPost.title = title.substring(0, 50)
-        this.videoPost.description = title
+        this.form.title = title.substring(0, 50)
+        this.form.description = title
       } else {
-        this.videoPost.title = title
+        this.form.title = title
       }
     },
     onSubmit() {
-      /* if (this.videoPost.scope === null) {
-        this.message = '稿件可见范围不能为空'
-        this.showMessage = true
+      if (!this.form.audioFileId) {
+        this.$notify({
+            title: '提示',
+            message: '你还没有上传音频',
+            type: 'warning',
+            duration: 3000
+          }
+        )
+        return
+      }
+
+      if (this.form.title === null) {
+        this.$notify({
+            title: '提示',
+            message: '稿件标题不能为空',
+            type: 'warning',
+            duration: 3000
+          }
+        )
         return
-      }*/
+      }
 
       submitAudio(this.form).then(res => {
         if (res.code === 0) {
@@ -233,6 +230,47 @@ export default {
   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;
+}
+
+.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;

src/components/upload/PublishImage.vue

@@ -1,49 +1,70 @@
 <template>
-  <div>
-    <el-row>
-      <el-card>
-        <el-row style="position: center">
-          <h2>发布相册</h2>
-          <file-pond
-            ref="pond"
-            name="file"
-            label-idle="选择图片或拖动图片到此处"
-            label-file-processing="图片正在上传，请稍后"
-            label-file-processing-aborted="图片上传被取消"
-            label-tap-to-retry="尝试重试"
-            label-file-processing-complete="图片上传成功！"
-            label-max-file-size="上传的图片大小不能超过 100MB"
-            label-max-file-size-exceeded="上传的图片大小不能超过 100MB"
-            allow-file-size-validation="true"
-            max-file-size="100MB"
-            accepted-file-types="image/png, image/jpeg, image/jpg, image/gif"
-            :allow-multiple="true"
-            :max-files="100"
-            :server="server"
-            :instant-upload="true"
-            @init="handleFilePondInit"
-            @processfile="handleFilePondSuccess"
-            @removefile="handleFilePondRemove"
-          />
-        </el-row>
-        <el-form ref="form" :model="form" label-width="80px">
-          <el-form-item label="相册名">
-            <el-input v-model="form.albumName" style="width: 70%; padding-right: 2px" placeholder="相册名不能超过 50 个字符" />
-          </el-form-item>
-          <el-form-item label="相册">
-            <el-select v-model="form.album" placeholder="选择相册">
-              <el-option label="默认相册" value="1" />
-              <el-option label="验证码可见" value="2" />
-            </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-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">
+            <file-pond
+              ref="pond"
+              name="file"
+              label-idle="选择图片或拖动图片到此处"
+              label-file-processing="图片正在上传，请稍后"
+              label-file-processing-aborted="图片上传被取消"
+              label-tap-to-retry="尝试重试"
+              label-file-processing-complete="图片上传成功！"
+              label-max-file-size="上传的图片大小不能超过 100MB"
+              label-max-file-size-exceeded="上传的图片大小不能超过 100MB"
+              allow-file-size-validation="true"
+              max-file-size="100MB"
+              accepted-file-types="image/png, image/jpeg, image/jpg, image/gif"
+              :allow-multiple="true"
+              :max-files="100"
+              :server="server"
+              :instant-upload="true"
+              @init="handleFilePondInit"
+              @processfile="handleFilePondSuccess"
+              @removefile="handleFilePondRemove"
+            />
+          </div>
+        </el-card>
+      </el-col>
     </el-row>
-  </div>
+    <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.albumName" style="width: 70%; padding-right: 2px" placeholder="相册名不能超过 50 个字符" />
+              </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-date-picker
+                  v-model="form.scheduledPubDate"
+                  type="datetime"
+                  placeholder="选择定时发布的时间">
+                </el-date-picker>
+              </el-form-item>
+            </el-form>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+  </el-row>
 </template>
 
 <script>
@@ -99,7 +120,9 @@ export default {
       },
       imageList: [],
       form: {
-        albumName: null
+        albumName: null,
+        scope: "1",
+        scheduledPubDate: null
       }
     }
   },
@@ -148,8 +171,20 @@ export default {
         if (res.code === 0) {
           this.$router.push('/post/image')
         } else {
-
+          this.$notify({
+            title: '提示',
+            message: res.msg,
+            type: 'warning',
+            duration: 3000
+          })
         }
+      }).catch(error => {
+        this.$notify({
+          title: '提示',
+          message: error.message,
+          type: 'warning',
+          duration: 3000
+        })
       })
     }
   }
@@ -175,9 +210,46 @@ export default {
   line-height: 178px;
   text-align: center;
 }
-.avatar {
-  width: 320px;
-  height: 240px;
-  display: block;
+
+.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;
+}
+
+.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;
 }
 </style>

src/components/upload/PublishVideo.vue

@@ -167,7 +167,7 @@ export default {
         categoryPid: null,
         categoryId: null,
         tags: [],
-        scope: null,
+        scope: "1",
         width: 0,
         height: 0,
         duration: 0,
@@ -327,7 +327,15 @@ export default {
 
         const coverFile = new File([u8arr], 'cover.jpg', { type: 'image/jpeg' })
         if (coverFile instanceof File) {
-          const localImageUrl = URL.createObjectURL(coverFile)
+          if (coverFile.size === 0) {
+            this.$notify({
+              title: '提示',
+              message: '自动获取视频封面失败，请手动选择！',
+              type: 'warning',
+              duration: 3000
+            })
+            return;
+          }
 
           const formData = new FormData()
           formData.append('file', coverFile)
@@ -339,7 +347,7 @@ export default {
             body: formData
           }).then(response => response.json()).then(json => {
               if (json.code === 0) {
-                this.coverUrl = localImageUrl
+                this.coverUrl = URL.createObjectURL(coverFile)
                 const resData = json.data
                 this.form.coverFileId = resData.uploadId
               } else {
@@ -361,20 +369,19 @@ export default {
     /***********************************************************************/
     beforeAvatarUpload(file) {
       const isJPG = file.type === 'image/jpeg'
-      const isLt2M = file.size / 1024 / 1024 < 2
+      const isLt2M = file.size / 1024 / 1024 < 10
       if (!isJPG) {
-        this.$message.error('上传头像图片只能是 JPG 格式!')
+        this.$message.error('封面图片只能是 JPG 格式!')
       }
       if (!isLt2M) {
-        this.$message.error('上传头像图片大小不能超过 2MB!')
+        this.$message.error('封面图片大小不能超过 10MB!')
       }
       return isJPG && isLt2M
     },
     handleAvatarSuccess(res, file) {
-      const localImageUrl = URL.createObjectURL(file.raw)
       if (res.code === 0) {
         const resData = res.data
-        this.coverUrl = localImageUrl;
+        this.coverUrl = URL.createObjectURL(file.raw);
         this.form.coverFileId = resData.uploadId
       } else {
         this.$notify({
@@ -482,17 +489,6 @@ export default {
         return
       }
 
-      if (this.form.scope === null) {
-        this.$notify({
-            title: '提示',
-            message: '稿件可见范围不能为空',
-            type: 'warning',
-            duration: 3000
-          }
-        )
-        return
-      }
-
       if (this.form.scheduledPubDate !== null) {
         console.log(this.form.scheduledPubDate)
         if (false) {

src/router/index.js

@@ -14,6 +14,7 @@ const AudioPage = () => import('views/home/AudioPage')
 const ImageIndex = () => import('views/home/Image')
 const ImagePage = () => import('views/home/ImagePage')
 const ArticleIndex = () => import('views/home/Article')
+const ArticlePage = () => import('views/home/ArticlePage')
 const Search = () => import('views/home/Search')
 const UserHome = () => import('views/user/Home')
 const UserVideo = () => import('views/user/Home')
@@ -154,6 +155,11 @@ const routes = [
     name: 'ArticleIndex',
     component: ArticleIndex
   },
+  {
+    path: '/article/:articleId',
+    name: 'ArticlePage',
+    component: ArticlePage
+  },
   {
     path: '/discover',
     name: 'DiscoverIndex',

src/views/admin/AdminPost.vue

@@ -33,7 +33,7 @@
                   prop="coverUrl"
                   label="封面"
                   width="80">
-                  <template   slot-scope="scope">
+                  <template slot-scope="scope">
                     <el-image :src="scope.row.coverUrl" min-width="40" height="30" />
                   </template>
                 </el-table-column>
@@ -66,12 +66,12 @@
                       v-else-if="scope.row.scope === 2"
                       size="mini"
                       type="success"
-                    >VIP 可见</el-button>
+                    >验证码可见</el-button>
                     <el-button
                       v-else-if="scope.row.scope === 3"
                       size="mini"
                       type="warning"
-                    >验证码可见</el-button>
+                    ></el-button>
                     <el-button
                       v-else
                       size="mini"
@@ -142,7 +142,7 @@
                   prop="coverUrl"
                   label="相册封面"
                   width="150">
-                  <template   slot-scope="scope">
+                  <template slot-scope="scope">
                     <el-image :src="scope.row.coverUrl" min-width="40" height="30" />
                   </template>
                 </el-table-column>
@@ -167,10 +167,10 @@
                       全部可见
                     </el-tag>
                     <el-tag v-else-if="scope.row.scope === 2" :type="'success'" disable-transitions>
-                      VIP 可见
+                      验证码可见
                     </el-tag>
                     <el-tag v-else-if="scope.row.scope === 3" :type="'warning'" disable-transitions>
-                      验证码可见
+                      VIP 可见
                     </el-tag>
                     <el-tag v-else :type="'danger'" disable-transitions>
                       本人可见
@@ -204,7 +204,7 @@
                   prop="coverUrl"
                   label="音频封面"
                   width="150">
-                  <template   slot-scope="scope">
+                  <template slot-scope="scope">
                     <el-image :src="scope.row.coverUrl" min-width="40" height="30" />
                   </template>
                 </el-table-column>
@@ -228,10 +228,10 @@
                       全部可见
                     </el-tag>
                     <el-tag v-else-if="scope.row.scope === 2" :type="'success'" disable-transitions>
-                      VIP 可见
+                      验证码可见
                     </el-tag>
                     <el-tag v-else-if="scope.row.scope === 3" :type="'warning'" disable-transitions>
-                      验证码可见
+                      VIP 可见
                     </el-tag>
                     <el-tag v-else :type="'danger'" disable-transitions>
                       本人可见

src/views/admin/AdminUser.vue

@@ -30,7 +30,7 @@
               prop="avatarUrl"
               label="头像"
               width="80">
-              <template   slot-scope="scope">
+              <template slot-scope="scope">
                 <el-image :src="scope.row.avatarUrl" min-width="40" height="30" />
               </template>
             </el-table-column>

src/views/home/Article.vue

@@ -8,7 +8,7 @@
             <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
           </div>
           <div v-for="(video, index) in videoList" :key="index" :md="6" :sm="12" :xs="12">
-            <article-card :video="video" />
+            <article-card :article="video" />
           </div>
         </el-card>
       </el-col>
@@ -24,7 +24,7 @@
 
 <script>
 import ArticleCard from 'components/card/ArticleCard'
-import {videoRecommend} from "@/api/video";
+import { getArticles } from "@/api/article";
 
 export default {
   name: 'Article',
@@ -43,16 +43,13 @@ export default {
     document.title = '文章'
 
     this.currentPage = 1
-    videoRecommend(this.currentPage).then(res => {
+    getArticles(this.currentPage).then(res => {
       if (res.code === 0) {
         const resData = res.data
         this.videoList = resData.list
         this.video = resData.list[0]
       }
     })
-    // console.log(this.$store.state.videos);
-    // 当页面挂载时，页码变为1
-    //this.$store.commit('updatePage', 1)
   },
   mounted() {
     // 当窗口宽度改变时获取屏幕宽度

src/views/home/ArticlePage.vue

@@ -1,338 +1,130 @@
 <template>
-  <div class="player">
-    <el-row style="padding-top: 12px" :gutter="20">
-      <el-col :md="15">
-        <el-row>
-          <h3 v-text="video.title" />
-        </el-row>
-        <el-row style="color: #999;font-size: 16px;padding-top: 0px;">
-          <span><i class="el-icon-video-play">{{ video.view }}</i></span>
-          <span v-html="'&nbsp;&nbsp;&nbsp;&nbsp;'" />
-          <span><i class="el-icon-s-comment">{{ video.comment }}</i></span>
-          <span v-html="'&nbsp;&nbsp;&nbsp;&nbsp;'" />
-          <span><i class="el-icon-watch">{{ video.pubDate }}</i></span>
-        </el-row>
-      </el-col>
-      <el-col :md="9">
-        <el-row>
-          <el-col :md="3">
-            <router-link target="_blank" :to="`/user/` + video.userId">
-              <el-avatar>
-                <el-image :src="video.avatarUrl" />
-              </el-avatar>
-            </router-link>
-          </el-col>
-          <el-col :md="6">
-            <router-link target="_blank" :to="`/user/` + video.userId"><span>{{ video.username }}</span></router-link>
-            <router-link target="_blank" :to="`/message/` + video.userId"><span class="el-icon-message">发消息</span></router-link>
-            <span v-html="'&nbsp;&nbsp;&nbsp;&nbsp;'" />
-            <el-button small outlined color="primary">
-              <span>已关注</span>
-              <!--              <span v-if="!isFollowed">关注</span>-->
-              <span v-html="'&nbsp;&nbsp;'" />
-              <span>2000</span>
-            </el-button>
-          </el-col>
-        </el-row>
-      </el-col>
-    </el-row>
-    <el-row style="padding-top: 12px" :gutter="20"><!--gutter为栅格的间隔-->
-      <!--播放列-->
-      <el-col :md="15">
-        <!--视频播放框-->
-        <video-player :video-prop="video" />
-        <div class="el-icon-collection">
-          {{ "已收藏" + video.favorite + "次" }}
-          <el-button
-            type="danger"
-            size="mini"
-            icon="el-icon-star-off"
-            :disabled="isCollection"
-            @click="collection(video.videoId)"
-          >
-            {{ isCollection ? "您已收藏" : "点击收藏" }}
-          </el-button>
-        </div>
-        <span class="description">{{ video.description }}</span>
-        <!--视频标签-->
-        <div class="v-tag">
-          <el-tag
-            v-for="(tag,index) in video.tagList"
-            :key="index"
-            class="tag"
-            size="medium"
-            effect="plain"
-          >
-            <router-link target="_blank" :to="`/video/tag/` + tag">
-              {{ tag }}
-            </router-link>
-          </el-tag>
-          <el-input
-            v-if="inputVisible"
-            ref="saveTagInput"
-            v-model="inputValue"
-            class="input-new-tag"
-            size="mini"
-            @keyup.enter.native="handleInputConfirm"
-            @blur="handleInputConfirm"
-          />
-          <el-button v-else class="button-new-tag" size="mini" @click="showInput">+ 添加标签</el-button>
-        </div>
-        <!--评论-->
-        <comment :vid="video.videoId" />
-      </el-col>
-      <!--推荐列-->
-      <el-col :md="9">
-        <el-card class="box-card" style="height: 450px">
+  <el-row class="movie-list">
+    <el-col :md="18">
+      <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
+        <el-card class="box-card">
           <div slot="header" class="clearfix">
-            <span>弹幕列表</span><i class="el-icon-more" />
-            <span style="float: right; padding: 3px 0" type="text"><i class="el-icon-arrow-down" /></span>
-            <el-table
-              :data="tableData"
-              size="medium"
-              class="text"
-              style="width: 100%"
-              height="300"
-            >
-              <el-table-column
-                prop="date"
-                label="时间"
-                width="60"
-              />
-              <el-table-column
-                prop="name"
-                label="弹幕内容"
-              />
-              <el-table-column
-                prop="address"
-                label="发送时间"
-                width="120"
-              />
-            </el-table>
+            <el-row>
+              <span v-html="article.title" />
+            </el-row>
+            <el-divider/>
+            <el-row>
+              <el-col :md="2">
+                <router-link target="_blank" :to="`/user/` + userAvatar.userId">
+                  <el-avatar>
+                    <el-image :src="userAvatar.avatarUrl" />
+                  </el-avatar>
+                </router-link>
+              </el-col>
+              <el-col :md="10">
+                <el-row>
+                  <span v-html="userAvatar.screenName"></span>
+                </el-row>
+                <el-row>
+                  <span>一路走好</span>
+                </el-row>
+              </el-col>
+            </el-row>
           </div>
-          <div class="bottom clearfix">
-            <el-button type="text" class="button">查看弹幕历史</el-button>
+          <div class="text item">
+            <el-row>
+              <span v-html="article.content" />
+            </el-row>
+            <el-divider/>
+            <el-row>
+              发布于 <span v-html="article.createAt" />
+            </el-row>
+            <el-divider/>
+            <el-row>
+              <span>
+                <span>
+                  <i :class=collectedIcon @click="collectItem"/>
+                </span>
+              </span>
+            </el-row>
           </div>
         </el-card>
-        <div class="about">
-          <div>相关推荐</div>
-          <el-button
-            type="primary"
-            size="small"
-            icon="el-icon-refresh"
-            circle
-            @click="updateVideos"
-          >换一换</el-button>
-        </div>
-        <el-row v-for="(item,index) in similarVideos" :key="index" class="item">
-          <video-card :video="video" />
-        </el-row>
-      </el-col>
-    </el-row>
-  </div>
+      </el-row>
+    </el-col>
+    <el-col :md="6">
+      <user-avatar-card :userAvatar="userAvatar" />
+      <user-avatar-card :userAvatar="userAvatar" />
+    </el-col>
+  </el-row>
 </template>
 
 <script>
-import { similarVideo, videoInfo } from '@/api/video'
-import VideoPlayer from 'components/VideoPlayer'
-import Comment from 'components/comment/Comment'
-import VideoCard from 'components/card/VideoCard'
+import UserAvatarCard from '@/components/card/UserAvatarCard'
+import { getArticle } from "@/api/article";
+import {getUserInfo} from "@/api/user";
 
 export default {
   name: 'ArticlePage',
-  components: { Comment, VideoCard, VideoPlayer },
-  data() {
-    return {
-      video: null,
-      similarVideos: [],
-      // 标签的样式数组
-      types: ['', 'success', 'info', 'danger', 'warning'],
-      // 标签
-      tags: [],
-      // 相关推荐videos
-      videos: [],
-      showVideo: true,
-      isCollection: false, // 用户收藏状态
-      collectionNum: 0, // 收藏次数
-
-      inputVisible: false,
-      inputValue: '',
-      tableData: [{
-        date: '00:09',
-        name: '王小虎1',
-        address: '05-02 22:10'
+  components: { UserAvatarCard },
+  filters: {
+    ellipsis(value) {
+      if (!value) return ''
+      const max = 20
+      if (value.length > max) {
+        return value.slice(0, max) + '...'
       }
-      ]
+      return value
     }
   },
-  created() {
-    const videoId = this.$route.params.id
-    console.log('Video ID -> ' + videoId)
-    this.getVideoInfo(videoId)
-    this.getSimilarVideos(videoId)
-
-    // 将关键字以逗号分隔为数组保存到标签组
-    // this.tags = this.video.tags.split('，')
-    // 相关推荐列表
-    // this.updateVideos()
-    // 获取当前登录对象
-    const user = this.$user
-    if (user) {
-      this.isCollection = true
-      /* isCollection(user.uid, this.video.vid).then(res => {
-        if (res) {
-          this.isCollection = true
-        }
-      })*/
+  data() {
+    return {
+      article: null,
+      userAvatar: null,
+      collected: false,
+      collectedIcon: 'el-icon-star-off'
     }
-
-    // 获取当前视频收藏次数
-    /* getCollectionNum(this.video.vid).then(res => {
-      this.collectionNum = res
-    })*/
   },
-  methods: {
-    // 获取视频的详细信息
-    getVideoInfo(videoId) {
-      videoInfo(videoId)
-        .then(res => {
-          if (res.code === 0) {
-            this.video = res.data
-            document.title = res.data.title
-            this.userId = res.data.userId
-          } else {
-            console.error(res.msg)
-          }
-        })
-        .catch(error => {
-          console.error(error.message)
-        })
-    },
-    // 获取和当前视频类似的其他视频
-    getSimilarVideos(videoId) {
-      similarVideo(videoId)
-        .then(res => {
-          if (res.code === 0) {
-            this.similarVideos = res.data
-          } else {
-            console.error(res.msg)
-          }
-        })
-        .catch(error => {
-          console.error(error.message)
-        })
-    },
-    // 添加标签相关方法
-    showInput() {
-      this.inputVisible = true
-      this.$nextTick(() => {
-        this.$refs.saveTagInput.$refs.input.focus()
-      })
-    },
-    handleInputConfirm() {
-      const inputValue = this.inputValue
-      if (this.tags.indexOf(inputValue) !== -1) {
-        this.$message.info('该标签已存在！')
+  created() {
+    const articleId = this.$route.params.articleId
+    getArticle(articleId).then(res => {
+      if (res.code === 0) {
+        this.article = res.data
+        document.title = '文章 - ' + this.article.title
       } else {
-        this.tags.push(inputValue)
-        // addTag(this.tags.join('，'), this.video.vid).then(res => console.log(res)) // 添加标签
       }
-      this.inputVisible = false
-      this.inputValue = ''
-    },
 
-    // 换一换
-    updateVideos() {
-    },
-    // 跳转到播放页面，携带video数据
-    toPlayer(item) {
-      this.showVideo = false
-      // 异步更新dom,重新渲染pvideo
-      this.$nextTick(() => {
-        this.showVideo = true
+      getUserInfo(10001).then(res => {
+        if (res.code === 0) {
+          this.userAvatar = res.data
+        }
       })
-
-      // 回到顶部
-      scrollTo(0, 0)
-
-      this.video = item
-      // 添加播放次数
-      // addVisited(item.vid)
-
-      // 根据此视频判断当前用户是否收藏
-      const user = this.$user
-      if (user) {
-        /* isCollection(user.uid, item.vid).then(res => {
-          if (res) {
-            this.isCollection = true
-          } else {
-            this.isCollection = false
-          }
-        })*/
-      }
-
-      // 获取当前视频收藏次数
-      /* getCollectionNum(this.video.vid).then(res => {
-        this.collectionNum = res
-      })*/
-
-      // 添加播放历史记录
-      if (user) {
-        /* addHistory(user.uid, this.video.vid).then(res => {
-          // console.log(res);
-        })*/
-      }
-    },
-    /*	// 用户点击收藏
-			collection() {
-				// 获取user
-				let user = this.$user
-				if (!user) {
-					this.$toast.show("用户未登录",2000)
-				}
-			}, */
-    // 用户点击收藏
-    collection(vid) {
-      // 1.判断用户是否登录
-      // 1.1 通过cookie获取用户
-      const user = this.$user
-      if (user) {
-        // 用户已登录
-        // console.log(user);
-        // 添加收藏
-        /* userCollection(user.uid, vid).then((res) => {
-          // console.log(res);
-          if (res === 1) {
-            this.collectionNum++
-            this.isCollection = true
-            // 收藏成功
-            this.$notify.success({
-              title: '收藏成功',
-              duration: 2000
-            })
-          }
-        })*/
+    })
+  },
+  methods: {
+    collectItem() {
+      if (this.collected) {
+        console.log('取消收藏音频')
+        this.collected = false
+        this.collectedIcon = 'el-icon-star-off'
       } else {
-        // 用户未登录，给出提示
-        this.$notify({
-          title: '提示',
-          message: '要登陆后才可以收藏哦！',
-          type: 'warning',
-          duration: 3000
-        })
+        console.log('收藏音频')
+        this.collected = true
+        this.collectedIcon = 'el-icon-star-on'
       }
     }
-
   }
 }
 </script>
 
 <style scoped>
-.text {
-  font-size: 14px;
+.movie-list {
+  padding-top: 15px;
+  padding-left: 6%;
+  padding-right: 6%;
 }
-.item {
-  margin-bottom: 18px;
+
+/*处于手机屏幕时*/
+@media screen and (max-width: 768px) {
+  .movie-list {
+    padding-top: 8px;
+    padding-left: 0.5%;
+    padding-right: 0.5%;
+  }
 }
 
 .clearfix:before,
@@ -340,128 +132,8 @@ export default {
   display: table;
   content: "";
 }
-.clearfix:after {
-  clear: both
-}
 
-.box-card {
-  width: 480px;
+.clearfix:after {
+  clear: both;
 }
-	.player {
-		padding-top: 20px;
-		padding-left: 6%;
-		padding-right: 6%;
-	}
-
-	.about {
-		font-size: 18px;
-		margin-top: 10px;
-		display: flex;
-		justify-content: space-between;
-	}
-	.content {
-		padding-bottom: 20px;
-	}
-
-	.item {
-		cursor: pointer;
-		margin-bottom: 10px;
-		border-bottom: 1px solid rgba(34, 36, 38, .15);
-		box-shadow: 0 1px 2px 0 rgba(34, 36, 38, .15);
-	}
-	.item:hover {
-		background-color: rgb(236, 245, 255);
-		color: rgb(102, 177, 255);
-	}
-
-	.img-col {
-		padding-right: 10px;
-	}
-	.coverImg {
-		margin-top: 10px;
-		margin-bottom: 8px;
-		width: 100%;
-		/*height: 120px;*/
-		border-radius: 3px;
-	}
-
-	.detail {
-		margin-top: 8%;
-	}
-
-	.vname {
-		font-weight: 600;
-		font-size: 15px;
-
-		height: 40px;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		display: -webkit-box;
-		-webkit-line-clamp: 2; /*行数*/
-		-webkit-box-orient: vertical;
-	}
-
-	.visited {
-		font-size: 13px;
-		padding-top: 6px;
-	}
-
-	.video-name {
-		font-size: 20px;
-		padding-top: 20px;
-		display: block;
-	}
-
-	.description {
-		display: block;
-		padding-top: 10px;
-		font-size: 13px;
-		color: rgb(127, 102, 102);
-	}
-
-	.v-tag {
-		padding-top: 10px;
-	}
-	.tag{
-		margin-right: 3px;
-	}
-
-	.el-icon-collection {
-		padding-top: 10px;
-		font-size: 13px;
-		padding-right: 10px;
-	}
-
-	.bread {
-		font-size: 15px;
-	}
-
-	/*处于手机屏幕时*/
-	@media screen and (max-width: 768px){
-		.player {
-			padding-left: 1%;
-			padding-right: 1%;
-		}
-
-		.vname {
-			font-size: 13px;
-		}
-
-		.visited {
-			font-size: 11px;
-		}
-	}
-
-	.button-new-tag {
-		height: 28px;
-		line-height: 28px;
-		color: #66b1ff;
-		padding-top: 0;
-		padding-bottom: 0;
-	}
-	.input-new-tag {
-		width: 90px;
-		vertical-align: bottom;
-	}
-
 </style>

src/views/home/AudioPage.vue

@@ -17,6 +17,7 @@
                 :show-playback-rate="false"
                 :audio-list="audioList.map(elm => elm.url)"
                 :before-play="handleBeforePlay"
+                @playing="onPlaying"
                 theme-color="#87CEFA"
               />
             </el-row>
@@ -26,7 +27,7 @@
             </el-row>
             <el-divider/>
             <el-row>
-              发布于 <span v-html="audio.pubDate" />
+              发布于 <span v-html="audio.publishAt" />
             </el-row>
             <el-divider/>
             <el-row>
@@ -83,7 +84,7 @@ export default {
           { name: this.audio.title, url: this.audio.audioUrl }
         ]
 
-        document.title = '音频 - ' + this.audio.title
+        document.title = '文章 - ' + this.audio.title
       } else {
       }
 
@@ -99,6 +100,7 @@ export default {
     handleBeforePlay(next) {
       // 这里可以做一些事情...
       this.currentAudioName = this.audioList[this.$refs.audioPlayer.currentPlayIndex].name
+      this.$refs.audioPlayer.$refs.audio.currentTime = 20
       // 开始播放
       next()
     },
@@ -111,6 +113,9 @@ export default {
           ].name
       })
     },
+    onPlaying() {
+      console.log('正在播放 ' + this.$refs.audioPlayer.$refs.audio.currentTime)
+    },
     collectItem() {
       if (this.collected) {
         console.log('取消收藏音频')

src/views/post/ArticlePost.vue

@@ -0,0 +1,156 @@
+<template>
+  <el-row>
+    <el-row :md="6" :sm="12" :xs="12">
+      <el-table
+        :data="dataList"
+        style="width: 100%"
+      >
+        <el-table-column
+          type="index">
+        </el-table-column>
+        <el-table-column
+          prop="createAt"
+          label="发布时间">
+        </el-table-column>
+        <el-table-column
+          prop="title"
+          label="文章标题">
+        </el-table-column>
+        <el-table-column
+          prop="scope"
+          label="可见范围">
+          <template slot-scope="scope">
+            <el-tooltip class="item" effect="dark" content="点击修改可见范围" placement="top-end">
+              <el-button
+                v-if="scope.row.scope === 1"
+                size="mini"
+                @click="handleScope(scope.$index, scope.row)">所有人可见</el-button>
+              <el-button
+                v-else-if="scope.row.scope === 2"
+                size="mini"
+                type="success"
+                @click="handleScope(scope.$index, scope.row)">验证码可见</el-button>
+              <el-button
+                v-else-if="scope.row.scope === 3"
+                size="mini"
+                type="warning"
+                @click="handleScope(scope.$index, scope.row)">VIP 可见</el-button>
+              <el-button
+                v-else
+                size="mini"
+                type="danger"
+                @click="handleScope(scope.$index, scope.row)">本人可见</el-button>
+            </el-tooltip>
+          </template>
+        </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-row>
+
+    <!-- 修改可见范围对话框 -->
+    <el-dialog
+      append-to-body
+      :visible.sync="showEditScopeDialog"
+      width="30%"
+      center
+    >
+      <el-card class="box-card">
+        <div slot="header" class="clearfix">
+          <span>修改可见范围</span>
+          <el-button style="float: right; padding: 3px 0" type="text" @click="onUpdateScope">更新</el-button>
+        </div>
+        <div class="text item">
+          <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>
+        </div>
+      </el-card>
+    </el-dialog>
+  </el-row>
+</template>
+
+<script>
+import { updateArticleScope, deleteArticle } from "@/api/article";
+
+export default {
+  name: 'ArticlePost',
+  props: {
+    dataList: {
+      type: Array,
+      default: []
+    },
+  },
+  components: {},
+  data() {
+    return {
+      showEditScopeDialog: false,
+      form: {
+        articleId: null,
+        scope: 1
+      }
+    }
+  },
+  created() {
+  },
+  methods: {
+    handleScope(index, row) {
+      this.form.articleId = row.articleId
+      this.form.scope = ''+row.scope
+      this.showEditScopeDialog = true
+    },
+    handleEdit(index, row) {
+      const path = '/post/edit/audio/' + row.articleId
+      this.$router.push(path)
+    },
+    handleDelete(index, row) {
+      deleteArticle(row.articleId).then(res => {
+         if (res.code === 0) {
+           this.$notify({
+             title: '提示',
+             message: '稿件已删除',
+             type: 'warning',
+             duration: 3000
+           })
+           this.$router.go(0)
+         }
+      })
+    },
+    onUpdateScope() {
+      this.showEditScopeDialog = false
+      updateArticleScope(this.form).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>
+
+<style>
+</style>

src/views/post/AudioPost.vue

@@ -0,0 +1,156 @@
+<template>
+  <el-row>
+    <el-row :md="6" :sm="12" :xs="12">
+      <el-table
+        :data="dataList"
+        style="width: 100%"
+      >
+        <el-table-column
+          type="index">
+        </el-table-column>
+        <el-table-column
+          prop="publishAt"
+          label="发布时间">
+        </el-table-column>
+        <el-table-column
+          prop="title"
+          label="音频名字">
+        </el-table-column>
+        <el-table-column
+          prop="scope"
+          label="可见范围">
+          <template slot-scope="scope">
+            <el-tooltip class="item" effect="dark" content="点击修改可见范围" placement="top-end">
+              <el-button
+                v-if="scope.row.scope === 1"
+                size="mini"
+                @click="handleScope(scope.$index, scope.row)">所有人可见</el-button>
+              <el-button
+                v-else-if="scope.row.scope === 2"
+                size="mini"
+                type="success"
+                @click="handleScope(scope.$index, scope.row)">验证码可见</el-button>
+              <el-button
+                v-else-if="scope.row.scope === 3"
+                size="mini"
+                type="warning"
+                @click="handleScope(scope.$index, scope.row)">VIP 可见</el-button>
+              <el-button
+                v-else
+                size="mini"
+                type="danger"
+                @click="handleScope(scope.$index, scope.row)">本人可见</el-button>
+            </el-tooltip>
+          </template>
+        </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-row>
+
+    <!-- 修改可见范围对话框 -->
+    <el-dialog
+      append-to-body
+      :visible.sync="showEditScopeDialog"
+      width="30%"
+      center
+    >
+      <el-card class="box-card">
+        <div slot="header" class="clearfix">
+          <span>修改可见范围</span>
+          <el-button style="float: right; padding: 3px 0" type="text" @click="onUpdateScope">更新</el-button>
+        </div>
+        <div class="text item">
+          <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>
+        </div>
+      </el-card>
+    </el-dialog>
+  </el-row>
+</template>
+
+<script>
+import { updateAudioScope, deleteAudio } from "@/api/audio";
+
+export default {
+  name: 'AudioPost',
+  props: {
+    dataList: {
+      type: Array,
+      default: []
+    },
+  },
+  components: {},
+  data() {
+    return {
+      showEditScopeDialog: false,
+      form: {
+        audioId: null,
+        scope: 1
+      }
+    }
+  },
+  created() {
+  },
+  methods: {
+    handleScope(index, row) {
+      this.form.audioId = row.audioId
+      this.form.scope = ''+row.scope
+      this.showEditScopeDialog = true
+    },
+    handleEdit(index, row) {
+      const path = '/post/edit/audio/' + row.audioId
+      this.$router.push(path)
+    },
+    handleDelete(index, row) {
+      deleteAudio(row.audioId).then(res => {
+         if (res.code === 0) {
+           this.$notify({
+             title: '提示',
+             message: '稿件已删除',
+             type: 'warning',
+             duration: 3000
+           })
+           this.$router.go(0)
+         }
+      })
+    },
+    onUpdateScope() {
+      this.showEditScopeDialog = false
+      updateAudioScope(this.form).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>
+
+<style>
+</style>

src/views/post/ImagePost.vue

@@ -0,0 +1,169 @@
+<template>
+  <el-row>
+    <el-row :md="6" :sm="12" :xs="12">
+      <el-table
+        :data="dataList"
+        style="width: 100%"
+      >
+        <el-table-column
+          type="index">
+        </el-table-column>
+        <el-table-column
+          prop="coverUrl"
+          label="相册封面"
+          width="90">
+          <template slot-scope="scope">
+            <el-image :src="scope.row.coverUrl" min-width="30" height="20" />
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="createdAt"
+          label="发布时间">
+        </el-table-column>
+        <el-table-column
+          prop="albumName"
+          label="相册名字"
+          width="180">
+        </el-table-column>
+        <el-table-column
+          prop="total"
+          label="图片数量">
+        </el-table-column>
+        <el-table-column
+          prop="scope"
+          label="可见范围">
+          <template slot-scope="scope">
+            <el-tooltip class="item" effect="dark" content="点击修改可见范围" placement="top-end">
+              <el-button
+                v-if="scope.row.scope === 1"
+                size="mini"
+                @click="handleScope(scope.$index, scope.row)">所有人可见</el-button>
+              <el-button
+                v-else-if="scope.row.scope === 2"
+                size="mini"
+                type="success"
+                @click="handleScope(scope.$index, scope.row)">验证码可见</el-button>
+              <el-button
+                v-else-if="scope.row.scope === 3"
+                size="mini"
+                type="warning"
+                @click="handleScope(scope.$index, scope.row)">VIP 可见</el-button>
+              <el-button
+                v-else
+                size="mini"
+                type="danger"
+                @click="handleScope(scope.$index, scope.row)">本人可见</el-button>
+            </el-tooltip>
+          </template>
+        </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-row>
+
+    <!-- 修改可见范围对话框 -->
+    <el-dialog
+      append-to-body
+      :visible.sync="showEditScopeDialog"
+      width="30%"
+      center
+    >
+      <el-card class="box-card">
+        <div slot="header" class="clearfix">
+          <span>修改相册可见范围</span>
+          <el-button style="float: right; padding: 3px 0" type="text" @click="onUpdateScope">更新</el-button>
+        </div>
+        <div class="text item">
+          <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>
+        </div>
+      </el-card>
+    </el-dialog>
+  </el-row>
+</template>
+
+<script>
+import {updateVideoScope, videoInfo, deleteVideo} from "@/api/video";
+
+export default {
+  name: 'ImagePost',
+  props: {
+    dataList: {
+      type: Array,
+      default: []
+    },
+  },
+  components: {},
+  data() {
+    return {
+      showEditScopeDialog: false,
+      form: {
+        videoId: null,
+        scope: 1
+      }
+    }
+  },
+  created() {
+  },
+  methods: {
+    handleScope(index, row) {
+      this.form.videoId = row.videoId
+      this.form.scope = ''+row.scope
+      this.showEditScopeDialog = true
+    },
+    handleEdit(index, row) {
+      const path = '/post/edit/album/' + row.albumId
+      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)
+         }
+      })
+    },
+    onUpdateScope() {
+      this.showEditScopeDialog = false
+      updateVideoScope(this.form).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>
+
+<style>
+</style>

src/views/post/PostAnalysis.vue

@@ -24,7 +24,7 @@
           prop="coverUrl"
           label="视频封面"
           width="150">
-          <template   slot-scope="scope">
+          <template slot-scope="scope">
             <el-image :src="scope.row.coverUrl" min-width="40" height="30" />
           </template>
         </el-table-column>

src/views/post/PostList.vue

@@ -16,232 +16,16 @@
       <el-row>
         <el-tabs v-model="activeName" @tab-click='tabClick'>
           <el-tab-pane label="视频" name="video">
-            <el-row :md="6" :sm="12" :xs="12">
-              <el-table
-                :data="dataList"
-                style="width: 100%"
-              >
-                <el-table-column
-                  type="index">
-                </el-table-column>
-                <el-table-column
-                  prop="pubDate"
-                  label="发布时间">
-                </el-table-column>
-                <el-table-column
-                  prop="coverUrl"
-                  label="封面"
-                  width="80">
-                  <template   slot-scope="scope">
-                    <el-image :src="scope.row.coverUrl" min-width="40" height="30" />
-                  </template>
-                </el-table-column>
-                <el-table-column
-                  prop="videoId"
-                  label="视频 ID">
-                  <template slot-scope="scope">
-                    <router-link target="_blank" :to="`/video/${scope.row.videoId}`">
-                      <span>{{scope.row.videoId}}</span>
-                    </router-link>
-                  </template>
-                </el-table-column>
-                <el-table-column
-                  prop="title"
-                  label="标题">
-                </el-table-column>
-                <el-table-column
-                  prop="description"
-                  label="描述">
-                </el-table-column>
-                <el-table-column
-                  prop="scope"
-                  label="可见范围">
-                  <template slot-scope="scope">
-                    <el-tooltip class="item" effect="dark" content="点击修改视频可见范围" placement="top-end">
-                      <el-button
-                        v-if="scope.row.scope === 1"
-                        size="mini"
-                        @click="handleScope(scope.$index, scope.row)">所有人可见</el-button>
-                      <el-button
-                        v-else-if="scope.row.scope === 2"
-                        size="mini"
-                        type="success"
-                        @click="handleScope(scope.$index, scope.row)">VIP 可见</el-button>
-                      <el-button
-                        v-else-if="scope.row.scope === 3"
-                        size="mini"
-                        type="warning"
-                        @click="handleScope(scope.$index, scope.row)">验证码可见</el-button>
-                      <el-button
-                        v-else
-                        size="mini"
-                        type="danger"
-                        @click="handleScope(scope.$index, scope.row)">本人可见</el-button>
-                    </el-tooltip>
-                  </template>
-                </el-table-column>
-                <el-table-column
-                  prop="scope"
-                  label="审核状态">
-                  <template slot-scope="scope">
-                    <el-tag v-if="scope.row.status === 1" :type="'warning'" disable-transitions>
-                      审核中
-                    </el-tag>
-                    <el-tag v-else-if="scope.row.status === 2" :type="'success'" disable-transitions>
-                      审核通过
-                    </el-tag>
-                    <el-tag v-else-if="scope.row.status === 3" :type="'danger'" disable-transitions>
-                      审核未通过
-                    </el-tag>
-                    <el-tag v-else :type="'danger'" disable-transitions>
-                       下架
-                    </el-tag>
-                  </template>
-                </el-table-column>
-                <el-table-column label="操作" width="210">
-                  <template slot-scope="scope">
-                    <el-button
-                      size="mini"
-                      @click="handlePreview(scope.$index, scope.row)">预览</el-button>
-                    <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-row>
-          </el-tab-pane>
-          <el-tab-pane label="相册" name="image">
-            <el-row :md="6" :sm="12" :xs="12">
-              <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="albumName"
-                  label="相册名字"
-                  width="180">
-                </el-table-column>
-                <el-table-column
-                  prop="total"
-                  label="图片数量">
-                </el-table-column>
-                <el-table-column
-                  prop="scope"
-                  label="可见范围">
-                  <template slot-scope="scope">
-                    <el-tag v-if="scope.row.scope === 1" disable-transitions>
-                      全部可见
-                    </el-tag>
-                    <el-tag v-else-if="scope.row.scope === 2" :type="'success'" disable-transitions>
-                      VIP 可见
-                    </el-tag>
-                    <el-tag v-else-if="scope.row.scope === 3" :type="'warning'" disable-transitions>
-                      验证码可见
-                    </el-tag>
-                    <el-tag v-else :type="'danger'" disable-transitions>
-                      本人可见
-                    </el-tag>
-                  </template>
-                </el-table-column>
-                <el-table-column label="操作">
-                  <template slot-scope="scope">
-                    <el-button
-                      size="mini"
-                      @click="handleEditImage(scope.$index, scope.row)">编辑</el-button>
-                    <el-button
-                      size="mini"
-                      type="danger"
-                      @click="handleDeleteImage(scope.$index, scope.row)">删除</el-button>
-                  </template>
-                </el-table-column>
-              </el-table>
-            </el-row>
+            <video-post :data-list="dataList"/>
           </el-tab-pane>
           <el-tab-pane label="音频" name="audio">
-            <el-row :md="6" :sm="12" :xs="12">
-              <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="title"
-                  label="音频名字">
-                </el-table-column>
-                <!--                <el-table-column
-                                  prop="description"
-                                  label="音频简介">
-                                </el-table-column>-->
-                <el-table-column
-                  prop="scope"
-                  label="可见范围">
-                  <template slot-scope="scope">
-                    <el-tag v-if="scope.row.scope === 1" disable-transitions>
-                      全部可见
-                    </el-tag>
-                    <el-tag v-else-if="scope.row.scope === 2" :type="'success'" disable-transitions>
-                      VIP 可见
-                    </el-tag>
-                    <el-tag v-else-if="scope.row.scope === 3" :type="'warning'" disable-transitions>
-                      验证码可见
-                    </el-tag>
-                    <el-tag v-else :type="'danger'" disable-transitions>
-                      本人可见
-                    </el-tag>
-                  </template>
-                </el-table-column>
-                <el-table-column label="操作">
-                  <template slot-scope="scope">
-                    <el-button
-                      size="mini"
-                      @click="handleEditAudio(scope.$index, scope.row)">编辑</el-button>
-                    <el-button
-                      size="mini"
-                      type="danger"
-                      @click="handleDeleteAudio(scope.$index, scope.row)">删除</el-button>
-                  </template>
-                </el-table-column>
-              </el-table>
-            </el-row>
+            <audio-post :data-list="dataList"/>
+          </el-tab-pane>
+          <el-tab-pane label="相册" name="image">
+            <image-post :data-list="dataList"/>
           </el-tab-pane>
           <el-tab-pane label="文章" name="article">
-            <span>
-              <h4>文章稿件</h4>
-            </span>
+            <article-post :data-list="dataList"/>
           </el-tab-pane>
         </el-tabs>
       </el-row>
@@ -261,59 +45,23 @@
         </el-col>
       </el-row>
     </el-col>
-
-    <!-- 修改视频可见范围对话框 -->
-    <el-dialog
-      append-to-body
-      :visible.sync="showEditScopeDialog"
-      width="30%"
-      center
-    >
-      <el-card class="box-card">
-        <div slot="header" class="clearfix">
-          <span>修改视频可见范围</span>
-          <el-button style="float: right; padding: 3px 0" type="text" @click="onUpdateVideoScope">更新</el-button>
-        </div>
-        <div class="text item">
-          <el-form ref="form" :model="form" label-width="80px">
-            <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>
-        </div>
-      </el-card>
-    </el-dialog>
-    <!-- 视频预览对话框 -->
-    <el-dialog
-      title="预览视频"
-      append-to-body
-      :visible.sync="showPreviewDialog"
-      :before-close="handleDialogClose"
-      width="70%"
-      center
-    >
-      <template>
-        <video-preview-player :video-prop.sync="this.videoProp"/>
-      </template>
-    </el-dialog>
   </el-row>
 </template>
 
 <script>
-import VideoPreviewPlayer from 'components/VideoPreviewPlayer'
+import VideoPost from "@/views/post/VideoPost";
+import AudioPost from "@/views/post/AudioPost";
+import ImagePost from "@/views/post/ImagePost";
+import ArticlePost from "@/views/post/ArticlePost";
 
-import {userVideoPost, updateVideoScope, videoInfo, deleteVideo} from "@/api/video";
-import {getUserAlbums} from "@/api/image";
+import { userVideoPost } from "@/api/video";
 import { getUserAudio } from "@/api/audio";
+import { getUserAlbums } from "@/api/image";
+import { getArticles } from "@/api/article";
 
 export default {
   name: 'PostList',
-  components: { VideoPreviewPlayer },
+  components: { VideoPost, ImagePost, AudioPost, ArticlePost },
   data() {
     return {
       // 屏幕宽度, 为了控制分页条的大小
@@ -333,10 +81,6 @@ export default {
       showPreviewDialog: false,
       videoProp: null,
       showEditScopeDialog: false,
-      form: {
-        videoId: null,
-        scope: null
-      }
     }
   },
   created() {
@@ -371,65 +115,6 @@ export default {
       // 回到顶部
       scrollTo(0, 0)
     },
-    handleScope(index, row) {
-      this.form.videoId = row.videoId
-      this.form.scope = row.scope
-      this.showEditScopeDialog = true
-    },
-    handleDialogClose(done) {
-      this.showPreviewDialog = false
-      this.videoProp = {
-        videoId: null,
-        play: false
-      }
-      done()
-    },
-    handlePreview(index, row) {
-      videoInfo(row.videoId).then(res => {
-        if (res.code === 0) {
-          this.showPreviewDialog = true
-          this.videoProp = {
-            videoId: res.data.videoId,
-            play: true
-          }
-        }
-      })
-      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)
-         }
-      })
-    },
-    handleEditImage(index, row) {
-      console.log(row.videoId);
-      const path = '/post/edit/album/' + row.albumId
-      this.$router.push(path)
-    },
-    handleDeleteImage(index, row) {
-      console.log(row.videoId);
-    },
-    handleEditAudio(index, row) {
-      console.log(row.videoId);
-      const path = '/post/edit/audio/' + row.audioId
-      this.$router.push(path)
-    },
-    handleDeleteAudio(index, row) {
-      console.log(row.videoId);
-    },
     tabClick(tab) {
       this.activeName = tab.name
       this.goToTab(this.activeName)
@@ -505,28 +190,21 @@ export default {
       } else if (this.activeName === 'article') {
         this.currentPage = 1
         this.lastId = 0
+        getArticles(1).then(res => {
+          if (res.code === 0) {
+            const resData = res.data.list
+            if (resData.length !== 0) {
+              this.showEmpty = false
+              for (const item of resData) {
+                this.dataList.push(item)
+              }
+            } else {
+              this.showEmpty = true
+            }
+          }
+        })
       }
     },
-    onUpdateVideoScope() {
-      this.showEditScopeDialog = false
-      updateVideoScope(this.form).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>

src/views/post/PostPublish.vue

@@ -17,18 +17,15 @@
         <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="image">
+          <publish-image v-if="activeName === 'image'" />
+        </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>
@@ -39,11 +36,10 @@ import PublishVideo from '@/components/upload/PublishVideo'
 import PublishAudio from '@/components/upload/PublishAudio'
 import PublishImage from '@/components/upload/PublishImage'
 import PublishArticle from '@/components/upload/PublishArticle'
-import UploadFile from '@/components/upload/UploadFile'
 
 export default {
   name: 'Publish',
-  components: { PublishVideo, PublishAudio, PublishImage, PublishArticle, UploadFile },
+  components: { PublishVideo, PublishAudio, PublishImage, PublishArticle },
   data() {
     return {
       navList: [

src/views/post/VideoPost.vue

@@ -0,0 +1,235 @@
+<template>
+  <el-row>
+    <el-row :md="6" :sm="12" :xs="12">
+      <el-table
+        :data="dataList"
+        style="width: 100%"
+      >
+        <el-table-column
+          type="index">
+        </el-table-column>
+        <el-table-column
+          prop="pubDate"
+          label="发布时间">
+        </el-table-column>
+        <el-table-column
+          prop="coverUrl"
+          label="封面"
+          width="90">
+          <template slot-scope="scope">
+            <el-image :src="scope.row.coverUrl" min-width="30" height="20" />
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="videoId"
+          label="视频 ID">
+          <template slot-scope="scope">
+            <router-link target="_blank" :to="`/video/${scope.row.videoId}`">
+              <span>{{scope.row.videoId}}</span>
+            </router-link>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="title"
+          label="标题">
+        </el-table-column>
+        <el-table-column
+          prop="description"
+          label="描述">
+        </el-table-column>
+        <el-table-column
+          prop="scope"
+          label="可见范围">
+          <template slot-scope="scope">
+            <el-tooltip class="item" effect="dark" content="点击修改视频可见范围" placement="top-end">
+              <el-button
+                v-if="scope.row.scope === 1"
+                size="mini"
+                @click="handleScope(scope.$index, scope.row)">所有人可见</el-button>
+              <el-button
+                v-else-if="scope.row.scope === 2"
+                size="mini"
+                type="success"
+                @click="handleScope(scope.$index, scope.row)">验证码可见</el-button>
+              <el-button
+                v-else-if="scope.row.scope === 3"
+                size="mini"
+                type="warning"
+                @click="handleScope(scope.$index, scope.row)">VIP 可见</el-button>
+              <el-button
+                v-else
+                size="mini"
+                type="danger"
+                @click="handleScope(scope.$index, scope.row)">本人可见</el-button>
+            </el-tooltip>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="scope"
+          label="审核状态">
+          <template slot-scope="scope">
+            <el-tag v-if="scope.row.status === 1" :type="'warning'" disable-transitions>
+              审核中
+            </el-tag>
+            <el-tag v-else-if="scope.row.status === 2" :type="'success'" disable-transitions>
+              审核通过
+            </el-tag>
+            <el-tag v-else-if="scope.row.status === 3" :type="'danger'" disable-transitions>
+              审核未通过
+            </el-tag>
+            <el-tag v-else :type="'danger'" disable-transitions>
+              下架
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="210">
+          <template slot-scope="scope">
+            <el-button
+              size="mini"
+              @click="handlePreview(scope.$index, scope.row)">预览</el-button>
+            <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-row>
+
+    <!-- 修改视频可见范围对话框 -->
+    <el-dialog
+      append-to-body
+      :visible.sync="showEditScopeDialog"
+      width="30%"
+      center
+    >
+      <el-card class="box-card">
+        <div slot="header" class="clearfix">
+          <span>修改视频可见范围</span>
+          <el-button style="float: right; padding: 3px 0" type="text" @click="onUpdateScope">更新</el-button>
+        </div>
+        <div class="text item">
+          <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>
+        </div>
+      </el-card>
+    </el-dialog>
+    <!-- 视频预览对话框 -->
+    <el-dialog
+      title="预览视频"
+      append-to-body
+      :visible.sync="showPreviewDialog"
+      :before-close="handleDialogClose"
+      width="70%"
+      center
+    >
+      <template>
+        <video-preview-player :video-prop.sync="this.videoProp"/>
+      </template>
+    </el-dialog>
+  </el-row>
+</template>
+
+<script>
+import VideoPreviewPlayer from 'components/VideoPreviewPlayer'
+import {updateVideoScope, videoInfo, deleteVideo} from "@/api/video";
+
+export default {
+  name: 'VideoPost',
+  props: {
+    dataList: {
+      type: Array,
+      default: []
+    },
+  },
+  components: { VideoPreviewPlayer },
+  data() {
+    return {
+      videoProp: null,
+      showPreviewDialog: false,
+      showEditScopeDialog: false,
+      form: {
+        videoId: null,
+        scope: 1
+      }
+    }
+  },
+  created() {
+  },
+  methods: {
+    handleScope(index, row) {
+      this.form.videoId = row.videoId
+      this.form.scope = ''+row.scope
+      this.showEditScopeDialog = true
+    },
+    handleDialogClose(done) {
+      this.showPreviewDialog = false
+      this.videoProp = {
+        videoId: null,
+        play: false
+      }
+      done()
+    },
+    handlePreview(index, row) {
+      videoInfo(row.videoId).then(res => {
+        if (res.code === 0) {
+          this.showPreviewDialog = true
+          this.videoProp = {
+            videoId: res.data.videoId,
+            play: true
+          }
+        }
+      })
+      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)
+         }
+      })
+    },
+    onUpdateScope() {
+      this.showEditScopeDialog = false
+      updateVideoScope(this.form).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>
+
+<style>
+</style>

src/views/user/Home.vue

@@ -63,16 +63,6 @@
               </el-col>
             </div>
           </el-tab-pane>
-          <el-tab-pane name="image">
-            <span slot="label">
-              相册<el-badge :value="userContentData.albumCount" :max="9999" class="item" type="warning"/>
-            </span>
-            <div v-if="activeName === 'image'">
-              <el-col v-for="(album, index) in dataList" :key="index" :md="6" :sm="12" :xs="12">
-                <image-album-card :imageAlbum="album" />
-              </el-col>
-            </div>
-          </el-tab-pane>
           <el-tab-pane name="audio">
             <span slot="label">
               音频<el-badge :value="userContentData.audioCount" :max="9999" class="item" type="warning"/>
@@ -83,13 +73,23 @@
               </el-col>
             </div>
           </el-tab-pane>
+          <el-tab-pane name="image">
+            <span slot="label">
+              相册<el-badge :value="userContentData.albumCount" :max="9999" class="item" type="warning"/>
+            </span>
+            <div v-if="activeName === 'image'">
+              <el-col v-for="(album, index) in dataList" :key="index" :md="6" :sm="12" :xs="12">
+                <image-album-card :imageAlbum="album" />
+              </el-col>
+            </div>
+          </el-tab-pane>
           <el-tab-pane name="article">
             <span slot="label">
               文章<el-badge :value="userContentData.articleCount" :max="9999" class="item" type="warning"/>
             </span>
             <div v-if="activeName === 'article'">
               <el-col v-for="(article, index) in dataList" :key="index" :md="6" :sm="12" :xs="12">
-                <span>发布的文章</span>
+                <article-card :article="article" />
               </el-col>
             </div>
           </el-tab-pane>
@@ -136,16 +136,18 @@ import StatusCard from '@/components/card/StatusCard'
 import VideoCard from '@/components/card/VideoCard'
 import ImageAlbumCard from '@/components/card/ImageAlbumCard'
 import AudioCard from '@/components/card/AudioCard'
+import ArticleCard from 'components/card/ArticleCard'
 
 import { getUserInfo, getUserFollowing, getUserFollower, checkRelation, followUser, unfollowUser } from "@/api/user";
 import { getUserContentData, userVideoCard } from "@/api/video";
 import { getUserAlbums } from "@/api/image";
 import { getUserAudio } from "@/api/audio";
 import { userStatus } from "@/api/status";
+import { getArticles } from "@/api/article";
 
 export default {
   name: 'Home',
-  components: { UserCard, StatusCard, VideoCard, ImageAlbumCard, AudioCard },
+  components: { UserCard, StatusCard, VideoCard, ImageAlbumCard, AudioCard, ArticleCard },
   data() {
     return {
       // 屏幕宽度, 为了控制分页条的大小
@@ -277,7 +279,19 @@ export default {
           }
         })
       } else if (this.activeName === 'article') {
-        // todo
+        getArticles(this.currentPage).then(res => {
+          if (res.code === 0) {
+            const resData = res.data.list
+            if (resData.length !== 0) {
+              this.showEmpty = false
+              for (const item of resData) {
+                this.dataList.push(item)
+              }
+            } else {
+              this.showEmpty = true
+            }
+          }
+        })
       } else if (this.activeName === 'status') {
         this.userStatusListWrapper(this.currentPage, this.userId)
       }