From 863d6328fb10ae72ab43b3125e84254606801c08 Mon Sep 17 00:00:00 2001
From: mutoe <mutoe@foxmail.com>
Date: Wed, 4 Jul 2018 11:04:20 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20question=20card=20=E6=8A=BD?=
 =?UTF-8?q?=E5=87=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/page/question/QuestionBase.vue            |   2 +-
 src/page/question/QuestionList.vue            |   6 +-
 src/page/question/TopicDetail.vue             |   6 +-
 src/page/question/TopicList.vue               | 108 ++-------------
 .../QuestionCard.vue}                         |   4 +-
 src/page/question/components/TopicCard.vue    | 126 ++++++++++++++++++
 6 files changed, 144 insertions(+), 108 deletions(-)
 rename src/page/question/{QuestionListItem.vue => components/QuestionCard.vue} (97%)
 create mode 100644 src/page/question/components/TopicCard.vue

diff --git a/src/page/question/QuestionBase.vue b/src/page/question/QuestionBase.vue
index eea53e23..334a4c6c 100644
--- a/src/page/question/QuestionBase.vue
+++ b/src/page/question/QuestionBase.vue
@@ -12,7 +12,7 @@
 import SwitchBar from "./components/SwitchBar.vue";
 
 export default {
-  name: "PageQuestions",
+  name: "Questions",
   components: {
     SwitchBar
   }
diff --git a/src/page/question/QuestionList.vue b/src/page/question/QuestionList.vue
index ca074db3..8fa23053 100644
--- a/src/page/question/QuestionList.vue
+++ b/src/page/question/QuestionList.vue
@@ -37,7 +37,7 @@
         :class="classNamebuilder('main-loading')">
         <icon-loading :class="classNamebuilder('main-loading_icon')" />
       </div>
-      <question-list-item
+      <question-card
         v-for="question in questions"
         :key="question.id"
         :question="question" />
@@ -64,13 +64,13 @@
 <script>
 import message from "plus-message-bundle";
 import Loading from "@/icons/Loading.vue";
-import QuestionListItem from "./QuestionListItem.vue";
+import QuestionCard from "./components/QuestionCard.vue";
 import { list } from "@/api/question/questions";
 
 export default {
   name: "QuestionList",
   components: {
-    QuestionListItem,
+    QuestionCard,
     IconLoading: Loading
   },
 
diff --git a/src/page/question/TopicDetail.vue b/src/page/question/TopicDetail.vue
index 4871b41e..3da8d8e9 100644
--- a/src/page/question/TopicDetail.vue
+++ b/src/page/question/TopicDetail.vue
@@ -105,7 +105,7 @@
         :class="[classNameBuilder('questions')]"
         :on-refresh="handleRefresh"
         :on-load-more="handleLoadQuestions" >
-        <question-list-item
+        <question-card
           v-for="question in questions"
           :key="question.id"
           :question="question" />
@@ -117,14 +117,14 @@
 
 <script>
 import UserAvatar from "./components/UserAvatar.vue";
-import QuestionListItem from "./QuestionListItem.vue";
+import QuestionCard from "./components/QuestionCard.vue";
 import { show, questions, follow, unfollow } from "@/api/question/topics";
 
 export default {
   name: "TopicDetail",
   components: {
     UserAvatar,
-    QuestionListItem
+    QuestionCard
   },
   data: () => ({
     topic: {},
diff --git a/src/page/question/TopicList.vue b/src/page/question/TopicList.vue
index 937224f4..98dbe212 100644
--- a/src/page/question/TopicList.vue
+++ b/src/page/question/TopicList.vue
@@ -19,44 +19,26 @@
       ref="LoadQuestionTopicsContainer"
       :on-refresh="handleRefresh"
       :on-load-more="handleLoadMore" >
-      <div
+      <topic-card
         v-for="topic in topics"
         :key="topic.id"
-        class="module-questions-topics-item">
-        <router-link
-          :src="topic.avatar"
-          :to="`/question-topics/${topic.id}`"
-          tag="img"
-          class="topic-image" />
-        <router-link
-          :to="`/question-topics/${topic.id}`"
-          tag="a"
-          class="title">
-          <span class="topic">{{ topic.name }}</span>
-          <span class="label">
-            <span>{{ topic.follows_count }}</span>&nbsp;关注
-            ·
-            <span>{{ topic.questions_count }}</span>&nbsp;问题
-          </span>
-        </router-link>
-        <button
-          v-if="topic.has_follow || type === 'follow'"
-          class="follow active"
-          @click="handleUnfollow(topic)"><span>✓</span>已关注</button>
-        <button
-          v-else
-          class="follow"
-          @click="handleFollow(topic)"><span>+</span>关注</button>
-      </div>
+        :topic="topic"
+        :type="type"
+        @follow="handleFollow"
+        @unfollow="handleUnfollow"/>
     </load-more>
   </div>
 </template>
 
 <script>
+import TopicCard from "./components/TopicCard.vue";
 import { all, followTopics, follow, unfollow } from "@/api/question/topics";
 
 export default {
   name: "TopicList",
+  components: {
+    TopicCard
+  },
   data: () => ({
     topics: []
   }),
@@ -220,77 +202,5 @@ export default {
       color: #333;
     }
   }
-  &-item {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    width: 100%;
-    height: 175px;
-    padding: 28px;
-    background-color: #fff;
-    border-bottom: solid 1px #d7d8d8;
-    .topic-image {
-      width: 120px;
-      height: 120px;
-      margin-right: 28px;
-      border: none;
-      background-color: #d7d8d8;
-    }
-    .title {
-      flex-grow: 1;
-      display: inline-flex;
-      align-items: flex-start;
-      flex-direction: column;
-      height: 120px;
-      justify-content: center;
-      .topic {
-        margin-top: 17px;
-        font-size: 32px;
-        font-weight: normal;
-        font-stretch: normal;
-        line-height: 0px;
-        height: 30px;
-        letter-spacing: 0px;
-        color: #333;
-      }
-      .label {
-        margin-top: 19px;
-        height: 26px;
-        font-size: 28px;
-        font-weight: normal;
-        font-stretch: normal;
-        line-height: 0px;
-        letter-spacing: 0px;
-        color: #666;
-        > span {
-          color: #59b6d7;
-        }
-      }
-    }
-    .follow {
-      // width: 126px;
-      height: 50px;
-      background-color: #fff;
-      border-radius: 8px;
-      border: solid 2px #59b6d7;
-      color: #59b6d7;
-      font-size: 26px;
-      font-weight: normal;
-      font-stretch: normal;
-      line-height: 5px;
-      letter-spacing: 0px;
-      outline: none;
-      > span {
-        width: 20px;
-        height: 20px;
-        font-size: 36px;
-        margin-right: 2px;
-      }
-      &.active {
-        color: #ccc;
-        border: solid 2px #ccc;
-      }
-    }
-  }
 }
 </style>
diff --git a/src/page/question/QuestionListItem.vue b/src/page/question/components/QuestionCard.vue
similarity index 97%
rename from src/page/question/QuestionListItem.vue
rename to src/page/question/components/QuestionCard.vue
index d3c1e944..ec2bbf8e 100644
--- a/src/page/question/QuestionListItem.vue
+++ b/src/page/question/components/QuestionCard.vue
@@ -47,11 +47,11 @@
 </template>
 
 <script>
-import QuestionListAnswerCard from "./QuestionListAnswerCard";
+import QuestionListAnswerCard from "../QuestionListAnswerCard";
 import { syntaxTextAndImage } from "@/util/markdown";
 
 export default {
-  name: "QuestionListItem",
+  name: "QuestionCard",
   components: {
     QuestionListAnswerCard
   },
diff --git a/src/page/question/components/TopicCard.vue b/src/page/question/components/TopicCard.vue
new file mode 100644
index 00000000..c6d07a79
--- /dev/null
+++ b/src/page/question/components/TopicCard.vue
@@ -0,0 +1,126 @@
+<template>
+  <div class="topic-card">
+    <router-link
+      :src="topic.avatar"
+      :to="`/question-topics/${topic.id}`"
+      tag="img"
+      class="topic-image" />
+    <router-link
+      :to="`/question-topics/${topic.id}`"
+      tag="a"
+      class="title">
+      <span class="topic">{{ topic.name }}</span>
+      <span class="label">
+        <span>{{ topic.follows_count }}</span>&nbsp;关注
+        ·
+        <span>{{ topic.questions_count }}</span>&nbsp;问题
+      </span>
+    </router-link>
+    <button
+      v-if="topic.has_follow || type === 'follow'"
+      class="follow active"
+      @click="handleUnfollow(topic)"><span>✓</span>已关注</button>
+    <button
+      v-else
+      class="follow"
+      @click="handleFollow(topic)"><span>+</span>关注</button>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    topic: { type: Object, require: true, default() {} },
+    type: { type: String, default: "hot" }
+  },
+  methods: {
+    handleUnfollow(topic) {
+      this.$emit("unfollow", { topic });
+    },
+    handleFollow(topic) {
+      this.$emit("follow", { topic });
+    }
+  }
+};
+</script>
+
+<style lang="less" scoped>
+.topic-card {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  height: 175px;
+  padding: 28px;
+  background-color: #fff;
+  border-bottom: solid 1px #d7d8d8;
+
+  .topic-image {
+    width: 120px;
+    height: 120px;
+    margin-right: 28px;
+    border: none;
+    background-color: #d7d8d8;
+  }
+
+  .title {
+    flex-grow: 1;
+    display: inline-flex;
+    align-items: flex-start;
+    flex-direction: column;
+    height: 120px;
+    justify-content: center;
+    .topic {
+      margin-top: 17px;
+      font-size: 32px;
+      font-weight: normal;
+      font-stretch: normal;
+      line-height: 0px;
+      height: 30px;
+      letter-spacing: 0px;
+      color: #333;
+    }
+
+    .label {
+      margin-top: 19px;
+      height: 26px;
+      font-size: 28px;
+      font-weight: normal;
+      font-stretch: normal;
+      line-height: 0px;
+      letter-spacing: 0px;
+      color: #666;
+      > span {
+        color: #59b6d7;
+      }
+    }
+  }
+
+  .follow {
+    // width: 126px;
+    height: 50px;
+    background-color: #fff;
+    border-radius: 8px;
+    border: solid 2px #59b6d7;
+    color: #59b6d7;
+    font-size: 26px;
+    font-weight: normal;
+    font-stretch: normal;
+    line-height: 5px;
+    letter-spacing: 0px;
+    outline: none;
+
+    > span {
+      width: 20px;
+      height: 20px;
+      font-size: 36px;
+      margin-right: 2px;
+    }
+
+    &.active {
+      color: #ccc;
+      border: solid 2px #ccc;
+    }
+  }
+}
+</style>