feat(question): (#461) 添加回答功能

src/api/question/answer.js

@@ -82,6 +82,24 @@ export function getAnswer(answerId) {
   return api.get(url, { validateStatus: s => s === 200 });
 }
 
+/**
+ * 添加回答
+ * @author mutoe <[email protected]>
+ * @export
+ * @param {number} questionId
+ * @param {Object} data
+ * @param {string} data.body
+ * @param {string} [data.text_body]
+ * @param {number} [data.anonymity] 1: 匿名 0: 不匿名
+ * @returns
+ */
+export function postAnswer(questionId, data) {
+  const url = `/questions/${questionId}/answers`;
+  return api.post(url, data, {
+    validateStatus: s => s === 201
+  });
+}
+
 /**
  * 打赏回答
  * @author mutoe <[email protected]>

src/page/question/AnswerAdd.vue

@@ -2,7 +2,11 @@
   <div class="p-answer-add">
     <common-header class="header">
       添加回答
-      <span slot="right" @click="onPublish">发布</span>
+      <span
+        slot="right"
+        :class="{disabled}"
+        class="post-btn"
+        @click="onPost">发布</span>
     </common-header>
 
     <main>
@@ -22,10 +26,21 @@ export default {
   computed: {
     questionId() {
       return this.$route.params.questionId || 0;
+    },
+    disabled() {
+      return !this.content;
     }
   },
   methods: {
-    onPublish() {}
+    async onPost() {
+      if (this.disabled) return;
+      const payload = {
+        questionId: this.questionId,
+        content: this.content.replace(/\n/g, "\n\n")
+      };
+      await this.$store.dispatch("question/postAnswer", payload);
+      this.goBack();
+    }
   }
 };
 </script>
@@ -36,13 +51,24 @@ export default {
   flex-direction: column;
   height: 100%;
 
+  .header {
+    .post-btn {
+      color: @primary;
+      &.disabled {
+        color: @border-color;
+      }
+    }
+  }
+
   > main {
     flex: auto;
     background-color: #fff;
 
     textarea {
       padding: 20px;
       font-size: 30px;
+      width: 100%;
+      height: 100%;
     }
   }
 }

src/page/question/QuestionDetail.vue

@@ -65,7 +65,7 @@
             </svg>
             {{ question.amount ? '已' : '未' }}设置悬赏
           </div>
-          <div class="button">
+          <div class="button" @click="addAnswer">
             <svg class="main-button-icon" fill="#666">
               <use xlink:href="#base-edit" />
             </svg>
@@ -126,10 +126,12 @@
 
 <script>
 import { render } from "@/util/markdown";
-import { show, watch, unwatch } from "@/api/question/questions";
+import * as api from "@/api/question/questions";
 import { listByDefault, listByTime } from "@/api/question/answer";
 import QuestionAnswerItem from "./QuestionAnswerItem";
 
+const noop = () => {};
+
 export default {
   name: "QuestionDetail",
   components: {
@@ -204,13 +206,12 @@ export default {
     this.loadContainer.beforeRefresh();
   },
   methods: {
-    fetch(cb = null) {
-      show(this.$route.params.id)
+    fetch(cb = noop) {
+      api
+        .show(this.$route.params.id)
         .then(({ data }) => {
           this.question = data;
-          if (cb instanceof Function) {
-            cb();
-          }
+          cb();
         })
         .catch(({ response: { data } = {} }) => {
           this.loadContainer.topEnd(false);
@@ -238,7 +239,8 @@ export default {
       this.answersTimeOrder = !this.answersTimeOrder;
     },
     handleWatch() {
-      watch(this.$route.params.id)
+      api
+        .watch(this.$route.params.id)
         .then(() => {
           this.question.watched = true;
           this.question.watchers_count += 1;
@@ -248,7 +250,8 @@ export default {
         });
     },
     handleUnwatch() {
-      unwatch(this.$route.params.id)
+      api
+        .unwatch(this.$route.params.id)
         .then(() => {
           this.question.watched = false;
           this.question.watchers_count -= 1;
@@ -258,9 +261,7 @@ export default {
         });
     },
     handleLoadMoreAnswers() {
-      if (!this.answers.length) {
-        return;
-      }
+      if (!this.answers.length) return;
       this.answerRequestMethod(this.$route.params.id, this.answers.length)
         .then(({ data }) => {
           this.loadContainer.bottomEnd(data.length < 15);
@@ -270,6 +271,9 @@ export default {
           this.loadContainer.bottomEnd(true);
           this.$Message.error(data);
         });
+    },
+    addAnswer() {
+      this.$router.push({ path: `/question/${this.question.id}/answers/add` });
     }
   }
 };

src/stores/module/index.js

@@ -4,12 +4,14 @@ import post from "./post";
 import easemob from "./easemob";
 import wallet from "./wallet";
 import currency from "./currency";
+import question from "./question";
 
 export default {
   rank,
   post,
   MESSAGE,
   easemob,
   wallet,
-  currency
+  currency,
+  question
 };

src/stores/module/question.js

@@ -0,0 +1,23 @@
+import * as answerApi from "@/api/question/answer";
+import Message from "@/plugins/message";
+
+const actions = {
+  async postAnswer(state, payload) {
+    const { questionId, content } = payload;
+    const { data } = await answerApi
+      .postAnswer(questionId, {
+        body: content,
+        text_body: content
+      })
+      .catch(({ response }) => {
+        const { errors } = response.data;
+        Message.error(errors);
+      });
+    return data;
+  }
+};
+
+export default {
+  namespaced: true,
+  actions
+};