调整 ImagePost 返回的内容数据模型

src/api/image.js

@@ -21,8 +21,8 @@ export function getAlbumImage(page) {
 }
 
 // 获取用户图片稿件中的图片
-export function getImagePostItems(albumId) {
-  return get(imageApi.imagePostApi + '/' + albumId)
+export function getImagePostItems(albumId, page) {
+  return get(imageApi.imagePostApi + '/' + albumId + '?page=' + page)
 }
 
 // 获取用户相册列表
@@ -35,6 +35,6 @@ export function getImages(page) {
 }
 
 // 获取用户相册中的图片
-export function getImageItems(albumId) {
-  return get(imageApi.imageApi + '/' + albumId)
+export function getImageItems(albumId, page) {
+  return get(imageApi.imageApi + '/' + albumId + '?page=' + page)
 }

src/views/home/ImagePage.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="!permissionDenied">
+  <el-row v-if="!permissionDenied" class="movie-list">
     <el-row class="movie-list">
       <el-col :md="24">
         <el-card :if="!user" :body-style="{ padding: '0px' }" class="card">
@@ -44,7 +44,7 @@
     <el-row>
       <el-col :md="24" class="movie-list">
         <div>
-          <el-col v-for="(image, index) in data.images" :key="image.thumbnailUrl" :md="6" :sm="12" :xs="12" style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
+          <el-col v-for="(image, index) in dataList" :key="image.thumbnailUrl" :md="6" :sm="12" :xs="12" style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
             <el-card :body-style="{ padding: '0px' }" class="card">
               <div class="imgs">
                 <el-image
@@ -60,7 +60,20 @@
         </div>
       </el-col>
     </el-row>
-  </div>
+    <el-row class="movie-list">
+      <el-pagination
+        :small="screenWidth <= 768"
+        hide-on-single-page
+        layout="prev, pager, next"
+        :page-size="pageSize"
+        :current-page="currentPage"
+        :total="totalSize"
+        @current-change="handleCurrentChange"
+        @prev-click="handleCurrentChange"
+        @next-click="handleCurrentChange"
+      />
+    </el-row>
+  </el-row>
   <div v-else>
     <permission-denied-card :text-object="textObject" />
   </div>
@@ -79,13 +92,15 @@ export default {
       // 屏幕宽度, 为了控制分页条的大小
       screenWidth: document.body.clientWidth,
       currentPage: 1,
+      pageSize: 12,
+      totalSize: 0,
+      dataList: [],
+      albumId: null,
       user: null,
       followButton: {
         icon: 'el-icon-plus',
         text: '关注'
       },
-      data: null,
-      dataList: [],
       permissionDenied: false,
       textObject: {
         content: '相册',
@@ -94,37 +109,8 @@ export default {
     }
   },
   created() {
-    const albumId = this.$route.params.albumId
-    getImageItems(albumId).then(resp => {
-      if (resp.code === 0) {
-        const respData = resp.data
-        document.title = '相册 - ' + respData.albumName
-
-        this.data = respData
-        this.userId = respData.userId
-        getUserInfo(this.userId).then(resp => {
-          if (resp.code === 0) {
-            this.user = resp.data
-          } else {
-            this.$notify.error({
-              message: resp.msg,
-              type: 'warning',
-              duration: 3000
-            })
-          }
-        })
-      } else if (resp.code === 2) {
-        this.$router.push('/404')
-      } else {
-        this.permissionDenied = true
-      }
-    }).catch(error => {
-      this.$notify.error({
-        message: error.message,
-        type: 'error',
-        duration: 3000
-      })
-    })
+    this.albumId = this.$route.params.albumId
+    this.getAlbumItemsWrapper()
   },
   mounted() {
     // 当窗口宽度改变时获取屏幕宽度
@@ -136,6 +122,51 @@ export default {
     }
   },
   methods: {
+    handleCurrentChange(pageNumber) {
+      this.currentPage = pageNumber
+      this.dataList = []
+      this.getAlbumItemsWrapper()
+      // 回到顶部
+      scrollTo(0, 0)
+    },
+    getAlbumItemsWrapper() {
+      getImageItems(this.albumId, this.currentPage).then(resp => {
+        if (resp.code === 0) {
+          const respData = resp.data
+          document.title = '相册 - ' + respData.albumName
+
+          this.data = resp.data
+          const images = resp.data.images
+          this.dataList = images.list
+          this.totalSize = images.totalSize
+          this.imageCount = images.length
+          this.limit = 40 - images.length
+          this.data = respData
+          this.userId = respData.userId
+          getUserInfo(this.userId).then(resp => {
+            if (resp.code === 0) {
+              this.user = resp.data
+            } else {
+              this.$notify.error({
+                message: resp.msg,
+                type: 'warning',
+                duration: 3000
+              })
+            }
+          })
+        } else if (resp.code === 2) {
+          this.$router.push('/404')
+        } else {
+          this.permissionDenied = true
+        }
+      }).catch(error => {
+        this.$notify.error({
+          message: error.message,
+          type: 'error',
+          duration: 3000
+        })
+      })
+    },
     followUser(userId) {
       if (this.followButton.text === '关注') {
         followUser(userId).then(resp => {

src/views/post/ImagePostEdit.vue

@@ -29,9 +29,9 @@
     </el-row>
     <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
       <el-col :md="24">
-        <div v-if="data !== null">
+        <div v-if="dataList.length !== 0">
           <el-col
-            v-for="(image, index) in data.images"
+            v-for="(image, index) in dataList"
             :key="image.thumbnailUrl"
             :md="6"
             :sm="12"
@@ -50,20 +50,20 @@
               </div>
             </el-card>
           </el-col>
-          <el-pagination
-            :small="screenWidth <= 768"
-            hide-on-single-page
-            layout="prev, pager, next"
-            :page-size="pageSize"
-            :current-page="currentPage"
-            :total="totalSize"
-            @current-change="handleCurrentChange"
-            @prev-click="handleCurrentChange"
-            @next-click="handleCurrentChange"
-          />
         </div>
       </el-col>
     </el-row>
+    <el-pagination
+      :small="screenWidth <= 768"
+      hide-on-single-page
+      layout="prev, pager, next"
+      :page-size="pageSize"
+      :current-page="currentPage"
+      :total="totalSize"
+      @current-change="handleCurrentChange"
+      @prev-click="handleCurrentChange"
+      @next-click="handleCurrentChange"
+    />
   </el-row>
 </template>
 
@@ -104,14 +104,7 @@ export default {
   created() {
     document.title = '编辑相册稿件'
     this.albumId = this.$route.params.albumId
-    getImagePostItems(this.albumId).then(res => {
-      if (res.code === 0) {
-        this.data = res.data
-        this.imageCount = this.data.images.length
-        this.limit = 40 - this.data.images.length
-      }
-    })
-
+    this.getAlbumItemsWrapper()
     getPhotoChannelInfo().then(res => {
       if (res.code === 0) {
         const resData = res.data
@@ -147,11 +140,21 @@ export default {
     handleCurrentChange(pageNumber) {
       this.currentPage = pageNumber
       this.dataList = []
-      this.getAlbumItemsWrapper(this.currentPage, this.albumId)
+      this.getAlbumItemsWrapper()
       // 回到顶部
       scrollTo(0, 0)
     },
-    getAlbumItemsWrapper(pageNumber, albumId) {
+    getAlbumItemsWrapper() {
+      getImagePostItems(this.albumId, this.currentPage).then(resp => {
+        if (resp.code === 0) {
+          this.data = resp.data
+          const images = resp.data.images
+          this.dataList = images.list
+          this.totalSize = images.totalSize
+          this.imageCount = images.length
+          this.limit = 40 - images.length
+        }
+      })
     },
     /** *********************************************************************/
     handleBeforeUpload(file) {