update

src/api/media/video.js

@@ -46,6 +46,6 @@ export function submitPlayRecord(playerRecord) {
 }
 
 // 用户视频列表
-export function userVideoList(userId) {
-  return $axios.get(videoApi.userVideoListApi + '?page=1' + '&userId=' + userId)
+export function userVideoList(page, userId) {
+  return $axios.get(videoApi.userVideoListApi + '?page=' + page + '&userId=' + userId)
 }

src/components/player/player.vue

@@ -305,19 +305,27 @@ export default {
     },
     initDashPlayer(videoId, coverUrl, videoUrl) {
       console.log('初始化 dash 播放器')
-      const dp = new DPlayer({
+      const player = new DPlayer({
         container: document.getElementById('dplayer'),
         video: {
           url: videoUrl,
           type: 'dash'
-        },
-        pluginOptions: {
-          dash: {
-            // dash config
-          }
         }
       })
-      console.log(dp.plugins.dash)
+      console.log('dash 播放器初始化完成')
+
+      player.on('play', function() {
+        if (this.playRecord == null) {
+          return
+        }
+
+        this.playRecord.currentTime = player.video.currentTime
+        submitPlayRecord(this.playRecord)
+          .then(res => {
+          }).catch(error => {
+            console.error(error.message)
+          })
+      })
     },
     initFlvPlayer(videoId, coverUrl, videoUrl) {
       console.log('初始化 flv 播放器')

src/layout/components/head.vue

@@ -47,7 +47,6 @@ export default {
       userInfo: {},
       headItem: [
         { icon: 'mdi-account', text: '个人中心', link: '/user/my', id: 0 },
-        { icon: 'mdi-application', text: '稍后再看', link: '/user/my/playlist', id: 1 },
         { icon: 'mdi-application', text: '收藏列表', link: '/user/my/favlist', id: 2 },
         { icon: 'mdi-application', text: '历史记录', link: '/user/my/hislist', id: 3 },
         { icon: 'mdi-application', text: '创作中心', link: '/studio', id: 4 },

src/router/index.js

@@ -145,13 +145,6 @@ const routes = [
             meta: { title: '收藏列表',
               requireAuth: true }
           },
-          {
-            path: '/user/playlist',
-            name: 'UserPlaylist',
-            component: () => import('@/views/user/playlist.vue'),
-            meta: { title: '稍后再看',
-              requireAuth: true }
-          },
           {
             path: '/user/hislist',
             name: 'UserHislist',
@@ -313,12 +306,6 @@ const routes = [
         component: () => import('@/views/home/zhihu.vue'),
         meta: { title: 'HerTube 知乎' }
       },
-      {
-        path: '/playlist',
-        name: 'Playlist',
-        component: () => import('@/views/home/playlist.vue'),
-        meta: { title: 'HerTube 稍后再看' }
-      },
       {
         path: '/search/result',
         name: 'SearchResult',

src/views/user/home.vue

@@ -18,10 +18,10 @@
           </v-avatar>
           <h2 style="margin-top: 20px;margin-left: 100px;">
             {{ userInfo.username }}
-            <v-chip color="yellow" @click="goToVip()">
-              <!--<v-chip v-if="Power.checkPower(userInfo) === 'vip'" color="yellow" @click="goTOVIP()">-->
+            <!--<v-chip color="yellow" @click="goToVip()">
+              <v-chip v-if="Power.checkPower(userInfo) === 'vip'" color="yellow" @click="goTOVIP()">
               小会员
-            </v-chip>
+            </v-chip>-->
           </h2>
         </v-col>
         <v-col
@@ -31,7 +31,7 @@
           class="hidden-sm-and-down ml-0 pl-4"
         >
           <!--<v-btn color="primary" @click="goToSetting">自定义频道</v-btn> <v-btn color="primary" @click="goToStudio">创作中心</v-btn>-->
-          <v-btn color="primary">关注他</v-btn>
+          <v-btn color="primary" @click="followUser">关注TA</v-btn>
         </v-col>
       </v-row>
       <v-row>
@@ -95,7 +95,6 @@
           v-for="item in videoList"
           :key="item.id"
         >
-          <!--<VideoList :video="item" />-->
           <ItemCard :item="item" />
         </v-col>
       </v-row>
@@ -103,6 +102,7 @@
         <v-pagination
           v-model="page"
           :length="length"
+          :total-visible="7"
           @input="pageChange"
         />
       </v-row>
@@ -131,6 +131,7 @@ export default {
       userInfo: {},
       videoList: [],
       page: 1,
+      currentPage: 1,
       size: 20,
       length: 1,
       totalCount: 0,
@@ -149,7 +150,12 @@ export default {
       this.userId = parseInt(userIdStr)
       this.getUserInfo(this.userId)
     }
-    this.getVideoList()
+
+    const jumpPage = this.$route.query.page
+    if (jumpPage !== undefined) {
+      this.page = parseInt(jumpPage)
+    }
+    this.getVideoList(this.page, this.userId)
   },
   methods: {
     getUserInfo(userId) {
@@ -167,14 +173,15 @@ export default {
     getStatusList() {
       console.log('获取状态列表')
     },
-    getVideoList() {
-      userVideoList(this.userId).then(res => {
+    getVideoList(page) {
+      userVideoList(page, this.userId).then(res => {
         if (res.code === 0) {
-          for (const item of res.data.list) {
+          const pageList = res.data
+          for (const item of pageList.list) {
             this.videoList.push(item)
           }
-          this.page += 1
-          this.busy = false
+          this.currentPage = pageList.currentPage
+          this.length = pageList.totalPages
         } else {
           alert(res.data)
         }
@@ -187,8 +194,15 @@ export default {
     },
     pageChange(page) {
       this.page = page
-      this.getVideoList(this.type)
-      this.$vuetify.goTo(0)
+      if (page !== this.currentPage) {
+        this.currentPage = page
+        this.$router.push({
+          path: this.$route.path,
+          query: {
+            page: page
+          }
+        })
+      }
     },
     setType(type) {
       if (type === this.type) {
@@ -198,7 +212,7 @@ export default {
       this.type = type
       this.page = 1
       if (type === 0) {
-        this.getVideoList()
+        this.getVideoList(1)
         this.$vuetify.goTo(type)
       } else if (type === 1) {
         this.getStatusList()
@@ -216,6 +230,9 @@ export default {
     },
     goToSetting() {
       this.$router.push('/user/account')
+    },
+    followUser() {
+      console.log('关注用户')
     }
   }
 }

src/views/user/userindex.vue

@@ -56,7 +56,6 @@ export default {
       { icon: 'mdi-wrench', text: '个人主页', link: '/user/home' },
       { icon: 'mdi-wrench', text: '账户设置', link: '/user/account' },
       { icon: 'mdi-account-multiple', text: '收藏列表', link: '/user/favlist' },
-      { icon: 'mdi-account-multiple', text: '稍后再看', link: '/user/playlist' },
       { icon: 'mdi-account-multiple', text: '历史记录', link: '/user/hislist' },
       { icon: 'mdi-account-multiple', text: '关注管理', link: '/user/follow' },
       { icon: 'mdi-account-multiple', text: '小会员', link: '/user/vip' },

src/views/video/video.vue

@@ -1,8 +1,24 @@
 <template>
   <div>
-    <v-container fill-height fluid style="padding-bottom: 0px;">
+    <v-container>
+      <v-col>
+        <v-row>
+          <v-col>
+            <h3 v-text="videoData.title" />
+          </v-col>
+        </v-row>
+        <v-row>
+          <v-col style="color: #999;font-size: 12px;padding-top: 0px;">
+            <span v-html="'&nbsp;&nbsp;&nbsp;&nbsp;'" />
+            <span v-text="videoData.viewCount" /> 次观看 <span v-html="'&nbsp;&nbsp;&nbsp;&nbsp;'" />
+            <span v-text="TimeUtil.renderTime(videoData.pubDate)" />
+          </v-col>
+        </v-row>
+      </v-col>
+    </v-container>
+    <v-container>
       <v-row>
-        <v-col style="padding-bottom: 0px;">
+        <v-col>
           <VideoPlayer />
         </v-col>
       </v-row>
@@ -11,13 +27,137 @@
       <v-row v-resize="onResize" no-gutters>
         <v-col :cols="colsWidth">
           <v-row>
-            <v-col>
-              <h3 v-text="videoData.title"></h3>
+            <v-col cols="4">
+              <v-btn icon @click="collectVideo">
+                <v-icon>mdi-thumb-up</v-icon>
+                <span v-text="isCollected"></span>
+              </v-btn>
+              <v-dialog
+                  v-model="collectionDialog"
+                  persistent
+                  max-width="600px"
+              >
+                <v-card>
+                  <v-card-title>
+                    <span class="text-h5">问题或建议</span>
+                  </v-card-title>
+                  <v-card-text>
+                    <v-container>
+                      <v-row>
+                        <v-col
+                            cols="12"
+                            sm="6"
+                        >
+                          <v-select
+                              :items="['视频封面', '视频播放', '视频内容']"
+                              label="问题分类"
+                              required
+                          />
+                        </v-col>
+                        <v-col
+                            cols="24"
+                            sm="6"
+                            md="4"
+                        >
+                          <v-text-field
+                              label="问题或建议"
+                              required
+                          />
+                        </v-col>
+                      </v-row>
+                    </v-container>
+                  </v-card-text>
+                  <v-card-actions>
+                    <v-spacer />
+                    <v-btn
+                        color="blue darken-1"
+                        text
+                        @click="collectionDialog = false"
+                    >
+                      关闭
+                    </v-btn>
+                    <v-btn
+                        color="blue darken-1"
+                        text
+                        @click="collectVideo"
+                    >
+                      提交
+                    </v-btn>
+                  </v-card-actions>
+                </v-card>
+              </v-dialog>
+
+            </v-col>
+
+            <v-col cols="4">
+              <v-btn icon @click="showErrDialog">
+                <v-icon>mdi-thumb-up</v-icon>
+                <span>反馈</span>
+              </v-btn>
+              <v-dialog
+                  v-model="showDialog"
+                  persistent
+                  max-width="600px"
+              >
+                <v-card>
+                  <v-card-title>
+                    <span class="text-h5">问题或建议</span>
+                  </v-card-title>
+                  <v-card-text>
+                    <v-container>
+                      <v-row>
+                        <v-col
+                            cols="12"
+                            sm="6"
+                        >
+                          <v-select
+                              :items="['视频封面', '视频播放', '视频内容']"
+                              label="问题分类"
+                              required
+                          />
+                        </v-col>
+                        <v-col
+                            cols="24"
+                            sm="6"
+                            md="4"
+                        >
+                          <v-text-field
+                              label="问题或建议"
+                              required
+                          />
+                        </v-col>
+                      </v-row>
+                    </v-container>
+                  </v-card-text>
+                  <v-card-actions>
+                    <v-spacer />
+                    <v-btn
+                        color="blue darken-1"
+                        text
+                        @click="showDialog = false"
+                    >
+                      关闭
+                    </v-btn>
+                    <v-btn
+                        color="blue darken-1"
+                        text
+                        @click="submitVideoErr"
+                    >
+                      提交
+                    </v-btn>
+                  </v-card-actions>
+                </v-card>
+              </v-dialog>
             </v-col>
           </v-row>
-          <v-row>
+          <!--<v-row>
+            <v-col>
+              <h3 v-text="videoData.title" />
+            </v-col>
+          </v-row>-->
+          <!--<v-row>
             <v-col style="color: #999;font-size: 12px;padding-top: 0px;">
-              <!--
+              &lt;!&ndash;
               TODO 视频分类待完成
               <router-link v-if="videoData.childrenCategory.fatherId !== 0" :to="`/v/${videoData.fatherCategory.id}`" class="category-link">
                 <span v-text="videoData.fatherCategory.name" />
@@ -25,12 +165,12 @@
               /
               <router-link :to="`/v/${videoData.childrenCategory.id}`" class="category-link">
                 <span v-text="videoData.childrenCategory.name" />
-              </router-link>-->
-              <span v-html="'&nbsp;&nbsp;&nbsp;&nbsp;'"></span>
-              <span v-text="videoData.viewCount"></span> 次观看 <span v-html="'&nbsp;&nbsp;&nbsp;&nbsp;'" />
-              <span v-text="TimeUtil.renderTime(videoData.pubDate)"></span>
+              </router-link>&ndash;&gt;
+              <span v-html="'&nbsp;&nbsp;&nbsp;&nbsp;'" />
+              <span v-text="videoData.viewCount" /> 次观看 <span v-html="'&nbsp;&nbsp;&nbsp;&nbsp;'" />
+              <span v-text="TimeUtil.renderTime(videoData.pubDate)" />
             </v-col>
-          </v-row>
+          </v-row>-->
           <v-divider />
           <v-row>
             <v-col>
@@ -57,40 +197,17 @@
             </v-col>
             <v-col>
               <router-link :to="`/u/${videoData.userId}`">
-                <span v-text="videoData.username"></span>
+                <span v-text="videoData.username" />
               </router-link>
-              <span v-html="'&nbsp;&nbsp;&nbsp;&nbsp;'"></span>
+              <span v-html="'&nbsp;&nbsp;&nbsp;&nbsp;'" />
               <v-btn small outlined color="primary">
                 <span>关注</span>
-                <span v-html="'&nbsp;&nbsp;'"></span>
-                <span v-text="videoData.followerCount"></span>
+                <span v-html="'&nbsp;&nbsp;'" />
+                <span v-text="videoData.followerCount" />
               </v-btn>
             </v-col>
           </v-row>
         </v-col>
-        <v-col cols="4">
-          <v-btn icon @click="showErrDialog">
-            <v-icon>mdi-thumb-up</v-icon>
-            <span>问题或建议</span>
-          </v-btn>
-
-          <v-dialog v-model="showDialog" max-width="500" persistent>
-            <v-card>
-              <v-toolbar dense dark color="primary">
-                <v-toolbar-title>视频问题或建议</v-toolbar-title>
-              </v-toolbar>
-
-              <form @submit.prevent="submitVideoErr">
-                <v-textarea
-                  placeholder="问题或建议"
-                  rows="2"
-                  :no-resize="true"
-                />
-                <button type="submit"><span>提交</span></button>
-              </form>
-            </v-card>
-          </v-dialog>
-        </v-col>
       </v-row>
       <v-row>
         <v-col :cols="colsWidth">
@@ -137,7 +254,9 @@ export default {
       },
       colsWidth: 8,
       showDialog: false,
-      formData: {}
+      formData: {},
+      collectionDialog: false,
+      isCollected: '收藏'
     }
   },
   created() {
@@ -178,7 +297,7 @@ export default {
       similarVideo(videoId)
         .then(res => {
           if (res.code === 0) {
-            this.videoList = res.data.list
+            this.videoList = res.data
           } else {
             console.error(res.msg)
           }
@@ -190,9 +309,13 @@ export default {
     showErrDialog() {
       this.showDialog = true
     },
+    collectVideo() {
+      this.collectionDialog = false
+      console.log('收藏 ' + this.videoId)
+    },
     submitVideoErr() {
-      console.log('提交视频错误')
       this.showDialog = false
+      console.log('提交视频错误')
     }
   }
 }