首先晒一下接口:
新闻评论的列表
接口地址:http://wx.wmh920.com/index.php/Mz/commentList
请求方式:POST
请求数据:接收新闻的raid,分页的page
返回数据:data
list:评论的列表(二维数组)
vname :会员姓名
head_url:会员头像
rtime :评论的时间
zancount:该条评论被赞的次数
content :评论内容
count:新闻评论的总数
<div class="all">全部评论</div>
<textarea :placeholder="'已有'+data.pinglun+'条评论,快来说说你的'" class="replaycontent"></textarea><button type="button" class="mui-btn tijiao" @click="submit123($event)">提交</button>
// 评价列表,需要循环与刷新
<div class="fbjbox2">
<pull up="true" down="true" @up="next" @down="shuaxin" ref="pull">
<div v-for="item in db" >
<div class="zce">
<img :src="item.head_url" class="man"/>
<div class="cont">
<h5>{{item.vname}}</h5>
<h4>{{item.content}}</h4>
<div class="mui-clearfix comment_end">
<span class="mui-pull-left">{{item.rtime|timeago}}</span>
<span class="mui-pull-right" style="padding-left:20px;width:70px;display:inline-block"><img v-bind:src="'img/bar2/'+zan_coment+'.png'" width="18px" @click="zanComment(item,$event)"/>{{item.zancount}}</span>
</div>
</div>
</div>
</div>
</pull>
<div class="close" @tap="showpopover=false">
<img src="img/close.png" style="width:20px;height:20px;"></div>
<div class="clear"></div>
</div>
</div>
data(){
return{
id:0,
data:[],
list:[],
}
}
methods:{
shuaxin(done) {
this.$api('Mz/commentList', {raid:this.$route.params.raid, page:0}).then(db => {
this.db=db.list;
done();
});
},
next(done) {
var page = this.db.length;
this.$api('Mz/commentList', {raid:this.$route.params.raid, page }).then(db => {
if ((db.list||[]).length == 0) return done(true);
this.db = this.db.concat(db.list);
done();
});
},
//回复
submit123: function(e){ //回复评论
var content=$(e.srcElement).siblings(".replaycontent").val();
this.$api("Mz/sentComment" , { content,raid:this.$route.params.raid}).then(data => {
this.db.unshift(data); //回复的内容是content ,把content传给后台,然后后台再给我们,也就是data的内容。this.db是原来的评论列表,在这个 在开头添加是unshift
$(e.srcElement).siblings(".replaycontent").val(" "); //添加到页面以后再把评论的输入框清空
this.data.pinglun++;
mui.toast('回复成功');
});
},
}