更新收藏夹相关页面和接口

src/api/collect.js

@@ -5,6 +5,8 @@ const collectApi = {
   deleteCollectApi: '/api/content/collect/video/delete',
   eraseCollectApi: '/api/content/collect/video/erase',
   userCollectionApi: '/api/content/collect/video',
+  userFavlistApi: '/api/content/favlist/user',
+  favlistApi: '/api/content/favlist',
 }
 
 // 添加收藏
@@ -26,3 +28,11 @@ export function eraseVideoCollection() {
 export function getUserCollection(pageNumber) {
   return get(collectApi.userCollectionApi + '?pageNumber=' + pageNumber)
 }
+
+export function getUserFavlist() {
+  return get(collectApi.userFavlistApi)
+}
+
+export function getFavlist(favlistId, contentType, page) {
+  return get(collectApi.favlistApi + '?favlistId=' + favlistId + '&contentType=' + contentType + '&page=' + page)
+}

src/assets/js/mixin.js

@@ -209,11 +209,11 @@ export const userMixin = {
       this.$router.push('/post/list')
     },
     goToCollection() {
-      if (this.$route.path === '/u/collection') {
+      if (this.$route.path === '/u/myfavlist') {
         this.$router.go(0)
         return
       }
-      this.$router.push('/u/collection')
+      this.$router.push('/u/myfavlist')
     },
     goToHistory() {
       if (this.$route.path === '/u/history') {

src/router/index.js

@@ -205,6 +205,16 @@ const routes = [
     name: 'CollectionIndex',
     component: CollectionIndex
   },
+  {
+    path: '/u/myfavlist',
+    name: 'CollectionIndex',
+    component: CollectionIndex
+  },
+  {
+    path: '/u/favlist',
+    name: 'CollectionIndex',
+    component: CollectionIndex
+  },
   {
     path: '/u/history',
     name: 'HistoryIndex',

src/views/user/Collection.vue

@@ -1,105 +1,231 @@
 <template>
-  <div id="collection-list">
-    <!--搜索结果面包屑-->
-    <el-breadcrumb
-      v-if="this.$route.path.indexOf('collection') > -1"
-      class="bread"
-      separator-class="el-icon-arrow-right"
-    >
-      <el-breadcrumb-item :to="{ path: '' }"><a href="/">返回首页</a></el-breadcrumb-item>
-      <el-breadcrumb-item>我的收藏：共<span class="reslut">({{ totalSize }}}</span>条</el-breadcrumb-item>
-    </el-breadcrumb>
-
-    <el-row v-if="totalSize !== 0" class="movie-list">
-      <el-col style="text-align: right">
-        <el-button
-          type="danger"
-          icon="el-icon-delete"
-          round
-          title="一键清空"
-          @click="removeAll"
-        >一键清空</el-button>
-      </el-col>
-      <el-col v-for="(video,index) in dataList" :key="index" :md="6" :sm="8" :xs="12">
-        <video-card :video="video"/>
-        <el-button
-          type="danger"
-          icon="el-icon-delete"
-          circle
-          size="small"
-          title="移除该条收藏"
-          @click.stop="removeCollection(video.videoId)"
-        />
-      </el-col>
-      <el-col class="pagination">
-        <el-pagination
-          background
-          :small="screenWidth <= 768"
-          layout="prev, pager, next"
-          :page-size="pageSize"
-          :current-page="currentPage"
-          :total="totalSize"
-          @current-change="handleCurrentChange"
-          @prev-click="handleCurrentChange"
-          @next-click="handleCurrentChange"
-        />
-      </el-col>
-    </el-row>
-    <el-row v-else class="not-result">
-      <el-col :span="12" :offset="6">
-        <img src="@/assets/img/icon/not-collection.png">
-        <div>你还没有收藏任何东西呢</div>
-      </el-col>
-    </el-row>
-  </div>
+  <el-row>
+    <el-col :md="4">
+      <el-menu
+        :default-active="this.$route.path"
+        router
+        class="el-menu-vertical-demo"
+      >
+        <el-menu-item v-for="(item,i) in navList" :key="i" :index="item.path">
+          <i :class="item.icon" />
+          <span slot="title">{{ item.name }}</span>
+        </el-menu-item>
+      </el-menu>
+    </el-col>
+    <el-col :md="20">
+      <div id="collection-list">
+        <!--搜索结果面包屑-->
+        <el-breadcrumb
+          class="bread"
+          separator-class="el-icon-arrow-right"
+        >
+          <el-breadcrumb-item>我的收藏：共 <span class="reslut">{{ totalSize }}</span> 条</el-breadcrumb-item>
+        </el-breadcrumb>
+
+        <el-row v-if="totalSize !== 0" class="movie-list">
+          <el-col style="text-align: right">
+            <el-button
+              type="danger"
+              icon="el-icon-delete"
+              round
+              title="一键清空"
+              @click="removeAll"
+            >一键清空</el-button>
+          </el-col>
+          <el-col v-for="(item,index) in dataList" :key="index" :md="6" :sm="8" :xs="12">
+            <div v-if="contentType === 1001">
+              <el-card :body-style="{ padding: '0px' }" class="card">
+                <div class="imgs">
+                  <el-image
+                    lazy
+                    fit="cover"
+                    class="coverImg"
+                    :src="item.thumbnailUrl"
+                    @click="showImages(index)">
+                  </el-image>
+                </div>
+              </el-card>
+            </div>
+            <div v-else-if="contentType === 1002">
+              <video-card :video="video"/>
+            </div>
+            <div v-else-if="contentType === 1003">
+            </div>
+            <div v-else-if="contentType === 1004">
+            </div>
+            <div v-else>
+              <span>未知 {{contentType}}</span>
+            </div>
+            <el-button
+              type="danger"
+              icon="el-icon-delete"
+              circle
+              size="small"
+              title="移除该条收藏"
+              @click.stop="removeCollection"
+            />
+          </el-col>
+          <el-col class="pagination">
+            <el-pagination
+              background
+              :small="screenWidth <= 768"
+              layout="prev, pager, next"
+              :page-size="pageSize"
+              :current-page="currentPage"
+              :total="totalSize"
+              @current-change="handleCurrentChange"
+              @prev-click="handleCurrentChange"
+              @next-click="handleCurrentChange"
+            />
+          </el-col>
+        </el-row>
+        <el-row v-else class="not-result">
+          <el-col :span="12" :offset="6">
+            <img src="@/assets/img/icon/not-collection.png">
+            <div>你还没有收藏任何东西呢</div>
+          </el-col>
+        </el-row>
+      </div>
+    </el-col>
+  </el-row>
 </template>
 
 <script>
 import VideoCard from '@/components/card/VideoCard'
-import { getUserCollection, deleteVideoCollection, eraseVideoCollection } from "@/api/collect";
+import {
+  deleteVideoCollection,
+  eraseVideoCollection,
+  getUserFavlist,
+  getFavlist
+} from "@/api/collect";
+import {collectImage} from "@/api/image";
 
 export default {
   name: 'Collection',
   components: { VideoCard },
   data() {
     return {
+      navList: [],
       // 屏幕宽度, 为了控制分页条的大小
       screenWidth: document.body.clientWidth,
       currentPage: 1,
       pageSize: 12,
       totalSize: 0,
       dataList: [],
+      favlist: null,
+      contentType: 1001,
+    }
+  },
+  watch: {
+    $route(){
+      this.$router.go()
     }
   },
   created() {
+    const myfavlist = localStorage.getItem('myfavlist')
+    if (myfavlist !== undefined) {
+      const myfavlist1 = JSON.parse(myfavlist)
+      this.navList = []
+      for (const item of myfavlist1) {
+        this.navList.push(item)
+      }
+    } else {
+      this.getUserFavlistWrapper()
+    }
+
+    const page = this.$route.query.page
+    if (page !== undefined) {
+      this.currentPage = parseInt(page)
+    }
+
+    const type = this.$route.query.contentType
+    if (type !== undefined) {
+      this.contentType = parseInt(type)
+    }
+
+    this.favlistId = this.$route.query.favlistId
+    if (this.favlistId === undefined) {
+      this.$router.push(this.navList[0].path)
+    } else {
+      this.getFavlistWrapper(this.favlistId, this.contentType, this.currentPage)
+    }
+
     document.title = '我的收藏夹'
-    this.getUserCollectionWrapper(this.currentPage)
   },
   methods: {
     handleCurrentChange(pageNumber) {
       this.currentPage = pageNumber
       this.dataList = []
-      this.getUserCollectionWrapper(this.currentPage)
       // 回到顶部
       scrollTo(0, 0)
     },
-    getUserCollectionWrapper(pageNumber) {
-      getUserCollection(pageNumber).then(res => {
-        if (res.code === 0) {
-          const resData = res.data
-          this.dataList = resData.list
-          this.totalSize = resData.totalSize
+    getFavlistWrapper(favlistId, conentType, page) {
+      getFavlist(favlistId, conentType, page).then(resp => {
+        if (resp.code === 0) {
+          const respData = resp.data
+          this.dataList = respData.list
+          this.totalSize = respData.totalSize
+        }
+      })
+    },
+    getUserFavlistWrapper() {
+      getUserFavlist().then(resp => {
+        if (resp.code === 0) {
+          const respData = resp.data
+          this.navList = []
+          for (const item of respData) {
+            const contentType = item.contentType
+            if (contentType === 1001) {
+              this.navList.push({
+                path: '/u/favlist?favlistId=' + item.favlistId + '&contentType=' + contentType + '&page=1',
+                name: item.favlistName,
+                icon: 'el-icon-picture' })
+            } else if (contentType === 1002) {
+              this.navList.push({
+                path: '/u/favlist?favlistId=' + item.favlistId + '&contentType=' + contentType + '&page=1',
+                name: item.favlistName,
+                icon: 'el-icon-film' })
+            } else if (contentType === 1003) {
+              this.navList.push({
+                path: '/u/favlist?favlistId=' + item.favlistId + '&contentType=' + contentType + '&page=1',
+                name: item.favlistName,
+                icon: 'el-icon-headset' })
+            } else if (contentType === 1004) {
+              this.navList.push({
+                path: '/u/favlist?favlistId=' + item.favlistId + '&contentType=' + contentType + '&page=1',
+                name: item.favlistName,
+                icon: 'el-icon-document' })
+            }
+          }
+
+          localStorage.setItem('myfavlist', JSON.stringify(this.navList))
+        }
+      })
+    },
+    showImages(index) {
+      const imageUrls = []
+      for (const i of this.dataList) {
+        imageUrls.push(i.originalUrl)
+      }
+
+      this.$viewerApi({
+        images: imageUrls,
+        options: {
+          initialViewIndex: index,
+          movable: true,
+          fullscreen: false,
+          keyboard: true
         }
       })
     },
     // 移除单个收藏
-    removeCollection(videoId) {
+    removeCollection() {
       this.$confirm('确认移除吗？', '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning'
       }).then(() => {
-        deleteVideoCollection(videoId).then(res => {
+        deleteVideoCollection(item).then(res => {
           if (res.code === 0) {
             this.$message({
               type: 'success',
@@ -116,6 +242,7 @@ export default {
       })
     },
     removeAll() {
+      console.log(this.favlistId)
       // 移除所有收藏
       this.$confirm('确认移除所有收藏吗？', '提示', {
         confirmButtonText: '确定',
@@ -144,6 +271,40 @@ export default {
 </script>
 
 <style scoped>
+/*处于手机屏幕时*/
+@media screen and (max-width: 768px){
+  .movie-list {
+    padding-top: 8px;
+    padding-left: 0.5%;
+    padding-right: 0.5%;
+  }
+
+  .coverImg {
+    height: 120px !important;
+  }
+}
+
+.movie-list {
+  padding-top: 15px;
+  padding-left: 6%;
+  padding-right: 6%;
+}
+
+.coverImg {
+  width: 100%;
+  height: 320px;
+  display: block;
+}
+
+.card {
+  margin-bottom: 20px;
+  transition: all 0.6s; /*所有属性变化在0.6秒内执行动画*/
+}
+
+.imgs {
+  position: relative;
+}
+
 #collection-list {
   padding-left: 6%;
   padding-right: 6%;