对应后端接口的更改

src/api/collect.js

@@ -1,15 +1,12 @@
 import { get, post, delete0 } from '@/utils/request'
 
 const collectApi = {
-  collectItemApi: '/api/content/favlist/collect',
-  userFavlistApi: '/api/content/favlist/user',
   favlistApi: '/api/content/favlist',
-  videoFavlistApi: '/api/content/favlist'
-}
-
-// 收藏(取消收藏)内容
-export function collectItem(jsonData) {
-  return post(collectApi.collectItemApi, jsonData)
+  videoFavlistApi: '/api/content/favlist',
+  deleteAlbumItemApi: '/api/content/album/action',
+  collectItemApi: '/api/content/album/action',
+  userFavlistApi: '/api/content/album/user',
+  postAlbumApi: '/api/content/album'
 }
 
 // 删除收藏夹
@@ -31,3 +28,34 @@ export function getFavlist(favlistId, contentType, page) {
 export function getVideoFavlist(favlistId, page) {
   return get(collectApi.videoFavlistApi + '?favlistId=' + favlistId + '&contentType=1002' + '&page=' + page)
 }
+
+// 收藏(取消收藏)内容
+export function collectItem(jsonData) {
+  return post(collectApi.collectItemApi, jsonData)
+}
+
+// 获取用户合集
+export function getUserAlbums(page) {
+  return get(collectApi.postAlbumApi + '/user?pn=' + page)
+}
+
+export function getUserAlbums1(query) {
+  return get(collectApi.postAlbumApi + '/user', query)
+}
+
+// 获取合集内容
+export function getAlbumItems(page, albumId) {
+  return get(collectApi.postAlbumApi + '/item?pn=' + page + '&albumId=' + albumId)
+}
+
+export function getPlaylist(page) {
+  return get(collectApi.postAlbumApi + '/playlist?pn=' + page)
+}
+
+export function getAlbumTypes() {
+  return get(collectApi.postAlbumApi + '/types')
+}
+
+export function deleteAlbumItem(data) {
+  return post(collectApi.deleteAlbumItemApi, data)
+}

src/api/image.js

@@ -3,14 +3,12 @@ import { get, post, delete0 } from '@/utils/request'
 const imageApi = {
   imageAlbumApi: '/api/content/post/image/album',
   addAlbumImageApi: '/api/content/post/image/album/add',
-  deleteAlbumItemApi: '/api/content/album/action',
   updateAlbumScopeApi: '/api/content/post/image/album/update/scope',
   updateAlbumCoverApi: '/api/content/post/image/album/update/cover',
   albumImageApi: '/api/content/post/image/album',
   albumApi: '/api/content/image/album',
   userAlbumApi: '/api/content/image/album/user',
-  imageApi: '/api/content/image',
-  postAlbumApi: '/api/content/album'
+  imageApi: '/api/content/image'
 }
 
 // 创建相册
@@ -34,10 +32,6 @@ export function updateAlbumCover(jsonData) {
   return post(imageApi.updateAlbumCoverApi, jsonData)
 }
 
-export function deleteAlbumItem(data) {
-  return post(imageApi.deleteAlbumItemApi, data)
-}
-
 export function deleteAlbum(albumId) {
   return delete0(imageApi.imageAlbumApi + '/' + albumId)
 }
@@ -61,24 +55,6 @@ export function getImages(page) {
   return get(imageApi.imageApi + '?page=' + page)
 }
 
-// 获取用户合集
-export function getUserAlbums(page) {
-  return get(imageApi.postAlbumApi + '/user?pn=' + page)
-}
-
-export function getUserAlbums1(query) {
-  return get(imageApi.postAlbumApi + '/user', query)
-}
-
-// 获取合集内容
-export function getAlbumItems(page, albumId) {
-  return get(imageApi.postAlbumApi + '/item?pn=' + page + '&albumId=' + albumId)
-}
-
 export function getImageItems(albumId) {
   return get(imageApi.imageApi + '/album/' + albumId)
 }
-
-export function getAlbumTypes() {
-  return get(imageApi.postAlbumApi + '/types')
-}

src/components/layout/LoginBar.vue

@@ -25,8 +25,8 @@
           </a>
         </el-menu-item>
         <el-menu-item index="5">
-          <a href="/discover" style="text-decoration-line: none">
-            <span style="color: #007bff">发现</span>
+          <a href="/playlist" style="text-decoration-line: none">
+            <span style="color: #007bff">播放列表</span>
           </a>
         </el-menu-item>
       </el-menu>

src/components/layout/NavBar.vue

@@ -25,8 +25,8 @@
           </a>
         </el-menu-item>
         <el-menu-item index="5">
-          <a href="/discover" style="text-decoration-line: none">
-            <span style="color: #007bff">发现</span>
+          <a href="/playlist" style="text-decoration-line: none">
+            <span style="color: #007bff">播放列表</span>
           </a>
         </el-menu-item>
       </el-menu>

src/router/index.js

@@ -28,6 +28,8 @@ const ArticlePage = () => import('views/home/ArticlePage')
 const MessageStream = () => import('views/home/MessageStream')
 const Search = () => import('views/home/Search')
 const DiscoverIndex = () => import('views/home/Discover')
+const PlaylistIndex = () => import('views/home/Playlist')
+const VideoList = () => import('views/home/VideoList')
 
 // ********************************************************************************************************************
 // 使用安装路由插件
@@ -88,9 +90,15 @@ const routes = [
         meta: { needAuth: false }
       },
       {
-        path: '/discover',
-        name: 'DiscoverIndex',
-        component: DiscoverIndex,
+        path: '/playlist',
+        name: 'PlaylistIndex',
+        component: PlaylistIndex,
+        meta: { needAuth: false }
+      },
+      {
+        path: '/playlist/:albumId',
+        name: 'VideoList',
+        component: VideoList,
         meta: { needAuth: false }
       },
       {

src/views/home/Playlist.vue

@@ -0,0 +1,64 @@
+<template>
+  <el-row id="movie-list">
+    <el-col v-for="(item, index) in dataList" :key="index" :md="1" :sm="3" :xs="3">
+      <router-link target="_blank" :to="`/playlist/` + item.albumId">
+        <el-avatar>
+          <el-image :src="item.coverUrl" />
+        </el-avatar>
+      </router-link>
+    </el-col>
+  </el-row>
+</template>
+
+<script>
+import { getPlaylist } from '@/api/collect'
+
+export default {
+  name: 'Playlist',
+  data() {
+    return {
+      // 屏幕宽度, 为了控制分页条的大小
+      screenWidth: document.body.clientWidth,
+      currentPage: 1,
+      dataList: [],
+      showEmpty: true
+    }
+  },
+  created() {
+    document.title = '播放列表'
+    this.currentPage = 1
+
+    getPlaylist(this.currentPage).then(resp => {
+      if (resp.code === 0) {
+        this.dataList = resp.data
+      }
+    })
+  },
+  mounted() {
+    // 当窗口宽度改变时获取屏幕宽度
+    window.onresize = () => {
+      return () => {
+        window.screenWidth = document.body.clientWidth
+        this.screenWidth = window.screenWidth
+      }
+    }
+  },
+  methods: {
+    handleCurrentChange(currentPage) {
+      this.currentPage = currentPage
+      this.$store.commit('updatePage', currentPage)
+      this.$store.dispatch('getPageBean')
+      // 回到顶部
+      scrollTo(0, 0)
+    }
+  }
+}
+</script>
+
+<style scoped>
+#movie-list {
+  padding-top: 10px;
+  padding-left: 3%;
+  padding-right: 3%;
+}
+</style>

src/views/home/VideoList.vue

@@ -322,7 +322,11 @@ export default {
     }
   },
   created() {
-    const videoId = this.$route.params.id
+    const albumId = this.$route.params.albumId
+    console.log(albumId)
+    document.title = '播放列表'
+
+    /* const videoId = this.$route.params.id
     this.accessCodeForm.contentId = videoId
     this.getVideoInfo(videoId)
 
@@ -333,7 +337,7 @@ export default {
       this.calculateCurrent(videoId)
     } else {
       this.getSimilarVideos(videoId)
-    }
+    }*/
   },
   mounted() {
     window.addEventListener('beforeunload', this.handleBeforeUnload)

src/views/home/VideoPage.vue

@@ -36,7 +36,7 @@
                   :disabled="isCollected"
                   @click="collection(video.videoId)"
                 >
-                  <span>添加到 {{ video.favorite }}</span>
+                  <span>收藏 {{ video.favorite }}</span>
                 </el-button>
                 <el-button
                   type="danger"
@@ -170,14 +170,14 @@
               style="width: 100%"
             >
               <el-table-column
-                prop="favlistName"
+                prop="albumName"
                 label="收藏夹"
               />
               <el-table-column
-                prop="favlistName"
+                prop="total"
                 label="数量"
               />
-              <el-table-column label="添加" width="80" align="center">
+              <el-table-column label="收藏" width="80" align="center">
                 <template slot-scope="scope">
                   <el-button
                     type="danger"
@@ -232,9 +232,8 @@ import UserAvatarCard from '@/components/card/UserAvatarCard'
 import comment from '@/components/comment'
 
 import { similarVideo, videoInfo, videoErrorReport, downloadVideo, getShortUrl } from '@/api/video'
-import { getUserFavlist} from '@/api/collect'
+import { collectItem, getUserFavlist } from '@/api/collect'
 import { getUserInfo } from '@/api/user'
-import { submitAccessCode } from '@/api/content'
 import { publishComment, getComment } from '@/api/comment'
 import { getAuthedUser } from '@/utils/auth'
 
@@ -310,7 +309,8 @@ export default {
         content: '视频',
         route: '/video'
       },
-      autoPlay: false
+      autoPlay: false,
+      added: false
     }
   },
   watch: {
@@ -434,22 +434,15 @@ export default {
       this.showPlaylistDialog = true
       getUserFavlist().then(resp => {
         if (resp.code === 0) {
-          this.playlist = resp.data
-          console.log(this.playlist)
+          this.playlist = resp.data.list
         }
       })
     },
     addToPlaylist(row) {
-      console.log('add to playlist')
-      this.$notify.success({
-        title: '视频已添加到播放列表',
-        type: 'success',
-        duration: 3000
-      })
-      /*const jsonData = {}
-      jsonData.contentType = 1002
-      jsonData.contentId = videoId
-      jsonData.collected = true
+      const jsonData = {}
+      jsonData.albumId = row.albumId
+      jsonData.postId = this.videoId
+      jsonData.action = 1
       collectItem(jsonData).then(resp => {
         if (resp.code === 0) {
           this.$notify.success({
@@ -464,7 +457,7 @@ export default {
             duration: 3000
           })
         }
-      })*/
+      })
     },
     getShareUrl(videoId) {
       getShortUrl(videoId).then(resp => {

src/views/post/FavlistVideo.vue

@@ -195,16 +195,11 @@
 </template>
 
 <script>
-import {
-  updateAlbumScope,
-  deleteAlbum,
-  getUserAlbums,
-  createAlbum,
-  getAlbumTypes, getUserAlbums1
-} from '@/api/image'
+import { getAlbumTypes, getUserAlbums, getUserAlbums1 } from '@/api/collect'
+import { createAlbum, deleteAlbum, updateAlbumScope } from '@/api/image'
 
 export default {
-  name: 'ImagePost',
+  name: 'PostAlbum',
   data() {
     return {
       allPostTypes: [],