评论

src/views/reporter/components/ReportDetail.vue

@@ -91,29 +91,37 @@
                 <div class="comment-top-bottom">
                   <b>{{ itemc.create_time.substring(0, 10) }}</b>
                   <div class="ding-box">
+                    <!-- <svg-icon
+                      @click="handleLike(itemc)"
+                      icon-class="like"
+                      className="chat like-icon color-red"
+                      v-if="itemc.ding_opt === 1"
+                    ></svg-icon>
                     <svg-icon
+                      @click="handleLike(itemc)"
                       icon-class="like-line"
-                      className="chat"
+                      className="chat like-icon"
+                      v-else
                     ></svg-icon>
                     <span>{{
                       itemc.ding_count < 1000 ? itemc.ding_count : "999+"
-                    }}</span>
-                    <svg-icon
+                    }}</span> -->
+                    <!-- <svg-icon
                       icon-class="chat-line"
-                      className="chat"
+                      className="chat like-icon"
                     ></svg-icon>
                     <span>{{
                       itemc.comment_count < 1000 ? itemc.comment_count : "999+"
-                    }}</span>
+                    }}</span> -->
                     <svg-icon
-                      icon-class="delete-line"
-                      className="chat"
+                      icon-class="delete-line "
+                      className="chat like-icon"
                       @click="deleteCmt(itemc)"
                     ></svg-icon>
                   </div>
                 </div>
-                <div class="comment-bottom">
-                  <!-- <div class="comment-bottom-item">
+                <!-- <div class="comment-bottom">
+                  <div class="comment-bottom-item">
                     <el-image
                       :src="
                         infoDetail.creator_img_url
@@ -183,8 +191,8 @@
                         </div>
                       </div>
                     </div>
-                  </div> -->
-                </div>
+                  </div> 
+                </div>-->
               </div>
             </div>
           </div>
@@ -192,7 +200,18 @@
       </div>
       <div class="input-box">
         <div class="ding-box">
-          <svg-icon icon-class="like-line" className="chat"></svg-icon>
+          <svg-icon
+            @click="handleLike(infoDetail)"
+            icon-class="like"
+            className="like-icon color-red"
+            v-if="infoDetail.ding_opt === 1"
+          ></svg-icon>
+          <svg-icon
+            @click="handleLike(infoDetail)"
+            icon-class="like-line"
+            className="like-icon"
+            v-else
+          ></svg-icon>
           <span>{{
             infoDetail.ding_count < 1000 ? infoDetail.ding_count : "999+"
           }}</span>
@@ -208,13 +227,13 @@
             maxlength="100"
           >
           </el-input>
-          <!-- <el-button
+          <el-button
             type="primary"
             @click="sendComment"
             size="small"
             v-if="searchInput.trim()"
             >发送</el-button
-          > -->
+          >
         </div>
       </div>
     </div>
@@ -259,6 +278,7 @@ export default {
         this.infoDetail.res_urls_type.push(obj);
       });
       this.$forceUpdate();
+      console.log(this.infoDetail);
     },
     closeDialog() {
       this.$emit("closeDetail");
@@ -274,6 +294,9 @@ export default {
       };
       getLogin(MethodName, data).then((res) => {
         if (res.status === 1) {
+          this.$message.success("评论成功");
+          this.searchInput = "";
+          this.lookDetail();
         }
       });
     },
@@ -288,6 +311,35 @@ export default {
         }
       });
     },
+    // 点赞/取消赞
+    handleLike(item) {
+      let MethodName = "/PaperServer/Client/Xjz/XjzArticleOptDing";
+      let data = {
+        bound_id: item.id,
+        ding_opt: item.ding_opt === 1 ? 0 : 1,
+      };
+      getLogin(MethodName, data).then((res) => {
+        if (res.status === 1) {
+          item.ding_count =
+            item.ding_opt === 1 ? item.ding_count - 1 : item.ding_count + 1;
+          item.ding_opt = item.ding_opt === 1 ? 0 : 1;
+          this.$forceUpdate();
+        }
+      });
+    },
+    // 查看详情
+    lookDetail() {
+      let MethodName = "/PaperServer/Client/Xjz/XjzArticleDetail";
+      let data = {
+        id: this.infoDetail.id,
+      };
+      getLogin(MethodName, data).then((res) => {
+        if (res.status === 1) {
+          this.infoDetail.comment_list = res.data.comment_list;
+          this.infoDetail.comment_count = res.data.comment_count;
+        }
+      });
+    },
   },
   created() {},
   mounted() {
@@ -319,6 +371,9 @@ export default {
     position: relative;
     flex: 1;
     padding-bottom: 150px;
+    max-height: 870px;
+    display: flex;
+    flex-direction: column;
     .right-top {
       padding: 24px 24px 16px 24px;
       border-bottom: 1px solid #f1f1f1;
@@ -356,6 +411,8 @@ export default {
   }
   .right-bottom {
     padding: 16px 24px;
+    flex: 1;
+    overflow: auto;
     h4 {
       color: #2f3742;
       font-size: 12px;
@@ -404,7 +461,7 @@ export default {
   }
   .comment-box {
     .comment-item {
-      padding: 24px 0;
+      padding: 24px 0 0 0;
       font-size: 14px;
       line-height: 22px;
       .comment-top {
@@ -455,6 +512,12 @@ export default {
       }
     }
   }
+  .like-icon {
+    cursor: pointer;
+  }
+  .color-red {
+    color: #f62727;
+  }
 }
 </style>
 <style lang="scss">