更新页面

src/components/card/VideoCard.vue

@@ -30,7 +30,7 @@
         </div>
         <div style="padding: 14px">
           <span style="left: 0;margin-bottom: 0px;color: black;">
-            <router-link target="_blank" :to="`/user/${video.user.userId}`"><i class="el-icon-user"> {{ video.user.screenName }} </i></router-link> · {{ video.pubDate }}
+            <router-link target="_blank" :to="`/user/${video.user.userId}`"><i class="el-icon-user"> {{ video.user.screenName }} </i></router-link> · {{ convertTimestamp(video.pubDate) }}
           </span>
         </div>
       </el-card>
@@ -67,6 +67,23 @@ export default {
   methods: {
     getVisited(visited) {
       return handleVisited(visited)
+    },
+    convertTimestamp(value) {
+      const date = new Date(value)
+      var month = date.getMonth()
+      if (month < 10) {
+        if (month === 0) {
+          month = '01'
+        } else {
+          month = '0' + month
+        }
+      }
+
+      var day = date.getDay()
+      if (day < 10) {
+        day = '0' + day
+      }
+      return month + '-' + day
     }
   }
 }

src/components/categorybtn/CategoryBtn.vue

@@ -1,215 +0,0 @@
-<template>
-  <div id="category-btn">
-    <el-button
-      v-for="(item, index) in videoCategory"
-      :key="index"
-      type="primary"
-      size="medium"
-      :plain="currentIndex != index"
-      circle
-      @click="btnClick(item.cid, index)"
-    >{{ item.cname }}
-    </el-button>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'CategoryBtn',
-  data() {
-    return {
-      currentIndex: 0,
-      // 电影分类
-      videoCategory: [
-        { cname: '电影', cid: 11011 },
-        { cname: '音乐', cid: 11012 },
-        { cname: '新闻', cid: 11013 }
-      ]
-    }
-  },
-  created() {
-    // getCategory().then((res) => (this.videoCategory = res))
-    const pageBean = {
-      totalCount: 20,
-      list: [
-        {
-          vname: '哈哈哈哈哈哈哈哈哈哈哈哈1111111111111111111111111111111111',
-          coverurl: 'https://picx.zhimg.com/v2-ea15e9203a1d95a465a78da043a9315d_xl.jpg',
-          releasetime: '2023-04-24 16:47:00',
-          visited: 10,
-          keyword: '芒果,草莓,西瓜'
-        },
-        {
-          vname: '哈2',
-          coverurl: 'https://picx.zhimg.com/v2-ea15e9203a1d95a465a78da043a9315d_xl.jpg',
-          releasetime: '2023-04-24 16:47:00',
-          visited: 10,
-          keyword: '芒果,草莓,西瓜'
-        },
-        {
-          vname: '哈3',
-          coverurl: 'https://picx.zhimg.com/v2-ea15e9203a1d95a465a78da043a9315d_xl.jpg',
-          releasetime: '2023-04-24 16:47:00',
-          visited: 10,
-          keyword: '芒果,草莓,西瓜'
-        },
-        {
-          vname: '哈4',
-          coverurl: 'https://picx.zhimg.com/v2-ea15e9203a1d95a465a78da043a9315d_xl.jpg',
-          releasetime: '2023-04-24 16:47:00',
-          visited: 10,
-          keyword: '芒果,草莓,西瓜'
-        },
-        {
-          vname: '哈5',
-          coverurl: 'https://picx.zhimg.com/v2-ea15e9203a1d95a465a78da043a9315d_xl.jpg',
-          releasetime: '2023-04-24 16:47:00',
-          visited: 10,
-          keyword: '芒果,草莓,西瓜'
-        },
-        {
-          vname: '哈1',
-          coverurl: 'https://picx.zhimg.com/v2-ea15e9203a1d95a465a78da043a9315d_xl.jpg',
-          releasetime: '2023-04-24 16:47:00',
-          visited: 10,
-          keyword: '芒果,草莓,西瓜'
-        },
-        {
-          vname: '哈2',
-          coverurl: 'https://picx.zhimg.com/v2-ea15e9203a1d95a465a78da043a9315d_xl.jpg',
-          releasetime: '2023-04-24 16:47:00',
-          visited: 10,
-          keyword: '芒果,草莓,西瓜'
-        },
-        {
-          vname: '哈3',
-          coverurl: 'https://picx.zhimg.com/v2-ea15e9203a1d95a465a78da043a9315d_xl.jpg',
-          releasetime: '2023-04-24 16:47:00',
-          visited: 10,
-          keyword: '芒果,草莓,西瓜'
-        },
-        {
-          vname: '哈4',
-          coverurl: 'https://picx.zhimg.com/v2-ea15e9203a1d95a465a78da043a9315d_xl.jpg',
-          releasetime: '2023-04-24 16:47:00',
-          visited: 10,
-          keyword: '芒果,草莓,西瓜'
-        },
-        {
-          vname: '哈5',
-          coverurl: 'https://picx.zhimg.com/v2-ea15e9203a1d95a465a78da043a9315d_xl.jpg',
-          releasetime: '2023-04-24 16:47:00',
-          visited: 10,
-          keyword: '芒果,草莓,西瓜'
-        },
-        {
-          vname: '哈哈哈哈哈哈哈哈哈哈哈哈1111111111111111111111111111111111',
-          coverurl: 'https://picx.zhimg.com/v2-ea15e9203a1d95a465a78da043a9315d_xl.jpg',
-          releasetime: '2023-04-24 16:47:00',
-          visited: 10,
-          keyword: '芒果,草莓,西瓜'
-        },
-        {
-          vname: '哈2',
-          coverurl: 'https://picx.zhimg.com/v2-ea15e9203a1d95a465a78da043a9315d_xl.jpg',
-          releasetime: '2023-04-24 16:47:00',
-          visited: 10,
-          keyword: '芒果,草莓,西瓜'
-        },
-        {
-          vname: '哈3',
-          coverurl: 'https://picx.zhimg.com/v2-ea15e9203a1d95a465a78da043a9315d_xl.jpg',
-          releasetime: '2023-04-24 16:47:00',
-          visited: 10,
-          keyword: '芒果,草莓,西瓜'
-        },
-        {
-          vname: '哈4',
-          coverurl: 'https://picx.zhimg.com/v2-ea15e9203a1d95a465a78da043a9315d_xl.jpg',
-          releasetime: '2023-04-24 16:47:00',
-          visited: 10,
-          keyword: '芒果,草莓,西瓜'
-        },
-        {
-          vname: '哈5',
-          coverurl: 'https://picx.zhimg.com/v2-ea15e9203a1d95a465a78da043a9315d_xl.jpg',
-          releasetime: '2023-04-24 16:47:00',
-          visited: 10,
-          keyword: '芒果,草莓,西瓜'
-        },
-        {
-          vname: '哈1',
-          coverurl: 'https://picx.zhimg.com/v2-ea15e9203a1d95a465a78da043a9315d_xl.jpg',
-          releasetime: '2023-04-24 16:47:00',
-          visited: 10,
-          keyword: '芒果,草莓,西瓜'
-        },
-        {
-          vname: '哈2',
-          coverurl: 'https://picx.zhimg.com/v2-ea15e9203a1d95a465a78da043a9315d_xl.jpg',
-          releasetime: '2023-04-24 16:47:00',
-          visited: 10,
-          keyword: '芒果,草莓,西瓜'
-        },
-        {
-          vname: '哈3',
-          coverurl: 'https://picx.zhimg.com/v2-ea15e9203a1d95a465a78da043a9315d_xl.jpg',
-          releasetime: '2023-04-24 16:47:00',
-          visited: 10,
-          keyword: '芒果,草莓,西瓜'
-        },
-        {
-          vname: '哈4',
-          coverurl: 'https://picx.zhimg.com/v2-ea15e9203a1d95a465a78da043a9315d_xl.jpg',
-          releasetime: '2023-04-24 16:47:00',
-          visited: 10,
-          keyword: '芒果,草莓,西瓜'
-        },
-        {
-          vname: '哈5',
-          coverurl: 'https://picx.zhimg.com/v2-ea15e9203a1d95a465a78da043a9315d_xl.jpg',
-          releasetime: '2023-04-24 16:47:00',
-          visited: 10,
-          keyword: '芒果,草莓,西瓜'
-        }
-      ]
-    }
-    this.$store.commit('getPageBean', pageBean)
-
-    // 当组件加载的时候默认当前活跃页
-    /*    getPageBean(this.currentIndex + 1, 1, 6).then((res) => {
-      this.$store.commit('getPageBean', res)
-    })*/
-  },
-  methods: {
-    btnClick(cid, index) {
-      this.currentIndex = index
-      // 页码变为1
-      this.$store.commit('updatePage', 1)
-      this.$store.commit('saveCid', cid)
-      this.$store.dispatch('getPageBean')
-    }
-  }
-}
-</script>
-
-<style scoped>
-#category-btn {
-  padding-left: 14%;
-  padding-right: 6%;
-  padding-top: 20px;
-}
-el-btn {
-  background: #409eff;
-}
-
-/*处于手机屏幕时*/
-@media screen and (max-width: 768px) {
-  #category-btn {
-    padding-left: 0.5%;
-    padding-right: 0.5%;
-    padding-top: 3%;
-    text-align: center;
-  }
-}
-</style>

src/views/home/Article.vue

@@ -44,7 +44,7 @@ export default {
     })
     // console.log(this.$store.state.videos);
     // 当页面挂载时，页码变为1
-    this.$store.commit('updatePage', 1)
+    //this.$store.commit('updatePage', 1)
   },
   mounted() {
     // 当窗口宽度改变时获取屏幕宽度

src/views/home/ArticlePage.vue

@@ -41,14 +41,6 @@
       <el-col :md="15">
         <!--视频播放框-->
         <video-player :video-prop="video" />
-        <!--        <p-video
-          v-if="showVideo"
-          v-loading="video.url"
-          :video-url="video.vurl"
-          :cover-url="video.coverurl"
-          element-loading-text="视频加载中"
-          element-loading-spinner="el-icon-loading"
-        />-->
         <div class="el-icon-collection">
           {{ "已收藏" + video.collectCount + "次" }}
           <el-button

src/views/home/Audio.vue

@@ -1,10 +1,6 @@
 <template>
   <div>
     <el-row>
-      <el-col :md="12">
-        <!--影片分类按钮-->
-        <category-btn />
-      </el-col>
       <el-col :md="12">
         <!--猜您喜欢-->
         <recommend />
@@ -46,7 +42,6 @@
 
 <script>
 import VideoCard from 'components/card/VideoCard'
-import CategoryBtn from 'components/categorybtn/CategoryBtn'
 import Recommend from 'components/recommend/Recommend'
 import HotList from 'components/hotlist/HotList'
 import { videoRecommend } from '@/api/video'

src/views/home/Index.vue

@@ -1,16 +1,10 @@
 <template>
   <div>
-<!--    <el-row>
-      <el-col :md="12">
-        <category-btn />
-      </el-col>
-      <el-col :md="12">
-        <recommend />
-      </el-col>
-    </el-row>-->
     <!--电影列表，与推荐列表-->
     <el-row id="movie-list"
-            v-infinite-scroll="load">
+            v-infinite-scroll="load"
+            infinite-scroll-disabled="loading"
+            infinite-scroll-distance="10">
       <!--电影列表-->
       <el-col :md="24">
         <el-col v-for="(video, index) in videoList" :key="index" :md="6" :sm="12" :xs="12">
@@ -27,27 +21,23 @@
 
 <script>
 import VideoCard from '@/components/card/VideoCard'
-import CategoryBtn from '@/components/categorybtn/CategoryBtn'
 import Recommend from '@/components/recommend/Recommend'
 import { videoRecommend } from '@/api/video'
 
 export default {
   name: 'Index',
-  components: { VideoCard, Recommend, CategoryBtn },
+  components: { VideoCard, Recommend },
   data() {
     return {
       // 屏幕宽度, 为了控制分页条的大小
       screenWidth: document.body.clientWidth,
       currentPage: 1,
       videoList: [],
-      loading: true
+      loading: false
     }
   },
   created() {
     this.videoRecommendWrapper(this.currentPage)
-    // console.log(this.$store.state.videos);
-    // 当页面挂载时，页码变为1
-    // this.$store.commit('updatePage', 1)
   },
   mounted() {
     // 当窗口宽度改变时获取屏幕宽度
@@ -72,6 +62,7 @@ export default {
             this.videoList.push(item)
           }
           this.currentPage +=1
+          this.loading = false
         } else {
           this.$notify(
             {
@@ -85,11 +76,11 @@ export default {
       })
     },
     load() {
-      if (!this.loading || this.currentPage > 20) {
+      if (this.currentPage > 20) {
         return
       }
 
-      console.log('滚动加载第 ' + this.currentPage + ' 页')
+      this.loading = true
       setTimeout(() => {
         this.videoRecommendWrapper(this.currentPage)
       }, 1000)
@@ -105,11 +96,6 @@ export default {
   padding-right: 6%;
 }
 
-.pagination {
-  text-align: center;
-  padding: 10px;
-}
-
 /*处于手机屏幕时*/
 @media screen and (max-width: 768px){
   #movie-list {

src/views/home/Search.vue

@@ -2,12 +2,10 @@
   <div id="search-list">
     <!--搜索结果面包屑-->
     <el-breadcrumb
-      v-if="this.$route.path.indexOf('searchlist') > -1"
       class="bread"
       separator-class="el-icon-arrow-right"
     >
-      <el-breadcrumb-item :to="{ path: '' }"><a href="/">返回首页</a></el-breadcrumb-item>
-      <el-breadcrumb-item>搜索结果：共<span class="result">({{ retList.length }}}</span>条</el-breadcrumb-item>
+      <el-breadcrumb-item>搜索结果：共<span class="result">({{ total }}}</span>条</el-breadcrumb-item>
     </el-breadcrumb>
 
     <el-row v-if="retList.length !== 0 " class="movie-list">
@@ -26,9 +24,9 @@
           background
           hide-on-single-page
           layout="prev, pager, next"
-          :current-page="$store.state.activePage"
-          :page-size="8"
-          :total="$store.state.pageBean.totalCount"
+          :current-page="currentPage"
+          :page-size="pageSize"
+          :total="total"
           @current-change="handleCurrentChange"
         />
       </el-col>
@@ -51,27 +49,38 @@ export default {
   components: { VideoCard },
   data() {
     return {
+      keyword: null,
       currentPage: 1,
+      total: 0,
       length: 0,
+      pageSize: 12,
       retList: []
     }
   },
   created() {
+    this.keyword = this.$route.query.keyword
     this.currentPage = parseInt(this.$route.query.page)
-    this.videoQueryWrapper(this.$route.query.keyword, this.$route.query.page)
+    this.videoQueryWrapper(this.keyword, this.currentPage)
   },
   methods: {
     handleCurrentChange(currentPage) {
-      this.currentPage = currentPage
+      this.$router.push({
+        path: '/search',
+        query: {
+          keyword: this.keyword,
+          page: currentPage
+        }
+      })
+      this.$router.go(0)
     },
     videoQueryWrapper(keyword, page) {
       videoQuery(keyword, page)
         .then(res => {
           if (res.code === 0) {
-            const pageList = res.data
-            this.retList = pageList.list
-            this.currentPage = pageList.currentPage
-            this.length = pageList.totalPages
+            const resData = res.data
+            this.total = resData.totalSize
+            this.length = resData.totalPages
+            this.retList = resData.list
 
             // 页面跳转后滚动到页面顶部
             this.$vuetify.goTo(0)

src/views/home/Video.vue

@@ -2,8 +2,18 @@
   <div>
     <el-row>
       <el-col :md="12">
-        <!--影片分类按钮-->
-        <category-btn />
+        <div id="category-btn">
+          <el-button
+            v-for="(item, index) in videoCategory"
+            :key="index"
+            type="primary"
+            size="medium"
+            :plain="currentIndex !== index"
+            circle
+            @click="btnClick(item.cid, index)"
+          >{{ item.cname }}
+          </el-button>
+        </div>
       </el-col>
       <el-col :md="12">
         <!--猜您喜欢-->
@@ -29,8 +39,8 @@
             :small="screenWidth <= 768"
             hide-on-single-page
             layout="prev, pager, next"
+            :page-size="pageSize"
             :current-page="$store.state.activePage"
-            :page-size="6"
             :total="$store.state.pageBean.totalCount"
             @current-change="handleCurrentChange"
           />
@@ -47,23 +57,34 @@
 
 <script>
 import VideoCard from 'components/card/VideoCard'
-import CategoryBtn from 'components/categorybtn/CategoryBtn'
 import Recommend from 'components/recommend/Recommend'
-import { videoRecommend } from '@/api/video'
+import { videoCategory, videoRecommend} from '@/api/video'
 
 export default {
   name: 'Video',
-  components: { VideoCard, Recommend, CategoryBtn },
+  components: { VideoCard, Recommend },
   data() {
     return {
       // 屏幕宽度, 为了控制分页条的大小
       screenWidth: document.body.clientWidth,
       currentPage: 1,
-      videoList: []
+      pageSize: 12,
+      videoList: [],
+      currentIndex: 0,
+      videoCategory: [
+        { cname: '全部', cid: 11010 },
+        { cname: '电影', cid: 11011 },
+        { cname: '音乐', cid: 11012 },
+        { cname: '新闻', cid: 11013 }
+      ]
     }
   },
   created() {
     this.currentPage = 1
+    videoCategory().then(res => {
+      console.log(res.data)
+    })
+
     videoRecommend(this.currentPage).then(res => {
       if (res.code === 0) {
         const resData = res.data
@@ -72,7 +93,7 @@ export default {
     })
     // console.log(this.$store.state.videos);
     // 当页面挂载时，页码变为1
-    this.$store.commit('updatePage', 1)
+    // this.$store.commit('updatePage', 1)
   },
   mounted() {
     // 当窗口宽度改变时获取屏幕宽度
@@ -84,12 +105,19 @@ export default {
     }
   },
   methods: {
-    handleCurrentChange(currentPage) {
-      this.currentPage = currentPage
-      this.$store.commit('updatePage', currentPage)
-      this.$store.dispatch('getPageBean')
+    handleCurrentChange(pageNumber) {
+      this.currentPage = pageNumber
+      console.log('选择分页')
       // 回到顶部
       scrollTo(0, 0)
+    },
+    btnClick(cid, index) {
+      this.currentIndex = index
+      // 页码变为1
+      console.log('选择分区')
+      /*this.$store.commit('updatePage', 1)
+      this.$store.commit('saveCid', cid)
+      this.$store.dispatch('getPageBean')*/
     }
   }
 }
@@ -107,6 +135,15 @@ export default {
   padding: 10px;
 }
 
+#category-btn {
+  padding-left: 14%;
+  padding-right: 6%;
+  padding-top: 20px;
+}
+el-btn {
+  background: #409eff;
+}
+
 /*处于手机屏幕时*/
 @media screen and (max-width: 768px){
   #movie-list {
@@ -114,5 +151,12 @@ export default {
     padding-left: 0.5%;
     padding-right: 0.5%;
   }
+
+  #category-btn {
+    padding-left: 0.5%;
+    padding-right: 0.5%;
+    padding-top: 3%;
+    text-align: center;
+  }
 }
 </style>

src/views/home/VideoPage.vue

@@ -41,14 +41,6 @@
       <el-col :md="15">
         <!--视频播放框-->
         <video-player :video-prop="video" />
-        <!--        <p-video
-          v-if="showVideo"
-          v-loading="video.url"
-          :video-url="video.vurl"
-          :cover-url="video.coverurl"
-          element-loading-text="视频加载中"
-          element-loading-spinner="el-icon-loading"
-        />-->
         <div class="el-icon-collection">
           {{ "已收藏" + video.collectCount + "次" }}
           <el-button