相册开发

src/api/image.js

@@ -0,0 +1,15 @@
+import { get, post } from '@/utils/request'
+
+const imageApi = {
+  userAlbumApi: '/api/content/image/album',
+  userAlbumApi1: '/api/content/image/album',
+}
+
+// 视频推荐接口
+export function getUserAlbums(userId) {
+  return get(imageApi.userAlbumApi + '?userId=' + userId)
+}
+
+export function getUserAlbum(albumId) {
+  return get(imageApi.userAlbumApi1 + '/' + albumId)
+}

src/components/card/ImageAlbumCard.vue

@@ -0,0 +1,153 @@
+<template>
+  <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}`">
+          <div class="imgs">
+            <el-image
+              lazy
+              fit="cover"
+              :src="imageAlbum.coverUrl"
+              class="coverImg"
+            />
+          </div>
+        </router-link>
+        <div style="padding: 14px">
+          <router-link target="_blank" :to="`/image/album/${imageAlbum.albumId}`">
+            <span style="left: 0;margin-bottom: 0px;color: black;">{{ imageAlbum.albumName | ellipsis }}</span>
+          </router-link>
+        </div>
+<!--        <div style="padding: 14px">
+          <span style="left: 0;margin-bottom: 0px;color: black;">
+            <router-link target="_blank" :to="`/user/${imageAlbum.userId}`"><i class="el-icon-user"> {{ imageAlbum.username }} </i></router-link> · {{ imageAlbum.pubDate }}
+          </span>
+        </div>-->
+      </el-card>
+    </div>
+  </el-col>
+</template>
+
+<script>
+import { handleVisited } from 'assets/js/utils'
+
+export default {
+  name: 'ImageAlbumCard',
+  filters: {
+    ellipsis(value) {
+      if (!value) return ''
+      const max = 20
+      if (value.length > max) {
+        return value.slice(0, max) + '...'
+      }
+      return value
+    }
+  },
+  props: {
+    imageAlbum: {
+      type: Object,
+      default: null
+    },
+    // 时间前的描述
+    dateTit: {
+      type: String,
+      default: ''
+    }
+  },
+  methods: {
+    getVisited(visited) {
+      return handleVisited(visited)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.time {
+  font-size: 15px;
+  color: #999;
+}
+
+.bottom {
+  margin-top: 13px;
+  line-height: 12px;
+}
+
+.tit {
+  font-weight: 700;
+  font-size: 18px;
+
+  height: 50px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2; /*行数*/
+  -webkit-box-orient: vertical;
+}
+
+.num {
+  position: relative;
+  font-size: 15px;
+  padding-top: 9px;
+}
+
+/*处于手机屏幕时*/
+@media screen and (max-width: 768px) {
+  .tit {
+    font-weight: 600;
+    font-size: 12px;
+    height: 32px;
+  }
+  .time {
+    font-size: 10px;
+    color: #999;
+  }
+  .num {
+    font-size: 9px;
+    padding-top: 3px;
+  }
+  .bottom {
+    margin-top: 2px;
+    line-height: 7px;
+  }
+  .coverImg {
+    height: 120px !important;
+  }
+}
+
+.coverImg {
+  width: 100%;
+  height: 175px;
+  display: block;
+}
+
+.clearfix:before,
+.clearfix:after {
+  display: table;
+  content: "";
+}
+
+.clearfix:after {
+  clear: both;
+}
+
+.card {
+  margin-bottom: 20px;
+  transition: all 0.6s; /*所有属性变化在0.6秒内执行动画*/
+}
+
+/*.card:hover {
+  !*鼠标放上之后元素变成1.06倍大小*!
+  transform: scale(1.06);
+}*/
+.imgs {
+  position: relative;
+}
+.play-icon {
+  position: absolute;
+  /*top: -15px;*/
+  right: 2%;
+  bottom: 5px;
+  z-index: 7;
+  width: 40px;
+}
+</style>

src/components/card/ImageCard.vue

@@ -2,7 +2,7 @@
   <el-col style="padding-right: 7px; padding-left: 7px">
     <div style="cursor: pointer" :title="video.title">
       <el-card :body-style="{ padding: '0px' }" class="card">
-        <router-link target="_blank" :to="`/image/${video.videoId}`">
+        <router-link target="_blank" :to="`/video/${video.videoId}`">
           <div class="imgs">
             <el-image
               lazy
@@ -10,17 +10,17 @@
               :src="video.coverUrl"
               class="coverImg"
             />
-            <span style="position: absolute; bottom: 0; left: 0; color:red">
-              <i v-if="video.viewCount === 0" class="el-icon-mobile-phone" />
-              <i v-else class="el-icon-monitor" />
+            <span style="position: absolute; bottom: 0; left: 0; color:white">
+              <i v-if="video.horizontal" class="el-icon-monitor" />
+              <i v-else class="el-icon-mobile-phone" />
             </span>
-            <span style="position: absolute; bottom: 0; left: 10%; color:red">
+            <span style="position: absolute; bottom: 0; left: 10%; color:white">
               <i class="el-icon-video-play">{{ getVisited(video.viewCount) }}</i>
             </span>
-            <span style="position: absolute; bottom: 0; left: 30%; color:red">
+            <span style="position: absolute; bottom: 0; left: 30%; color:white">
               <i class="el-icon-s-comment">{{ getVisited(video.commentCount) }}</i>
             </span>
-            <span style="position: absolute; bottom: 0; right: 0; color:red"> {{ video.duration }} </span>
+            <span style="position: absolute; bottom: 0; right: 0; color:white"> {{ video.duration }} </span>
           </div>
         </router-link>
         <div style="padding: 14px">
@@ -28,9 +28,9 @@
             <span style="left: 0;margin-bottom: 0px;color: black;">{{ video.title | ellipsis }}</span>
           </router-link>
         </div>
-        <div style="padding: 14px">
+        <div v-if="video.user !== undefined && video.user !== null" style="padding: 14px">
           <span style="left: 0;margin-bottom: 0px;color: black;">
-            <router-link target="_blank" :to="`/user/${video.userId}`"><i class="el-icon-user"> {{ video.username }} </i></router-link> · {{ video.pubDate }}
+            <router-link target="_blank" :to="`/user/${video.user.userId}`"><i class="el-icon-user"> {{ video.user.screenName }} </i></router-link> · {{ convertTimestamp(video.pubDate) }}
           </span>
         </div>
       </el-card>
@@ -46,7 +46,7 @@ export default {
   filters: {
     ellipsis(value) {
       if (!value) return ''
-      const max = 20
+      const max = 10
       if (value.length > max) {
         return value.slice(0, max) + '...'
       }
@@ -67,6 +67,23 @@ export default {
   methods: {
     getVisited(visited) {
       return handleVisited(visited)
+    },
+    convertTimestamp(value) {
+      const date = new Date(value*1000)
+      var month = date.getMonth()
+      if (month < 10) {
+        if (month === 0) {
+          month = '01'
+        } else {
+          month = '0' + month
+        }
+      }
+
+      var day = date.getDay()
+      if (day < 10) {
+        day = '0' + day
+      }
+      return month + '-' + day
     }
   }
 }

src/components/upload/PublishImage.vue

@@ -12,13 +12,13 @@
             label-file-processing-aborted="图片上传被取消"
             label-tap-to-retry="尝试重试"
             label-file-processing-complete="图片上传成功！"
-            label-max-file-size="上传的图片大小不能超过 10MB"
-            label-max-file-size-exceeded="上传的图片大小不能超过 10MB"
+            label-max-file-size="上传的图片大小不能超过 100MB"
+            label-max-file-size-exceeded="上传的图片大小不能超过 100MB"
             allow-file-size-validation="true"
-            max-file-size="10MB"
+            max-file-size="100MB"
             accepted-file-types="image/png, image/jpeg, image/jpg, image/gif"
             :allow-multiple="true"
-            :max-files="12"
+            :max-files="100"
             :server="server"
             :instant-upload="true"
             @init="handleFilePondInit"
@@ -71,7 +71,7 @@ export default {
         revert: null,
         process: {
           headers: {
-            'Authorization': this.$store.getters.token
+            Authorization: '1234567890'
           },
           ondata(formData) {
             formData.append('channelId', 5)
@@ -80,8 +80,8 @@ export default {
           onload(response) {
             const resp = JSON.parse(response)
             if (resp.code === 0) {
-              console.log(resp)
-              //imgFileIds.push(resp.data.imageUploadId)
+              const uploadId = resp.data.uploadId
+              imgFileIds.push(uploadId)
             } else {
               if (resp.msg != null) {
                 this.message = '上传文件出现异常，请重新上传！' + resp.msg
@@ -96,7 +96,8 @@ export default {
       imageList: [],
       form: {
         title: null,
-        album: null
+        album: null,
+        imageIds: [],
       }
     }
   },
@@ -134,6 +135,7 @@ export default {
     },
     onSubmit() {
       console.log(this.form)
+      console.log(imgFileIds)
     }
   }
 }

src/components/upload/PublishVideo.vue

@@ -25,7 +25,9 @@
         <h2>上传封面</h2>
         <el-upload
           class="avatar-uploader"
-          action="//api.reghao.cn/api/file/upload/image"
+          action="//oss.reghao.cn/"
+          :headers="imgHeaders"
+          :data="imgData"
           :show-file-list="false"
           :before-upload="beforeAvatarUpload"
           :on-success="handleAvatarSuccess"
@@ -90,25 +92,22 @@ export default {
         testChunks: false,
         query: (file, chunk) => {
           return {
-            key: this.form.videoObjectName,
-            acl: '',
-            'content-type': '',
-            'success_action_redirect': '',
-            'x-amz-meta-uuid': '',
-            'x-amz-server-side-encryption': '',
-            'X-amz-credential': '',
-            'x-amz-algorithm': '',
-            'x-amz-date': '',
-            'x-amz-meta-tag': '',
-            'x-amz-signature': ''
+            channelId: 2
           }
         },
         headers: {
+          Authorization: '1234567890'
         }
       },
       attrs: {
         accept: 'video/*'
       },
+      imgHeaders: {
+        Authorization: '1234567890'
+      },
+      imgData: {
+        channelId: 3
+      },
       /***********************************************************************/
       coverUrl: null,
       categoryMap: {
@@ -125,6 +124,7 @@ export default {
       // 提交给后端的数据
       form: {
         videoObjectName: null,
+        videoFileId: null,
         coverFileId: null,
         title: null,
         description: null,
@@ -163,6 +163,9 @@ export default {
     onFileSuccess(rootFile, file, response, chunk) {
       const res = JSON.parse(response)
       if (res.code === 0) {
+        const resData = res.data
+        this.form.videoFileId = resData.uploadId
+
         this.$notify(
           {
             title: '提示',
@@ -198,6 +201,13 @@ export default {
     handleAvatarSuccess(res, file) {
       this.imageList.push(file)
       this.imageUrl = URL.createObjectURL(file.raw)
+      if (res.code === 0) {
+        const resData = res.data
+        const uploadId = resData.uploadId
+        const url = resData.url
+      } else {
+
+      }
     },
     // 选择视频后获取视频的分辨率和时长, 并截取第一秒的内容作为封面
     processVideo(file) {
@@ -249,25 +259,30 @@ export default {
         while (n--) {
           u8arr[n] = bstr.charCodeAt(n)
         }
+
         const coverFile = new File([u8arr], 'cover.jpg', { type: 'image/jpeg' })
         if (coverFile instanceof File) {
           const formData = new FormData()
           formData.append('file', coverFile)
-          fetch(`//api.reghao.cn/api/file/upload/image`, {
-            headers: {},
+          formData.append('channelId', 3)
+          fetch(`//oss.reghao.cn/`, {
+            headers: {
+              Authorization: '1234567890'
+            },
             method: 'POST',
             credentials: 'include',
             body: formData
           }).then(response => response.json())
             .then(json => {
               if (json.code === 0) {
-                this.form.coverFileId = json.data.imageFileId
-                this.imageUrl = json.data.imageUrl
+                const resData = json.data
+                this.form.coverFileId = resData.uploadId
+                this.imageUrl = resData.url
               } else {
                 this.$notify(
                   {
                     title: '提示',
-                    message: '视频封面上传失败，请重试！' + json.message,
+                    message: '视频封面上传失败，请重试！' + json.msg,
                     type: 'warning',
                     duration: 3000
                   }
@@ -342,7 +357,7 @@ export default {
       }
     },
     onSubmit() {
-      if (!this.form.videoObjectName) {
+      if (!this.form.videoFileId) {
         this.$notify(
           {
             title: '提示',

src/router/index.js

@@ -118,6 +118,11 @@ const routes = [
     name: 'ImagePage',
     component: ImagePage
   },
+  {
+    path: '/image/album/:albumId',
+    name: 'ImagePage',
+    component: ImagePage
+  },
   {
     path: '/article',
     name: 'ArticleIndex',

src/views/home/Audio.vue

@@ -5,7 +5,6 @@
       <!--电影列表-->
       <el-col :md="18">
         <el-col v-for="(video, index) in videoList" :key="index" :md="6" :sm="12" :xs="12">
-          <video-card :video="video" />
         </el-col>
         <!--
           分页按钮：
@@ -19,9 +18,9 @@
             :small="screenWidth <= 768"
             hide-on-single-page
             layout="prev, pager, next"
-            :current-page="$store.state.activePage"
-            :page-size="6"
-            :total="$store.state.pageBean.totalCount"
+            :page-size="pageSize"
+            :current-page="currentPage"
+            :total="totalSize"
           />
         </el-col>
       </el-col>
@@ -36,16 +35,18 @@
 </template>
 
 <script>
-import VideoCard from 'components/card/VideoCard'
 
 export default {
   name: 'Audio',
-  components: { VideoCard},
+  components: {},
   data() {
     return {
       // 屏幕宽度, 为了控制分页条的大小
       screenWidth: document.body.clientWidth,
       currentPage: 1,
+      pageSize: 12,
+      totalPages: 0,
+      totalSize: 0,
       videoList: [],
       showEmpty: true
     }

src/views/home/Image.vue

@@ -19,9 +19,9 @@
               :small="screenWidth <= 768"
               hide-on-single-page
               layout="prev, pager, next"
-              :current-page="$store.state.activePage"
-              :page-size="6"
-              :total="$store.state.pageBean.totalCount"
+              :page-size="pageSize"
+              :current-page="currentPage"
+              :total="totalSize"
               @current-change="handleCurrentChange"
           />
         </el-col>
@@ -48,6 +48,9 @@ export default {
       // 屏幕宽度, 为了控制分页条的大小
       screenWidth: document.body.clientWidth,
       currentPage: 1,
+      pageSize: 12,
+      totalPages: 0,
+      totalSize: 0,
       videoList: [],
       showEmpty: true
     }

src/views/home/ImagePage.vue

@@ -1,79 +1,109 @@
 <template>
   <div>
-    <!--电影列表，与推荐列表-->
-    <el-row id="movie-list">
-      <!--电影列表-->
+    <el-row class="movie-list">
       <el-col :md="24">
-        <el-col v-for="(video, index) in videoList" :key="index" :md="6" :sm="12" :xs="12">
-          <el-col style="padding-right: 7px; padding-left: 7px">
-            <div style="cursor: pointer" :title="video.title">
-              <el-card :body-style="{ padding: '0px' }" class="card">
-                <router-link target="_blank" :to="`/image/${video.videoId}`">
-                  <div class="imgs">
-                    <el-image
-                        lazy
-                        fit="cover"
-                        :src="video.coverUrl"
-                        class="coverImg"
-                    />
-                    <span style="position: absolute; bottom: 0; left: 0; color:red">
-              <i v-if="video.viewCount === 0" class="el-icon-mobile-phone" />
-              <i v-else class="el-icon-monitor" />
-            </span>
-                    <span style="position: absolute; bottom: 0; left: 10%; color:red">
-              <i class="el-icon-video-play">{{ video.viewCount }}</i>
-            </span>
-                    <span style="position: absolute; bottom: 0; left: 30%; color:red">
-              <i class="el-icon-s-comment">{{ video.commentCount }}</i>
-            </span>
-                    <span style="position: absolute; bottom: 0; right: 0; color:red"> {{ video.duration }} </span>
-                  </div>
-                </router-link>
-                <div style="padding: 14px">
-                  <router-link target="_blank" :to="`/video/${video.videoId}`">
-                    <span style="left: 0;margin-bottom: 0px;color: black;">{{ video.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/${video.userId}`"><i class="el-icon-user"> {{ video.username }} </i></router-link> · {{ video.pubDate }}
-          </span>
-                </div>
-              </el-card>
-            </div>
+        <el-card :if="!user" :body-style="{ padding: '0px' }" class="card">
+          <div slot="header" class="clearfix">
+            <el-row>
+              <el-col :md="1">
+                <el-avatar>
+                  <el-image :src="user.avatarUrl"/>
+                </el-avatar>
+              </el-col>
+              <el-col :md="23">
+                <span>{{ user.screenName }}</span>
+                <span v-html="'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'" />
+                <el-button
+                  type="danger"
+                  size="mini"
+                  :icon="followButton.icon"
+                  @click="followUser(user.userId)"
+                >
+                  <span>{{followButton.text}}</span>
+                </el-button>
+                <el-button
+                  type="danger"
+                  size="mini"
+                  icon="el-icon-message"
+                  @click="sendMessage(user.userId)"
+                >
+                  <span>发消息</span>
+                </el-button>
+              </el-col>
+            </el-row>
+            <el-row>
+              <span>{{data.albumName}}</span>
+            </el-row>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+    <el-row>
+      <el-col :md="24" class="movie-list">
+        <div>
+          <el-col v-for="image in data.imageUrls" :key="image.thumbnailUrl" :md="6" :sm="12" :xs="12">
+            <el-card :body-style="{ padding: '0px' }" class="card">
+              <div class="imgs">
+                <el-image
+                  lazy
+                  fit="cover"
+                  class="coverImg"
+                  :src="image.thumbnailUrl"
+                  @click="showImages(data.imageUrls)">
+                </el-image>
+                <span style="position: absolute; bottom: 0; left: 0; color:white">
+                    <i v-if="true" class="el-icon-monitor" />
+                    <i v-else class="el-icon-mobile-phone" />
+                  </span>
+              </div>
+              <div style="padding: 14px;">
+                <span>
+                  <i class="el-icon-collection-tag"/>
+                </span>
+              </div>
+            </el-card>
           </el-col>
-        </el-col>
+        </div>
       </el-col>
     </el-row>
   </div>
 </template>
 
 <script>
-import ImageCard from 'components/card/ImageCard'
-import { videoRecommend } from '@/api/video'
+import { getUserAlbums, getUserAlbum } from "@/api/image";
+import {followUser, getUserInfo, unfollowUser} from "@/api/user";
 
 export default {
-  name: 'Image',
-  components: { ImageCard },
+  name: 'ImagePage',
   data() {
     return {
       // 屏幕宽度, 为了控制分页条的大小
       screenWidth: document.body.clientWidth,
       currentPage: 1,
-      videoList: []
+      user: null,
+      data: null,
+      followButton: {
+        icon: 'el-icon-plus',
+        text: '关注'
+      },
     }
   },
   created() {
-    this.currentPage = 1
-    videoRecommend(this.currentPage).then(res => {
+    this.userId = 12973
+    getUserInfo(this.userId).then(res => {
       if (res.code === 0) {
-        const resData = res.data
-        this.videoList = resData.list
+        this.user = res.data
+
+        const albumId = this.$route.params.albumId
+        getUserAlbum(albumId).then(res => {
+          if (res.code === 0) {
+            this.data = res.data
+
+            document.title = '相册'
+          }
+        })
       }
     })
-    // console.log(this.$store.state.videos);
-    // 当页面挂载时，页码变为1
-    this.$store.commit('updatePage', 1)
   },
   mounted() {
     // 当窗口宽度改变时获取屏幕宽度
@@ -85,19 +115,50 @@ export default {
     }
   },
   methods: {
-    handleCurrentChange(currentPage) {
-      this.currentPage = currentPage
-      this.$store.commit('updatePage', currentPage)
-      this.$store.dispatch('getPageBean')
-      // 回到顶部
-      scrollTo(0, 0)
-    }
+    showImages(imageUrls) {
+      const imgs = []
+      for (const i of imageUrls) {
+        imgs.push(i.originalUrl)
+      }
+
+      this.$viewerApi({
+        images: imgs,
+        options: {
+          movable: true,
+          fullscreen: false,
+          keyboard: true
+        }
+      })
+    },
+    showImage() {
+      this.$viewerApi()
+    },
+    followUser(userId) {
+      if (this.followButton.text === '关注') {
+        followUser(userId).then(res => {
+          if (res.code === 0) {
+            this.followButton.text = '已关注'
+            this.followButton.icon = 'el-icon-check'
+          }
+        })
+      } else {
+        unfollowUser(userId).then(res => {
+          if (res.code === 0) {
+            this.followButton.text = '关注'
+            this.followButton.icon = 'el-icon-plus'
+          }
+        })
+      }
+    },
+    sendMessage(userId) {
+      console.log('发送消息')
+    },
   }
 }
 </script>
 
 <style scoped>
-#movie-list {
+.movie-list {
   padding-top: 15px;
   padding-left: 6%;
   padding-right: 6%;
@@ -110,60 +171,12 @@ export default {
 
 /*处于手机屏幕时*/
 @media screen and (max-width: 768px){
-  #movie-list {
+  .movie-list {
     padding-top: 8px;
     padding-left: 0.5%;
     padding-right: 0.5%;
   }
-}
-
-.time {
-  font-size: 15px;
-  color: #999;
-}
 
-.bottom {
-  margin-top: 13px;
-  line-height: 12px;
-}
-
-.tit {
-  font-weight: 700;
-  font-size: 18px;
-
-  height: 50px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: -webkit-box;
-  -webkit-line-clamp: 2; /*行数*/
-  -webkit-box-orient: vertical;
-}
-
-.num {
-  position: relative;
-  font-size: 15px;
-  padding-top: 9px;
-}
-
-/*处于手机屏幕时*/
-@media screen and (max-width: 768px) {
-  .tit {
-    font-weight: 600;
-    font-size: 12px;
-    height: 32px;
-  }
-  .time {
-    font-size: 10px;
-    color: #999;
-  }
-  .num {
-    font-size: 9px;
-    padding-top: 3px;
-  }
-  .bottom {
-    margin-top: 2px;
-    line-height: 7px;
-  }
   .coverImg {
     height: 120px !important;
   }
@@ -175,34 +188,12 @@ export default {
   display: block;
 }
 
-.clearfix:before,
-.clearfix:after {
-  display: table;
-  content: "";
-}
-
-.clearfix:after {
-  clear: both;
-}
-
 .card {
   margin-bottom: 20px;
   transition: all 0.6s; /*所有属性变化在0.6秒内执行动画*/
 }
 
-/*.card:hover {
-  !*鼠标放上之后元素变成1.06倍大小*!
-  transform: scale(1.06);
-}*/
 .imgs {
   position: relative;
 }
-.play-icon {
-  position: absolute;
-  /*top: -15px;*/
-  right: 2%;
-  bottom: 5px;
-  z-index: 7;
-  width: 40px;
-}
 </style>

src/views/user/Home.vue

@@ -72,8 +72,8 @@
               相册<el-badge :value="videoCount" :max="9999" class="item" type="warning"/>
             </span>
             <div v-if="activeName === 'image'">
-              <el-col v-for="(video, index) in videoList" :key="index" :md="6" :sm="12" :xs="12">
-                <video-card :video="video" />
+              <el-col v-for="(album, index) in dataList" :key="index" :md="6" :sm="12" :xs="12">
+                <image-album-card :imageAlbum="album" />
               </el-col>
             </div>
           </el-tab-pane>
@@ -148,13 +148,16 @@
 import UserCard from '@/components/card/UserCard'
 import StatusCard from '@/components/card/StatusCard'
 import VideoCard from '@/components/card/VideoCard'
+import ImageAlbumCard from '@/components/card/ImageAlbumCard'
+
 import { getUserInfo, getUserFollowing, getUserFollower, checkRelation, followUser, unfollowUser } from "@/api/user";
 import { userVideoList, getUserContentData } from "@/api/video";
+import { getUserAlbums } from "@/api/image";
 import { userStatus } from "@/api/status";
 
 export default {
   name: 'Home',
-  components: { UserCard, StatusCard, VideoCard },
+  components: { UserCard, StatusCard, VideoCard, ImageAlbumCard },
   data() {
     return {
       // 屏幕宽度, 为了控制分页条的大小
@@ -169,6 +172,7 @@ export default {
       currentPage: 1,
       pageSize: 12,
       totalSize: 0,
+      dataList: [],
       videoList: [],
       statusList: [],
       followerList: [],
@@ -186,6 +190,8 @@ export default {
       if (res.code === 0) {
         this.user = res.data
         const path = this.$route.path
+        console.log('path = ' + path)
+        console.log(path.endsWith("video"))
         if (path.endsWith("video")) {
           this.activeName = 'video'
           document.title = this.user.screenName + '的视频'
@@ -207,6 +213,7 @@ export default {
         } else {
           document.title = this.user.screenName + '的个人主页'
         }
+        this.getData()
       }
     })
 
@@ -228,8 +235,6 @@ export default {
         this.followerCount = resData.userFollowCount.followerCount
       }
     })
-    //this.userVideoListWrapper(1, this.userId, 0)
-    this.getData()
   },
   mounted() {
     // 当窗口宽度改变时获取屏幕宽度
@@ -315,9 +320,14 @@ export default {
         this.lastId = 0
         this.userVideoListWrapper(this.currentPage, this.userId, this.lastId)
       } else if (this.activeName === 'image') {
-        this.currentPage = 1
-        this.lastId = 0
-        this.userVideoListWrapper(this.currentPage, this.userId, this.lastId)
+        console.log('获取用户相册')
+        getUserAlbums(this.userId).then(res => {
+          if (res.code === 0) {
+            for (const item of res.data) {
+              this.dataList.push(item)
+            }
+          }
+        })
       } else if (this.activeName === 'audio') {
         this.currentPage = 1
         this.lastId = 0