更新页面

src/views/home/Article.vue

@@ -1,16 +1,32 @@
 <template>
   <div>
-    <el-row id="movie-list">
-      <el-col :md="18">
-        <el-card :if="!video" :body-style="{ padding: '0px' }" class="card">
-          <div slot="header" class="clearfix">
-            <span>文章列表</span>
-            <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
-          </div>
-          <div v-for="(video, index) in videoList" :key="index" :md="6" :sm="12" :xs="12">
-            <article-card :article="video" />
-          </div>
-        </el-card>
+    <el-row v-if="!showEmpty" id="movie-list">
+      <el-col :md="24">
+        <div>
+          <el-col v-for="(item, index) in dataList"
+                  :key="index"
+                  :md="6" :sm="12" :xs="12"
+                  style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
+            <article-card :article="item" />
+          </el-col>
+        </div>
+        <!--
+          分页按钮：
+          page-size：每页显示条数
+          total：总条数
+          hide-on-single-page： 页数为一时隐藏
+        -->
+        <el-col :span="24" class="pagination">
+          <el-pagination
+            background
+            :small="screenWidth <= 768"
+            layout="prev, pager, next"
+            :page-size="pageSize"
+            :current-page="currentPage"
+            :total="totalSize"
+            @current-change="handleCurrentChange"
+          />
+        </el-col>
       </el-col>
     </el-row>
     <el-row v-if="showEmpty" class="not-result">
@@ -40,7 +56,7 @@ export default {
     }
   },
   created() {
-    document.title = '文章'
+    document.title = '文章主页'
 
     this.currentPage = 1
     getArticles(this.currentPage).then(res => {

src/views/home/Audio.vue

@@ -52,7 +52,7 @@ export default {
     }
   },
   created() {
-    document.title = '音频'
+    document.title = '音频主页'
   },
   mounted() {
     // 当窗口宽度改变时获取屏幕宽度

src/views/home/Image.vue

@@ -46,7 +46,6 @@
           <el-pagination
               background
               :small="screenWidth <= 768"
-              hide-on-single-page
               layout="prev, pager, next"
               :page-size="pageSize"
               :current-page="currentPage"
@@ -95,27 +94,8 @@ export default {
     }
   },
   created() {
-    document.title = '图片'
-
-    getImages(this.currentPage).then(resp => {
-      if (resp.code === 0) {
-        this.dataList = resp.data
-      } else {
-        this.$notify({
-          title: '获取数据失败',
-          message: res.msg,
-          type: 'warning',
-          duration: 3000
-        })
-      }
-    }).catch(error => {
-      this.$notify({
-        title: '获取数据错误',
-        message: error.message,
-        type: 'error',
-        duration: 3000
-      })
-    })
+    document.title = '图片主页'
+    this.getImagesWrapper(this.currentPage)
   },
   mounted() {
     // 当窗口宽度改变时获取屏幕宽度
@@ -129,11 +109,34 @@ export default {
   methods: {
     handleCurrentChange(currentPage) {
       this.currentPage = currentPage
-      this.$store.commit('updatePage', currentPage)
-      this.$store.dispatch('getPageBean')
+      this.getImagesWrapper(this.currentPage)
+
       // 回到顶部
       scrollTo(0, 0)
     },
+    getImagesWrapper(page) {
+      getImages(page).then(resp => {
+        if (resp.code === 0) {
+          this.dataList = resp.data.list
+          this.totalPages = resp.totalPages
+          this.totalSize = resp.totalSize
+        } else {
+          this.$notify({
+            title: '获取数据失败',
+            message: res.msg,
+            type: 'warning',
+            duration: 3000
+          })
+        }
+      }).catch(error => {
+        this.$notify({
+          title: '获取数据错误',
+          message: error.message,
+          type: 'error',
+          duration: 3000
+        })
+      })
+    },
     showImages(index) {
       const imageUrls = []
       for (const i of this.dataList) {

src/views/home/Video.vue

@@ -108,7 +108,7 @@ export default {
     }
   },
   created() {
-    document.title = '视频'
+    document.title = '视频主页'
 
     videoCategory().then(res => {
       if (res.code === 0) {

src/views/user/Collection.vue

@@ -67,6 +67,7 @@
             <el-pagination
               background
               :small="screenWidth <= 768"
+              hide-on-single-page
               layout="prev, pager, next"
               :page-size="pageSize"
               :current-page="currentPage"