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

src/api/audio.js

@@ -1,28 +1,40 @@
 import {delete0, get, post} from '@/utils/request'
 
 const audioApi = {
-  audioSubmitApi: '/api/content/post/audio/submit',
-  userAudioApi: '/api/content/post/audio/user',
-  audioInfoApi: '/api/content/post/audio',
-  updateAudioScopeApi: '/api/content/post/audio/scope',
+  audioPostApi: '/api/content/post/audio',
+  updateAudioScopeApi: '/api/content/post/audio/update/scope',
+  audioApi: '/api/content/audio',
+  userAudioApi: '/api/content/audio/user',
 }
 
-export function submitAudio(video) {
-  return post(audioApi.audioSubmitApi, video)
+export function addAudioPost(video) {
+  return post(audioApi.audioPostApi, video)
 }
 
 export function updateAudioScope(audioScope) {
   return post(audioApi.updateAudioScopeApi, audioScope)
 }
 
-export function getUserAudio(userId) {
-  return get(audioApi.userAudioApi + '?userId=' + userId)
+export function deleteAudioPost(audioId) {
+  return delete0(audioApi.audioPostApi + '/' + audioId)
 }
 
-export function getAudio(audioId) {
-  return get(audioApi.audioInfoApi + '/' + audioId)
+export function getAudioPosts(page) {
+  return get(audioApi.audioPostApi + '?page=' + page)
 }
 
-export function deleteAudio(videoId) {
-  return delete0(audioApi.audioInfoApi + '/' + videoId)
+export function getAudioPost(audioId) {
+  return get(audioApi.audioPostApi + '/' + audioId)
+}
+
+export function getAudios(page) {
+  return get(audioApi.audioApi + '?page=' + page)
+}
+
+export function getUserAudios(userId, page) {
+  return get(audioApi.userAudioApi + '?userId=' + userId + '&page=' + page)
+}
+
+export function getAudioInfo(audioId) {
+  return get(audioApi.audioApi + '/' + audioId)
 }

src/components/VideoPlayer.vue

@@ -112,11 +112,17 @@ export default {
 
       /* 事件绑定 */
       player.on('progress', function() {
-        SocketInstance.send({ videoId: videoId, currentTime: player.video.currentTime })
+        const jsonData = {}
+        jsonData.videoId = videoId
+        jsonData.currentTime = player.video.currentTime
+        SocketInstance.send(jsonData)
       })
 
       player.on('ended', () => {
-        SocketInstance.send({ videoId: videoId, currentTime: player.video.currentTime })
+        const jsonData = {}
+        jsonData.videoId = videoId
+        jsonData.currentTime = player.video.currentTime
+        SocketInstance.send(jsonData)
         const path = this.$route.path
         /*const nextPath = '/video/gz5RYkw1zn'
         if (path !== nextPath) {

src/components/card/AudioCard.vue

@@ -10,17 +10,13 @@
               fit="cover"
               class="coverImg"
             />
-            <span style="position: absolute; bottom: 0; left: 0; color:blue">
-              <i class="el-icon-video-play">90</i>
+            <span style="position: absolute; bottom: 0; right: 0; color:blue">
+              <i class="el-icon-mic">{{ audio.duration }} </i>
             </span>
-            <span style="position: absolute; bottom: 0; left: 30%; color:blue">
-              <i class="el-icon-s-comment">121</i>
-            </span>
-            <span style="position: absolute; bottom: 0; right: 0; color:blue"> {{ audio.duration }} </span>
           </div>
         </router-link>
         <div style="padding: 14px">
-          <router-link target="_blank" :to="`/audio/${audio.videoId}`">
+          <router-link target="_blank" :to="`/audio/${audio.audioId}`">
             <span style="left: 0;margin-bottom: 0px;color: black;">{{ audio.title | ellipsis }}</span>
           </router-link>
         </div>
@@ -38,8 +34,6 @@
 </template>
 
 <script>
-import { handleVisited } from 'assets/js/utils'
-
 export default {
   name: 'AudioCard',
   filters: {
@@ -64,9 +58,6 @@ export default {
     }
   },
   methods: {
-    getVisited(visited) {
-      return handleVisited(visited)
-    },
     convertTimestamp(value) {
       const date = new Date(value*1000)
       var month = date.getMonth()

src/components/upload/EditArticle.vue

@@ -0,0 +1,285 @@
+<template>
+  <el-row class="movie-list">
+    <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
+      <el-col :md="24" style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
+        <el-card class="box-card">
+          <div class="text item">
+            <el-button style="float: left; padding: 3px 0" type="text" @click="onReturnArticle">返回文章稿件列表</el-button>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+    <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
+      <el-col :md="8" style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
+        <el-card class="box-card">
+          <div slot="header" class="clearfix">
+            <span>更新音频稿件信息</span>
+            <el-button style="float: right; padding: 3px 0" type="text" @click="onUpdateVideoInfo">更新</el-button>
+          </div>
+          <div class="text item">
+            <el-form ref="form" :model="form" label-width="80px">
+              <el-form-item label="标题">
+                <el-input v-model="form.title" style="width: 70%; padding-right: 2px" placeholder="标题不能超过 50 个字符" />
+              </el-form-item>
+              <el-form-item label="描述">
+                <el-input v-model="form.description" type="textarea" style="width: 70%; padding-right: 2px" />
+              </el-form-item>
+            </el-form>
+          </div>
+        </el-card>
+      </el-col>
+      <el-col :md="12" style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
+        <el-card class="box-card">
+          <div slot="header" class="clearfix">
+            <span>更新音频文件</span>
+            <el-button style="float: right; padding: 3px 0" type="text" @click="onUpdateVideoFile">更新</el-button>
+          </div>
+          <div class="text item">
+            <uploader
+              class="uploader-example"
+              :options="options"
+              :auto-start="true"
+              @file-added="onFileAdded"
+              @file-success="onFileSuccess"
+              @file-progress="onFileProgress"
+              @file-error="onFileError"
+            >
+              <uploader-unsupport />
+              <uploader-drop>
+                <p>拖动音频文件到此处或</p>
+                <uploader-btn :attrs="attrs">选择音频文件</uploader-btn>
+              </uploader-drop>
+              <uploader-list />
+            </uploader>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+  </el-row>
+</template>
+
+<script>
+import { getAudioPost, } from '@/api/audio'
+
+export default {
+  name: 'EditArticle',
+  data() {
+    return {
+      /***********************************************************************/
+      options: {
+        target: '//oss.reghao.cn/',
+        chunkSize: 1024 * 1024 * 1024, // 1GiB
+        fileParameterName: 'file',
+        testChunks: false,
+        query: (file, chunk) => {
+          return {
+            channelId: 2
+          }
+        },
+        headers: {
+          Authorization: '1234567890'
+        }
+      },
+      attrs: {
+        accept: 'audio/*'
+      },
+      imgHeaders: {
+        Authorization: '1234567890'
+      },
+      imgData: {
+        channelId: 3
+      },
+      /***********************************************************************/
+      coverUrl: null,
+      coverFile: null,
+      imageList: [],
+      imageUrl: '',
+      // 提交给后端的数据
+      tagsStr: null,
+      form: {
+        videoFileId: null,
+        coverUrl: null,
+        title: null,
+        description: null,
+        categoryId: 0,
+        tags: [],
+        scope: null,
+        width: 0,
+        height: 0,
+        duration: 0
+      },
+      videoInfo: null
+    }
+  },
+  created() {
+    document.title = '编辑音频'
+
+    const audioId = this.$route.params.audioId
+    getAudioPost(audioId).then(res => {
+      if (res.code === 0) {
+        const audioInfo = res.data
+        this.imageUrl = audioInfo.coverUrl
+        this.form.title = audioInfo.title
+        this.form.description = audioInfo.description
+        this.form.scope = audioInfo.scope
+      } else {
+      }
+    })
+  },
+  methods: {
+    /***********************************************************************/
+    onFileAdded(file) {
+      if (file.file.size > 1024*1024*1024) {
+        file.cancel()
+        this.$notify(
+          {
+            title: '提示',
+            message: '音频文件应小于 1GiB',
+            type: 'warning',
+            duration: 3000
+          }
+        )
+        return
+      }
+      this.setTitle(file.file.name)
+      this.processVideo(file.file)
+    },
+    onFileProgress(rootFile, file, chunk) {
+    },
+    onFileSuccess(rootFile, file, response, chunk) {
+      const res = JSON.parse(response)
+      if (res.code === 0) {
+        const resData = res.data
+        this.form.audioFileId = resData.uploadId
+
+        this.$notify(
+          {
+            title: '提示',
+            message: '音频已上传',
+            type: 'warning',
+            duration: 3000
+          }
+        )
+      }
+    },
+    onFileError(rootFile, file, response, chunk) {
+      this.$notify(
+        {
+          title: '提示',
+          message: '文件上传错误',
+          type: 'warning',
+          duration: 3000
+        }
+      )
+    },
+    /***********************************************************************/
+    beforeAvatarUpload(file) {
+      const isJPG = file.type === 'image/jpeg'
+      const isLt2M = file.size / 1024 / 1024 < 2
+      if (!isJPG) {
+        this.$message.error('上传头像图片只能是 JPG 格式!')
+      }
+      if (!isLt2M) {
+        this.$message.error('上传头像图片大小不能超过 2MB!')
+      }
+      return isJPG && isLt2M
+    },
+    handleAvatarSuccess(res, file) {
+      this.imageList.push(file)
+      this.imageUrl = URL.createObjectURL(file.raw)
+      if (res.code === 0) {
+        const resData = res.data
+        const uploadId = resData.uploadId
+        const url = resData.url
+      } else {
+
+      }
+    },
+    setTitle(title) {
+      if (title.length > 50) {
+        this.form.title = title.substring(0, 50)
+        this.form.description = title
+      } else {
+        this.form.title = title
+      }
+    },
+    onReturnArticle() {
+      this.$router.push('/post/article')
+    },
+    onUpdateVideoFile() {
+      console.log('更新文章文件')
+    },
+    onUpdateVideoCover() {
+      console.log('更新音频封面')
+    },
+    onUpdateVideoInfo() {
+      console.log('更新音频信息')
+    },
+    onUpdateVideoScope() {
+      console.log('更新音频作用域')
+    }
+  }
+}
+</script>
+
+<style>
+/*处于手机屏幕时*/
+@media screen and (max-width: 768px){
+  .movie-list {
+    padding-top: 8px;
+    padding-left: 0.5%;
+    padding-right: 0.5%;
+  }
+
+  .coverImg {
+    height: 120px !important;
+  }
+}
+
+.movie-list {
+  padding-top: 15px;
+  padding-left: 6%;
+  padding-right: 6%;
+}
+
+.uploader-example {
+  width: 500px;
+  padding: 15px;
+  margin: 40px auto 0;
+  font-size: 12px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, .4);
+}
+.uploader-example .uploader-btn {
+  margin-right: 4px;
+}
+.uploader-example .uploader-list {
+  max-height: 440px;
+  overflow: auto;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+.avatar-uploader .el-upload {
+  border: 1px dashed #d9d9d9;
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+}
+.avatar-uploader .el-upload:hover {
+  border-color: #409EFF;
+}
+.avatar-uploader-icon {
+  font-size: 28px;
+  color: #8c939d;
+  width: 320px;
+  height: 240px;
+  line-height: 178px;
+  text-align: center;
+}
+.avatar {
+  width: 320px;
+  height: 240px;
+  display: block;
+}
+</style>

src/components/upload/EditAudio.vue

@@ -28,8 +28,6 @@
           </div>
         </el-card>
       </el-col>
-    </el-row>
-    <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
       <el-col :md="12" style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
         <el-card class="box-card">
           <div slot="header" class="clearfix">
@@ -61,7 +59,7 @@
 </template>
 
 <script>
-import { getAudio, } from '@/api/audio'
+import {getAudioPost,} from '@/api/audio'
 
 export default {
   name: 'EditAudio',
@@ -117,7 +115,7 @@ export default {
     document.title = '编辑音频'
 
     const audioId = this.$route.params.audioId
-    getAudio(audioId).then(res => {
+    getAudioPost(audioId).then(res => {
       if (res.code === 0) {
         const audioInfo = res.data
         this.imageUrl = audioInfo.coverUrl

src/components/upload/PublishAudio.vue

@@ -67,7 +67,7 @@
 
 <script>
 import { getServerInfo } from '@/api/file'
-import { submitAudio } from "@/api/audio";
+import { addAudioPost } from "@/api/audio";
 
 export default {
   name: 'PublishAudio',
@@ -182,7 +182,7 @@ export default {
         return
       }
 
-      submitAudio(this.form).then(res => {
+      addAudioPost(this.form).then(res => {
         if (res.code === 0) {
           this.$notify({
             title: '提示',

src/views/home/Audio.vue

@@ -1,10 +1,11 @@
 <template>
   <div>
     <!--电影列表，与推荐列表-->
-    <el-row id="movie-list">
+    <el-row v-if="totalSize !== 0" id="movie-list">
       <!--电影列表-->
       <el-col :md="18">
-        <el-col v-for="(video, index) in videoList" :key="index" :md="6" :sm="12" :xs="12">
+        <el-col v-for="(item, index) in dataList" :key="index" :md="6" :sm="12" :xs="12">
+          <audio-card :audio="item"/>
         </el-col>
         <!--
           分页按钮：
@@ -25,7 +26,7 @@
         </el-col>
       </el-col>
     </el-row>
-    <el-row v-if="showEmpty" class="not-result">
+    <el-row v-else class="not-result">
       <el-col :span="12" :offset="6">
         <img src="@/assets/img/icon/not-result.png">
         <div>没有音频数据</div>
@@ -35,10 +36,13 @@
 </template>
 
 <script>
+import AudioCard from '@/components/card/AudioCard'
+
+import { getAudios} from "@/api/audio";
 
 export default {
   name: 'Audio',
-  components: {},
+  components: {AudioCard},
   data() {
     return {
       // 屏幕宽度, 为了控制分页条的大小
@@ -47,12 +51,14 @@ export default {
       pageSize: 12,
       totalPages: 0,
       totalSize: 0,
-      videoList: [],
+      dataList: [],
       showEmpty: true
     }
   },
   created() {
     document.title = '音频主页'
+
+    this.getAudiosWrapper(this.currentPage)
   },
   mounted() {
     // 当窗口宽度改变时获取屏幕宽度
@@ -64,6 +70,15 @@ export default {
     }
   },
   methods: {
+    getAudiosWrapper(page) {
+      getAudios(page).then(resp => {
+        if (resp.code === 0) {
+          this.dataList = resp.data.list
+          this.totalPages = resp.totalPages
+          this.totalSize = resp.totalSize
+        }
+      })
+    }
   }
 }
 </script>

src/views/home/AudioPage.vue

@@ -5,29 +5,32 @@
         <el-card class="box-card">
           <div slot="header" class="clearfix">
             <el-row>
-              <span v-html="audio.title" />
+              <span v-html="audioInfo.title" />
             </el-row>
           </div>
           <div class="text item">
             <el-row>
               <audio-player
                 ref="audioPlayer"
+                :isLoop="false"
                 :show-prev-button="false"
                 :show-next-button="false"
                 :show-playback-rate="false"
                 :audio-list="audioList.map(elm => elm.url)"
                 :before-play="handleBeforePlay"
                 @playing="onPlaying"
+                @on-progress-move="onProgressMove"
+                @ended="onEnd"
                 theme-color="#87CEFA"
               />
             </el-row>
-            <el-divider v-if="audio.description !== undefined && audio.description !== null"/>
+            <el-divider v-if="audioInfo.description !== undefined && audioInfo.description !== null"/>
             <el-row>
-              <span v-html="audio.description" />
+              <span v-html="audioInfo.description" />
             </el-row>
             <el-divider/>
             <el-row>
-              发布于 <span v-html="audio.publishAt" />
+              发布于 <span v-html="audioInfo.publishAt" />
             </el-row>
             <el-divider/>
             <el-row>
@@ -49,8 +52,9 @@
 
 <script>
 import UserAvatarCard from '@/components/card/UserAvatarCard'
-import { getAudio } from "@/api/audio";
+import { getAudioInfo} from "@/api/audio";
 import {getUserInfo} from "@/api/user";
+import SocketInstance from "@/utils/ws/socket-instance";
 
 export default {
   name: 'AudioPage',
@@ -68,7 +72,7 @@ export default {
   data() {
     return {
       currentAudioName: '',
-      audio: null,
+      audioInfo: null,
       audioList: [],
       user: null,
       collected: false,
@@ -77,20 +81,21 @@ export default {
   },
   created() {
     const audioId = this.$route.params.audioId
-    getAudio(audioId).then(res => {
-      if (res.code === 0) {
-        this.audio = res.data
+    getAudioInfo(audioId).then(resp => {
+      if (resp.code === 0) {
+        this.audioInfo = resp.data
         this.audioList = [
-          { name: this.audio.title, url: this.audio.audioUrl }
+          { name: this.audioInfo.title, url: this.audioInfo.audioUrl }
         ]
 
-        document.title = '文章 - ' + this.audio.title
+        SocketInstance.connect()
+        document.title = '音频 - ' + this.audioInfo.title
       } else {
       }
 
-      getUserInfo(10001).then(res => {
-        if (res.code === 0) {
-          this.user = res.data
+      getUserInfo(10001).then(resp => {
+        if (resp.code === 0) {
+          this.user = resp.data
         }
       })
     })
@@ -99,7 +104,7 @@ export default {
     // 播放前做的事
     handleBeforePlay(next) {
       // 这里可以做一些事情...
-      this.currentAudioName = this.audioList[this.$refs.audioPlayer.currentPlayIndex].name
+      //this.audioList[this.$refs.audioPlayer.currentPlayIndex].name
       this.$refs.audioPlayer.$refs.audio.currentTime = 20
       // 开始播放
       next()
@@ -114,7 +119,16 @@ export default {
       })
     },
     onPlaying() {
-      console.log('正在播放 ' + this.$refs.audioPlayer.$refs.audio.currentTime)
+      const jsonData = {}
+      jsonData.videoId = this.audioInfo.audioId
+      jsonData.currentTime = this.$refs.audioPlayer.$refs.audio.currentTime
+      SocketInstance.send(jsonData)
+    },
+    onProgressMove(event) {
+      console.log(event)
+    },
+    onEnd(event) {
+      console.log('播放完成')
     },
     collectItem() {
       if (this.collected) {

src/views/post/AudioPost.vue

@@ -15,6 +15,11 @@
         <el-table-column
           prop="title"
           label="音频名字">
+          <template slot-scope="scope">
+            <router-link target="_blank" :to="`/audio/${scope.row.audioId}`">
+              <span>{{scope.row.title}}</span>
+            </router-link>
+          </template>
         </el-table-column>
         <el-table-column
           prop="scope"
@@ -83,7 +88,7 @@
 </template>
 
 <script>
-import { updateAudioScope, deleteAudio } from "@/api/audio";
+import { updateAudioScope, deleteAudioPost } from "@/api/audio";
 
 export default {
   name: 'AudioPost',
@@ -116,7 +121,7 @@ export default {
       this.$router.push(path)
     },
     handleDelete(index, row) {
-      deleteAudio(row.audioId).then(res => {
+      deleteAudioPost(row.audioId).then(res => {
          if (res.code === 0) {
            this.$notify({
              title: '提示',

src/views/post/PostList.vue

@@ -55,7 +55,7 @@ import ImagePost from "@/views/post/ImagePost";
 import ArticlePost from "@/views/post/ArticlePost";
 
 import { userVideoPost } from "@/api/video";
-import { getUserAudio } from "@/api/audio";
+import { getAudioPosts } from "@/api/audio";
 import { getUserAlbums } from "@/api/image";
 import { getArticles } from "@/api/article";
 
@@ -174,7 +174,7 @@ export default {
       } else if (this.activeName === 'audio') {
         this.currentPage = 1
         this.lastId = 0
-        getUserAudio(this.userId).then(res => {
+        getAudioPosts(this.currentPage).then(res => {
           if (res.code === 0) {
             const resData = res.data.list
             if (resData.length !== 0) {

src/views/user/Home.vue

@@ -69,7 +69,7 @@
             </span>
             <div v-if="activeName === 'audio'">
               <el-col v-for="(audio, index) in dataList" :key="index" :md="6" :sm="12" :xs="12">
-                <audio-card :audio="audio"></audio-card>
+                <audio-card :audio="audio"/>
               </el-col>
             </div>
           </el-tab-pane>
@@ -134,14 +134,14 @@
 import UserCard from '@/components/card/UserCard'
 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 ImageAlbumCard from '@/components/card/ImageAlbumCard'
 import ArticleCard from 'components/card/ArticleCard'
 
 import { getUserInfo, checkRelation, followUser, unfollowUser } from "@/api/user";
 import { getUserContentData, userVideoCard } from "@/api/video";
 import { getUserAlbums1 } from "@/api/image";
-import { getUserAudio } from "@/api/audio";
+import { getUserAudios } from "@/api/audio";
 import { userStatus } from "@/api/status";
 import { getArticles } from "@/api/article";
 
@@ -265,7 +265,7 @@ export default {
           }
         })
       } else if (this.activeName === 'audio') {
-        getUserAudio(this.userId).then(res => {
+        getUserAudios(this.userId, this.currentPage).then(res => {
           if (res.code === 0) {
             const resData = res.data.list
             if (resData.length !== 0) {