添加音频播放页面

src/api/media/audio.js

@@ -2,7 +2,8 @@ import $axios from '../index'
 
 const audioApi = {
   audioPostSubmitApi: '/api/media/audio/post/submit',
-  userAudioListApi: '/api/media/audio/post/user'
+  userAudioListApi: '/api/media/audio/post/user',
+  audioInfoApi: '/api/media/audio/post'
 }
 
 // 音频发布接口
@@ -14,3 +15,8 @@ export function submitAudioPost(audioPost) {
 export function userAudioList(page, userId) {
   return $axios.get(audioApi.userAudioListApi + '?page=' + page + '&userId=' + userId)
 }
+
+// 用户音频列表
+export function audioInfo(audioId) {
+  return $axios.get(audioApi.audioInfoApi + '/' + audioId)
+}

src/api/media/video.js

@@ -10,7 +10,8 @@ const videoApi = {
   videoCategoryApi: '/api/media/video/category',
   videoPostSubmitApi: '/api/media/video/post/submit',
   playerRecordApi: '/api/media/video/play/record',
-  userVideoListApi: '/api/media/video/post/user'
+  userVideoListApi: '/api/media/video/post/user',
+  userRecentlyVideoListApi: '/api/media/video/post/user/recently'
 }
 
 // 视频时间线
@@ -60,3 +61,8 @@ export function submitPlayRecord(playerRecord) {
 export function userVideoList(page, userId) {
   return $axios.get(videoApi.userVideoListApi + '?page=' + page + '&userId=' + userId)
 }
+
+// 用户最近投稿的视频
+export function userRecentlyVideoList(userId) {
+  return $axios.get(videoApi.userRecentlyVideoListApi + '?userId=' + userId)
+}

src/components/card/audio-card.vue

@@ -4,36 +4,15 @@
       color="white"
     >
       <v-card-title>
-        <!--        <v-avatar>
-          <img
-            :src="item.avatarUrl"
-            alt="social"
-          >
-        </v-avatar>-->
-        <span class="text-body-1 font-weight-light">{{ item.userId }}</span>
-        <span class="text-body-1 font-weight-light">{{ item.pubDate }}</span>
+        <router-link target="_blank" :to="`/audio/${item.audioId}`">
+          <div style="position: relative; width: 200px; height: 60px;">
+            <span style="position: absolute; right: 0; color:deepskyblue">{{ item.title }}</span>
+          </div>
+        </router-link>
       </v-card-title>
-
-      <v-card-text class-name="text-h5 font-weight-bold">
-        <span v-html="item.title" />
-        <div>
-          <audio-player
-            ref="audioPlayer"
-            :show-prev-button="false"
-            :show-next-button="false"
-            :show-playback-rate="false"
-            :audio-list="audioList.map(elm => elm.url)"
-            :before-play="handleBeforePlay"
-            theme-color="#87CEFA"
-          />
-        </div>
+      <v-card-text>
+        <span class="text-body-1 font-weight-light">{{ item.pubDate }}</span>
       </v-card-text>
-      <v-icon
-        small
-        left
-      >
-        mdi-twitter
-      </v-icon>
     </v-card>
   </div>
 </template>
@@ -50,32 +29,11 @@ export default {
   },
   data() {
     return {
-      currentAudioName: '',
-      audioList: []
     }
   },
   created() {
-    this.audioList = [
-      { name: this.item.title, url: this.item.audioUrl }
-    ]
   },
   methods: {
-    // 播放前做的事
-    handleBeforePlay(next) {
-      // 这里可以做一些事情...
-      this.currentAudioName = this.audioList[this.$refs.audioPlayer.currentPlayIndex].name
-
-      next() // 开始播放
-    },
-    handlePlaySpecify() {
-      this.$refs.audioPlayer.currentPlayIndex = 1
-      this.$nextTick(() => {
-        this.$refs.audioPlayer.play()
-        this.title = this.audioList[
-          this.$refs.audioPlayer.currentPlayIndex
-        ].name
-      })
-    }
   }
 }
 </script>

src/components/card/audio-card1.vue

@@ -0,0 +1,84 @@
+<template>
+  <div style="width: 640px">
+    <v-card
+      color="white"
+    >
+      <v-card-title>
+        <!--        <v-avatar>
+          <img
+            :src="item.avatarUrl"
+            alt="social"
+          >
+        </v-avatar>-->
+        <span class="text-body-1 font-weight-light">{{ item.userId }}</span>
+        <span class="text-body-1 font-weight-light">{{ item.pubDate }}</span>
+      </v-card-title>
+
+      <v-card-text class-name="text-h5 font-weight-bold">
+        <span v-html="item.title" />
+        <div>
+          <audio-player
+            ref="audioPlayer"
+            :show-prev-button="false"
+            :show-next-button="false"
+            :show-playback-rate="false"
+            :audio-list="audioList.map(elm => elm.url)"
+            :before-play="handleBeforePlay"
+            theme-color="#87CEFA"
+          />
+        </div>
+      </v-card-text>
+      <v-icon
+        small
+        left
+      >
+        mdi-twitter
+      </v-icon>
+    </v-card>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AudioCard',
+  props: {
+    item: {
+      type: Object,
+      default: () => {
+      }
+    }
+  },
+  data() {
+    return {
+      currentAudioName: '',
+      audioList: []
+    }
+  },
+  created() {
+    this.audioList = [
+      { name: this.item.title, url: this.item.audioUrl }
+    ]
+  },
+  methods: {
+    // 播放前做的事
+    handleBeforePlay(next) {
+      // 这里可以做一些事情...
+      this.currentAudioName = this.audioList[this.$refs.audioPlayer.currentPlayIndex].name
+
+      next() // 开始播放
+    },
+    handlePlaySpecify() {
+      this.$refs.audioPlayer.currentPlayIndex = 1
+      this.$nextTick(() => {
+        this.$refs.audioPlayer.play()
+        this.title = this.audioList[
+          this.$refs.audioPlayer.currentPlayIndex
+        ].name
+      })
+    }
+  }
+}
+</script>
+
+<style>
+</style>

src/router/index.js

@@ -322,9 +322,15 @@ const routes = [
       },
       {
         path: '/video/:id',
-        name: 'Vide',
+        name: 'Video',
         component: () => import('@/views/video/video.vue'),
-        meta: { title: '播放' }
+        meta: { title: '视频播放' }
+      },
+      {
+        path: '/audio/:id',
+        name: 'Audio',
+        component: () => import('@/views/video/audio.vue'),
+        meta: { title: '音频播放' }
       },
       {
         path: '/live',

src/views/user/user-home.vue

@@ -85,10 +85,10 @@
 </template>
 
 <script>
-import { getUserInfo } from '@/api/user/user'
 import Power from '@/utils/check-power.vue'
 import TimeUtil from '@/utils/time-util.vue'
-import { userVideoList } from '@/api/media/video'
+import { getUserInfo } from '@/api/user/user'
+import { userRecentlyVideoList } from '@/api/media/video'
 import VideoCard from '@/components/card/video-card.vue'
 
 export default {
@@ -149,14 +149,14 @@ export default {
         console.error(error.message)
       })
     },
-    getVideoList(page) {
-      userVideoList(page, this.userId).then(res => {
+    getVideoList() {
+      userRecentlyVideoList(this.userId).then(res => {
         if (res.code === 0) {
           this.$vuetify.goTo(0)
 
-          const pageList = res.data
+          const list = res.data
           this.cardList.splice(0, this.cardList.length)
-          for (const item of pageList.list) {
+          for (const item of list) {
             this.cardList.push(item)
           }
         } else {

src/views/video/audio.vue

@@ -0,0 +1,98 @@
+<template>
+  <div v-if="audioInfo !== null">
+    <v-container>
+      <v-col>
+        <v-row>
+          <v-col>
+            <h3 v-text="audioInfo.title" />
+          </v-col>
+        </v-row>
+      </v-col>
+    </v-container>
+    <v-container>
+      <audio-player
+        ref="audioPlayer"
+        :show-prev-button="false"
+        :show-next-button="false"
+        :show-playback-rate="false"
+        :show-volume-button="false"
+        :is-loop="false"
+        :audio-list="audioList.map(elm => elm.url)"
+        :before-play="handleBeforePlay"
+        theme-color="#87CEFA"
+      />
+    </v-container>
+  </div>
+</template>
+
+<script>
+import { audioInfo } from '@/api/media/audio'
+import TimeUtil from '@/utils/time-util.vue'
+
+export default {
+  name: 'Audio',
+  data() {
+    return {
+      TimeUtil,
+      audioId: '',
+      audioInfo: null,
+      currentAudioName: '',
+      audioList: [],
+      benched: 0
+    }
+  },
+  computed: {
+    items() {
+      return Array.from({ length: this.length }, (k, v) => v + 1)
+    },
+    length() {
+      return 100
+    }
+  },
+  created() {
+    // 获取 url 上的 path 参数
+    this.audioId = this.$route.params.id
+    // 请求后端获取数据
+    this.getAudioInfo(this.audioId)
+  },
+  methods: {
+    getAudioInfo(audioId) {
+      audioInfo(audioId)
+        .then(res => {
+          if (res.code === 0) {
+            const audioData = res.data
+            document.title = audioData.title
+            this.audioInfo = audioData
+            this.audioList.push({
+              name: audioData.title,
+              url: audioData.audioUrl
+            })
+          } else {
+            console.error(res.msg)
+          }
+        })
+        .catch(error => {
+          console.error(error.message)
+        })
+    },
+    // 播放前做的事
+    handleBeforePlay(next) {
+      // 这里可以做一些事情...
+      this.currentAudioName = this.audioList[this.$refs.audioPlayer.currentPlayIndex].name
+      next() // 开始播放
+    },
+    handlePlaySpecify() {
+      this.$refs.audioPlayer.currentPlayIndex = 1
+      this.$nextTick(() => {
+        this.$refs.audioPlayer.play()
+        this.title = this.audioList[
+          this.$refs.audioPlayer.currentPlayIndex
+        ].name
+      })
+    }
+  }
+}
+</script>
+
+<style>
+</style>