更新 status-card

src/components/card/StatusCard.vue

@@ -1,17 +1,41 @@
 <template>
   <el-card :body-style="{ padding: '0px' }" class="card">
-    <span v-html="video.text" />
-    <el-row v-if="video.imageUrls.length !== 0">
-      <el-col :md="6" v-for="imageUrl in video.imageUrls" :key="imageUrl.thumbnailUrl">
+    <el-row>
+      <el-col :md="1">
+        <router-link target="_blank" :to="`/user/` + status.userAvatar.userId">
+          <el-avatar>
+            <el-image :src="status.userAvatar.avatarUrl" />
+          </el-avatar>
+        </router-link>
+      </el-col>
+      <el-col :md="17">
+        <el-row>
+          <router-link target="_blank" :to="`/user/` + status.userAvatar.userId">
+            <span>{{ status.userAvatar.screenName }}</span>
+          </router-link>
+        </el-row>
+        <el-row>
+          <span>{{ status.createdAt }} 来自 微博网页版</span>
+        </el-row>
+      </el-col>
+    </el-row>
+    <el-row>
+      <span v-html="status.text" />
+    </el-row>
+    <el-row v-if="status.imageUrls.length !== 0">
+      <el-col :md="6" v-for="imageUrl in status.imageUrls" :key="imageUrl.thumbnailUrl">
         <el-image
           lazy
           fit="cover"
           class="coverImg"
           :src="imageUrl.thumbnailUrl"
-          @click="showImage(video.imageUrls)">
+          @click="showImage(status.imageUrls)">
         </el-image>
       </el-col>
     </el-row>
+    <el-row v-if="status.audioUrl !== undefined && status.audioUrl !== null">
+      <span>音频播放</span>
+    </el-row>
   </el-card>
 </template>
 
@@ -20,7 +44,7 @@
 export default {
   name: 'StatusCard',
   props: {
-    video: {
+    status: {
       type: Object,
       default: null
     },

src/views/home/Status.vue

@@ -11,7 +11,7 @@
     <el-row id="movie-list">
       <el-col :md="18">
         <el-row v-for="(video, index) in videoList" :key="index" :md="16" :sm="12" :xs="12">
-          <status-card :video="video" />
+          <status-card :status="video" />
         </el-row>
       </el-col>
     </el-row>

src/views/user/Home.vue

@@ -47,8 +47,8 @@
     <el-row>
       <el-col :md="24" class="movie-list">
         <el-tabs v-model="activeName" @tab-click='tabClick'>
-          <el-tab-pane label="主页" name="home">
-            <div v-if="activeName === 'home'">
+          <el-tab-pane label="视频" name="video">
+            <div v-if="activeName === 'video'">
               <el-col v-for="(video, index) in videoList" :key="index" :md="6" :sm="12" :xs="12">
                 <video-card :video="video" />
               </el-col>
@@ -56,7 +56,9 @@
           </el-tab-pane>
           <el-tab-pane label="状态" name="status">
             <div v-if="activeName === 'status'">
-              <status-card />
+              <el-row v-for="(status, index) in statusList" :key="index" :md="16" :sm="12" :xs="12">
+                <status-card :status="status" />
+              </el-row>
             </div>
           </el-tab-pane>
         </el-tabs>
@@ -74,6 +76,13 @@
         />
       </el-col>
     </el-row>
+
+    <el-row v-if="showEmpty" class="not-result">
+      <el-col :span="12" :offset="6">
+        <img src="@/assets/img/icon/not-collection.png">
+        <div>暂无内容</div>
+      </el-col>
+    </el-row>
   </div>
 </template>
 
@@ -97,11 +106,13 @@ export default {
         icon: 'el-icon-check',
         text: '已关注'
       },
-      activeName: 'home',
+      activeName: 'video',
       currentPage: 1,
       pageSize: 12,
       totalPages: 0,
-      videoList: []
+      videoList: [],
+      statusList: [],
+      showEmpty: false
     }
   },
   created() {
@@ -143,15 +154,20 @@ export default {
     },
     tabClick(tab) {
       const  tabName = tab.name
-      if (tabName === 'home') {
-        console.log('获取主页')
+      if (tabName === 'video') {
+        console.log('获取视频')
       } else if (tabName === 'status') {
         console.log('获取状态')
         userStatus(this.userId, 1).then(res => {
-          console.log(res)
+          if (res.code === 0) {
+            this.statusList = res.data.list
+            if (this.statusList.length === 0) {
+              this.showEmpty = true
+            } else {
+              this.showEmpty = false
+            }
+          }
         })
-      } else if (tabName === 'video') {
-        console.log('获取视频')
       }
     },
     followUser(userId) {
@@ -175,6 +191,12 @@ export default {
           this.videoList = resData.list
           this.totalPages = resData.totalPages
           this.lastId = resData.lastId
+
+          if (this.videoList .length !== 0) {
+            this.showEmpty = false
+          } else {
+            this.showEmpty = true
+          }
         }
       })
     }
@@ -202,4 +224,10 @@ export default {
     padding-right: 0.5%;
   }
 }
+
+.not-result {
+  padding-top: 100px;
+  padding-bottom: 100px;
+  text-align: center;
+}
 </style>