评论组件加x

component/comment/comment.js

@@ -38,24 +38,25 @@ Component({
         // 获取评论信息
         getReply: function(columnId) {
             httpRequestApi.getReply(this.uid, columnId, 1, 10).success((res) => {
-                console.log('reply', res)
                 const commentList = res.data.data.list;
                 const commentNum = res.data.data.totalSize;
                 console.log('评论数量', commentNum)
                 commentList.forEach((item) => {
-                    const temp = {};
-                    temp.nickName = item.user.nickName;
-                    temp.avatar = item.user.avatar;
-                    temp.uid = item.user.uid;
-                    temp.text = item.detailDesc;
-                    temp.id = item.id;
-                    temp.replyCount = item.replyCount;
-                    temp.time = formatDate(item.gmtCreated, 3);
-                    temp.likes = item.likeCount || 0;
-                    temp.isLike = item.isLike;
-                    temp.replyList = item.replyVOList;
-                    temp.showControl = 0;
-                    this.data.commentList.push(temp);
+                    if (item.user) {
+                        const temp = {};
+                        temp.nickName = item.user.nickName || item.user.eid;
+                        temp.avatar = item.user.avatar;
+                        temp.uid = item.user.uid;
+                        temp.text = item.detailDesc;
+                        temp.id = item.id;
+                        temp.replyCount = item.replyCount;
+                        temp.time = formatDate(item.gmtCreated, 3);
+                        temp.likes = item.likeCount || 0;
+                        temp.isLike = item.isLike;
+                        temp.replyList = item.replyVOList;
+                        temp.showControl = 0;
+                        this.data.commentList.push(temp);
+                    }
                 });
                 this.setData({
                     commentList: this.data.commentList,

component/comment/comment.wxml

@@ -1,6 +1,7 @@
 <!-- component/comment.wxml -->
 <scroll-view class="comment_container" scroll-y="{{isScroll}}">
-    <view class="comment_number">评论 {{commentNum}}</view>
+    <view class="comment_number">评论 {{commentNum}}
+    </view>
     <view class="comment_item" wx:for="{{commentList}}" data-commentid="{{item.id}}" wx:key="id">
         <view class="comment_box">
             <view class="avatar_box">

component/comment/comment.wxss

@@ -1,199 +1,202 @@
 .comment_container {
-  position: absolute;
-  z-index: 9999;
-  bottom: 0;
-  width: 100%;
-  height: 850rpx;
-  background: #ffffff;
-  padding-bottom: 200rpx;
-  box-sizing: border-box;
+    position: absolute;
+    z-index: 99;
+    bottom: 0;
+    width: 100%;
+    height: 850rpx;
+    background: #ffffff;
+    padding-bottom: 200rpx;
+    box-sizing: border-box;
+    border-top-left-radius: 24rpx;
+    border-top-right-radius: 24rpx;
 }
 
 .comment_container .comment_number {
-  width: 100%;
-  height: 68rpx;
-  display: flex;
-  align-items: center;
-  padding-left: 20rpx;
-  color: #4a4a4a;
-  font-size: 30rpx;
+    position: relative;
+    width: 100%;
+    height: 68rpx;
+    display: flex;
+    align-items: center;
+    padding-left: 20rpx;
+    color: #4a4a4a;
+    font-size: 30rpx;
 }
 
 .comment_container .comment_item {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  padding-left: 20rpx;
-  padding-right: 68rpx;
-  box-sizing: border-box;
-  margin-bottom: 14rpx;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    padding-left: 20rpx;
+    padding-right: 68rpx;
+    box-sizing: border-box;
+    margin-bottom: 14rpx;
 }
 
 .comment_container .comment_item .comment_box {
-  width: 100%;
-  display: flex;
-  flex-direction: row;
-  box-sizing: border-box;
-  padding-bottom: 24rpx;
-  padding-left: 48rpx;
-  border-bottom: 1rpx solid rgba(151, 151, 151, 0.34);
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    box-sizing: border-box;
+    padding-bottom: 24rpx;
+    padding-left: 48rpx;
+    border-bottom: 1rpx solid rgba(151, 151, 151, 0.34);
 }
 
 .comment_container .comment_item .comment_box .avatar_box {
-  width: 111rpx;
-  height: 100%;
-  display: block;
-  margin-right: 15rpx;
+    width: 111rpx;
+    height: 100%;
+    display: block;
+    margin-right: 15rpx;
 }
 
 .comment_container .comment_item .comment_box .avatar_box image {
-  width: 96rpx;
-  height: 96rpx;
-  background: chocolate;
-  border-radius: 50%;
+    width: 96rpx;
+    height: 96rpx;
+    background: chocolate;
+    border-radius: 50%;
 }
 
 .comment_container .comment_item .comment_box .comment_info {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    width: 100%;
 }
 
 .comment_container .comment_item .comment_box .comment_info .nickname {
-  font-size: 30rpx;
-  color: rgba(0, 0, 0, 0.6);
+    font-size: 30rpx;
+    color: rgba(0, 0, 0, 0.6);
 }
 
 .comment_container .comment_item .comment_box .comment_info .comment_text {
-  font-size: 30rpx;
-  color: rgba(0, 0, 0, 0.8);
-  margin-bottom: 23rpx;
+    font-size: 30rpx;
+    color: rgba(0, 0, 0, 0.8);
+    margin-bottom: 23rpx;
 }
 
 .comment_container .comment_item .comment_box .comment_info .comment_reply_wrapper {
-  background: rgba(0, 0, 0, 0.03);
-  width: 100%;
-  padding-left: 12rpx;
-  padding-top: 10rpx;
-  box-sizing: border-box;
+    background: rgba(0, 0, 0, 0.03);
+    width: 100%;
+    padding-left: 12rpx;
+    padding-top: 10rpx;
+    box-sizing: border-box;
 }
 
 .comment_container .comment_item .comment_box .comment_info .comment_reply_wrapper .comment_reply_item {
-  font-size: 28rpx;
-  color: rgba(0, 0, 0, 0.8);
+    font-size: 28rpx;
+    color: rgba(0, 0, 0, 0.8);
 }
 
 .comment_container .comment_item .comment_box .comment_info .comment_reply_wrapper .comment_reply_item .reply_nickname {
-  color: rgba(1, 67, 124, 0.8);
+    color: rgba(1, 67, 124, 0.8);
 }
 
 .comment_container .comment_item .comment_box .comment_info .comment_reply_wrapper .more_btn {
-  display: flex;
-  justify-content: flex-end;
-  width: 100%;
-  height: 37rpx;
-  font-size: 26rpx;
-  color: #698FAF;
-  padding-right: 20rpx;
-  box-sizing: border-box;
-  padding-bottom: 20rpx;
+    display: flex;
+    justify-content: flex-end;
+    width: 100%;
+    height: 37rpx;
+    font-size: 26rpx;
+    color: #698FAF;
+    padding-right: 20rpx;
+    box-sizing: border-box;
+    padding-bottom: 20rpx;
 }
 
 .comment_container .comment_item .comment_box .comment_info .time_info {
-  width: 100%;
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-  margin-top: 30rpx;
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 30rpx;
 }
 
 .comment_container .comment_item .comment_box .comment_info .time_info .time {
-  color: rgba(0, 0, 0, 0.8);
-  font-size: 28rpx;
+    color: rgba(0, 0, 0, 0.8);
+    font-size: 28rpx;
 }
 
 .comment_container .comment_item .comment_box .comment_info .time_info .info {
-  width: 200rpx;
-  height: 100%;
-  display: flex;
-  position: relative;
+    width: 200rpx;
+    height: 100%;
+    display: flex;
+    position: relative;
 }
 
 .comment_container .comment_item .comment_box .comment_info .time_info .info .like {
-  width: 80rpx;
-  height: 35rpx;
-  display: flex;
-  align-items: center;
-  position: absolute;
-  top: -14rpx;
-  left: 0;
+    width: 80rpx;
+    height: 35rpx;
+    display: flex;
+    align-items: center;
+    position: absolute;
+    top: -14rpx;
+    left: 0;
 }
 
 .comment_container .comment_item .comment_box .comment_info .time_info .info .like image {
-  width: 30rpx;
-  height: 27rpx;
-  margin-right: 12rpx;
+    width: 30rpx;
+    height: 27rpx;
+    margin-right: 12rpx;
 }
 
 .comment_container .comment_item .comment_box .comment_info .time_info .info .like text {
-  font-size: 22.4rpx;
-  color: rgba(0, 0, 0, 0.8);
+    font-size: 22.4rpx;
+    color: rgba(0, 0, 0, 0.8);
 }
 
 .comment_container .comment_item .comment_box .comment_info .time_info .info .comment {
-  width: 80rpx;
-  height: 35rpx;
-  display: flex;
-  align-items: center;
-  position: absolute;
-  top: -14rpx;
-  left: 120rpx;
+    width: 80rpx;
+    height: 35rpx;
+    display: flex;
+    align-items: center;
+    position: absolute;
+    top: -14rpx;
+    left: 120rpx;
 }
 
 .comment_container .comment_item .comment_box .comment_info .time_info .info .comment image {
-  width: 28.8rpx;
-  height: 25rpx;
-  margin-right: 16rpx;
+    width: 28.8rpx;
+    height: 25rpx;
+    margin-right: 16rpx;
 }
 
 .comment_container .comment_item .comment_box .comment_info .time_info .info .comment text {
-  font-size: 22.4rpx;
-  color: rgba(0, 0, 0, 0.8);
+    font-size: 22.4rpx;
+    color: rgba(0, 0, 0, 0.8);
 }
 
 .comment_input {
-  width: 100%;
-  height: 205rpx;
-  background: #eee;
-  position: fixed;
-  bottom: 0;
-  z-index: 9999;
-  padding-left: 24rpx;
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
+    width: 100%;
+    height: 205rpx;
+    background: #eee;
+    position: fixed;
+    bottom: 0;
+    z-index: 9999;
+    padding-left: 24rpx;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
 }
 
 .comment_input .send_input {
-  width: 575rpx;
-  height: 94rpx;
-  background: #fff;
-  border-radius: 10rpx;
-  padding-left: 50rpx;
+    width: 575rpx;
+    height: 94rpx;
+    background: #fff;
+    border-radius: 10rpx;
+    padding-left: 50rpx;
 }
 
 .comment_input .send_input ::placeholder {
-  text-indent: 10rpx;
-  color: #000;
+    text-indent: 10rpx;
+    color: #000;
 }
 
 .comment_input .send_btn {
-  width: 120rpx;
-  height: 48rpx;
-  line-height: 48rpx;
-  text-align: center;
-  color: #42a8ff;
-  font-size: 34rpx;
+    width: 120rpx;
+    height: 48rpx;
+    line-height: 48rpx;
+    text-align: center;
+    color: #42a8ff;
+    font-size: 34rpx;
 }

pages/index/index.js

@@ -770,7 +770,6 @@ Page({
         if (e.target.dataset.type === 'blank') {
             if (this.data.commentShow && this.data.commentId) {
                 httpRequestApi.getClassDetail(this.data.commentId).success(res => {
-                    console.log('评论回显', res.data.data.userRead.commentAmount)
                     let str = `videoList[${this.data.commentIndex}].commentAmount`;
                     this.setData({
                         [str]: res.data.data.userRead.commentAmount

pages/index/index.wxml

@@ -54,7 +54,10 @@
     <VideoSwiper wx:if="{{videoList.length > 0}}" class="video-swiper" video-list="{{videoList}}" nextMargin="{{nextMargin}}" isSwiper="{{isSwiper}}" noMoreWork="{{noMoreWork}}" ifHeadTap="{{true}}" bindopenShare="openShare" bindopenComment="openComment" bindheadTap="headTapHandler" bindgoToReading="goToReading" bindcollectTap="collectTap" bindlikeTap="likeTap" binddelHideMyWork="delHideMyWork" bindaddShareAmount="addShareAmount" bindchange="videoChange">
     </VideoSwiper>
     <view class="comment_section" catchtouchmove="touchMove" catchtap="commentTap" data-type="blank" wx:if="{{commentShow}}">
-        <Comment data-type="list" commentId="{{commentId}}" commentNum="{{commentNum}}" inputValue="{{inputValue}}" bindsendReply="sendReply" />
+        <view class="comment_close" data-type='blank'>
+            ×
+        </view>
+       <Comment data-type="list" commentId="{{commentId}}" commentNum="{{commentNum}}" inputValue="{{inputValue}}" bindsendReply="sendReply" />
     </view>
     <view class="no_follow" wx:if="{{myIndex === 1 && videoList.length <= 0 && noFollow}}">
         <image class="no_follow_icon" src="../../static/index/no_follow.png" />

pages/index/index.wxss

@@ -380,6 +380,15 @@
     overflow: hidden;
 }
 
+.comment_close {
+    position: absolute;
+    bottom: 760rpx;
+    right: 10rpx;
+    font-size: 60rpx;
+    padding: 20rpx;
+    z-index: 999;
+}
+
 .change_grade {
     width: 100%;
     height: 100%;

pages/userWorks/index.less

@@ -9,4 +9,13 @@
         background: rgba(0, 0, 0, .3);
         overflow: hidden;
     }
+
+    .comment_close {
+        position: absolute;
+        bottom: 760rpx;
+        right: 10rpx;
+        font-size: 60rpx;
+        padding: 20rpx;
+        z-index: 999;
+    }
 }

pages/userWorks/index.wxml

@@ -7,6 +7,9 @@
     </block>
     <emptyBg wx:if="{{list.length==0}}" message='您还没有作品哦，赶快去发表吧！'></emptyBg>
     <view class="comment_section" catchtouchmove="touchMove" catchtap="commentTap" data-type="blank" wx:if="{{commentShow}}">
+        <view class="comment_close" data-type='blank'>
+            ×
+        </view>
         <Comment commentId="{{commentId}}" bindsendReply="sendReply" />
     </view>
 </view>

pages/userWorks/index.wxss

@@ -8,3 +8,11 @@
   background: rgba(0, 0, 0, 0.3);
   overflow: hidden;
 }
+.worksBox .comment_close {
+  position: absolute;
+  bottom: 760rpx;
+  right: 10rpx;
+  font-size: 60rpx;
+  padding: 20rpx;
+  z-index: 999;
+}