接口对接

src/project/fengdu/AppCircle/Detail.vue

@@ -22,7 +22,7 @@
           <i>{{ info.sharedCount }}</i>
         </div>
         <div>
-          <image src="https://cdn.cunwuyun.cn/wxmp/fengdu/zan.png" />
+          <image :src="info.appreciateStatus ? 'https://cdn.cunwuyun.cn/wxmp/fengdu/zan-active.png' : 'https://cdn.cunwuyun.cn/wxmp/fengdu/zan.png'" @click="reciate"/>
           <i>{{ info.appreciateCount }}</i>
         </div>
         <div>
@@ -34,22 +34,39 @@
     <div class="comment">
       <h2>评论</h2>
       <div class="comment-wrapper">
-        <div class="comment-item" v-for="(item, index) in 10" :key="index">
+        <div class="comment-item" v-for="(item, index) in list" :key="index">
-          <image src="https://cdn.cunwuyun.cn/wxmp/fengdu/ic-fangwuchuzu.png" />
+          <image :src="item.createUserAvatar || 'https://cdn.cunwuyun.cn/wxmp/fengdu/avatar.png'" />
           <div class="right">
-            <h3>清风</h3>
+            <h3>{{ item.createUserName }}</h3>
-            <p>联系方式呢</p>
+            <p>{{ item.content }}</p>
             <div class="bottom">
-              <span>2020-12-11 10:10</span>
+              <span>{{ item.createTime }}</span>
-              <div>回复</div>
+              <div hover-class="text-hover" @click="commentId = item.id, replyName = item.createUserName, focus = true">回复</div>
+            </div>
+            <div class="replay-list">
+              <div class="replay-item" v-for="replay in item.replyList" :key="replay.id">
+                <image :src="replay.createUserAvatar || 'https://cdn.cunwuyun.cn/wxmp/fengdu/avatar.png'" />
+                <div class="replay-item__right">
+                  <div class="top">
+                    <div class="replay-left">
+                      <h3>{{ replay.createUserName }}</h3>
+                      <span>回复</span>
+                      <h3>{{ item.createUserName }}</h3>
+                    </div>
+                    <p>{{ replay.createTime }}</p>
+                  </div>
+                  <p>{{ replay.content }}</p>
                 </div>
               </div>
             </div>
           </div>
         </div>
+        <AiEmpty v-if="!list.length"></AiEmpty>
+      </div>
+    </div>
     <div class="footer">
-      <input placeholder="请输入">
+      <input :placeholder="commentId ? '回复' + replyName : '请输入'" :focus="focus" v-model="content">
-      <div>发送</div>
+      <div hover-class="hover-class" @click="send">发送</div>
     </div>
     <AiLogin ref="login"/>
   </div>
@@ -66,17 +83,26 @@
         info: {},
         name: '',
         themeId: '',
-        isFrom: ''
+        isFrom: '',
+        list: [],
+        isMore: false,
+        current: 1,
+        content: '',
+        focus: false,
+        commentId: '',
+        replyName: ''
       }
     },
 
     onLoad (query) {
       this.isFrom = query.isFrom
       this.id = query.id
-      this.$loading()
-      this.getInfo(query.id)
       this.themeId = query.themeId
       this.name = query.name || ''
+
+      this.$loading()
+      this.getInfo(query.id)
+      this.getCommontList(query.id)
     },
 
     methods: {
@@ -92,6 +118,48 @@
         })
       },
 
+      reciate () {
+        this.$loading()
+        this.$instance.post(`/app/appneighborhoodassistance/appreciate?id=${this.id}`).then(res => {
+          if (res.code === 0) {
+            this.$toast(this.info.appreciateStatus ? '取消点赞' : '点赞成功')
+
+            this.getInfo(this.id)
+          }
+          uni.hideLoading()
+        })
+      },
+
+      send () {
+        if (!this.content) {
+          return this.$toast('内容不能为空')
+        }
+
+        this.$loading()
+        this.$instance.post(!this.commentId ? `/app/appneighborhoodassistance/addComment` : `/app/appneighborhoodassistance/addReply`, {
+          content: this.content,
+          naId: this.id,
+          type: this.commentId ? 1 : 0,
+          commentId: this.commentId || ''
+        }).then(res => {
+          uni.hideLoading()
+          if (res.code === 0) {
+            this.$toast('提交成功')
+            this.content = ''
+            this.replyName = ''
+            this.commentId = ''
+            this.focus = false
+
+            this.isMore = false
+            this.current = 1
+
+            this.$nextTick(() => {
+              this.getCommontList(this.id)
+            })
+          }
+        })
+      },
+
       toTopic (url) {
         if (this.isFrom === 'topic') {
           uni.navigateBack({
@@ -100,7 +168,46 @@
         } else {
           this.$linkTo(url)
         }
+      },
+
+      getCommontList (id) {
+        if (this.isMore) return
+
+        this.$loading()
+        this.$instance.post(`/app/appneighborhoodassistance/commontList`, null, {
+          params: {
+            withoutToken: this.token ? false : true,
+            id,
+            current: this.current,
+            size: 10
           }
+        }).then(res => {
+          if (res.code === 0) {
+            this.$hideLoading()
+            if (this.current > 1) {
+              this.list = [...this.list, ...res.data.records]
+            } else {
+              this.list = res.data.records
+            }
+
+            if (res.data.records.length < 10) {
+              this.isMore = true
+
+              return false
+            }
+
+            this.current = this.current + 1
+          } else {
+            this.isMore = true
+          }
+        }).catch(() => {
+          this.$hideLoading()
+        })
+      }
+    },
+
+    onReachBottom () {
+      this.getCommontList()
     }
   }
 </script>
@@ -151,7 +258,7 @@
 
     .comment {
       margin-top: 24px;
-      padding: 32px 32px 0;
+      padding: 32px 32px 26px;
       background: #fff;
 
       .comment-wrapper {
@@ -163,6 +270,10 @@
             padding-top: 0;
           }
 
+          &:last-child {
+            padding-bottom: 0;
+          }
+
           & > image {
             width: 72px;
             height: 72px;
@@ -170,19 +281,77 @@
             border-radius: 50%;
           }
 
-          .right {
+          .replay-list {
+            margin-top: 32px;
+
+            .replay-item {
+              display: flex;
+              margin-bottom: 32px;
+
+              &:last-child {
+                margin-bottom: 0;
+              }
+
+              image {
+                width: 48px;
+                height: 48px;
+                margin-right: 16px;
+                border-radius: 50%;
+              }
+
+              .replay-item__right {
+                flex: 1;
+
+                .top {
+                  display: flex;
+                  align-items: center;
+                  justify-content: space-between;
+                  margin-bottom: 6px;
+
+                  .replay-left {
+                    display: flex;
+                    align-items: center;
+                  }
+
+                  h3 {
+                    color: #666666;
+                    font-size: 24px;
+                  }
+
+                  span {
+                    margin: 0 8px;
+                    font-size: 24px;
+                    color: #687DA6;
+                  }
+
+                  p {
+                    color: #999999;
+                    font-size: 24px;
+                  }
+                }
+
+                & > p {
+                  line-height: 1.3;
+                  color: #333333;
+                  font-size: 24px;
+                }
+              }
+            }
+          }
+
+          & > .right {
             flex: 1;
             padding-bottom: 32px;
             border-bottom: 1px solid #EEEEEE;
 
-            h3 {
+            & > h3 {
               line-height: 40px;
               margin-bottom: 8px;
               color: #666666;
               font-size: 28px;
             }
 
-            p {
+            & > p {
               line-height: 42px;
               margin-bottom: 24px;
               color: #333;
@@ -210,6 +379,7 @@
             padding-bottom: 0;
 
             .right {
+              padding-bottom: 0;
               border-bottom: none;
             }
           }
@@ -224,8 +394,8 @@
       }
     }
 
-    .top {
+    & > .top {
-      padding: 24px 24px 0;
+      padding: 32px 32px 0;
       background: #ffffff;
 
       .item-top {
@@ -300,9 +470,9 @@
       }
 
       .item-content {
-        margin: 16px;
+        margin: 16px 0;
         line-height: 1.3;
-        // text-align: justify;
+        text-align: justify;
 
         span {
           font-size: 28px;