更新用户历史记录页面

src/api/visit.js

@@ -11,6 +11,6 @@ export function collectVideo(data) {
 }
 
 // 获取用户收藏
-export function getVisitRecord(pageNumber) {
-  return get(visitApi.visitRecordApi + '?pageNumber=' + pageNumber)
+export function getVisitRecord(nextId) {
+  return get(visitApi.visitRecordApi + '?nextId=' + nextId)
 }

src/views/user/History.vue

@@ -21,13 +21,21 @@
         >一键清空历史</el-button>
       </el-col>
       <el-col :md="8">
-        <el-timeline :reverse="reverse">
+        <el-timeline :reverse="reverse" v-infinite-scroll="load">
           <el-timeline-item
             v-for="(record, index) in visitList"
             :key="index"
             :timestamp="record.createAt"
           >
             <video-card :video="record"></video-card>
+            <el-button
+              type="danger"
+              icon="el-icon-delete"
+              circle
+              size="small"
+              title="移除该历史记录"
+              @click.stop="removeHistory(record.videoId)"
+            />
           </el-timeline-item>
         </el-timeline>
       </el-col>
@@ -38,23 +46,19 @@
         <div>你还没有看过任何东西呢</div>
       </el-col>
     </el-row>
-
-    <el-row 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
-            slot="remove"
-            class="remove-slot"
-            type="danger"
-            icon="el-icon-delete"
-            circle
-            size="small"
-            title="移除该历史记录"
-            @click.stop="removeHistory(video)"
-          />
-        </video-card>
+        <video-card :video="video" date-tit="上次播放："/>
+        <el-button
+          type="danger"
+          icon="el-icon-delete"
+          circle
+          size="small"
+          title="移除该历史记录"
+          @click.stop="removeHistory(video)"
+        />
       </el-col>
-    </el-row>
+    </el-row>-->
   </div>
 </template>
 
@@ -71,27 +75,47 @@ export default {
       uid: 11011,
       reverse: false,
       totalSize: 0,
+      nextId: 0,
       visitList: []
     }
   },
   created() {
     document.title = '我的历史记录'
 
-    getVisitRecord(1).then(res => {
+    /*getVisitRecord(1).then(res => {
       if (res.code === 0) {
-        this.totalSize = res.data.totalSize
-        this.visitList = res.data.list
+        const resData = res.data
+        this.totalSize = resData.totalSize
+        this.visitList = resData.list
+        this.nextId = resData.nextId
       }
-    })
+    })*/
+    this.getVisitRecordWrapper(this.nextId)
   },
   methods: {
+    load() {
+      setTimeout(() => {
+        this.getVisitRecordWrapper(this.nextId)
+      }, 1000)
+    },
+    getVisitRecordWrapper(nextId) {
+      getVisitRecord(nextId).then(res => {
+        if (res.code === 0) {
+          const resData = res.data
+          this.totalSize = resData.totalSize
+          this.visitList = resData.list
+          this.nextId = resData.nextId
+        }
+      })
+    },
     // 清除当前历史记录
-    removeHistory(video) {
+    removeHistory(videoId) {
       this.$confirm('确认移除吗？', '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning'
       }).then(() => {
+        console.log('删除 ' + videoId + ' 这条记录')
         // 确认
         /* deleteHistory(this.uid, video.vid).then(res => {
           // 将要删除的当前video对象移除数组
@@ -121,6 +145,8 @@ export default {
         cancelButtonText: '取消',
         type: 'warning'
       }).then(() => {
+        console.log('删除全部记录')
+
         const arr = []
         for (const i of this.videos) {
           arr.push(i.vid)