更新收藏和历史记录页面

src/api/collect.js

@@ -0,0 +1,16 @@
+import { get, post } from '@/utils/request'
+
+const collectApi = {
+  collectVideoApi: '/api/content/collect/video',
+  userCollectionApi: '/api/content/collect/video',
+}
+
+// 添加收藏
+export function collectVideo(data) {
+  return post(collectApi.collectVideoApi, data)
+}
+
+// 获取用户收藏
+export function getUserCollection() {
+  return get(collectApi.userCollectionApi)
+}

src/api/visit.js

@@ -0,0 +1,16 @@
+import { get, post } from '@/utils/request'
+
+const visitApi = {
+  collectVideoApi: '/api/content/visit/video',
+  visitRecordApi: '/api/content/visit/video',
+}
+
+// 添加收藏
+export function collectVideo(data) {
+  return post(visitApi.collectVideoApi, data)
+}
+
+// 获取用户收藏
+export function getVisitRecord(pageNumber) {
+  return get(visitApi.visitRecordApi + '?pageNumber=' + pageNumber)
+}

src/views/user/Collection.vue

@@ -7,12 +7,21 @@
       separator-class="el-icon-arrow-right"
     >
       <el-breadcrumb-item :to="{ path: '' }"><a href="/">返回首页</a></el-breadcrumb-item>
-      <el-breadcrumb-item>我的收藏：共<span class="reslut">({{ videos.length }}}</span>条</el-breadcrumb-item>
+      <el-breadcrumb-item>我的收藏：共<span class="reslut">({{ videoList.length }}}</span>条</el-breadcrumb-item>
     </el-breadcrumb>
 
-    <el-row v-if="videos.length !== 0" class="movie-list">
-      <el-col v-for="(video,index) in videos" :key="index" :md="6" :sm="8" :xs="12">
-        <video-card :video="video" date-tit="收藏时间：">
+    <el-row v-if="videoList.length !== 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 videoList" :key="index" :md="6" :sm="8" :xs="12">
+        <video-card :video="video">
           <el-button
             slot="remove"
             class="remove-slot"
@@ -25,18 +34,7 @@
           />
         </video-card>
       </el-col>
-      <el-col style="text-align: center">
-        <el-button
-          type="danger"
-          icon="el-icon-delete"
-          round
-          title="一键清空"
-          @click="removeAll"
-        >一键清空</el-button>
-      </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">
@@ -48,17 +46,25 @@
 
 <script>
 import VideoCard from '@/components/card/VideoCard'
+import { getUserCollection } from "@/api/collect";
 
 export default {
   name: 'Collection',
   components: { VideoCard },
   data() {
     return {
-      videos: [],
+      videoList: [],
       uid: 11011
     }
   },
   created() {
+    document.title = '我的收藏夹'
+    getUserCollection().then(res => {
+      if (res.code === 0) {
+        this.videoList = res.data.list
+      }
+    })
+
     // 获取当前用户
     if (this.uid) {
       /* getCollectionByUid(this.uid).then(res => {
@@ -67,7 +73,7 @@ export default {
           i.releasetime = getDate(i.releasetime)
           // console.log(getDate(i.releasetime));
         }
-        this.videos = res
+        this.videoList = res
       })*/
     }
   },
@@ -84,9 +90,9 @@ export default {
           // console.log(res);
           // 将要删除的当前video对象移除数组
           // 获取下标
-          const index = this.videos.indexOf(video)
+          const index = this.videoList.indexOf(video)
           if (index > -1) {
-            this.videos.splice(index, 1)
+            this.videoList.splice(index, 1)
           }
         })*/
 
@@ -109,14 +115,14 @@ export default {
         type: 'warning'
       }).then(() => {
         const arr = []
-        for (const i of this.videos) {
+        for (const i of this.videoList) {
           arr.push(i.vid)
         }
         // const vidStr = arr.join(',')
         // console.log(vidStr);
         // 确认
         /* removeCollection(this.uid, vidStr).then(res => {
-          this.videos = []
+          this.videoList = []
         })*/
 
         this.$message({
@@ -130,7 +136,6 @@ export default {
         })
       })
     }
-
   }
 }
 </script>

src/views/user/History.vue

@@ -7,22 +7,39 @@
       separator-class="el-icon-arrow-right"
     >
       <el-breadcrumb-item :to="{ path: '' }"><a href="/">返回首页</a></el-breadcrumb-item>
-      <el-breadcrumb-item>播放历史记录：共<span class="reslut">({{ videos.length }}}</span>条</el-breadcrumb-item>
+      <el-breadcrumb-item>播放历史记录：共<span class="reslut">({{ totalSize }}}</span>条</el-breadcrumb-item>
     </el-breadcrumb>
 
-    <el-row>
-      <el-timeline :reverse="reverse">
-        <el-timeline-item
-          v-for="(activity, index) in activities"
-          :key="index"
-          :timestamp="activity.timestamp"
-        >
-          {{ activity.content }}
-        </el-timeline-item>
-      </el-timeline>
+    <el-row v-if="visitList.length !== 0" class="movie-list">
+      <el-col style="text-align: center">
+        <el-button
+          type="danger"
+          icon="el-icon-delete"
+          round
+          title="一键清空历史"
+          @click="removeAll"
+        >一键清空历史</el-button>
+      </el-col>
+      <el-col :md="8">
+        <el-timeline :reverse="reverse">
+          <el-timeline-item
+            v-for="(record, index) in visitList"
+            :key="index"
+            :timestamp="record.createAt"
+          >
+            <video-card :video="record"></video-card>
+          </el-timeline-item>
+        </el-timeline>
+      </el-col>
+    </el-row>
+    <el-row v-else class="not-result">
+      <el-col :span="12" :offset="6">
+        <img src="@/assets/img/icon/not-history.png">
+        <div>无播放历史</div>
+      </el-col>
     </el-row>
 
-    <el-row v-if="videos.length !== 0" class="movie-list">
+    <el-row class="movie-list">
       <el-col v-for="(video,index) in videos" :key="index" :md="6" :sm="8" :xs="12">
         <video-card :video="video" date-tit="上次播放：">
           <el-button
@@ -37,28 +54,13 @@
           />
         </video-card>
       </el-col>
-      <el-col style="text-align: center">
-        <el-button
-          type="danger"
-          icon="el-icon-delete"
-          round
-          title="一键清空历史"
-          @click="removeAll"
-        >一键清空历史</el-button>
-      </el-col>
-
-    </el-row>
-    <el-row v-else class="not-result">
-      <el-col :span="12" :offset="6">
-        <img src="@/assets/img/icon/not-history.png">
-        <div>无播放历史</div>
-      </el-col>
     </el-row>
   </div>
 </template>
 
 <script>
 import VideoCard from '@/components/card/VideoCard'
+import { getVisitRecord } from "@/api/visit";
 
 export default {
   name: 'History',
@@ -67,31 +69,20 @@ export default {
     return {
       videos: [],
       uid: 11011,
-      reverse: true,
-      activities: [{
-        content: '活动按期开始',
-        timestamp: '2018-04-15'
-      }, {
-        content: '通过审核',
-        timestamp: '2018-04-13'
-      }, {
-        content: '创建成功',
-        timestamp: '2018-04-11'
-      }]
+      reverse: false,
+      totalSize: 0,
+      visitList: []
     }
   },
   created() {
-    if (this.uid) {
-      // 加载当前用户播放的历史记录
-      /* getHistoryByUid(this.uid).then(res => {
-        for (const i of res) {
-          // 时间转换
-          i.releasetime = getDate(i.releasetime)
-          // console.log(getDate(i.releasetime));
-        }
-        this.videos = res
-      })*/
-    }
+    document.title = '我的历史记录'
+
+    getVisitRecord(1).then(res => {
+      if (res.code === 0) {
+        this.totalSize = res.data.totalSize
+        this.visitList = res.data.list
+      }
+    })
   },
   methods: {
     // 清除当前历史记录