replyDetail page setStyle

pages/social/replyDetail/replyDetail.js

@@ -8,12 +8,16 @@ Page({
         classNormal: 'commentItem',
         postId: '',
         comment: [],
-        replyInfo: ''
+        replyInfo: '',
+        count: ''
     },
     onLoad: function (option) {
-        console.log(option)
+        // console.log(option)
         this.setData({
-            postId: option.id
+            postId: option.id,
+            count: option.count
+        },() => {
+          console.log(this.data.count);
         })
         wx.setNavigationBarTitle({
             title: option.count + '条回复' //页面标题为路由参数
@@ -23,24 +27,24 @@ Page({
     },
     // 保存 回复的内容
     saveValue: function(e){
-     this.setData({
-       replyInfo: e.detail.value
-     },() => {
-       console.log(this.data.replyInfo);
-     });
+      this.setData({
+        replyInfo: e.detail.value
+      });
     },
     replyDone:function(){
       const data = {
         postsId: this.data.postId,
         content: this.data.replyInfo
       }
-      
-      httpRequestApi.postReplyComment(this.uid, data).success(res => {
-        this.setData({
-          replyModal: false
+      if(this.data.replyInfo){
+        httpRequestApi.postReplyComment(this.uid, data).success(res => {
+          this.setData({
+            replyModal: false,
+            replyInfo: ''
+          });
+          this.getReplyDetail();//更新 变化后的 replyTemp。
         });
-        this.getReplyDetail();//更新 变化后的 replyTemp。
-      });
+      }
     },
     // 查询回复详情
     getReplyDetail: function () {

pages/social/replyDetail/replyDetail.wxml

@@ -1,27 +1,20 @@
 <view class="commentArea">
+  <view class='padding-bottom'>
     <view class="{{index === 0? class1 : classNormal}}" wx:for="{{comment}}" wx:key="{{index}}">
-        <image class="avatar" src="{{item.avatar}}" />
-        <view class="commentCore">
-            <text class="nickName">{{item.name}}</text>
-            <text class="time">{{item.time}}</text>
-            <text class="gut">{{item.text}}</text>
-        </view>
-        <view class="btnWrapper">
-            <image class="commentBtn" src="../../../static/image/comment.png" wx:if="{{index===0}}" bindtap="setSBId" />
-            <text class="commentText" wx:if="{{index===0}}">评论</text>
-            <!-- <image class="likeBtn" data-index="{{index}}" data-likes="{{item.likes}}" data-id="{{item.id}}" src="../../../static/image/like.png" bindtap="likeCommend" /> -->
-            <!-- <text class="likeText" >{{item.likes}}</text> -->
-        </view>
-    </view>
-    <!-- 评论框 -->
-    <view class="replySection" wx:if="{{replyModal}}">
-        <input bindblur="bindTextAreaBlur" bindconfirm="replySB" confirm-type="send" placeholder="回复" bindinput="inputSBValue" auto-focus auto-height />
-    </view>
-    <view class='reply-msg'>
-      <!-- <input name='reply' class='reply-input' placeholder='回复@{{ comment[0].name }}' confirm-type="send" bindinput='saveValue' auto-focus auto-height></input> -->
-
-      <input name='reply' class='reply-input' placeholder='回复@{{ comment[0].name }}' bindinput='saveValue'>
-      </input>
-      <text class='reply-btn' bindtap='replyDone'>回复</text>
+      <image class="avatar" src="{{item.avatar}}" />
+      <view class="commentCore">
+          <text class="nickName">{{item.name}}</text>
+          <text class="time">{{item.time}}</text>
+          <text class="gut">{{item.text}}</text>
+      </view>
     </view>
+  </view>
+  <view class='reply-all'>
+    全部回复({{ count }})
+  </view>
+  <view class='reply-msg'>
+    <input name='reply' class='reply-input' placeholder='回复@{{ comment[0].name }}' value='{{ replyInfo }}' bindinput='saveValue' confirm-type ="send">
+    </input>
+    <text class='reply-btn' bindtap='replyDone'>回复</text>
+  </view>
 </view>

pages/social/replyDetail/replyDetail.wxss

@@ -1,105 +1,80 @@
 .commentArea {
   width: 100%;
-  margin-bottom: 92rpx;
+}
+
+.padding-bottom{
+  padding-bottom: 92rpx;
+  width: 100%;
 }
 
 .commentArea .commentItem {
-    width: 100%;
-    padding: 0 0 0 23rpx;
-    height: 100%;
-    border-bottom: solid 2rpx #979797;
-    /* margin: 0 auto 10; */
-    display: flex;
-    position: relative;
-    background: #f0f1f5;
+  width: 100%;
+  padding: 0 0 0 23rpx;
+  height: 100%;
+  border-bottom: solid 2rpx #979797;
+  display: flex;
+  position: relative;
+  background: #F0F1F5;
 }
+
 .commentArea  .commentItemFirst{
-    background: #fff;
-    border-bottom: none;
-    min-height: 200rpx;
+  background: #fff;
+  border-bottom: none;
+  height: 280rpx;
 }
+
 .commentItem .commentCore {
-    margin-left: 14rpx;
-    width: 600rpx;
-    height: 100%;
-    display: flex;
-    flex-direction: column;
+  margin-left: 14rpx;
+  width: 600rpx;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
 }
 
 .commentItem .avatar {
-    border-radius: 50%;
-    width: 96rpx;
-    height: 96rpx;
-    margin-top: 18rpx;
+  border-radius: 50%;
+  width: 96rpx;
+  height: 96rpx;
+  margin-top: 18rpx;
 }
 
 .commentItem .nickName {
-    margin-top: 18rpx;
-    height: 44rpx;
-    font-size: 32rpx;
-    color: #000;
-    font-family: PingFangSC-Regular;
+  margin-top: 18rpx;
+  height: 44rpx;
+  font-size: 32rpx;
+  color: #000;
+  font-family: PingFangSC-Regular;
 }
 
 .commentItem .time {
-    width: 200rpx;
-    height: 44rpx;
-    font-size: 32rpx;
-    color: #686868;
+  width: 200rpx;
+  height: 44rpx;
+  font-size: 32rpx;
+  color: #686868;
 }
 
 .commentItem .gut {
-    margin-top: 12rpx;
-    width: 420rpx;
-    /* height: 44rpx; */
-    line-height: 60rpx;
-    font-size: 32rpx;
-    color: #000;
-    /* overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap; */
-}
-
-.commentItem .btnWrapper {
-    position: absolute;
-    top: 10rpx;
-    right: 30rpx;
-    display: flex;
-    align-items: center;
-}
-
-.btnWrapper .commentBtn {
-    width: 32rpx;
-    height: 30rpx;
-    margin-left: 8rpx;
-}
-
-.btnWrapper .commentText,
-.likeText {
-    width: 58rpx;
-    height: 40rpx;
-    color: #545454;
-    font-size: 28rpx;
-    line-height: 40rpx;
-    margin-left: 8rpx;
+  margin-top: 12rpx;
+  width: 420rpx;
+  /* height: 44rpx; */
+  line-height: 60rpx;
+  font-size: 32rpx;
+  color: #000;
+  /* overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap; */
 }
 
-.btnWrapper .likeBtn {
-    width: 32rpx;
-    height: 28rpx;
-    margin-left: 8rpx;
-}
-.replySection{
-    width: 100%;
-    height: 300rpx;
-    position: fixed;
-    bottom: 0;
-    background: #eee;
-}
-.replySection input{
-    width: 100%;
-    height: 300rpx;
-    text-indent: 4rpx;
+.reply-all{
+  position: absolute;
+  box-sizing: border-box;
+  padding: 16rpx 23rpx;
+  width: 674rpx;
+  border-top: 2rpx solid #F0F1F5;
+  left: 40rpx;
+  top: 200rpx;
+  font-size: 28rpx;
+  color: #000000;
 }
 
 .reply-msg{