调整 ImagePost 相关页面和接口

src/api/image.js

@@ -1,60 +1,40 @@
 import { get, post, delete0 } from '@/utils/request'
 
 const imageApi = {
-  imageAlbumApi: '/api/content/post/image/album',
-  addAlbumImageApi: '/api/content/post/image/album/add',
-  updateAlbumScopeApi: '/api/content/post/image/album/update/scope',
-  updateAlbumCoverApi: '/api/content/post/image/album/update/cover',
-  albumImageApi: '/api/content/post/image/album',
-  albumApi: '/api/content/image/album',
-  userAlbumApi: '/api/content/image/album/user',
+  imagePostApi: '/api/content/post/image',
   imageApi: '/api/content/image'
 }
 
 // 创建相册
 export function createAlbum(jsonData) {
-  return post(imageApi.imageAlbumApi + '/create', jsonData)
-}
-
-export function submitAlbum(jsonData) {
-  return post(imageApi.imageAlbumApi, jsonData)
+  return post(imageApi.imagePostApi + '/create', jsonData)
 }
 
+// 添加图片到相册
 export function addAlbumImage(jsonData) {
-  return post(imageApi.addAlbumImageApi, jsonData)
-}
-
-export function updateAlbumScope(jsonData) {
-  return post(imageApi.updateAlbumScopeApi, jsonData)
-}
-
-export function updateAlbumCover(jsonData) {
-  return post(imageApi.updateAlbumCoverApi, jsonData)
-}
-
-export function deleteAlbum(albumId) {
-  return delete0(imageApi.imageAlbumApi + '/' + albumId)
+  return post(imageApi.imagePostApi + '/add', jsonData)
 }
 
-// 获取相册
-export function getAlbumImage(albumId) {
-  return get(imageApi.albumImageApi + '/' + albumId)
+// 获取用户图片稿件
+export function getAlbumImage(page) {
+  return get(imageApi.imagePostApi + '?page=' + page)
 }
 
-// 获取相册
-export function getAlbumImage1(page) {
-  return get(imageApi.albumImageApi + '?page=' + page)
+// 获取用户图片稿件中的图片
+export function getImagePostItems(albumId) {
+  return get(imageApi.imagePostApi + '/' + albumId)
 }
 
-// 获取相册
-export function getAlbum(albumId) {
-  return get(imageApi.albumApi + '/' + albumId)
+// 获取用户相册列表
+export function getAlbumImage1(page, userId) {
+  return get(imageApi.imageApi + '/user?page=' + page + '&userId=' + userId)
 }
 
 export function getImages(page) {
   return get(imageApi.imageApi + '?page=' + page)
 }
 
+// 获取用户相册中的图片
 export function getImageItems(albumId) {
-  return get(imageApi.imageApi + '/album/' + albumId)
+  return get(imageApi.imageApi + '/' + albumId)
 }

src/components/card/ImageAlbumCard.vue

@@ -2,7 +2,7 @@
   <el-col style="padding-right: 7px; padding-left: 7px">
     <div style="cursor: pointer">
       <el-card :body-style="{ padding: '0px' }" class="card">
-        <router-link target="_blank" :to="`/image/album/${imageAlbum.albumId}`">
+        <router-link target="_blank" :to="`/image/${imageAlbum.albumId}`">
           <div class="imgs">
             <el-image
               lazy
@@ -16,7 +16,7 @@
           </div>
         </router-link>
         <div style="padding: 14px">
-          <router-link target="_blank" :to="`/image/album/${imageAlbum.albumId}`">
+          <router-link target="_blank" :to="`/image/${imageAlbum.albumId}`">
             <span style="left: 0;margin-bottom: 0px;color: black;">{{ imageAlbum.albumName | ellipsis }}</span>
           </router-link>
         </div>

src/components/upload/PublishImage.vue

@@ -173,27 +173,7 @@ export default {
     onSubmit(formName) {
       this.$refs[formName].validate(valid => {
         if (!valid) return false
-
         this.submitForm.imageFileIds = Array.from(imageFileMap.values())
-        submitAlbum(this.submitForm).then(res => {
-          if (res.code === 0) {
-            this.$router.push('/post/list/image')
-          } else {
-            this.$notify({
-              title: '提示',
-              message: res.msg,
-              type: 'warning',
-              duration: 3000
-            })
-          }
-        }).catch(error => {
-          this.$notify({
-            title: '提示',
-            message: error.message,
-            type: 'warning',
-            duration: 3000
-          })
-        })
       })
     }
   }

src/router/index.js

@@ -21,7 +21,6 @@ const ShortVideoIndex = () => import('views/home/ShortVideo')
 const VideoPage = () => import('views/home/VideoPage')
 const AudioIndex = () => import('views/home/Audio')
 const AudioPage = () => import('views/home/AudioPage')
-const ImageIndex = () => import('views/home/Image')
 const ImagePage = () => import('views/home/ImagePage')
 const ArticleIndex = () => import('views/home/Article')
 const ArticlePage = () => import('views/home/ArticlePage')
@@ -126,13 +125,7 @@ const routes = [
         meta: { needAuth: false }
       },
       {
-        path: '/image',
-        name: 'ImageIndex',
-        component: ImageIndex,
-        meta: { needAuth: false }
-      },
-      {
-        path: '/image/album/:albumId',
+        path: '/image/:albumId',
         name: 'ImagePage',
         component: ImagePage,
         meta: { needAuth: false }

src/views/home/Image.vue

@@ -1,228 +0,0 @@
-<template>
-  <div>
-    <!--电影列表，与推荐列表-->
-    <el-row id="movie-list">
-      <!--电影列表-->
-      <el-col :md="24">
-        <div>
-          <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
-                  lazy
-                  fit="cover"
-                  class="coverImg"
-                  :src="image.thumbnailUrl"
-                  @click="showImages(index)"
-                />
-              </div>
-              <div style="padding: 14px;">
-                <span style="position: relative; bottom: 0; left: 0%; color:green">
-                  <i v-if="image.collected" class="el-icon-star-on" @click="collectItem(image)" />
-                  <i v-else class="el-icon-star-off" @click="collectItem(image)" />
-                </span>
-                <span style="position: relative; bottom: 0; left: 0; color:blue">
-                  来自相册:
-                </span>
-                <router-link target="_blank" :to="`/image/album/${image.albumId}`">
-                  <span style="position: relative; bottom: 0; left: 0; color:blue">
-                    {{ image.albumName | ellipsis }}
-                  </span>
-                </router-link>
-              </div>
-            </el-card>
-          </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="dataList.length === 0" class="not-result">
-      <el-col :span="12" :offset="6">
-        <img src="@/assets/img/icon/not-result.png">
-        <div>没有图片数据</div>
-      </el-col>
-    </el-row>
-  </div>
-</template>
-
-<script>
-import { getImages } from '@/api/image'
-import { collectItem } from '@/api/collect'
-
-export default {
-  name: 'Image',
-  components: {},
-  filters: {
-    ellipsis(value) {
-      if (!value) return ''
-      const max = 10
-      if (value.length > max) {
-        return value.slice(0, max) + '...'
-      }
-      return value
-    }
-  },
-  data() {
-    return {
-      // 屏幕宽度, 为了控制分页条的大小
-      screenWidth: document.body.clientWidth,
-      currentPage: 1,
-      pageSize: 24,
-      totalSize: 0,
-      dataList: []
-    }
-  },
-  created() {
-    document.title = '图片主页'
-    this.getImagesWrapper(this.currentPage)
-  },
-  mounted() {
-    // 当窗口宽度改变时获取屏幕宽度
-    window.onresize = () => {
-      return () => {
-        window.screenWidth = document.body.clientWidth
-        this.screenWidth = window.screenWidth
-      }
-    }
-  },
-  methods: {
-    handleCurrentChange(currentPage) {
-      this.currentPage = currentPage
-      this.getImagesWrapper(this.currentPage)
-
-      // 回到顶部
-      scrollTo(0, 0)
-    },
-    getImagesWrapper(page) {
-      getImages(page).then(resp => {
-        if (resp.code === 0) {
-          this.dataList = resp.data.list
-          this.totalSize = resp.data.totalSize
-        } else {
-          this.$notify({
-            title: '获取数据失败',
-            message: resp.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) {
-        imageUrls.push(i.originalUrl)
-      }
-
-      this.$viewerApi({
-        images: imageUrls,
-        options: {
-          initialViewIndex: index,
-          movable: true,
-          fullscreen: false,
-          keyboard: true
-        }
-      })
-    },
-    collectItem(image) {
-      console.log(image)
-      const jsonData = {}
-      jsonData.contentType = 1001
-      jsonData.contentId = image.imageFileId
-      if (image.collected) {
-        jsonData.collected = false
-        collectItem(jsonData).then(resp => {
-          if (resp.code === 0) {
-            this.$notify({
-              title: '取消收藏图片',
-              type: 'info',
-              duration: 3000
-            })
-            image.collected = false
-          }
-        })
-      } else {
-        jsonData.collected = true
-        collectItem(jsonData).then(resp => {
-          if (resp.code === 0) {
-            this.$notify({
-              title: '图片已收藏',
-              type: 'info',
-              duration: 3000
-            })
-            image.collected = true
-          }
-        })
-      }
-    }
-  }
-}
-</script>
-
-<style scoped>
-/*处于手机屏幕时*/
-@media screen and (max-width: 768px){
-  #movie-list {
-    padding-top: 8px;
-    padding-left: 0.5%;
-    padding-right: 0.5%;
-  }
-
-  .coverImg {
-    height: 120px !important;
-  }
-}
-
-#movie-list {
-  padding-top: 15px;
-  padding-left: 6%;
-  padding-right: 6%;
-}
-
-.coverImg {
-  width: 100%;
-  height: 320px;
-  display: block;
-}
-
-.not-result {
-  padding-top: 100px;
-  padding-bottom: 100px;
-  text-align: center;
-}
-
-.pagination {
-  text-align: center;
-  padding: 10px;
-}
-</style>

src/views/home/ImagePage.vue

@@ -11,7 +11,7 @@
                 </el-avatar>
               </el-col>
               <el-col :md="23">
-                <router-link target="_blank" :to="`/user/${user.userId}/image`">
+                <router-link style="text-decoration-line: none" target="_blank" :to="`/user/${user.userId}/image`">
                   <span>{{ user.screenName }}的相册</span>
                 </router-link>
                 <span v-html="'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'" />
@@ -55,12 +55,6 @@
                   @click="showImages(index)"
                 />
               </div>
-              <div style="padding: 14px;">
-                <span>
-                  <i v-if="image.collected" class="el-icon-star-on" @click="collectItem(image)" />
-                  <i v-else class="el-icon-star-off" @click="collectItem(image)" />
-                </span>
-              </div>
             </el-card>
           </el-col>
         </div>
@@ -76,7 +70,6 @@
 import PermissionDeniedCard from '@/components/card/PermissionDeniedCard'
 import { followUser, getUserInfo, unfollowUser } from '@/api/user'
 import { getImageItems } from '@/api/image'
-import { collectImageItem, collectItem } from '@/api/collect'
 
 export default {
   name: 'ImagePage',
@@ -178,35 +171,6 @@ export default {
           keyboard: true
         }
       })
-    },
-    collectItem(image) {
-      const jsonData = {}
-      jsonData.postId = image.imageFileId
-      jsonData.action = 1
-      if (image.collected) {
-        jsonData.action = 2
-        collectImageItem(jsonData).then(resp => {
-          if (resp.code === 0) {
-            this.$notify({
-              title: '取消收藏图片',
-              type: 'info',
-              duration: 3000
-            })
-            image.collected = false
-          }
-        })
-      } else {
-        collectImageItem(jsonData).then(resp => {
-          if (resp.code === 0) {
-            this.$notify({
-              title: '图片已收藏',
-              type: 'info',
-              duration: 3000
-            })
-            image.collected = true
-          }
-        })
-      }
     }
   }
 }

src/views/post/ImagePost.vue

@@ -28,7 +28,7 @@
               />
             </div>
             <div v-else>
-              <span class="el-icon-plus"></span>
+              <span class="el-icon-plus" />
             </div>
           </template>
         </el-table-column>
@@ -42,7 +42,7 @@
           width="180"
         >
           <template slot-scope="scope">
-            <router-link style="text-decoration-line: none" target="_blank" :to="`/image/album/${scope.row.albumId}`">
+            <router-link style="text-decoration-line: none" target="_blank" :to="`/image/${scope.row.albumId}`">
               <span>{{ scope.row.albumName }}</span>
             </router-link>
           </template>
@@ -129,38 +129,12 @@
         </div>
       </el-card>
     </el-dialog>
-
-    <!-- 修改可见范围对话框 -->
-    <el-dialog
-      append-to-body
-      :visible.sync="showEditScopeDialog"
-      width="30%"
-      center
-    >
-      <el-card class="box-card">
-        <div slot="header" class="clearfix">
-          <span>修改相册可见范围</span>
-          <el-button style="float: right; padding: 3px 0" type="text" @click="onUpdateScope">更新</el-button>
-        </div>
-        <div class="text item">
-          <el-select v-model="form.scope" placeholder="选择可见范围">
-            <el-option label="本人可见" value="1" />
-            <el-option label="所有人可见" value="2" />
-            <el-option label="VIP 可见" value="3" />
-            <el-option label="验证码可见" value="4" />
-          </el-select>
-        </div>
-      </el-card>
-    </el-dialog>
   </el-container>
 </template>
 
 <script>
 import {
-  updateAlbumScope,
-  deleteAlbum,
-  createAlbum,
-  getAlbumImage1
+  createAlbum, getAlbumImage
 } from '@/api/image'
 
 export default {
@@ -174,7 +148,6 @@ export default {
       totalSize: 0,
       dataList: [],
       // **********************************************************************
-      showEditScopeDialog: false,
       form: {
         albumName: null,
         scope: '1'
@@ -195,32 +168,13 @@ export default {
     },
     getData() {
       this.dataList = []
-      getAlbumImage1(this.currentPage).then(resp => {
+      getAlbumImage(this.currentPage).then(resp => {
         if (resp.code === 0) {
           console.log(resp.data)
           this.dataList = resp.data.list
           this.totalSize = resp.data.totalSize
         }
       })
-
-      /* getUserAlbums(this.currentPage).then(resp => {
-        if (resp.code === 0) {
-          this.dataList = resp.data.list
-          this.totalSize = resp.data.totalSize
-        } else {
-          this.$notify({
-            title: '提示',
-            message: resp.msg,
-            type: 'warning',
-            duration: 3000
-          })
-        }
-      })*/
-    },
-    handleScope(index, row) {
-      this.form.albumId = row.albumId
-      this.form.scope = '' + row.scope
-      this.showEditScopeDialog = true
     },
     handleEdit(index, row) {
       const path = '/post/image/edit/' + row.albumId
@@ -248,33 +202,6 @@ export default {
           duration: 3000
         })
       })
-    },
-    onUpdateScope() {
-      this.showEditScopeDialog = false
-      updateAlbumScope(this.form).then(res => {
-        if (res.code === 0) {
-          this.$notify({
-            title: '提示',
-            message: res.msg,
-            type: 'warning',
-            duration: 3000
-          })
-        } else {
-          this.$notify({
-            title: '提示',
-            message: res.msg,
-            type: 'warning',
-            duration: 3000
-          })
-        }
-      }).catch(error => {
-        this.$notify({
-          title: '提示',
-          message: error.message,
-          type: 'warning',
-          duration: 3000
-        })
-      })
     }
   }
 }

src/views/post/ImagePostEdit.vue

@@ -68,7 +68,7 @@
 </template>
 
 <script>
-import { getAlbumImage, addAlbumImage } from '@/api/image'
+import { addAlbumImage, getImagePostItems } from '@/api/image'
 import { getPhotoChannelInfo } from '@/api/file'
 
 var imageFileMap = new Map()
@@ -104,7 +104,7 @@ export default {
   created() {
     document.title = '编辑相册稿件'
     this.albumId = this.$route.params.albumId
-    getAlbumImage(this.albumId).then(res => {
+    getImagePostItems(this.albumId).then(res => {
       if (res.code === 0) {
         this.data = res.data
         this.imageCount = this.data.images.length
@@ -242,6 +242,9 @@ export default {
           keyboard: true
         }
       })
+    },
+    onReturnAlbum() {
+      this.$router.push('/post/image/list')
     }
   }
 }