文章操作 - 回显评论数据

Author: ppambler

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-29 00:06:10
+ * @LastEditTime: 2021-12-29 00:21:41
  * @FilePath: \imooc-blog\components\article-comment-commit\article-comment-commit.vue
 -->
 <template>
@@ -55,18 +55,23 @@ export default {
       uni.showLoading({
         title: "加载中",
       });
-      // 异步处理即可
-      await userArticleComment({
+      // 调用接口，异步处理即可
+      const { data: res } = await userArticleComment({
         articleId: this.articleId,
         content: this.value,
       });
+      console.log(
+        "🚀 ~ file: article-comment-commit.vue ~ line 63 ~ onBtnClick ~ res",
+        res
+      );
+      // 发表评论完成之后，给用户一个提示
       uni.showToast({
         title: "发表成功",
         icon: "success",
         mask: true,
       });
-      // 发表成功之后的回调
-      this.$emit("success");
+      // 发表成功之后的回调：关闭 popup
+      this.$emit("success", res);
     },
   },
 };

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

@@ -1,6 +1,6 @@
 <!--
  * @Date: 2021-12-26 18:59:11
- * @LastEditTime: 2021-12-26 21:25:41
+ * @LastEditTime: 2021-12-29 00:23:27
  * @FilePath: \imooc-blog\components\article-comment-list\article-comment-list.vue
 -->
 <template>
@@ -135,6 +135,12 @@ export default {
       }
       return this.mescroll;
     },
+    /**
+     * 为 commentList 增加一个评论
+     */
+    addCommentList(data) {
+      this.commentList.unshift(data);
+    },
   },
 };
 </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-29 00:07:22
+ * @LastEditTime: 2021-12-29 00:26:20
  * @FilePath: \imooc-blog\subpkg\pages\blog-detail\blog-detail.vue
 -->
 <template>
@@ -204,10 +204,12 @@ export default {
     /**
      * 发表评论成功
      */
-    onSendSuccess() {
+    onSendSuccess(data) {
       // 关闭弹出层
       this.$refs.popup.close();
       this.isShowCommit = false;
+      // 显示评论数据
+      this.$refs.mescrollItem.addCommentList(data);
     },
   },
 };