仿微信朋友圈 评论 回复评论 点赞功能

<view>
  <view class="bg">
    <image src="../static/images/bg.png"></image>
    <view class="user_info">
      <view class="user_name">{{userInfo.nickname}}</view>
      <view class="user_img">
        <image src="{{userInfo.avatar}}"></image>
      </view>
    </view>
  </view>

  <view class="moments">

    <view class="firend_msg" wx:for="{{danceList}}">

      <view class="firend_img">
        <image src="{{item.avatar}}"></image>
      </view>

      <view class="firend_con">
        <view class="firend_name">{{item.nickname}}</view>
        <view class="firend_content">{{item.content}}</view>
        <view class="firend_oneImg" wx:if="{{item.videofile != ''}}">
          <video src="{{baseUrl+item.videofile}}"></video>
        </view>
        <view wx:else>
          <view class="firend_oneImg" wx:if="{{item.images.length == 1}}">
            <image src="{{baseUrl+item.images[0]}}" mode="widthFix"></image>
          </view>
          <view class="firend_manyImg" wx:else>
            <image src="{{baseUrl+item}}" wx:for="{{item.images}}"></image>
          </view>
        </view>

        <view class="firend_time">
          <view class="add_time">{{item.createtime_text}}</view>
          <view class="firend_fun">
            <view class="firend_like" bindtap="bindlike" data-id="{{item.id}}" data-index="{{index}}">
              <image src="{{item.is_zan == 0?'../static/images/xin.png':'../static/images/xinselect.png'}}"></image>点赞
            </view>
            <view class="firend_like" bindtap="bindcomment" data-id="{{item.id}}" data-index="{{index}}">
              <image src="../static/images/pinglun.png"></image>评论
            </view>
          </view>
        </view>

        <!-- 评论 -->
        <view class="firend_comment" wx:if="{{item.comment.length != 0}}">
          <view class="firend_reply" wx:for="{{item.comment}}" data-id="{{item.from_id}}" data-circleId="{{item.dance_circle_id}}" data-name="{{item.from_nickname}}" data-type="{{item.from_type}}" bindtap="bindreplycomment">
            <text class="reply_name" wx:if="{{item.type == 2}}">{{item.from_nickname}}</text>
            <text class="reply_name" wx:if="{{item.type == 1}}">{{item.from_nickname}}:</text>
            <text class="reply_con" wx:if="{{item.type == 2}}">回复</text>
            <text class="reply_name" wx:if="{{item.type == 2}}">{{item.to_nickname}}:</text>
            <text class="reply_con">{{item.content}}</text>
          </view>
        </view>
      </view>
    </view>
  </view>

  <!-- 乎起评论 -->
  <view class="mark" hidden="{{mark}}" bindtap="bindmark" bindtouchstart="bindtouchstart"></view>
  <view class="comment" hidden="{{hidden}}">
    <view class="comment_input"><input bindinput="bindinput" cursor-spacing='10' focus='{{focus}}' type="text"
        placeholder="{{placeholder}}" value="{{content}}" placeholder-style="font-size:28rpx;color:#999" /></view>
    <view class="add_btn" bindtap="binddance">发布</view>
  </view>

  <view class="release" bindtap="bindrelease">发布</view>

  <view class="toast" hidden="{{release}}">
    <view class="add_video" bindtap="bindgopage" data-url="../DanceFirend/pages/addVideo/index">发布视频</view>
    <view class="add_img" bindtap="bindgopage" data-url="../DanceFirend/pages/add/index">发布图片</view>
    <view class="cancal" bindtap="bindcancal">取消</view>
  </view>



</view>
/* pages/dance/index.wxss */
@import '../static/css/iconfont/iconfont.wxss';
@import '../static/css/base/base.wxss';

.bg {
  width: 750rpx;
  height: 320rpx;
  background: #FFFFFF;
  opacity: 1;
  position: relative;
  box-sizing: border-box;
}

.bg image {
  width: 750rpx;
  height: 320rpx;
  display: block;
}

.user_info {
  position: absolute;
  right: 40rpx;
  top: 260rpx;
  display: flex;
  align-items: flex-end;
}

.user_img {
  width: 120rpx;
  height: 120rpx;
  margin-left: 20rpx;
}

.user_img image {
  width: 100%;
  height: 100%;
  display: block;
}

.user_name {
  font-size: 32rpx;
  color: #999999;
  margin-bottom: 8rpx;
}

.moments {
  padding: 97rpx 40rpx;
}

.firend_msg {
  display: flex;
  margin-bottom: 40rpx;

}

.firend_img {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  margin-right: 15rpx;
  flex-shrink: 0;
}
.firend_con {
  flex: 1;
}

.firend_img image {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: block;
}

.firend_name {
  font-size: 28rpx;
  color: #000000;
  margin-bottom: 10rpx;
}

.firend_content {
  font-size: 28rpx;
  color: #333333;
  margin-bottom: 20rpx;
}

.firend_manyImg {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 8rpx;
}

.firend_manyImg image {
  width: 188rpx;
  height: 188rpx;
  background: #FFFFFF;
  opacity: 1;
  display: block;
  margin-right: 6rpx;
  margin-bottom: 6rpx;
}

.firend_manyImg image:nth-child(3n) {
  margin-right: 0;
}

.firend_oneImg {
  width: 288rpx;
  margin-bottom: 15rpx;
}

.firend_oneImg video {
  width: 252rpx;
  height: 288rpx;
  background: #FFFFFF;
  border: 1rpx solid #707070;
  opacity: 1;
}

.firend_oneImg image {
  width: 100%;
  display: block;
}

.firend_fun {
  display: flex;
  align-items: center;
}

.firend_like {
  display: flex;
  font-size: 24rpx;
  color: #666666;
  margin-right: 25rpx;
}

.firend_like:last-child {
  margin-right: 0;
}

.firend_like image {
  width: 35rpx;
  height: 35rpx;
  margin-right: 5rpx;
}

.firend_time {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.add_time {
  font-size: 24rpx;
  color: #999999;
}

.firend_comment {
  width: 575rpx;
  background: #F7FCFF;
  opacity: 1;
  border-radius: 40rpx;
  padding: 12rpx 30rpx;
  box-sizing: border-box;
  margin-top: 25rpx;
}

.firend_reply {
  margin-bottom: 8rpx;
}

.reply_name {
  font-size: 24rpx;
  color: #289FE1;
}

.reply_con {
  font-size: 24rpx;
  color: #333333;
}

.release {
  position: fixed;
  right: 40rpx;
  top: 884rpx;
  width: 83rpx;
  text-align: center;
  line-height: 83rpx;
  font-size: 28rpx;
  color: #FFFFFF;
  height: 83rpx;
  background: #FEB701;
  box-shadow: 0rpx 3rpx 6rpx #FEB701;
  border-radius: 50%;
  opacity: 1;
}

.mark {
  position: fixed;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.15);
}

.comment {
  display: flex;
  align-items: center;
  width: 750rpx;
  height: 98rpx;
  background: #FFFFFF;
  opacity: 1;
  position: fixed;
  bottom: 0;
  left: 0;

}

.add_btn {
  width: 120rpx;
  text-align: center;
  height: 98rpx;
  line-height: 98rpx;
  font-size: 30rpx;
  color: #23AEFF;
}

.comment_input {
  margin-left: 32rpx;
  width: 598rpx;
  height: 64rpx;
  display: flex;
  align-items: center;
  padding: 0 24rpx;
  box-sizing: border-box;
  background: #F7F7F7;
  opacity: 1;
  border-radius: 93rpx;
}

.comment_input input {
  width: 100%;
}

.toast {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #f8f8f8;
  border-radius: 40rpx 40rpx 0rpx 0rpx ;
}

.add_video {
  width: 750rpx;
  text-align: center;
  line-height: 100rpx;
  font-size: 28rpx;
  color: #707070;
  height: 100rpx;
  background: #FFFFFF;
  opacity: 1;
  border-radius: 40rpx 40rpx 0rpx 0rpx ;
  margin-bottom: 6rpx;
}
.add_img {
  width: 750rpx;
  text-align: center;
  line-height: 100rpx;
  font-size: 28rpx;
  color: #707070;
  height: 100rpx;
  background: #FFFFFF;
  opacity: 1;
  margin-bottom: 6rpx;
}
.cancal {
  width: 750rpx;
  text-align: center;
  line-height: 100rpx;
  font-size: 28rpx;
  color: #707070;
  height: 100rpx;
  background: #FFFFFF;
  opacity: 1;
}
// pages/dance/index.js
const gopage = require('../config/config.js').bindgopage;
const app = getApp()
const $ = require('../config/config.js')
Page({

  /**
   * 页面的初始数据
   */
  data: {
    userInfo: {},
    baseUrl: app.globalData.baseUrl,
    hidden: true,
    focus: false,
    mark: true,
    release: true,
    page: 1,
    isLoad: false,
    danceList: [],//舞圈
    content: '',//回复内容
    dance_circle_id: '',//舞圈id
    dance_circle_index: '',//舞圈index
    placeholder: '请输入您的评论',
    to_id: '',//被回复id
    to_type: '',//被回复type
    to_nickname: '',//被回复名字
    commentReply: false,//评论还是回复
  },
  //点赞
  bindlike(e) {
    const that = this;
    if (!wx.getStorageSync('token')) return $.toast('请先登录', false)
    let index = e.currentTarget.dataset.index;
    let data = {
      id: e.currentTarget.dataset.id,
      token: wx.getStorageSync('token')
    }
    $.Ajax('zanCircle', data, res => {
      if (that.data.danceList[index].is_zan == 1) {
        that.data.danceList[index].is_zan = 0
        that.setData({
          danceList: that.data.danceList
        })
      } else {
        that.data.danceList[index].is_zan = 1
        that.setData({
          danceList: that.data.danceList
        })
      }


    })
  },
  /* 发布 */
  bindrelease() {
    if (!wx.getStorageSync('token')) return $.toast('请先登录', false);
    this.setData({
      mark: false,
      release: false
    })
  },
  /* 取消 */
  bindcancal(e) {
    this.setData({
      mark: true,
      release: true
    })
  },
  bindgopage(e) {
    gopage(e);
    this.setData({
      mark: true,
      release: true
    })
  },

  bindtouchstart(e) {
    this.setData({
      hidden: true,
      mark: true,
      release: true,
      focus: false
    })
  },
  /* 评论 */
  bindcomment(e) {
    if (!wx.getStorageSync('token')) return $.toast('请先登录', false);
    let id = e.currentTarget.dataset.id;
    let index = e.currentTarget.dataset.index;
    this.setData({
      hidden: false,
      mark: false,
      focus: true,
      dance_circle_id: id,
      dance_circle_index: index,
    })
  },
  //监听评论内容
  bindinput(e) {
    this.setData({
      content: e.detail.value
    })
  },
  //发布评论
  binddance() {
    const that = this;
    if (that.data.commentReply) {
      //回复评论
      that.replycomment()
    } else {
      //评论
      that.commentdance()
    }
  },
  //评论
  commentdance() {
    const that = this;
    let data = {
      token: wx.getStorageSync('token'),
      content: that.data.content,
      dance_circle_id: that.data.dance_circle_id
    }

    $.Ajax('commentCircle', data, res => {
      let obj = {
        content: that.data.content,
        createtime: 1624257325,
        createtime_text: "2021-06-21 14:35",
        dance_circle_id: that.data.dance_circle_id,
        from_id: wx.getStorageSync('userInfo').user_id,
        from_type: 1,
        from_nickname: wx.getStorageSync('userInfo').nickname,
        to_id: wx.getStorageSync('userInfo').user_id,
        to_nickname: wx.getStorageSync('userInfo').nickname,
        type: 1
      }

      that.data.danceList[that.data.dance_circle_index].comment.push(obj);
      that.setData({
        danceList: that.data.danceList,
        hidden: true,
        mark: true,
        release: true,
        focus: false,
        dance_circle_id: '',
        content: '',
        placeholder: '请输入您的评论',
        dance_circle_index: '',
      })
    })
  },
  //回复评论
  replycomment() {
    const that = this;
    let data = {
      token: wx.getStorageSync('token'),
      content: that.data.content,
      dance_circle_id: that.data.dance_circle_id,
      to_id: that.data.to_id,
      to_type: that.data.to_type
    }
    $.Ajax('replyCircle', data, res => {

      let obj = {
        content: that.data.content,
        createtime: '',
        createtime_text: "",
        dance_circle_id: that.data.dance_circle_id,
        from_id: wx.getStorageSync('userInfo').user_id,
        from_type: 1,
        from_nickname: wx.getStorageSync('userInfo').nickname,
        to_id: that.data.to_id,
        to_nickname: that.data.to_nickname,
        type: 2
      }
      that.data.danceList.map(function (item, index) {
        if (item.id == that.data.dance_circle_id) {
          that.data.danceList[index].comment.push(obj);
        }
      })

      that.setData({
        danceList: that.data.danceList,
        hidden: true,
        mark: true,
        release: true,
        focus: false,
        dance_circle_id: '',
        content: '',
        to_id: '',//被回复id
        to_type: '',//被回复type
        to_nickname: '',//被回复type
        content: '',
        placeholder: '请输入您的评论',
      })
    })
  },
  //回复评论
  bindreplycomment(e) {
    const that = this;
    if (!wx.getStorageSync('token')) return $.toast('请先登录', false);
    var id = e.currentTarget.dataset.id;
    var circleId = e.currentTarget.dataset.circleid;
    var type = e.currentTarget.dataset.type;
    var name = e.currentTarget.dataset.name;

    if (type == 1 && id == wx.getStorageSync('userInfo').user_id) return;
    that.setData({
      hidden: false,
      mark: false,
      focus: true,
      dance_circle_id: circleId,
      to_id: id,
      to_type: type,
      to_nickname: name,
      placeholder: '回复:' + name,
      commentReply: true
    })
  },

  /* 点击遮罩层 */
  bindmark() {
    this.setData({
      hidden: true,
      mark: true,
      release: true,
      focus: false,
      dance_circle_id: '',
      dance_circle_index: '',
      to_id: '',//被回复id
      to_type: '',//被回复type
      content: '',
      placeholder: '请输入您的评论',
      commentReply: false,
    })
  },
  //舞圈列表
  danceList() {
    const that = this;
    if (that.data.isLoad) return
    that.setData({
      isLoad: true
    })
    let data = {
      page: that.data.page,
      token: wx.getStorageSync('token')
    }

    $.Ajax('danceList', data, res => {
      //隐藏loading 提示框
      wx.hideLoading();
      //隐藏导航条加载动画
      wx.hideNavigationBarLoading();
      //停止下拉刷新
      wx.stopPullDownRefresh();
      if (res.data.data.rows.length == 0) {
        if (that.data.page == 1) {
          that.setData({
            isLoad: true,
            noData: true
          })
        } else {
          that.setData({
            isLoad: true,
            noData: false
          })
        }
      } else {
        if (res.data.data.rows.length < 10) {
          that.data.danceList.push(...res.data.data.rows);
          that.setData({
            danceList: that.data.danceList,
            isLoad: true,
            noData: false
          })
        } else {
          that.data.danceList.push(...res.data.data.rows);
          that.setData({
            danceList: that.data.danceList,
            isLoad: false,
            noData: false,
            page: that.data.page + 1
          })
        }

      }
    })
  },
  //刷新
  onRefresh() {
    //在当前页面显示导航条加载动画
    wx.showNavigationBarLoading();
    //显示 loading 提示框。需主动调用 wx.hideLoading 才能关闭提示框
    wx.showLoading({
      title: '刷新中...',
    })
    this.setData({
      page: 1,
      isLoad: false,
      danceList: [],//舞圈
    })
    this.danceList();
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    this.danceList();
    this.setData({
      userInfo: wx.getStorageSync('userInfo')
    })
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    //调用刷新时将执行的方法
    this.onRefresh();
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function (e) {
    if (this.data.isLoad) return
    this.danceList()
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

  • 2
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值