文章操作 - 发表评论

Author: ppambler

project/imooc-blog/api/user.js

@@ -1,6 +1,6 @@
 /*
  * @Date: 2021-12-27 22:45:05
- * @LastEditTime: 2021-12-28 20:03:55
+ * @LastEditTime: 2021-12-29 00:05:23
  * @FilePath: \imooc-blog\api\user.js
  */
 import request from "@/utils/request";
@@ -25,3 +25,14 @@ export function userFollow(data) {
     data,
   });
 }
+
+/**
+ * 发表评论
+ */
+export function userArticleComment(data) {
+  return request({
+    url: "/user/article/comment",
+    method: "POST",
+    data,
+  });
+}

project/imooc-blog/components/article-comment-commit/article-comment-commit.vue

@@ -1,6 +1,6 @@
 <!--
  * @Date: 2021-12-28 21:08:55
- * @LastEditTime: 2021-12-28 21:35:02
+ * @LastEditTime: 2021-12-29 00:06:10
  * @FilePath: \imooc-blog\components\article-comment-commit\article-comment-commit.vue
 -->
 <template>
@@ -25,8 +25,15 @@
 </template>
 
 <script>
+import { userArticleComment } from "@/api/user";
 export default {
   name: "article-comment-commit",
+  props: {
+    articleId: {
+      type: String,
+      required: true,
+    },
+  },
   data() {
     return {
       value: "",
@@ -43,7 +50,24 @@ export default {
     /**
      * 发送按钮点击事件
      */
-    onBtnClick() {},
+    async onBtnClick() {
+      // 展示加载框
+      uni.showLoading({
+        title: "加载中",
+      });
+      // 异步处理即可
+      await userArticleComment({
+        articleId: this.articleId,
+        content: this.value,
+      });
+      uni.showToast({
+        title: "发表成功",
+        icon: "success",
+        mask: true,
+      });
+      // 发表成功之后的回调
+      this.$emit("success");
+    },
   },
 };
 </script>

project/imooc-blog/subpkg/pages/blog-detail/blog-detail.vue

@@ -1,6 +1,6 @@
 <!--
  * @Date: 2021-12-25 14:04:11
- * @LastEditTime: 2021-12-28 21:32:45
+ * @LastEditTime: 2021-12-29 00:07:22
  * @FilePath: \imooc-blog\subpkg\pages\blog-detail\blog-detail.vue
 -->
 <template>
@@ -58,7 +58,11 @@
       <article-operate @commitClick="onCommit" />
       <!-- 输入评论的popup -->
       <uni-popup ref="popup" type="bottom" @change="onCommitPopupChange">
-        <article-comment-commit v-if="isShowCommit" />
+        <article-comment-commit
+          v-if="isShowCommit"
+          :articleId="articleId"
+          @success="onSendSuccess"
+        />
       </uni-popup>
     </view>
   </page-meta>
@@ -197,6 +201,14 @@ export default {
         }, 200);
       }
     },
+    /**
+     * 发表评论成功
+     */
+    onSendSuccess() {
+      // 关闭弹出层
+      this.$refs.popup.close();
+      this.isShowCommit = false;
+    },
   },
 };
 </script>