添加一个接口, 用于获取数据展示视频播放器右侧的播放列表

src/api/media/video.js

@@ -11,7 +11,8 @@ const videoApi = {
   videoPostSubmitApi: '/api/media/video/post/submit',
   playerRecordApi: '/api/media/video/play/record',
   userVideoListApi: '/api/media/video/post/user',
-  userRecentlyVideoListApi: '/api/media/video/post/user/recently'
+  userRecentlyVideoListApi: '/api/media/video/post/user/recently',
+  testVideoApi: '/api/media/video/post/display'
 }
 
 // 视频时间线
@@ -66,3 +67,7 @@ export function userVideoList(page, userId) {
 export function userRecentlyVideoList(userId) {
   return $axios.get(videoApi.userRecentlyVideoListApi + '?userId=' + userId)
 }
+
+export function getDisplayedVideoList() {
+  return $axios.get(videoApi.testVideoApi)
+}

src/views/video/video.vue

@@ -26,38 +26,27 @@
             light
           >
             <v-card-title>
-              最近投稿
+              <span>合集 </span>
+              <v-switch
+                v-model="switch1"
+                :label="`自动播放`"
+              />
             </v-card-title>
             <v-virtual-scroll
               :bench="benched"
-              :items="items"
+              :items="videoCollection"
               height="300"
               item-height="64"
             >
               <template v-slot:default="{ item }">
-                <v-list-item :key="item">
-                  <v-list-item-action>
-                    <v-btn
-                      fab
-                      small
-                      depressed
-                      color="primary"
-                    >
-                      {{ item }}
-                    </v-btn>
-                  </v-list-item-action>
-
+                <v-list-item :key="item.videoId">
                   <v-list-item-content>
                     <v-list-item-title>
-                      DB <strong>ID {{ item }}</strong>
+                      <p class="text-over" style="font-size: 15px; margin-bottom: 0px;color: black;">
+                        <router-link :to="`/video/${item.videoId}`" style="color: black;"> {{ item.title }} </router-link>
+                      </p>
                     </v-list-item-title>
                   </v-list-item-content>
-
-                  <v-list-item-action>
-                    <v-icon small>
-                      mdi-open-in-new
-                    </v-icon>
-                  </v-list-item-action>
                 </v-list-item>
                 <v-divider />
               </template>
@@ -71,7 +60,7 @@
         <v-col :cols="colsWidth">
           <v-row>
             <v-col cols="2">
-              <v-btn icon @click="thumbsupVideo">
+              <v-btn icon @click="likeVideo">
                 <v-icon>mdi-thumb-up</v-icon>
                 <span>点赞(10000)</span>
               </v-btn>
@@ -276,11 +265,16 @@
       </v-row>
       <v-row>
         <v-col :cols="colsWidth">
-          <!--          <CommentCard v-if="videoData !== null" :video="videoData" />-->
           <CommentCard v-if="showComment === true" :video="videoData" />
         </v-col>
         <v-col>
-          相关推荐:
+          <v-row>
+            <span>接下来播放: </span>
+            <v-switch
+              v-model="switch1"
+              :label="`自动播放`"
+            />
+          </v-row>
           <v-row no-gutters>
             <v-col
               v-for="item in videoList"
@@ -313,7 +307,7 @@
 </template>
 
 <script>
-import { similarVideo, videoInfo } from '@/api/media/video'
+import { similarVideo, videoInfo, getDisplayedVideoList } 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'
@@ -330,6 +324,7 @@ export default {
   data() {
     return {
       videoList: [],
+      videoCollection: [],
       score: 0,
       TimeUtil,
       videoId: '',
@@ -350,6 +345,7 @@ export default {
       showComment: true,
       vidProp: null,
       benched: 0,
+      switch1: true,
       showMessage: false,
       message: ''
     }
@@ -359,7 +355,7 @@ export default {
       return Array.from({ length: this.length }, (k, v) => v + 1)
     },
     length() {
-      return 100
+      return 10
     }
   },
   created() {
@@ -369,6 +365,7 @@ export default {
     this.getVideoInfo(this.videoId)
     this.onResize()
     this.getSimilarVideos(this.videoId)
+    this.getDisplayedVideoListWrapper()
   },
   mounted() {
   },
@@ -418,10 +415,23 @@ export default {
           console.error(error.message)
         })
     },
+    getDisplayedVideoListWrapper() {
+      getDisplayedVideoList()
+        .then(res => {
+          if (res.code === 0) {
+            this.videoCollection = res.data
+          } else {
+            console.error(res.msg)
+          }
+        })
+        .catch(error => {
+          console.error(error.message)
+        })
+    },
     followingUser() {
       console.log('关注 UP 主')
     },
-    thumbsupVideo() {
+    likeVideo() {
       console.log('点赞 ' + this.videoId)
     },
     collectVideoWrapper() {