apicloud+vue+jquery实现评论发布及回复（二）

上一篇文章中我们已经实现了评论的发布功能，现在要实现回复评论的功能，，首先呢，要知道你回复的是哪一条评论，所以我们这里要或得评论的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样式，否则不添加。