开发视频收藏功能

src/api/media/collection.js

@@ -0,0 +1,16 @@
+import $axios from '../index'
+
+const videoApi = {
+  videoCollectApi: '/api/media/video/collect',
+  videoCollectionApi: '/api/media/video/collection'
+}
+
+// 收藏视频
+export function collectVideo(data) {
+  return $axios.post(videoApi.videoCollectApi, data)
+}
+
+// 返回收藏的视频
+export function videoCollection(page) {
+  return $axios.get(videoApi.videoCollectionApi + '?page=' + page)
+}

src/components/card/collection-card.vue

@@ -0,0 +1,45 @@
+<template>
+  <div style="width: 240px; height: 180px">
+    <router-link :to="`/video/${videoInfo.videoId}`">
+      <div style="position: relative;">
+        <v-img
+          :src="videoInfo.coverUrl"
+          outlined
+          aspect-ratio="1.77"
+        />
+        <span style="position: absolute; bottom: 0; right: 0; color:red">{{ videoInfo.duration }}</span>
+      </div>
+    </router-link>
+    <v-row>
+      <v-col cols="10">
+        <p style="font-size: 15px; margin-bottom: 0px;color: black;">
+          <router-link :to="`/video/${videoInfo.videoId}`" style="color: black;"> {{ videoInfo.title }} </router-link>
+        </p>
+      </v-col>
+    </v-row>
+  </div>
+</template>
+
+<script>
+import TimeUtil from '@/utils/time-util.vue'
+export default {
+  name: 'CollectionCard',
+  props: {
+    video: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  data() {
+    return {
+      TimeUtil,
+      videoInfo: this.video
+    }
+  },
+  created() {
+  }
+}
+</script>
+
+<style>
+</style>

src/views/user/favlist.vue

@@ -1,15 +1,80 @@
 <template>
-  <div>
-    收藏列表
-  </div>
+  <v-container>
+    <v-row>
+      <p>收藏列表</p>
+    </v-row>
+    <v-row>
+      <v-col
+        v-for="item in cardList"
+        :key="item.videoId"
+      >
+        <collection-card :video="item" />
+      </v-col>
+    </v-row>
+    <v-row justify="center">
+      <v-pagination
+        v-model="page"
+        :length="length"
+        :total-visible="7"
+        @input="pageChange"
+      />
+    </v-row>
+  </v-container>
 </template>
 
 <script>
+import { videoCollection } from '@/api/media/collection'
+import CollectionCard from '@/components/card/collection-card.vue'
+
 export default {
-  name: 'UserFavlist'
+  components: {
+    CollectionCard
+  },
+  data() {
+    return {
+      userId: 0,
+      cardList: [],
+      currentPage: 1,
+      page: 1,
+      length: 0,
+      type: 0
+    }
+  },
+  created() {
+    this.videoCollectionWrapper(this.page)
+  },
+  methods: {
+    videoCollectionWrapper(page) {
+      videoCollection(page, this.userId).then(res => {
+        if (res.code === 0) {
+          this.$vuetify.goTo(0)
+
+          const pageList = res.data
+          this.cardList.splice(0, this.cardList.length)
+          for (const item of pageList.list) {
+            this.cardList.push(item)
+          }
+          this.currentPage = pageList.currentPage
+          this.length = pageList.totalPages
+        } else {
+          alert(res.data)
+        }
+      }).catch(error => {
+        console.error(error.message)
+      })
+    },
+    pageChange(page) {
+      this.page = page
+      if (page !== this.currentPage) {
+        this.getVideoList(page)
+      }
+    }
+  }
 }
 </script>
 
-<style>
-
+<style scoped>
+a {
+  text-decoration: none;
+}
 </style>

src/views/video/video.vue

@@ -77,7 +77,7 @@
               </v-btn>
             </v-col>
             <v-col cols="2">
-              <v-btn icon @click="collectVideo">
+              <v-btn icon @click="collectVideoWrapper">
                 <v-icon>mdi-bookmark</v-icon>
                 <span>收藏(10000)</span>
               </v-btn>
@@ -292,11 +292,29 @@
         </v-col>
       </v-row>
     </v-container>
+    <v-snackbar
+      v-model="showMessage"
+      :top="true"
+      :timeout="1000"
+    >
+      {{ message }}
+      <template v-slot:action="{ attrs }">
+        <v-btn
+          color="pink"
+          text
+          v-bind="attrs"
+          @click="showMessage = false"
+        >
+          关闭
+        </v-btn>
+      </template>
+    </v-snackbar>
   </div>
 </template>
 
 <script>
 import { similarVideo, videoInfo } from '@/api/media/video'
+import { collectVideo } from '@/api/media/collection'
 import ItemCard from '@/components/card/item-card.vue'
 import CommentCard from '@/components/card/comment-card.vue'
 import VideoPlayer from '@/components/player/player.vue'
@@ -331,7 +349,9 @@ export default {
       },
       showComment: true,
       vidProp: null,
-      benched: 0
+      benched: 0,
+      showMessage: false,
+      message: ''
     }
   },
   computed: {
@@ -404,8 +424,22 @@ export default {
     thumbsupVideo() {
       console.log('点赞 ' + this.videoId)
     },
-    collectVideo() {
-      console.log('收藏 ' + this.videoId)
+    collectVideoWrapper() {
+      const obj = {}
+      obj.videoId = this.videoId
+      collectVideo(obj)
+        .then(res => {
+          if (res.code === 0) {
+            this.showMessage = true
+            this.message = '已收藏'
+          } else {
+            this.showMessage = true
+            this.message = res.msg
+          }
+        })
+        .catch(error => {
+          console.error(error.message)
+        })
     },
     jumpToTagPage(value) {
       console.log('跳转到标签页: ' + value)