上一篇文章中我们已完成了批评的宣布功用,现在要完成复兴批评的功用,,起首呢,要知道你复兴的是哪一条批评,所以我们这里要或得批评的id,当点击批评的时刻完成批评的复兴,这里用到@click=”reply(item)”,把该要领放到methods中,这里叫做item.id,然后在new vue内里的data内里定义一个参数,把item.id赋给comment_id,comment_id的值一开始为空,然后在UIChatBox.open里的ret函数参数内里挪用comment_id: vm.comment_id
data:{
comment_id: null
}
methods: {
reply: function (item) {
this.comment_id = item.id
}
}
这里已获取了comment_id的值,当复兴时应当让手机默许键盘弹出,输入框或得核心,,这里用到了UIChatBox.popupKeyboard();然后当你复兴时,平常罕见的会有复兴:“某某”的批评或许“@”宣布批评人的批评,所以呢,这里要或得宣布批评的用户信息,,在data内里设置一个user额变量,再将item的用户id赋给user,所以综上所述,代码以下
data:{
user: JSON.parse(localStorage.getItem('user')),
comment_id: null,
comments: []
},
methods: {
reply: function (item) {
this.comment_id = item.id
UIChatBox.popupKeyboard();
UIChatBox.value({
msg: '@' + item.user.username + ' '
}); //设置输入框的值
}
}
到这里,我们复兴的功用就已基础完成了,以下是完全代码
html
<div class="aui-content comment-list" id="app">
<ul class="comment-list">
<li class="item aui-padded-b-10" v-for="item in comments" @click="reply(item)">
<div class="aui-row aui-padded-10">
<div class="aui-col-xs-2 img aui-padded-r-10" :class="item.user_id == user.id ? 'aui-pull-right' : ''">
<img src="../image/demo1.png" class="aui-img-round">
</div>
<div class="aui-col-xs-10 aui-padded-r-10" :class="item.user_id == user.id ? 'aui-text-right' : ''">
<p>{{item.user.username}} <span>角色 {{item.id}}</span></p>
<p>{{item.user.created_at}}</p>
</div>
</div>
<div class="message aui-padded-r-15 ">
{{item.content}}
</div>
</li>
</ul>
</div>
js
apiready = function(){
var id=api.pageParam.id;
var UIChatBox = api.require('UIChatBox');
var vm=new Vue({
el:'#app',
data:{
user: JSON.parse(localStorage.getItem('user')),
comment_id: null,
comments: []
},
methods: {
reply: function (item) {
this.comment_id = item.id
UIChatBox.popupKeyboard();
UIChatBox.value({
msg: '@' + item.user.username + ' '
});
}
},
created:function(){
var that=this;
app.get('news/'+id + '/comments',function(data){
that.comments=data.data;
// console.log(data)
},function(err){
})
}
});
// app.alert(localStorage.getItem('token'))
UIChatBox.open({
style:{
indicator:{
target:'both'
}
}
}, function(ret, err) {
if (ret) {
if (ret.eventType == 'send') {
//post到服务端接口
app.post('news/' + id + '/comments', {
comment_id: vm.comment_id,
content: ret.msg
}, function (data) {
vm.comments.push(data)
api.toast({
msg: '发送胜利'
});
UIChatBox.closeKeyboard();
vm.comment_id = null
}, function (xhr) {
switch (xhr.status) {
case 422:
api.toast({
msg: xhr.responseJSON.content[0]
});
break;
}
})
}
} else {
alert(JSON.stringify(err));
}
});
};
补充申明,当我们复兴他人的批评时,他人宣布的批评用户头像在左侧,本人宣布的复兴或许批评头像在右侧,这里有点像qq、微信的谈天界面,人人能够设想以下,,所以这里我们要推断以下让列表中的头像靠左或靠右,假如批评item.user_id 即是user.id时,申明是作者本人宣布,在这里就涌现了以下代码
:class="item.user_id == user.id ? 'aui-pull-right' : ''"
当相符item.user_id == user.id时增加aui框架中的aui-pull-right款式,否则不增加。