对应后端接口的更改

src/components/upload/EditImage.vue

@@ -42,7 +42,7 @@
       <el-col :md="16">
         <div v-if="this.data !== null">
           <el-col
-            v-for="(image, index) in data.images"
+            v-for="(image, index) in dataList"
             :key="image.thumbnailUrl"
             :md="6"
             :sm="12"
@@ -79,6 +79,17 @@
               </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>
@@ -86,8 +97,9 @@
 </template>
 
 <script>
-import { getAlbumImage, deleteAlbumImage, addAlbumImage, updateAlbumCover } from '@/api/image'
+import {getAlbumImage, deleteAlbumImage, addAlbumImage, updateAlbumCover, getAlbumItems} from '@/api/image'
 import { getPhotoChannelInfo } from '@/api/file'
+import {getUserInfo} from "@/api/user";
 
 var imageFileMap = new Map()
 export default {
@@ -108,7 +120,13 @@ export default {
       /** *********************************************************************/
       // 屏幕宽度, 为了控制分页条的大小
       screenWidth: document.body.clientWidth,
+      currentPage: 1,
+      pageSize: 12,
+      totalSize: 0,
+      albumId: null,
       data: null,
+      dataList: [],
+      postType: 0,
       imageCount: 0,
       limit: 0
     }
@@ -116,8 +134,9 @@ export default {
   created() {
     document.title = '编辑相册稿件'
 
-    const albumId = this.$route.params.albumId
-    getAlbumImage(albumId).then(res => {
+    this.albumId = this.$route.params.albumId
+    this.getAlbumItemsWrapper(this.currentPage, this.albumId)
+    /* getAlbumImage(this.albumId).then(res => {
       if (res.code === 0) {
         const resData = res.data
         this.data = resData
@@ -125,7 +144,7 @@ export default {
         this.imageCount = this.data.images.length
         this.limit = 40 - this.data.images.length
       }
-    })
+    })*/
 
     getPhotoChannelInfo().then(res => {
       if (res.code === 0) {
@@ -159,6 +178,54 @@ export default {
     }
   },
   methods: {
+    handleCurrentChange(pageNumber) {
+      this.currentPage = pageNumber
+      this.dataList = []
+      this.getAlbumItemsWrapper(this.currentPage, this.albumId)
+      // 回到顶部
+      scrollTo(0, 0)
+    },
+    getAlbumItemsWrapper(pageNumber, albumId) {
+      getAlbumItems(pageNumber, albumId).then(resp => {
+        if (resp.code === 0) {
+          const respData = resp.data
+          document.title = '相册 - ' + respData.albumName
+
+          this.data = respData
+          this.postType = respData.postType
+          if (this.postType === 1) {
+            this.dataList = respData.images
+          } else if (this.postType === 2) {
+            this.totalSize = respData.pageList.totalSize
+            this.pageSize = respData.pageList.pageSize
+            this.dataList = respData.pageList.list
+          }
+
+          this.userId = respData.createBy
+          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
+        })
+      })
+    },
     /** *********************************************************************/
     handleBeforeUpload(file) {
       const fileType = file.type

src/router/vod.js

@@ -119,7 +119,7 @@ export default {
     },
     {
       path: '/post/album/list',
-      name: '相册列表',
+      name: '稿件合集',
       component: UserPostImage,
       meta: { needAuth: true }
     },

src/views/home/ImagePage.vue

@@ -43,8 +43,8 @@
     </el-row>
     <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">
+        <div v-if="postType === 1">
+          <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
@@ -64,6 +64,33 @@
             </el-card>
           </el-col>
         </div>
+        <div v-else-if="postType === 2">
+          <el-col v-for="(item,index) in dataList" :key="index" :md="6" :sm="8" :xs="12">
+            <div>
+              <video-card :video="item" />
+            </div>
+            <el-button
+              type="danger"
+              size="mini"
+              icon="el-icon-delete"
+              title="删除本收藏"
+              @click.stop="removeCollection(item)"
+            />
+          </el-col>
+          <el-col class="pagination">
+            <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-col>
+        </div>
       </el-col>
     </el-row>
   </div>
@@ -75,24 +102,29 @@
 <script>
 import PermissionDeniedCard from '@/components/card/PermissionDeniedCard'
 import { followUser, getUserInfo, unfollowUser } from '@/api/user'
-import { getAlbum, getAlbumItems } from '@/api/image'
+import { getAlbumItems } from '@/api/image'
 import { collectItem } from '@/api/collect'
+import VideoCard from '@/components/card/VideoCard'
 
 export default {
   name: 'ImagePage',
-  components: { PermissionDeniedCard },
+  components: { PermissionDeniedCard, VideoCard },
   data() {
     return {
       // 屏幕宽度, 为了控制分页条的大小
       screenWidth: document.body.clientWidth,
       currentPage: 1,
+      pageSize: 12,
+      totalSize: 0,
+      albumId: null,
+      data: null,
+      dataList: [],
+      postType: 0,
       user: null,
       followButton: {
         icon: 'el-icon-plus',
         text: '关注'
       },
-      data: null,
-      dataList: [],
       permissionDenied: false,
       textObject: {
         content: '相册',
@@ -101,37 +133,8 @@ export default {
     }
   },
   created() {
-    const albumId = this.$route.params.albumId
-    getAlbumItems(1, 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(this.currentPage, this.albumId)
   },
   mounted() {
     // 当窗口宽度改变时获取屏幕宽度
@@ -143,6 +146,54 @@ export default {
     }
   },
   methods: {
+    handleCurrentChange(pageNumber) {
+      this.currentPage = pageNumber
+      this.dataList = []
+      this.getAlbumItemsWrapper(this.currentPage, this.albumId)
+      // 回到顶部
+      scrollTo(0, 0)
+    },
+    getAlbumItemsWrapper(pageNumber, albumId) {
+      getAlbumItems(pageNumber, albumId).then(resp => {
+        if (resp.code === 0) {
+          const respData = resp.data
+          document.title = '相册 - ' + respData.albumName
+
+          this.data = respData
+          this.postType = respData.postType
+          if (this.postType === 1) {
+            this.dataList = respData.images
+          } else if (this.postType === 2) {
+            this.totalSize = respData.pageList.totalSize
+            this.pageSize = respData.pageList.pageSize
+            this.dataList = respData.pageList.list
+          }
+
+          this.userId = respData.createBy
+          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/Post.vue

@@ -72,7 +72,7 @@
               </el-menu-item>
               <el-menu-item index="/post/album/list">
                 <i class="el-icon-s-data" />
-                <span slot="title">相册列表</span>
+                <span slot="title">稿件合集</span>
               </el-menu-item>
             </el-menu-item-group>
           </el-submenu>