微信小程序-评论业务的实现

微信小程序-评论业务的实现

一、效果

二、实现

1.wxml

<!-- 
  wx:index = "index":列表循环后所有位置都可以访问索引
 -->
<view class="item" wx:for="{{list}}" wx:index = "index">
  <view class="left">
    <image class="avatar"></image>
  </view>
  <view class="right">
    <view class="nickname">{{item.nickName}}</view>
    <view class="content">{{item.content}}</view>
    <view class="image-list">
      <image class="image" wx:for="{{item.imageList}}"></image>
    </view>
    <view class="time-area">
      <view class="time">{{item.time}}</view>
      <view>
        <!--
           data-index="{{index}}"
            1.设置后在回调函数中currentTarget.dataset中显示
         -->
        <image class="operation-button" src="../../images/caozuo.png" catchtap="showOperationPannel" data-index="{{index}}"></image>
        <!-- 判断当前索引和面盘索引是否一致 -->
        <view class="operation-pannel" wx:if="{{showOperationPannelIndex == index}}">
          <!-- 设置索引和点击函数 -->
          <view class="tab" catchtap="clickLove" data-index="{{index}}">
            <image class="image" src="../../images/love-white.png"></image>
            <text>赞</text>
          </view>
          <view class="tab" catchtap="clickComment" data-index="{{index}}">
            <image class="image" src="../../images/comment-white.png"></image>
            <text>评论</text>
          </view>
        </view>
      </view>
      
    </view>
    <view class="love-comment">
      <!-- 
        item.loveList=重复
        item.loveList
        <view class="love" wx:if="{{item.loveList.length > 0}}">
        <image class="love-icon" src="../../images/love-blue.png"></image>
        <text class="love-nickname" wx:for="{{item.loveList}}">老夫子 兰陵王</text>
      </view>
       -->
      <view class="love" wx:if="{{item.loveList.length > 0}}">
        <image class="love-icon" src="../../images/love-blue.png"></image>
        <!-- love和整个循环的item不冲突 -->
        <text class="love-nickname" wx:for-items="{{item.loveList}}"
        wx:for-item = "love"
        >{{love.nickName}}</text>
      </view>
      <view class="comment" wx:if="{{item.commentList.length > 0}}">
        <view wx:for-items="{{item.commentList}}"
        wx:for-item = "comment">
          <text class="comment-nickname">{{comment.nickName}}</text>
          <text class="comment-content">{{comment.content}}</text>
        </view>
      </view>
    </view>
  </view>
</view>

<view class="comment-add" style="bottom:{{heightBottom != '' ? heightBottom : 0}}rpx;"
wx:if="{{showCommentAdd}}"
>
  <input 
  placeholder="请输入评论"
  focus="{{showCommentAdd}}"
  bindinput="bindInput"
  bindfocus="bindFocus"
  bindblur="bindBlur"
  class="comment-input">
    
  </input>
  <button class="comment-send" catchtap="clickSend" type="primary" disabled="{{commentContent.length > 0 ? false : true}}" size="mini">发 送</button>
</view>

2.js

// pages/circle/list.js
var that;
Page({

  /**
   * 页面的初始数据
   */
  data: {
    // ----评论----
    // 评论的索引
    currentCircleIndex:-1,
    // 显示输入搜索框
    showCommentAdd:false,
    commentContent:'',
    // 键盘弹起的高度
    heightBottom:'',
    userInfo:null,
    list:[],
    // 当前点击操作面板的索引，每条朋友圈一个面板
    showOperationPannelIndex:-1,
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    that = this;
    for (var i = 1; i < 10; i++) {
      // 定义一个对象存储数据
      var circleData = {};
      circleData.nickName = "朋友-" + i;
      circleData.content = "朋友发布内容-" + i;
      circleData.time = "2020-05-0" + i;

      //图片列表
      var imageList = [];
      // 点赞列表
      var loveList = [];
      // 评论列表
      var commentList = [];


      // 这三个数组赋值给circleData
      circleData.imageList = imageList;
      circleData.loveList = loveList;
      circleData.commentList = commentList;

      // 给3个数组赋值
      for (var j = 1; j < i; j++) {
        // 图片路径，占位
        imageList.push(j);
        // loveList，定义loveData对象
        var loveData = {};
        loveData.nickName = '点赞-' + j;
        // 点赞数组加入loveList
        loveList.push(loveData);

        // 评论数据
        var commentData = {};
        commentData.nickName = "兰陵王-" + j + "：";
        commentData.content = "评论内容-" + j;
        // 加入数据
        commentList.push(commentData);
      }

      that.data.list.push(circleData);
    }
    // 重新渲染
    that.setData({
      list: that.data.list
    })
    //获取用户信息
    wx.getStorage({
      key: 'userInfo',
      success(res){
        //转换成对象
        console.log("getStorage success:",JSON.parse(res.data));
        that.setData({
          userInfo:JSON.parse(res.data)
        })
      }
    })
  },
  //控制操作面板展示
  showOperationPannel(e){
    console.log("showOperationPannel",e);
    // 获取点击的索引
    var index = e.currentTarget.dataset.index;
    // 如果正在展示，则关闭
    if(that.data.showOperationPannelIndex == index){
      that.setData({
        // 索引从0开始
        showOperationPannelIndex:-1
      })
    }
    else{
      that.setData({
        // 设置成当前点击的索引
        showOperationPannelIndex:index
      })
    }
    
  },
  // 点赞功能
  clickLove(e){
    console.log(e);
    var index = e.currentTarget.dataset.index;
    // 将这条数据取出
    var circleData = that.data.list[index];
    var loveList = circleData.loveList;
    var isHaveLove = false;
    for(var i = 0; i < loveList.length; i++){
      if(that.data.userInfo.nickName == loveList[i].nickName){
        isHaveLove = true;
        // 移除点赞
        loveList.splice(i,1);
        break;
      }
    }

    if(!isHaveLove){
      loveList.push({nickName:that.data.userInfo.nickName});
    }
    that.setData({
      list:that.data.list,
      // 关闭点赞评论面板
      showOperationPannelIndex:-1
    })

  },

  //获取输入
  bindInput(e){
    console.log(e);
    that.setData({
      commentContent:e.detail.value
    })
  },
  //获取焦点
  bindFocus(e){
    console.log(e);
    that.setData({
      heightBottom:e.detail.height
    })
  },
  // 失去焦点
  bindBlur(e){
    that.setData({
      showCommentAdd:false,
    })
  },
  // 点击评论函数
  clickComment(e){
    that.setData({
      currentCircleIndex:e.currentTarget.dataset.index,
      showCommentAdd:true,
      showOperationPannelIndex:-1
    })
  },
  // 发送评论函数
  clickSend(e){
    console.log(e);
    // 获取当前朋友圈内容
    var circleData = that.data.list[that.data.currentCircleIndex];
    // 获取当前评论列表
    var commentList = circleData.commentList;
    // 定义一个评论对象
    var commentData = {};
    commentData.nickName = that.data.userInfo.nickName + ":";
    commentData.content = that.data.commentContent;
    commentList.push(commentData);

    that.setData({
      list:that.data.list,
      showCommentAdd:false,
      commentContent:''
    })

  },
  
})

3.wxss

/* 页面设置白色 */
page{
  background-color: #fff;
}

/* 整个页面的宽度时750rpx
  设置左右边距20rpx
  头像设置80rpx
  头像据右侧10rpx
  右侧剩余：750-80-20-20-10 = 620
*/
.item{
  display: flex;
  width: 100%;
  padding: 20rpx 20rpx;
  border-bottom: 1px solid #f0f0f0;
}
/* 左侧，宽80，距离右侧10rpx：即头像的位置 */
.left{
  width: 80rpx;
  margin-right: 10rpx;
}
.avatar{
  width: 80rpx;
  height: 80rpx;
  margin-right: 10rpx;
  background: #f3f3f3;
}

.right{
  /* 右侧剩余 */
  width: 620rpx;
  /* flex布局 */
  display: flex;
  /* 按列排 */
  flex-direction: column;
}
.nickname{
  font-size: 32rpx;
  line-height: 50rpx;
  color: #3b4977;
}

.content{
  font-size: 32rpx;
  line-height: 40rpx;
  color: #181818;
  margin-bottom: 10rpx;
}

.image-list{
  display: flex;
  /* 可以换行 */
  flex-wrap: wrap;
}
.image-list .image{
  width: 160rpx;
  height: 160rpx;
  /* 设置背景颜色，未加载时占位 */
  background: #f3f3f3;
  /* 图片排列空隙 */
  margin-right: 10rpx;
  margin-bottom: 10rpx;
}

.time-area{
  display: flex;
  height: 72rpx;
  /* 相对定位 */
  position: relative;
  align-items: center;
}
.time-area .time{
  font-size: 26rpx;
  /* 和父元素相同 */
  line-height: 70rpx;
  color: #696969;
}
.time-area .operation-button{
  height: 40rpx;
  width: 70rpx;
  /* 绝对定位，相对定位里又设置，要生效就要先设置relative */
  /* 在父元素中的绝对位置 */
  position: absolute;
  /* 时间区域最右侧 */
  right: 0rpx;
  /* (70-40)  / 2 */
  top: 15rpx;
}
.time-area .operation-pannel{
  position: absolute;
  /* 行高跟父控件一样了 */
  top: 0rpx;
  /* 离操作按钮还有10rpx */
  right: 80rpx;
  width: 300rpx;
  line-height: 70rpx;
  background-color: #4c5154;
  border-radius: 10rpx;
  font-size: 24rpx;
  color: white;
  /* 文字居中 */
  text-align: center;
}
.time-area .operation-pannel .tab{
  /* 不换行 */
  display: inline-block;
  /* 平分300 */
  width: 150rpx;
}
.time-area .operation-pannel .tab .image{
  width: 26rpx;
  height: 26rpx;
  /* 图片居中 */
  vertical-align: middle;
  /* 透明的 */
  background-color: transparent;
}
.love-comment{
  margin-top: 10rpx;
  background-color: #f7f7f7;
  width: 100%;
}

.love{
  padding: 6rpx 16rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.love .love-icon{
  width: 26rpx;
  height: 26rpx;
}

.love .love-nickname{
  font-size: 30rpx;
  line-height: 40rpx;
  color: #3b4977;
}
.comment{
  padding: 6rpx 16rpx;
  padding-bottom: 12rpx;
  font-size: 30rpx;
}
.comment .comment-nickname{
  color: #3b4977;
}
.comment .comment-content{
  color: #181818;
  line-height: 40rpx;
}

/* 评论输入框 */
.comment-add{
  background-color: white;
  /* 固定定位 */
  position: fixed;
  bottom: 0rpx;
  width: 100%;
  height: 100rpx;
  display: flex;
  /* 居中 */
  align-items: center;
  border-top: 1px solid #f3f3f3;
}
.comment-add .comment-input{
  height: 52rpx;
  line-height: 52rpx;
  /* 内容居中 */
  vertical-align: middle;
  color: #181818;
  margin-left: 20rpx;
  margin-right: 20rpx;
  padding: 5rpx 20rpx;
  background-color: #f3f3f3;
  /* 当按钮占剩余空间 */
  flex-grow: 1;
}
.comment-add .comment-send{
  margin-right: 20rpx;
  font-size: 22rpx;
}