小程序 发表评论

工作日志 随手笔记 仅供参考

   之前写过一个发表评论的功能  不过是没有接入后台的数据接口静态的  现在发一个接入后台的 仅供参考

加载页面没有评论显示暂无评论

点击发表评论如果内容为空提示请输入内容

点击发表评论后评论总数加一 显示的暂无数据是分页加载 每次加载十个 加载完成显示暂无数据

<view class='release_list'>

      <view wx:for="{{release}}" class='shoppcall comment' data-id="{{item.id }}">
           
           <button wx:if='{{item.is_me == 1}}' class='revoke' bindtap='binddelete' data-id='{{item.id}}' data-index='{{index}}'>撤销</button>
           
           <view class='publish'>
            <image src='{{item.avatar}}'></image>
           
            <view class='publish_list'>
              <text class='publish_list_item'>{{item.username}}</text>
              <view class='like'>
                <text class='publish_time'>{{item.publish_time}}</text>
                 <view  class='like_num_list' bindtap='bindlike' data-id='{{item.id}}'>
                    <text class='iconfont icon-dianzan2' style='{{item.like==1?"color:red":"color:black"}}'></text>
                   
                    <text class='like_num'>{{item.likes_count}}</text>
                 </view>
               
              </view>
             
              <text class='redtree_text'>{{item.content}}</text>
            </view>
           </view>
          
         
       </view>    

       <view  class='Nocomment' wx:if='{{release.length == 0}}'>
         暂无评论
       </view>

   </view>
     
    <view class='loadmore' hidden='{{isShowLoadmore}}'>
      <view class='loading'></view>
      <view class='loadmore_tips'>正在加载</view>
    </view>
    <view class="loadmore loadmore_line" hidden='{{!isShowNoDatasTips}}'>
      <view class="loadmore_tips">暂无数据</view>
     </view>
    

   
</view>
<!--发表评论  -->
    <view class='release' hidden='{{!releaseFocus}}' >
      <input class='text' placeholder='在此处键入评论内容...' bindtap='bindrelease' value='{{releaseValue}}'></input>
  
      <text class='iconfont icon-pinglun2'></text>
      <text>{{releaselength}}</text>
     <button class='share1'  open-type='share'>
      <text  class='iconfont icon-fenxiang'></text>
     </button>
      <text>0</text>
      
    </view>
    <form bindsubmit='formSubmit'>
 
      <view class='releaseFocus'  hidden='{{releaseFocus}}'  >
      <textarea adjust-position='true' fixed='true' data-id=''  name='input' class='release_text' placeholder='在此处键入评论内容...'  value='{{releaseValue}}' focus='{{focus}}'></textarea>
      <button form-type='submit'>发表</button>
      </view>
    </form>

data: {
  page :2, //从第二页评论开始加载
  page_size:10, //每次加载十条评论
  isShowLoadmore:false, //正在加载
  isShowNoDatasTips:false,//暂无数据
  endloading: false,//判断评论是否加载完成
    focus: false, //是否点赞

    open: true,
    releaselength:'',//评论数长度
    release: [  //评论
 

    ],

    id:'', //页面id


    //  发表评论
    releaseFocus: true


  },

// 点击发表评论
  formSubmit: function (e) {
    console.log(wx.getStorageSync('auth_token'));
    var that= this;
    var id = this.data.id;
    var textareaValue = e.detail.value.input //输入的内容的值
    console.log(textareaValue)
   
    if (wx.getStorageSync('auth_token')){  //判断是否登录 登录后才可以发表内容
      if (e.detail.value.input == '') {  //如果输入的内容为空 提示请输入内容
        wx.showToast({
          title: '请输入内容',
          icon: 'none'
        })
      } else {
        wx.request({
          url: '后台接口',
          data: {
            content: textareaValue, //传给后台的输入内容
            msgid: id, // 页面的ID



          },
          method: 'POST',
          header: {
            'appid': 'fZ4wruPFDWZTEwD1gUhbkez0CUmeWGJx',
            'mbcore-access-token': wx.getStorageSync('access_token'),
            'mbcore-auth-token': wx.getStorageSync('auth_token')
          },
          success: function (res) {
            console.log(res)
            console.log('-----')
            console.log(res.data.code)
            if (res.data.code == 0){  //code 等于0 表示内容为空 
                     wx.showToast({
                       title: '请输入内容',
                       icon:'none'
                     })
            }else {
              //var that = this;
              var textarea_item = {}; 创建一个空对象
              var textareaValue = res.data.result.content; //输入的内容
              var name = res.data.result.username; //发表评论的用户名字
              var time = res.data.result.publish_time; //发表评论的时间
              var avatar = res.data.result.avatar; //发表评论的用户头像
              var id = res.data.result.id; // ID
              var like = res.data.result.likes_count; //发表评论的点赞数
              var isme = res.data.result.is_me; //判断是否是自己发表的评论
              var comments_count = res.data.result.comments_count //发表评论数

              //console.log(release);
              //console.log(that);

              var release = that.data.release;
              textarea_item.content = textareaValue; //赋值
              textarea_item.username = name;
              textarea_item.publish_time = time;
              textarea_item.avatar = avatar;
              textarea_item.id = id;
              textarea_item.likes_count = like;
              textarea_item.is_me = isme;

              release.push(textarea_item); //将textarea_item 添加到release中
              that.setData({

                release: release,
                releaseFocus: true, //隐藏输入框
                releaseValue: '' ,//清空输入框内容
                releaselength: comments_count //更新页面发表评论总数
              })

            }
           
          }

        })
      }
      }else {
      this.userInfoReadyCallback()  //判断没有登陆跳转到登录页面
      }

  },