开发升级评论组件

components/comment/index.js

@@ -4,10 +4,9 @@ import {
   ReplyComment,
   likeReply
 } from '~/api/video'
+import reachBottom from '~/mixins/reachBottom'
 Component({
-  /**
-   * 组件的属性列表
-   */
+  behaviors: [reachBottom],
   properties: {
     // 是否在tabbar页面使用，是的话就给个padding
     tabBarPadding: {
@@ -22,6 +21,7 @@ Component({
   data: {
     show: false,
     quickShow: true,
+    type: 'comment',
     commentId: '',
     totalSize: 0,
     list: [],
@@ -52,15 +52,23 @@ Component({
           animationData: animation.export()
         })
       }, 100)
-      this.getComment()
+      this.resetData()
+    },
+    changeType({
+      currentTarget
+    }) {
+      let type = currentTarget.dataset.type
+      this.setData({
+        type
+      })
+      this.resetData()
+      console.log(currentTarget.dataset);
     },
     close() {
       this.setData({
         show: false,
-        quickShow:true,
+        quickShow: true,
         commentId: '',
-        totalSize: 0,
-        list: [],
         detailDesc: '',
         replyType: 'works',
         postId: null,
@@ -73,20 +81,14 @@ Component({
         quickShow: false
       })
     },
-    async getComment() {
+    loadMore() {
+      if (this.data.type == 'like') {
+        return
+      }
       let params = {
         columnId: this.data.columnId,
-        pageNo: 1,
-        pageSize: 100
       }
-      let {
-        totalSize,
-        list
-      } = await getComment(params)
-      this.setData({
-        totalSize,
-        list
-      })
+      this.getData(getComment, params)
     },
     bindKeyInput(e) {
       this.setData({
@@ -103,7 +105,7 @@ Component({
       await postReply(data)
       // 评论数+1
       this.triggerEvent('addCommentNum', this.data.columnId)
-      this.getComment()
+      this.resetData()
     },
     // 评论作品
     async sendReply() {
@@ -129,7 +131,7 @@ Component({
         detailDesc: '',
         replyType: 'works'
       })
-      this.getComment()
+      this.resetData()
     },
     async ReplyComment({
       currentTarget

components/comment/index.less

@@ -24,7 +24,6 @@
     flex-direction: column;
     justify-content: space-between;
     width: 100%;
-    height: 900rpx;
     background-color: white;
     border-top-left-radius: 25rpx;
     border-top-right-radius: 25rpx;
@@ -32,6 +31,25 @@
     .header {
       position: relative;
       padding: 24rpx;
+      display: flex;
+      align-items: center;
+
+      .hl {
+        position: relative;
+        padding-bottom: 10rpx;
+        margin-right: 120rpx;
+      }
+
+      .currentH::after {
+        position: absolute;
+        bottom: 0rpx;
+        left: 50%;
+        transform: translateX(-50%);
+        content: '';
+        width: 50rpx;
+        height: 4rpx;
+        background-color: #333;
+      }
 
       .hr {
         position: absolute;
@@ -43,8 +61,7 @@
     }
 
     .body {
-      flex: 1;
-      overflow-y: auto;
+      height: 700rpx;
 
       .body-box {
         padding: 0rpx 22rpx;
@@ -208,6 +225,7 @@
       }
     }
   }
+
   .seat2 {
     padding-bottom: calc(130rpx + env(safe-area-inset-bottom)) !important;
   }

components/comment/index.wxml

@@ -4,10 +4,12 @@
   <view class="commentBg" catchtap="close" catchtouchmove="true"></view>
   <view class="comment {{tabBarPadding?'seat2':''}}" animation="{{animationData}}">
     <view class="header">
-      <view class="hl">评论 {{totalSize}}</view>
-      <view class="hr" catchtap="close">×</view>
+      <view class="hl {{type=='comment'?'currentH':''}}" bindtap="changeType" data-type="comment">评论 {{totalSize}}
+      </view>
+      <view class="hl {{type=='like'?'currentH':''}}" bindtap="changeType" data-type="like">赞 {{totalSize}}</view>
+      <view class=" hr" catchtap="close">×</view>
     </view>
-    <view class="body" bindtap="cancelId">
+    <scroll-view scroll-y="true" class="body" bindscrolltolower='loadMore' bindtap="cancelId">
       <view class="body-box">
         <view class="content" wx:for="{{list}}" wx:key="id">
           <image src="{{item.user.avatar}}" class="c-avatar" data-uid='{{item.user.uid}}' bindtap="jumpUserInfo" />
@@ -39,7 +41,7 @@
           </view>
         </view>
       </view>
-    </view>
+    </scroll-view>
     <!-- 快捷回复 -->
     <view class="quick" wx:if="{{quickShow}}">
       <view class="close" catchtap="quickClose">×</view>

components/comment/index.wxss

@@ -23,7 +23,6 @@
   flex-direction: column;
   justify-content: space-between;
   width: 100%;
-  height: 900rpx;
   background-color: white;
   border-top-left-radius: 25rpx;
   border-top-right-radius: 25rpx;
@@ -31,6 +30,23 @@
 .commentBox .comment .header {
   position: relative;
   padding: 24rpx;
+  display: flex;
+  align-items: center;
+}
+.commentBox .comment .header .hl {
+  position: relative;
+  padding-bottom: 10rpx;
+  margin-right: 120rpx;
+}
+.commentBox .comment .header .currentH::after {
+  position: absolute;
+  bottom: 0rpx;
+  left: 50%;
+  transform: translateX(-50%);
+  content: '';
+  width: 50rpx;
+  height: 4rpx;
+  background-color: #333;
 }
 .commentBox .comment .header .hr {
   position: absolute;
@@ -40,8 +56,7 @@
   color: #333333;
 }
 .commentBox .comment .body {
-  flex: 1;
-  overflow-y: auto;
+  height: 700rpx;
 }
 .commentBox .comment .body .body-box {
   padding: 0rpx 22rpx;

components/videoPreview/index.js

@@ -180,6 +180,9 @@ Component({
     //评论
     openComment() {
       this.triggerEvent('openComment')
+      this.setData({
+        ['videoInfoCopy.unReadPostsCount']: 0,
+      })
     },
     // 删除
     delete() {

mixins/video.js

@@ -88,21 +88,6 @@ module.exports = Behavior({
       target
     }) {
       this.selectComponent('#comment').open(target.dataset.id)
-      // if (this.data.videoInfo) {
-      //   this.setData({
-      //     ['videoInfo.unReadPostsCount']: 0
-      //   })
-      // }
-      /*    let worksListCopy = JSON.parse(JSON.stringify(this.data.worksListCopy))
-         worksListCopy.forEach(item => {
-           console.log('zz');
-           if (item.userRead.id == target.dataset.id) {
-             item.unReadPostsCount = 0
-           }
-         })
-         this.setData({
-           worksListCopy
-         }) */
     },
     // 分享
     creatShare(video) {