tijaio

pages/articleList/pinglun.vue

@@ -4,8 +4,10 @@
       :show="orderModalShow"
       mode="bottom"
       :round="8"
+      @close="closeOrderModalShow"
       :background="'#fff'"
-      style="background: #fff" backgroundColor="#fff"
+      style="background: #fff"
+      backgroundColor="#fff"
     >
       <view class="orderModalShow popup_box">
         <view style="text-align: center"
@@ -24,17 +26,21 @@
             top: 20rpx;
           "
         ></u-icon>
-        <hb-comment
-          style="padding-top: 40rpx; overflow: auto; padding-bottom: 100rpx"
-          :user="currentUser"
-          ref="hbComment"
-          @add="sendComment"
-          @del="del"
-          @focusOn="focusOn"
-          :deleteTip="'确认删除？'"
-          :cmData="commentData"
-          v-if="commentData"
-        ></hb-comment>
+        <scroll-view :scroll-into-view="targetId" scroll-y style="height: 70vh;padding-top: 40rpx;  padding-bottom: 100rpx">
+          <hb-comment
+            style=""
+            :user="currentUser"
+            :isPopup="true"
+            :articleUserId="articleInfo.userId"
+            ref="hbComment"
+            @add="sendComment"
+            @del="del"
+            @focusOn="focusOn"
+            :deleteTip="'确认删除？'"
+            :cmData="commentData"
+            v-if="commentData"
+          ></hb-comment
+        ></scroll-view>
       </view>
     </u-popup>
   </view>
@@ -43,58 +49,59 @@
 <script>
 import $http from "@/config/requestConfig.js";
 import { mapState, mapMutations } from "vuex";
-
-
+import { debounce, throttle } from "@/common/debounce.js";
 export default {
-  components: {
-
-  },
-  props:[],
+  components: {},
+  props: [],
   data() {
     return {
+      targetId: null,
       articleId: null,
       currentUser: {},
 
       orderModalShow: false,
       commentData: [],
       articleInfo: {},
-
     };
   },
   computed: {
     ...mapState(["userInfo"]),
   },
-  async onLoad(options) {
-
-  },
-   onShow() {
-
-
-
+  async onLoad(options) {},
+  onShow() {},
+  watch: {
+    orderModalShow: {
+      handler(newVal, oldVal) {
+        this.$emit("show", this.orderModalShow);
+      },
+      immediate: true,
+    },
   },
 
   methods: {
     // 自适应判断
+    scrollToView(id) {
+      // commentData
+      this.targetId = id; // 设置目标元素 id
+      setTimeout(() => {
+        this.targetId = null;
+      }, 1000);
+    },
 
-
-
-   async onHandleClickOpenComment(id) {
-      this.articleId=id;
+    async onHandleClickOpenComment(id) {
+      this.articleId = id;
       console.log("111 at line 384:", 111);
       console.log(
         "this.currentUser at line 365:",
         this.articleInfo.taihuTalent
       );
-      await this.getMedicalDetail(()=>{
+      await this.getMedicalDetail(() => {
         this.orderModalShow = true;
       });
-
-      
     },
     closeOrderModalShow() {
       this.orderModalShow = false;
-      this.$emit("close",this.articleId);
-
+      this.$emit("close", this.articleId);
     },
     saveContens(content) {
       console.log("content at line 322:", content);
@@ -148,14 +155,10 @@ export default {
         .catch((err) => {});
     },
 
-
-
-
     //点击每个记录
 
-
     //创建新对话
-    sendComment(comment, pid) {
+    sendComment: throttle(function (comment, pid) {
       this.$http
         .request({
           url: "common/taihuTalentArticle/addArticleComment",
@@ -174,11 +177,16 @@ export default {
           console.log("res at line 713:", res);
           if (res.code == 0) {
             this.getMedicalDetail();
+            if (pid == 0) {
+              setTimeout(() => {
+                this.scrollToView("commentData");
+              }, 500);
+            }
           } else {
             this.$commonJS.showToast("评论失败");
           }
         });
-    },
+    }),
 
     //交谈请求，获取回答
     getTree(data) {
@@ -205,7 +213,7 @@ export default {
           url: "common/taihuTalentArticle/getArticleLikeAndComment",
           method: "POST",
           data: {
-            articleId:  this.articleId,
+            articleId: this.articleId,
           },
           header: {
             "Content-Type": "application/json",
@@ -219,14 +227,17 @@ export default {
             this.articleInfo = res.article;
             this.medicalForm = { ...this.articleInfo };
             console.log("this.medicalForm at line 193:", this.articleInfo);
-           
+
             this.$nextTick(() => {
               // if (this.userInfo.id == this.articleInfo.userId) {
               //   this.currentUser = this.articleInfo.taihuTalent;
               // } else {
-                this.currentUser = {...this.userInfo,icon:this.userInfo.avatar};
+              this.currentUser = {
+                ...this.userInfo,
+                icon: this.userInfo.avatar,
+              };
 
-                console.log('this.currentUser at line 823:', this.currentUser)
+              console.log("this.currentUser at line 823:", this.currentUser);
               // }
             });
             this.commentData = res.comments;
@@ -234,8 +245,8 @@ export default {
               commentSize: res.commentCount,
               comment: this.getTree(this.commentData),
             };
-           
-            if(fn){
+
+            if (fn) {
               fn();
             }