视频历史记录功能

src/api/media/collection.js

@@ -2,7 +2,8 @@ import $axios from '../index'
 
 const videoApi = {
   videoCollectApi: '/api/media/video/collect',
-  videoCollectionApi: '/api/media/video/collection'
+  videoCollectionApi: '/api/media/video/collection',
+  videoRecordApi: '/api/media/video/play/record'
 }
 
 // 收藏视频
@@ -14,3 +15,8 @@ export function collectVideo(data) {
 export function videoCollection(page) {
   return $axios.get(videoApi.videoCollectionApi + '?page=' + page)
 }
+
+// 返回视频播放记录
+export function videoRecord(page) {
+  return $axios.get(videoApi.videoRecordApi + '?page=' + page)
+}

src/components/card/history-card.vue

@@ -1,27 +1,33 @@
 <template>
-  <v-row>
-    <v-col cols="3">
-      <router-link :to="`/video/${video.articleEntity.id}`">
-        <v-img :src="video.articleEntity.imgUrl" aspect-ratio="1.77" max-width="400" />
-      </router-link>
-    </v-col>
-    <v-col>
-      <v-row>
-        <router-link :to="`/video/${video.articleEntity.id}`">
-          <h3>{{ video.articleEntity.title }}</h3>
+  <div style="width: 320px">
+    <router-link :to="`/video/${videoInfo.videoId}`">
+      <div style="position: relative; width: 320px; height: 180px;">
+        <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="2">
+        <router-link :to="`/u/${videoInfo.userId}`">
+          <v-avatar size="48">
+            <v-img :src="videoInfo.avatarUrl" />
+          </v-avatar>
         </router-link>
-      </v-row>
-      <v-row style="color:#606060;fount-size:12px;">
-        播放时间： {{ TimeUtil.renderTime(video.playRecordingEntity.updateTime) }}
-      </v-row>
-      <v-row style="color:#606060;fount-size:12px;">
-        播放设备： {{ video.playRecordingEntity.ua }}
-      </v-row>
-      <v-row style="color:#606060;fount-size:12px;">
-        {{ video.articleEntity.describes }}
-      </v-row>
-    </v-col>
-  </v-row>
+      </v-col>
+      <v-col cols="10">
+        <p class="text-over" style="font-size: 15px; margin-bottom: 0px;color: black;">
+          <router-link :to="`/video/${videoInfo.videoId}`" style="color: black;"> {{ videoInfo.title }} </router-link>
+        </p>
+        <p style="font-size: 10px; color: #606060;">
+          <router-link :to="`/u/${videoInfo.userId}`"> {{ videoInfo.username }}</router-link>
+        </p>
+      </v-col>
+    </v-row>
+  </div>
 </template>
 
 <script>
@@ -44,5 +50,4 @@ export default {
 </script>
 
 <style>
-
 </style>

src/views/home/history.vue

@@ -87,5 +87,4 @@ export default {
 </script>
 
 <style>
-
 </style>

src/views/user/hislist.vue

@@ -1,15 +1,87 @@
 <template>
   <div>
-    历史记录
+    <v-row>
+      <p>历史记录</p>
+    </v-row>
+    <v-row>
+      <v-timeline
+        align-top
+        dense
+      >
+        <v-timeline-item
+          v-for="item in cardList"
+          :key="item.videoId"
+          color="pink"
+          small
+        >
+          <v-row class="pt-1">
+            <v-col cols="3">
+              <strong>{{ item.createAt }}</strong>
+            </v-col>
+            <v-col>
+              <history-card :video="item" />
+            </v-col>
+          </v-row>
+        </v-timeline-item>
+      </v-timeline>
+    </v-row>
   </div>
 </template>
 
 <script>
+import { videoRecord } from '@/api/media/collection'
+import HistoryCard from '@/components/card/history-card'
+
 export default {
-  name: 'UserHislist'
+  components: {
+    HistoryCard
+  },
+  data() {
+    return {
+      userId: 0,
+      cardList: [],
+      currentPage: 1,
+      page: 1,
+      length: 0,
+      type: 0
+    }
+  },
+  created() {
+    this.videoCollectionWrapper(this.page)
+  },
+  methods: {
+    videoCollectionWrapper(page) {
+      videoRecord(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
+          console.log(this.cardList)
+        } 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>