chore(SPA): 动态详情上显示相关话题

issue #467
slimkit · Dec 10, 2018 · a4f5918 · a4f5918
1 parent 0c5427d
commit a4f5918
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 3 deletions.
diff --git a/resources/spa/src/page/feed/FeedDetail.vue b/resources/spa/src/page/feed/FeedDetail.vue
@@ -51,6 +51,15 @@
             >
           </AsyncFile>
           <p class="m-text-box" v-html="formatBody(feedContent)" />
+          <ul v-if="topics.length" class="topics">
+            <li
+              v-for="topic in topics"
+              :key="topic.id"
+              class="topic-item"
+              @click.capture.stop="viewTopic(topic.id)"
+              v-text="topic.name"
+            />
+          </ul>
         </div>
         <div class="m-box m-aln-center m-justify-bet m-art-foot">
           <div class="m-flex-grow1 m-flex-shrink1 m-art-like-list">
@@ -198,6 +207,9 @@ export default {
     isMine () {
       return this.feed.user_id === this.CURRENTUSER.id
     },
+    topics () {
+      return this.feed.topics || []
+    },
     likes: {
       get () {
         return this.feed.likes || []
@@ -416,6 +428,9 @@ export default {
       if (!avatar) return null
       return avatar.url || null
     },
+    viewTopic (topicId) {
+      this.$router.push({ name: 'TopicDetail', params: { topicId } })
+    },
     rewardFeed () {
       this.popupBuyTS()
     },
@@ -710,4 +725,21 @@ export default {
     width: 100%;
   }
 }
+
+.topics {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 20px 0 0;
+
+  .topic-item {
+    padding: 0 16px;
+    border-radius: 6px;
+    background-color: rgba(145, 209, 232, 0.12);
+    font-size: 24px;
+    color: @primary;
+    margin-right: 12px;
+    margin-bottom: 12px;
+    cursor: pointer;
+  }
+}
 </style>
diff --git a/resources/spa/src/page/topic/TopicDetail.vue b/resources/spa/src/page/topic/TopicDetail.vue
@@ -65,6 +65,7 @@
             v-for="feed in feeds"
             v-if="feed.id"
             :key="`feed${feed.id}`"
+            class="feed-item"
           >
             <FeedCard :feed="feed" :current-topic="topic.id" />
           </li>
@@ -153,13 +154,13 @@ export default {
         })
     },
     async followTopic () {
-      this.$refs.portal.beforeUpdate()
       await api.followTopic(this.topicId)
+      this.$Message.success('关注话题成功！')
       this.fetchTopic()
     },
     async unfollowTopic () {
-      this.$refs.portal.beforeUpdate()
       await api.unfollowTopic(this.topicId)
+      this.$Message.success('取消关注话题')
       this.fetchTopic()
     },
     onMoreClick () {
@@ -303,6 +304,12 @@ export default {
     }
   }
 
+  .user-feeds {
+    .feed-item {
+      margin-bottom: 20px;
+    }
+  }
+
   &.cover {
     .banner-content::before {
       content: "";

diff --git a/resources/spa/src/style/common.less b/resources/spa/src/style/common.less
@@ -41,7 +41,7 @@
   left: -100%;
   bottom: -100%;
   right: -100%;
-  background-color: rgba(255,255,255, 0.7);
+  background-color: rgba(255,255,255, 0.9);
 
   &::after,
   &::before {