工作日志 随手笔记 仅供参考
之前写过一个发表评论的功能 不过是没有接入后台的数据接口静态的 现在发一个接入后台的 仅供参考
加载页面没有评论显示暂无评论
点击发表评论如果内容为空提示请输入内容
点击发表评论后评论总数加一 显示的暂无数据是分页加载 每次加载十个 加载完成显示暂无数据
<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() //判断没有登陆跳转到登录页面
}
},