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樣式，不然不添加。