feat: (#273) 问题回答打赏

src/api/question/answer.js

@@ -81,3 +81,33 @@ export function getAnswer(answerId) {
   const url = `/question-answers/${answerId}`;
   return api.get(url, { validateStatus: s => s === 200 });
 }
+
+/**
+ * 打赏回答
+ * @author mutoe <[email protected]>
+ * @export
+ * @param {number} answerId
+ * @param {Object} payload
+ * @param {number} payload.amount 打赏金额
+ * @returns
+ */
+export function rewardAnswer(answerId, payload) {
+  const url = `/question-answers/${answerId}/new-rewards`;
+  return api.post(url, payload, { validateStatus: s => s === 200 });
+}
+
+/**
+ * 获取打赏列表
+ * @author mutoe <[email protected]>
+ * @export
+ * @param {number} answerId
+ * @param {Object} params
+ * @param {string} [params.type = 'time'] time 按时间倒序 amount 按金额倒序
+ * @param {number} [params.limit = 20] limit
+ * @param {number} [params.offset = 0] offset
+ * @returns
+ */
+export function getRewards(answerId, params) {
+  const url = `/question-answers/${answerId}/rewarders`;
+  return api.get(url, { params, validateStatus: s => s === 200 });
+}

src/page/article/ArticleLikes.vue

@@ -1,15 +1,15 @@
 <template>
   <div class="m-art-likes">
-    <header 
-      class="m-pos-r" 
+    <header
+      class="m-pos-r"
       style="padding-top: 0.9rem">
       <div class="m-pos-f m-box m-justify-bet m-aln-center m-head-top m-bb1 m-main">
         <div class="m-box m-flex-grow1 m-aln-center m-flex-base0">
-          <svg 
-            class="m-style-svg m-svg-def" 
+          <svg
+            class="m-style-svg m-svg-def"
             @click="goBack">
-            <use 
-              xmlns:xlink="http://www.w3.org/1999/xlink" 
+            <use
+              xmlns:xlink="http://www.w3.org/1999/xlink"
               xlink:href="#base-back"/>
           </svg>
         </div>
@@ -23,9 +23,9 @@
         :auto-load="false"
         @onRefresh="onRefresh"
         @onLoadMore="onLoadMore">
-        <user-item 
-          v-for="({ user, id }, index) in likes" 
-          :key="`likes-${id}-${user.id}-${index}`" 
+        <user-item
+          v-for="({ user, id }, index) in likes"
+          :key="`likes-${id}-${user.id}-${index}`"
           :user="user" />
       </jo-load-more>
     </main>
@@ -63,6 +63,8 @@ export default {
           return `/news/${this.article}/likes`;
         case "post":
           return `/plus-group/group-posts/${this.article}/likes`;
+        case "answer":
+          return `/question-answers/${this.article}/likes`;
       }
     }
   },

src/page/article/ArticleRewards.vue

@@ -51,7 +51,8 @@ export default {
       typeMap: {
         feed: "动态",
         news: "资讯",
-        post: "帖子"
+        post: "帖子",
+        answer: "回答"
       }
     };
   },
@@ -74,6 +75,8 @@ export default {
           return `/news/${this.article}/rewards`;
         case "post":
           return `/plus-group/group-posts/${this.article}/rewards`;
+        case "answer":
+          return `/question-answers/${this.article}/rewarders`;
       }
     }
   },

src/page/question/AnswerDetail.vue

@@ -61,18 +61,39 @@
           <span>{{ viewsCount | formatNum }}浏览</span>
         </div>
       </div>
-      <!-- todo 打赏功能 -->
-      <!--<div class="m-box-model m-box-center m-box-center-a m-art-reward">
-        <button class="m-art-rew-btn" @click="rewardFeed">打 赏</button>
+      <div class="m-box-model m-box-center m-box-center-a m-art-reward">
+        <button
+          class="m-art-rew-btn"
+          @click="rewardAnswer">打 赏</button>
         <p class="m-art-rew-label">
           <a href="javascript:;">{{ reward.count | formatNum }}</a>人打赏，共
-          <a href="javascript:;">{{ (~~(reward.amount)/100) }}</a>积分</p>
-        <ul class="m-box m-aln-center m-art-rew-list">
-          <li :key="rew.id" v-for="rew in rewardList" :class="`m-avatar-box-${rew.user.sex}`" class="m-flex-grow0 m-flex-shrink0 m-art-rew m-avatar-box tiny">
+          <a href="javascript:;">{{ ~~reward.amount }}</a>积分
+        </p>
+        <router-link
+          tag="ul"
+          to="rewarders"
+          append
+          class="m-box m-aln-center m-art-rew-list">
+          <li
+            v-for="rew in rewardList"
+            :key="rew.id"
+            :class="`m-avatar-box-${rew.user.sex}`"
+            class="m-flex-grow0 m-flex-shrink0 m-art-rew m-avatar-box tiny">
             <img :src="rew.user.avatar">
           </li>
-        </ul>
-      </div> -->
+          <li
+            v-if="rewardList.length > 0"
+            class="m-box m-aln-center">
+            <svg
+              class="m-style-svg m-svg-def"
+              style="fill:#bfbfbf">
+              <use
+                xmlns:xlink="http://www.w3.org/1999/xlink"
+                xlink:href="#base-arrow-r"/>
+            </svg>
+          </li>
+        </router-link>
+      </div>
     </main>
     <!-- 评论列表 -->
     <div
@@ -131,6 +152,11 @@ export default {
 
       comments: [],
       pinnedCom: [],
+      rewardList: [],
+      reward: {
+        count: 0,
+        amount: 0
+      },
 
       fetchComing: false,
       noMoreCom: false,
@@ -235,13 +261,34 @@ export default {
         }
       });
     },
+    rewardAnswer() {
+      const callback = amount => {
+        this.fetchRewards();
+        this.reward.count += 1;
+        this.reward.amount += amount;
+      };
+      bus.$emit("reward", {
+        type: "answer",
+        api: api.rewardAnswer,
+        payload: this.answerId,
+        callback
+      });
+    },
     moreAction() {},
+    fetchRewards() {
+      api.getRewards(this.answerId, { limit: 10 }).then(({ data }) => {
+        this.rewardList = data;
+      });
+    },
     fetchAnswer() {
       if (this.loading) return;
       this.loading = true;
 
       api.getAnswer(this.answerId).then(({ data }) => {
         this.answer = data;
+        this.reward.count = data.rewarder_count;
+        this.reward.amount = data.rewards_amount;
+        this.rewardList = data.rewarders;
         this.fetchAnswerComments();
         this.loading = false;
       });

src/routers/question.js

@@ -46,6 +46,9 @@ const Topic = () =>
 const AnswerDetail = () =>
   import(/* webpackChunkName: 'question' */ "@/page/question/AnswerDetail.vue");
 
+import likes from "@/page/article/ArticleLikes.vue";
+import rewards from "@/page/article/ArticleRewards.vue";
+
 export default [
   /**
    * Questions page entry.
@@ -89,5 +92,31 @@ export default [
     meta: {
       title: "问题详情"
     }
+  },
+  /**
+   * 点赞列表 && 打赏列表 路由格式固定
+   *
+   * 帖子/资讯/问答 相关路由 统一使用 article 代替 id
+   *
+   * 通过传递 不同的 meta[type] 实现组件复用
+   *
+   * copy by @/routers/feed.js
+   *
+   */
+  {
+    path: "/questions/:questionId/answers/:article/likers",
+    component: likes,
+    meta: {
+      title: "点赞列表",
+      type: "answer"
+    }
+  },
+  {
+    path: "/questions/:questionId/answers/:article/rewarders",
+    component: rewards,
+    meta: {
+      title: "打赏列表",
+      type: "answer"
+    }
   }
 ];