对应后端接口的更改

src/api/collect.js

@@ -34,6 +34,10 @@ export function collectItem(jsonData) {
   return post(collectApi.collectItemApi, jsonData)
 }
 
+export function collectImageItem(jsonData) {
+  return post(collectApi.collectItemApi + '/image', jsonData)
+}
+
 // 获取用户合集
 export function getUserAlbums(page) {
   return get(collectApi.postAlbumApi + '/user?pn=' + page)
@@ -59,3 +63,7 @@ export function getAlbumTypes() {
 export function deleteAlbumItem(data) {
   return post(collectApi.deleteAlbumItemApi, data)
 }
+
+export function createVideoAlbum(data) {
+  return post(collectApi.postAlbumApi + '/video/create', data)
+}

src/components/card/VideoCard.vue

@@ -7,8 +7,8 @@
             <el-image
               lazy
               fit="cover"
-              :src="video.coverUrl"
               class="coverImg"
+              :src="video.coverUrl"
             />
             <span style="position: absolute; top: 0; left: 0; color:red">
               <i v-if="!video.cached" class="el-icon-close" />

src/components/upload/EditImage.vue

@@ -121,12 +121,10 @@ export default {
   },
   created() {
     document.title = '编辑相册稿件'
-
     this.albumId = this.$route.params.albumId
     getAlbumImage(this.albumId).then(res => {
       if (res.code === 0) {
         this.data = res.data
-        console.log(this.data)
         this.imageCount = this.data.images.length
         this.limit = 40 - this.data.images.length
       }

src/router/vod.js

@@ -155,7 +155,7 @@ export default {
       meta: { needAuth: true }
     },
     {
-      path: '/post/fav/image',
+      path: '/post/fav/image/:albumId',
       name: 'FavImage',
       component: FavImage,
       meta: { needAuth: true }

src/views/home/ImagePage.vue

@@ -76,7 +76,7 @@
 import PermissionDeniedCard from '@/components/card/PermissionDeniedCard'
 import { followUser, getUserInfo, unfollowUser } from '@/api/user'
 import { getImageItems } from '@/api/image'
-import { collectItem } from '@/api/collect'
+import { collectImageItem, collectItem } from '@/api/collect'
 
 export default {
   name: 'ImagePage',
@@ -181,11 +181,11 @@ export default {
     },
     collectItem(image) {
       const jsonData = {}
-      jsonData.contentType = 1001
-      jsonData.contentId = image.imageFileId
+      jsonData.postId = image.imageFileId
+      jsonData.action = 1
       if (image.collected) {
-        jsonData.collected = false
-        collectItem(jsonData).then(resp => {
+        jsonData.action = 2
+        collectImageItem(jsonData).then(resp => {
           if (resp.code === 0) {
             this.$notify({
               title: '取消收藏图片',
@@ -196,8 +196,7 @@ export default {
           }
         })
       } else {
-        jsonData.collected = true
-        collectItem(jsonData).then(resp => {
+        collectImageItem(jsonData).then(resp => {
           if (resp.code === 0) {
             this.$notify({
               title: '图片已收藏',

src/views/home/VideoPage.vue

@@ -159,9 +159,17 @@
       >
         <el-card class="box-card">
           <div slot="header" class="clearfix">
-            <el-button style="float: right; padding: 3px 0" type="text" @click="submitAccessCodeWrapper">
+            <el-button style="float: right; padding: 3px 0" type="text" @click="createAlbum">
               创建播放列表
             </el-button>
+            <el-form v-if="showCreateAlbum" ref="form" :model="albumForm" label-width="80px">
+              <el-form-item>
+                <el-input v-model="albumForm.albumName" style="padding-right: 1px" placeholder="标题不能超过 50 个字符" />
+              </el-form-item>
+              <el-form-item>
+                <el-button type="plain" @click="onCreateAlbum">确定</el-button>
+              </el-form-item>
+            </el-form>
           </div>
           <div class="text item">
             <el-table
@@ -232,7 +240,7 @@ import UserAvatarCard from '@/components/card/UserAvatarCard'
 import comment from '@/components/comment'
 
 import { similarVideo, videoInfo, videoErrorReport, downloadVideo, getShortUrl } from '@/api/video'
-import { collectItem, getUserFavlist } from '@/api/collect'
+import { collectItem, createVideoAlbum, getUserFavlist } from '@/api/collect'
 import { getUserInfo } from '@/api/user'
 import { publishComment, getComment } from '@/api/comment'
 import { getAuthedUser } from '@/utils/auth'
@@ -310,7 +318,10 @@ export default {
         route: '/video'
       },
       autoPlay: false,
-      added: false
+      showCreateAlbum: false,
+      albumForm: {
+        albumName: null
+      }
     }
   },
   watch: {
@@ -521,8 +532,17 @@ export default {
         })
       })
     },
-    submitAccessCodeWrapper() {
-      this.$message.info('创建播放列表')
+    createAlbum() {
+      this.showCreateAlbum = true
+    },
+    onCreateAlbum() {
+      this.showCreateAlbum = false
+      createVideoAlbum(this.albumForm).then(resp => {
+        if (resp.code === 0) {
+          this.playlist.push(resp.data)
+        }
+      })
+      this.albumForm.albumName = null
     },
     displayErrorReportDialog() {
       this.errorReportForm.videoId = this.video.videoId

src/views/post/FavlistImage.vue

@@ -1,77 +1,132 @@
 <template>
-  <div id="collection-list">
-    <!--搜索结果面包屑-->
-    <el-breadcrumb
-      class="bread"
-      separator-class="el-icon-arrow-right"
-    >
-      <el-breadcrumb-item>我的收藏：共 <span class="reslut">{{ totalSize }}</span> 条</el-breadcrumb-item>
-    </el-breadcrumb>
-
-    <el-row v-if="totalSize !== 0" class="movie-list">
-      <el-col style="text-align: right">
-        <el-button
-          type="danger"
-          size="mini"
-          icon="el-icon-delete"
-          @click="removeFavlist"
-        >删除收藏夹</el-button>
-      </el-col>
-      <el-col v-for="(item,index) in dataList" :key="index" :md="6" :sm="8" :xs="12" style="padding-right: 7px; padding-left: 7px">
-        <div>
-          <el-card :body-style="{ padding: '0px' }" class="card">
-            <div class="imgs">
-              <el-image
-                lazy
-                fit="cover"
-                class="coverImg"
-                :src="item.thumbnailUrl"
-                @click="showImages(index)"
-              />
-            </div>
-          </el-card>
+  <el-row class="movie-list">
+    <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
+      <el-card class="box-card" style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
+        <div slot="header" class="clearfix">
+          <span>编辑收藏夹 - <span style="color: blue">{{albumName}}</span></span>
+          <el-button style="float: right; padding: 10px" type="text" @click="onReturnAlbum">返回收藏夹</el-button>
         </div>
-        <el-button
-          type="danger"
-          size="mini"
-          icon="el-icon-delete"
-          title="删除本收藏"
-          @click.stop="removeCollection(item)"
-        />
-      </el-col>
-      <el-col class="pagination">
-        <el-pagination
-          background
-          :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 class="text item" />
+      </el-card>
     </el-row>
-    <el-row v-else class="not-result">
-      <el-col :span="12" :offset="6">
-        <img src="@/assets/img/icon/not-collection.png">
-        <div>你还没有收藏任何东西呢</div>
+    <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
+      <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"
+          >
+            <el-card :body-style="{ padding: '0px' }" class="card">
+              <div v-if="postType === 1" class="imgs">
+                <el-image
+                  lazy
+                  fit="cover"
+                  class="coverImg"
+                  :src="item.coverUrl"
+                  @click="showImages(index)"
+                />
+              </div>
+              <div v-if="postType === 2" class="imgs" style="cursor: pointer" :title="item.title">
+                <router-link target="_blank" :to="`/video/${item.videoId}`">
+                  <el-image
+                    lazy
+                    fit="cover"
+                    class="coverImg"
+                    :src="item.coverUrl"
+                  />
+                  <span style="position: absolute; top: 0; left: 60%; color:white"> {{ item.duration }} </span>
+                  <span style="position: absolute; bottom: 0; left: 0; color:white">
+                    <i v-if="item.horizontal" class="el-icon-monitor" />
+                    <i v-else class="el-icon-mobile-phone" />
+                  </span>
+                  <span style="position: absolute; bottom: 0; left: 10%; color:white">
+                    <i class="el-icon-video-play">{{ getVisited(item.view) }}</i>
+                  </span>
+                  <span style="position: absolute; bottom: 0; left: 40%; color:white">
+                    <i class="el-icon-s-comment">{{ getVisited(item.comment) }}</i>
+                  </span>
+                </router-link>
+              </div>
+              <div style="padding: 14px">
+                <router-link style="text-decoration-line: none" target="_blank" :to="`/video/${item.videoId}`">
+                  <span style="left: 0;margin-bottom: 0px;color: black;">{{ item.title | ellipsis }}</span>
+                </router-link>
+              </div>
+              <div style="padding: 14px">
+                <span style="left: 0;margin-bottom: 0px;color: black;">
+                  <router-link target="_blank" :to="`/user/${item.user.userId}`">
+                    <i class="el-icon-user"> {{ item.user.screenName | ellipsisUsername }} </i></router-link> • {{ item.pubDateStr }}
+                </span>
+              </div>
+              <div style="padding: 14px;">
+                <el-tooltip class="item" effect="dark" content="删除图片" placement="top-end">
+                  <el-button
+                    size="mini"
+                    type="danger"
+                    class="el-icon-delete"
+                    @click="onDeleteImage(image.imageFileId)"
+                  />
+                </el-tooltip>
+                <el-tooltip class="item" effect="dark" content="设为封面" placement="top-end">
+                  <el-button
+                    size="mini"
+                    type="warning"
+                    class="el-icon-picture-outline"
+                    @click="onSetCover(image.imageFileId)"
+                  />
+                </el-tooltip>
+              </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>
-  </div>
+  </el-row>
 </template>
 
 <script>
 import {
   deleteFavlist,
   getFavlist,
-  collectItem
+  collectItem, getAlbumItems
 } from '@/api/collect'
+import { handleVisited } from '@/assets/js/utils'
 
 export default {
   name: 'FavlistImage',
+  filters: {
+    ellipsis(value) {
+      if (!value) return ''
+      const max = 20
+      if (value.length > max) {
+        return value.slice(0, max) + '...'
+      }
+      return value
+    },
+    ellipsisUsername(value) {
+      if (!value) return ''
+      const max = 10
+      if (value.length > max) {
+        return value.slice(0, max) + '...'
+      }
+      return value
+    }
+  },
   data() {
     return {
       // 屏幕宽度, 为了控制分页条的大小
@@ -81,30 +136,39 @@ export default {
       totalSize: 0,
       dataList: [],
       favlistId: 1,
-      contentType: 1001
+      contentType: 1001,
+      albumId: null,
+      albumName: null,
+      postType: null
     }
   },
   created() {
-    this.getFavlistWrapper(this.favlistId, this.contentType, this.currentPage)
-    document.title = '图片收藏夹'
+    document.title = '编辑收藏夹'
+    this.albumId = this.$route.params.albumId
+    this.getAlbumItemsWrapper()
   },
   methods: {
     handleCurrentChange(pageNumber) {
       this.currentPage = pageNumber
       this.dataList = []
-      this.getFavlistWrapper(this.favlistId, this.contentType, this.currentPage)
+      this.getAlbumItemsWrapper()
       // 回到顶部
       scrollTo(0, 0)
     },
-    getFavlistWrapper(favlistId, conentType, page) {
-      getFavlist(favlistId, conentType, page).then(resp => {
+    getAlbumItemsWrapper() {
+      getAlbumItems(this.currentPage, this.albumId).then(resp => {
         if (resp.code === 0) {
           const respData = resp.data
-          this.dataList = respData.list
-          this.totalSize = respData.totalSize
+          this.albumName = respData.albumName
+          this.postType = respData.postType
+          this.dataList = respData.pageList.list
+          this.totalSize = respData.pageList.totalSize
         }
       })
     },
+    onReturnAlbum() {
+      this.$router.push('/post/fav/video')
+    },
     showImages(index) {
       const imageUrls = []
       for (const i of this.dataList) {
@@ -121,6 +185,9 @@ export default {
         }
       })
     },
+    getVisited(visited) {
+      return handleVisited(visited)
+    },
     // 移除收藏
     removeCollection(item) {
       this.$confirm('确认删除本收藏？', '提示', {
@@ -199,7 +266,7 @@ export default {
 
 .coverImg {
   width: 100%;
-  height: 320px;
+  height: 130px;
   display: block;
 }
 

src/views/post/FavlistVideo.vue

@@ -16,7 +16,7 @@
             :value="item.value"
           />
         </el-select>
-        <el-button type="plain" icon="el-icon-plus" style="margin-left: 5px" @click="createAlbumDiaglog = true">创建合集</el-button>
+<!--        <el-button type="plain" icon="el-icon-plus" style="margin-left: 5px" @click="createAlbumDiaglog = true">创建合集</el-button>-->
       </el-row>
     </el-header>
     <el-main>
@@ -140,33 +140,6 @@
       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="onCreateAlbum">确定</el-button>
-        </div>
-        <div class="text item">
-          <el-form ref="form" :model="form" label-width="80px">
-            <el-form-item label="相册名">
-              <el-input v-model="form.albumName" style="width: 70%; padding-right: 2px" placeholder="相册名不能超过 50 个字符" />
-            </el-form-item>
-            <el-form-item label="稿件类型">
-              <el-select v-model="form.postType" placeholder="选择稿件类型">
-                <el-option label="图片" value="1" />
-                <el-option label="视频" value="2" />
-              </el-select>
-            </el-form-item>
-            <el-form-item label="可见范围">
-              <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>
-            </el-form-item>
-          </el-form>
-        </div>
-      </el-card>
     </el-dialog>
 
     <!-- 修改可见范围对话框 -->
@@ -270,7 +243,7 @@ export default {
       this.showEditScopeDialog = true
     },
     handleEdit(index, row) {
-      const path = '/post/edit/album/' + row.albumId
+      const path = '/post/fav/image/' + row.albumId
       this.$router.push(path)
     },
     handleDelete(index, row) {
@@ -296,29 +269,6 @@ export default {
         })
       })
     },
-    onCreateAlbum() {
-      this.createAlbumDiaglog = false
-      createAlbum(this.form).then(res => {
-        if (res.code === 0) {
-          this.$message.info('合集已创建')
-          this.$router.go(0)
-        } else {
-          this.$notify({
-            title: '提示',
-            message: res.msg,
-            type: 'warning',
-            duration: 3000
-          })
-        }
-      }).catch(error => {
-        this.$notify({
-          title: '提示',
-          message: error.message,
-          type: 'warning',
-          duration: 3000
-        })
-      })
-    },
     onUpdateScope() {
       this.showEditScopeDialog = false
       updateAlbumScope(this.form).then(res => {