相册开发

src/components/card/ImageAlbumCard.vue

@@ -10,6 +10,9 @@
               :src="imageAlbum.coverUrl"
               class="coverImg"
             />
+            <span style="position: absolute; bottom: 0; right: 0; color:white">
+              <i v-if="true" class="el-icon-picture-outline">123</i>
+            </span>
           </div>
         </router-link>
         <div style="padding: 14px">

src/views/home/ImagePage.vue

@@ -11,7 +11,9 @@
                 </el-avatar>
               </el-col>
               <el-col :md="23">
-                <span>{{ user.screenName }}</span>
+                <router-link target="_blank" :to="`/user/${user.userId}/image`">
+                  <span>{{ user.screenName }}的相册</span>
+                </router-link>
                 <span v-html="'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'" />
                 <el-button
                   type="danger"
@@ -32,6 +34,7 @@
               </el-col>
             </el-row>
             <el-row>
+              <br>
               <span>{{data.albumName}}</span>
             </el-row>
           </div>
@@ -51,14 +54,11 @@
                   :src="image.thumbnailUrl"
                   @click="showImages(index)">
                 </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"/>
+                  <i v-if="collected" class="el-icon-star-on"/>
+                  <i v-else class="el-icon-star-off" @click="collectImage"/>
                 </span>
               </div>
             </el-card>
@@ -91,20 +91,21 @@ export default {
         icon: 'el-icon-plus',
         text: '关注'
       },
+      collected: false
     }
   },
   created() {
-    this.userId = 12973
-    getUserInfo(this.userId).then(res => {
+    const albumId = this.$route.params.albumId
+    getUserAlbum(albumId).then(res => {
       if (res.code === 0) {
-        this.user = res.data
+        const resData = res.data
+        this.data = resData
+        document.title = '相册 - ' + resData.albumName
 
-        const albumId = this.$route.params.albumId
-        getUserAlbum(albumId).then(res => {
+        this.userId = resData.userId
+        getUserInfo(this.userId).then(res => {
           if (res.code === 0) {
-            this.data = res.data
-
-            document.title = '相册'
+            this.user = res.data
           }
         })
       }
@@ -156,6 +157,10 @@ export default {
     sendMessage(userId) {
       console.log('发送消息')
     },
+    collectImage() {
+      console.log('收藏图片')
+      this.collected = true
+    }
   }
 }
 </script>
@@ -167,11 +172,6 @@ export default {
   padding-right: 6%;
 }
 
-.pagination {
-  text-align: center;
-  padding: 10px;
-}
-
 /*处于手机屏幕时*/
 @media screen and (max-width: 768px){
   .movie-list {
@@ -187,7 +187,7 @@ export default {
 
 .coverImg {
   width: 100%;
-  height: 175px;
+  height: 320px;
   display: block;
 }
 

src/views/user/Home.vue

@@ -320,22 +320,25 @@ export default {
         this.lastId = 0
         this.userVideoListWrapper(this.currentPage, this.userId, this.lastId)
       } else if (this.activeName === 'image') {
-        console.log('获取用户相册')
         getUserAlbums(this.userId).then(res => {
           if (res.code === 0) {
-            for (const item of res.data) {
-              this.dataList.push(item)
+            const resData = res.data
+            if (resData.length !== 0) {
+              this.showEmpty = false
+              for (const item of resData) {
+                this.dataList.push(item)
+              }
+            } else {
+              this.showEmpty = true
             }
           }
         })
       } else if (this.activeName === 'audio') {
         this.currentPage = 1
         this.lastId = 0
-        this.userVideoListWrapper(this.currentPage, this.userId, this.lastId)
       } else if (this.activeName === 'article') {
         this.currentPage = 1
         this.lastId = 0
-        this.userVideoListWrapper(this.currentPage, this.userId, this.lastId)
       } else if (this.activeName === 'following') {
         getUserFollowing(this.userId).then(res => {
           if (res.code === 0) {