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款式,否则不增加。

    原文作者:bellezhu
    原文地址: https://segmentfault.com/a/1190000008586420
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞