xiaoben-as2-php/protected/views/help/help.php

<style>
    /**
     *
     * @authors Your Name (you@example.org)
     * @date    2018-09-12 10:32:37
     * @version $Id$
     */
    .information-inquiry{

        width: 800px;
        margin: 0 auto;
        border: 1px solid #f1f1f1;
        /*box-shadow:4px 4px 10px #7c7c7c;*/
    }
    .information-inquiry .title{
        padding: 0 16px;
        height: 50px;
        line-height: 50px;
        background-color: #1BBF7B;
    }
    .information-inquiry .title .title-text{
        font-size: 18px;
        color: #fff;
        font-weight: 650;
    }
    .information-inquiry .title .title-tag{
        display: inline-block;
        margin-right: 20px;
        margin-top: 10px;
        padding: 6px 12px;
        height: 30px;
        line-height: 16px;
        color: #fff;
        border: 1px solid #F8F8FA;
        border-radius: 4px;
        background-color: #1BBF7B;
        cursor: pointer;
    }

    .btn-closes{
        display: inline-block;
        margin-top: 10px;
        line-height: 30px;
        cursor: pointer;
    }
    .dialog-box{
        width: 544px;
        border-right: 1px solid #ccc;
    }
    .information-inquiry .content-box .chat-box{
        padding: 0 18px 18px 18px;
        height: 380px;
        border-bottom: 1px solid #ccc;
        overflow: auto;
    }
    .information-inquiry .content-box .head-portrait{
        display: inline-block;
        width: 34px;
        height: 34px;
    }
    .chat-msg-left .head-portrait{
        margin-right: 18px;
    }
    .chat-msg-right .head-portrait{
        margin-left: 18px;
    }
    .head-portrait img{
        width: 34px;
        height: 34px;
        border-radius: 50%;
    }
    .information-inquiry .content-box .chat-msg{
        margin-top: 24px;
    }
    .chat-msg-text{
        display: inline-block;
        padding: 0 10px;
        line-height: 34px;
        border: 1px solid #cccccc;
        border-radius: 4px;
        background-color: #fbfbfb;
    }

    .hot-problem{
        display: inline-block;
        margin-top: 12px;
        line-height: 30px;
        border: 1px solid #cccccc;
        border-radius: 4px;
        background-color: #fbfbfb;
    }
    .hot-problem .hot-problem-title{
        padding: 0 10px;
        color: #000;
        border-bottom: 1px solid #ccc;
        font-weight: 650;
    }
    .hot-problem .hot-problem-list{
        padding: 0 10px;
    }
    .hot-problem .hot-problem-list a{
        display: block;
        color: #0066ff;
        cursor: pointer;
    }
    .hot-problem .hot-problem-list a:before{
        content: "";
        display: inline-block;
        width: 8px;
        height:8px;
        border-radius: 4px;
        background-color: #ccc;
        margin-right: 4px;
    }
    .reply{
        display: inline-block;
        max-width: 433px;
        min-width: 280px;
        border: 1px solid #cccccc;
        border-radius: 4px;
        background-color: #fbfbfb;
    }
    .reply-text{
        padding: 8px;
        border-bottom: 1px solid #ccc;
    }
    .reply-confirm{
        padding: 6px;
    }
    .reply-confirm span{
        display: inline-block;
        width: 49%;
        height: 38px;
        line-height: 38px;
        text-align: center;
        cursor: pointer;
    }
    .reply-confirm img{
        vertical-align: middle;
        margin-right: 10px;
    }
    .reply-btn{
        border-right: 1px solid #ccc;
    }

    .reply-confirm .reply-btn-dissatisfied-show, .reply-confirm .reply-btn-show{
        display: none;
        color: #14ae68;
    }
    .diss{
        display: none;
        padding: 0 14px 12px 12px;
    }
    .diss input{
        padding: 0 4px;
        width: 98%;
        height: 36px;
        outline:none;
    }
    .input-box{
        padding-bottom: 18px;
    }
    .input-box textarea{
        margin: 10px;
        border: none;
        outline:none;
        resize:none;
    }

    .btn-send-msg{
        margin-right: 44px;
        width: 70px;
        height: 32px;
        line-height: 32px;
        color: #fff;
        background-color: #00af65;
        border-radius: 4px;
        text-align: center;
        cursor: pointer;
    }

    .right-box{
        width: 254px;
    }

    .msg{
        height: 230px;
        overflow: auto;
        border-bottom: 1px solid #ccc;
    }
    .msg .msg-title{
        padding:0 10px;
        height: 34px;
        line-height: 34px;
        background-color: #e4e4e4;
    }
    .msg .msg-title img,.faqs-title img{
        vertical-align: middle;
        margin-right: 8px;
    }
    .msg-time{
        font-weight: 650;
    }
    .msg-text{
        padding: 6px;
    }
    .msg-text p{
        margin-bottom: 12px;
    }

    .faqs-title{
        padding:0 10px;
        height: 34px;
        line-height: 34px;
        background-color: #e4e4e4;
        font-weight: 650;
        border-bottom: 1px solid #ccc;
    }
    .faqs-list{
        height: 290px;
        overflow: auto;

    }
    .faqs-list li{
        padding:0 10px;
        border-bottom: 1px solid #ccc;
    }
    .faqs-list li>p{
        width: 234px;
        height: 38px;
        line-height: 38px;
        color: #666;
        font-weight: 600;
        margin-bottom: 0;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
    }
    .faqs-reply{
        display: none;
        font-size: 13px;
        color: #666;
    }
    .classified-service{
        width: 1200px;
        height: 698px;
        margin: 0 auto;
        border: 1px solid #ccc;
        background: #fff;
        display:none;
        position: absolute;
        left: 20%;
        top: 2%;
    }
    .classified-service-menu{
        width: 238px;
    }
    .classified-service-menu-title{
        height: 52px;
        line-height: 52px;
        font-size: 18px;
        font-weight: 650;
        color: #333;
        background-color: #f2f2f2;
        text-indent: 8px;
    }
    .classified-service-menu-box{
        margin-top: 24px;
        padding: 0 20px;
    }
    .classified-service-menu-box>ul>li{
        padding-left: 17px;
        cursor: pointer;
    }
    .classified-service-menu-box .isfather{
        padding-left: 0;
    }
    .classified-service-menu-box .isfather:before {
        content:url(/images/icon-selected_down.png);
        margin-right: 8px;
        display: inline-block;
        width: 9px;
        height:9px;
    }
    .classified-service-menu-box .child-menu{
        display: none;
        padding-left: 30px;
    }
    .classified-service-content{
        width: 960px;
        height: 100%;
        border-left: 1px solid #ccc;
    }
    .btn-close{
        display: inline-block;
        margin-top: 10px;
        margin-right: 10px;
        padding: 12px 16px;
        /*height: 16px;*/
        line-height: 16px;
        border-radius: 4px;
        background-color: #f2f2f2;;
        cursor: pointer;
    }
    .problem-box{
        margin-top: 52px;
        padding: 0 10px;
    }
    .problem-box .problem-title{
        color: #333;
        font-weight: 650;

    }
    .problem-box tr{
        line-height: 50px;
        border-bottom: 1px solid #ccc;
    }
    .problem-box tr td:nth-child(1){
        width: 640px;
        text-indent: 36px;
    }
    .problem-box tr td:nth-child(2){
        width: 200px;
        text-align: center;
    }
    .problem-box tr td:nth-child(3){
        width: 100px;
    }
    .problem-box .btn-look{
        display: inline-block;
        width: 30px;
        height: 18px;
        line-height: 18px;
        text-align: center;
        border: 1px solid #000;
        background-color: #f2f2f2;
        cursor: pointer;
    }

    .look-box{
        display: none;
        /*width: 760px;*/
        /*height: 720px;*/
        background: #fff;
        /*border:1px solid #ccc;*/
        /*overflow: hidden;*/
    }
    .look-box .look-title{
        padding-left: 10px;
        height: 60px;
        line-height: 60px;
        border-bottom: 1px solid #ccc;
        /*background-color: #f2f2f2;*/
    }
    .look-box .btn-close{
        display: inline-block;
        width: 40px;
        height: 26px;
        line-height: 26px;
        text-align: center;
        border: 1px solid #000;
        background-color: #f2f2f2;
    }
    .look-box-con{
        padding: 16px;
    }
    .look-box-con-problem{
        line-height: 40px;
    }
    .look-box-con-problem img{
        vertical-align: middle;
    }
    .look-box-con-problem .btn-edit{
        display: inline-block;
        margin-top: 10px;
        width: 112px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        border: 1px solid #000;
        background-color: #f2f2f2;
        cursor: pointer;
    }
    .look-box-con-answer{
        width: 720px;
        margin-top: 30px;
        border: 1px solid #ccc;
        /*overflow: auto;*/
    }
    .look-box-con-answer textarea{
        margin: 10px;
        border: none;
        outline:none;
        resize:none;
    }
    .helper{
        padding:8px;
        position: absolute;
        left: 0;
        /*bottom: 40px;*/
        cursor: pointer;
        background:rgba(255,255,255,1);
        border-radius:3px;
        border:1px solid #eee;
    }
    .helper img{width:32px;}
    .chat-msg-box{
        word-wrap:break-word;
        overflow: hidden;
    }
    .chat-msg-box img{
        max-width: 410px;
    }

    .relation-problem-list{
        padding: 0 10px;
        color: #000;
        border-bottom: 1px solid #ccc;
        font-weight: 600;
    }

    .relation-problem-list a{
        display: block;
        color: #0066ff;
        font-weight:normal;
        line-height:28px;
        cursor: pointer;
    }
    .relation-problem-list a:before{
        content: "";
        display: inline-block;
        width: 8px;
        height:8px;
        border-radius: 4px;
        background-color: #ccc;
        margin-right: 4px;
    }
    .faqs-problem{
        cursor: pointer;
    }
</style>
<div class="information-inquiry">
   <!-- <div class="title clearfix">
        <span class="title-text fl">帮助中心</span>
        <span class="btn-closes fr"><img src="/images/icon-del.png"></span>
        <span class="title-tag fr">自助查询</span>
    </div>-->
    <div class="content-box clearfix">
        <div class="dialog-box fl">
            <div class="chat-box">
                <div class="scollBox">
                    <!-- 单条信息开始 -->
                    <div class="chat-msg clearfix">
                        <div class="chat-msg-left fl">
                            <span class="head-portrait fl"><img src="/images/left_head.png"></span>
                            <span class="chat-msg-box fl">
                                    <p class="chat-msg-text">有什么问题需要我帮您解决吗？</p>
                                    <div>
                                      <div class="hot-problem">
                                        <div class="hot-problem-title">【热门问题】</div>
                                        <div class="hot-problem-list">
                                            <a href="#">扫描上传</a>
                                            <a href="#">选择题答案设置错误</a>
                                            <a href="#">试题顺序需要调整</a>
                                            <a href="#">下载word，学管端直接崩溃</a>
                                            <a href="#">下载钻石纠错本</a>
                                        </div>
                                      </div>
                                    </div>
                                </span>
                        </div>
                    </div>
                    <!-- 单条信息结束 -->
                    <!--精准信息-->
                    <!---->

                </div>
            </div>
            <div class="input-box clearfix">
                <textarea id="user_val" rows="5" cols="50" ></textarea>
                <div>
                    <span class="btn-send-msg fr">发送</span>
                </div>

            </div>
        </div>
        <div class="right-box fr">
            <div class="msg">
                <div class="msg-title clearfix">
                    <span class="fl"><img src="/images/icon-clock.png">通知</span>
                    <span class="msg-time fr"></span>
                </div>
                <div class="msg-text">

                </div>
            </div>
            <div class="faqs">
                <div class="faqs-title"><img src="/images/icon-question.png">常见问题</div>
                <div class="faqs-list">

                </div>
            </div>
        </div>
    </div>
</div>

<script>
    var defaultAnswer='不知道';
    init();
    function init(){
        index=layer.msg('加载中，请稍候',{time: 0});
        $.ajax({
            url:'<?php echo $this->createUrl('help/index') ?>',
            method:'POST',
            dataType:'json',
            success:function(res){
                if(res.status==1){
                    if(res.data.Notice.status==1){
                        $('.information-inquiry .msg-time').html(res.data.Notice.data.appointTime);
                        $('.information-inquiry .msg-text').html(res.data.Notice.data.hnContext);
                    }
                    if(res.data.Notice.status==1){
                        $('.information-inquiry .msg-time').html(res.data.Notice.data.appointTime);
                    }
                    if(res.data.HelpHello.status==1){

                        $('.information-inquiry .chat-msg-text').eq(0).html(res.data.HelpHello.data.hhWelcome);
                        defaultAnswer=res.data.HelpHello.data.hhSorry;
                    }

                    var fhtml='<ul>';

                    if(res.data.Familiar.status==1 && res.data.Familiar.data.length>0){
                        var Familiar=res.data.Familiar.data;
                        for(var i=0;i<Familiar.length;i++){
                            fhtml+='<li><p title="'+Familiar[i].hpName+'"  class="faqs-problem">'+Familiar[i].hpName+'</p><div class="faqs-reply" >'+Familiar[i].hpAnswer+'</div></li>';
                        }
                    }
                    fhtml+='</ul>';
                    $('.information-inquiry .faqs-list').html(fhtml);
                    //热门问题
                    var hotHtml='';
                    if(res.data.Hot.status==1 && res.data.Hot.data.length>0){
                        var Hot=res.data.Hot.data;
                        for(var i=0;i<Hot.length;i++){
                            hotHtml+='<a id="'+Hot[i]['hpId']+'">'+Hot[i]['hpName']+'</a>';
                        }
                    }
                    $('.information-inquiry .hot-problem-list').eq(0).html(hotHtml);
                    //$('.information-inquiry').show();
                   // $('.helper').hide();

                }
                // layer.open({
                //     title: false,
                //     closeBtn: 0,
                //     type: 1,
                //     offset: '20px',
                //     area: ['802px', '620px'],
                //     content: $(".information-inquiry")
                // });
                // // $('.information-inquiry').show();
                // $('.helper').hide();
                 layer.close(index);
            }
        });
    }
    $(".reply-btn-dissatisfied").on("click", function() {
        $(this).css("display","none");
        $(this).parent('.reply-confirm').find('.reply-btn-dissatisfied-show').css("display","inline-block");
        $(this).parent().parent('.reply').find('.diss').css("display","block");
    });

    $('.faqs-list').on("click",".faqs-problem", function() {
        $(this).parent('li').find('.faqs-reply').slideToggle("slow");
    });



    // $('.information-inquiry .btn-closes').click(function(){
    //     // $('.information-inquiry').hide();
    //     //关闭帮助中心按钮
    //     layer.closeAll();
    //    // $('.helper').show();
    // });
    // $('.classified-service .btn-close').click(function(){
    //     $('.classified-service').hide();
    //     $('.helper').show();
    // });
    $('.btn-send-msg').click(function(){
        if($('#user_val').val()==''){
            return false;
        }
        var keyword=$('#user_val').val();
        var html='<div class="chat-msg clearfix">';
        html+='<div class="chat-msg-right fr">';
        html+='<span class="head-portrait fr"><img src="/images/right_head.png"></span>';
        html+='<span class="chat-msg-box fr">';
        html+='<p class="chat-msg-text">'+keyword+'</p>';
        html+='</span></div></div>';
        $('.scollBox').append(html);
        $(".chat-box").animate({"scrollTop":$(".scollBox").height()},900);
        $('#user_val').val('');
        search(keyword);

    });

    $('.chat-box')
        .on('click','.reply-btn-dissatisfied',function(){
            $(this).css("display","none");
            $(this).parent('.reply-confirm').find('.reply-btn-dissatisfied-show').css("display","inline-block");
            $(this).parent().parent('.reply').find('.diss').css("display","block");
            $(this).parent('.reply-confirm').find('.reply-btn').removeClass('reply-btn');

            var name=$(this).closest('.reply-confirm').attr('rel');
            var id=$(this).closest('.reply-confirm').attr('id');
            $.ajax({
                url:'<?php echo $this->createUrl('help/use')?>',
                method:'POST',
                dataType:'json',
                data:{'name':name,'id':id,'type':2},
                success:function(res){
                    if(res.status==1){
                        layer.msg('提交成功，感谢您的参与');
                    }
                }
            });
        })
        .on('click','.relation-problem-list a',function(){
            var id=$(this).attr('id');
            viewQuestion(id,2,1);
            return false;
        })
        .on('click','.hot-problem-list a',function(){
            var id=$(this).attr('id');
            if($(this).hasClass('need_count')){
                viewQuestion(id,1,1);
            }else{
                viewQuestion(id,1,0);
            }

            return false;
        })
        .on('click','.reply-btn',function(){
            $(this).css("display","none");
            $(this).parent('.reply-confirm').find('.reply-btn-show').css("display","inline-block");
            $(this).parent('.reply-confirm').find('.reply-btn-dissatisfied').removeClass('reply-btn-dissatisfied');

            var name=$(this).closest('.reply-confirm').attr('rel');
            var id=$(this).closest('.reply-confirm').attr('id');
            $.ajax({
                url:'<?php echo $this->createUrl('help/use')?>',
                method:'POST',
                dataType:'json',
                data:{'name':name,'id':id,'type':1},
                success:function(res){
                    if(res.status==1){
                        layer.msg('提交成功，感谢您的参与');
                    }
                }
            });
        })
        .on('change','.diss-text',function(){
            var name=$(this).closest('.chat-msg-box').find('.reply-confirm').attr('rel');
            var id=$(this).closest('.chat-msg-box').find('.reply-confirm').attr('id');
            var suggest=$.trim($(this).val());

            if(suggest==''){
                return false;
            }
            $.ajax({
                url:'<?php echo $this->createUrl('help/add')?>',
                method:'POST',
                dataType:'json',
                data:{'name':name,'id':id,'source':2,'suggest':suggest},
                success:function(res){
                    if(res.status==1){
                        layer.msg('提交成功，感谢您的参与');
                    }
                }
            });
        });

    function search(keyword){
        keyword=$.trim(keyword);
        if(keyword==''){
            return false;
        }

        $.ajax({
            url:'<?php echo $this->createUrl('help/search')?>',
            method:'POST',
            dataType:'json',
            data:{'keyword':keyword},
            success:function (res) {
                if(res.status==1){
                    answer=res.data;
                    if(answer.length>1 || (answer.length==1 && answer[0]['hpName']!=keyword)){
                        var answerHtml='<div class="chat-msg clearfix">';
                        answerHtml+='<div class="chat-msg-left fl">';
                        answerHtml+='<span class="head-portrait fl"><img src="/images/left_head.png"></span>';
                        answerHtml+='<span class="chat-msg-box fl">';
                        answerHtml+='<p class="chat-msg-text">您是想问？</p>';
                        answerHtml+='<div>';
                        answerHtml+='<div class="hot-problem">';
                        answerHtml+='<div class="hot-problem-list">';
                        for(var i=0;i<answer.length;i++){
                            answerHtml+='<a href="#" class="need_count" id="'+answer[i]['hpId']+'">'+answer[i]['hpName']+'</a>';
                        }
                        answerHtml+='</div></div></div></span></div></div>';
                    }else if(answer.length==1){
                        var answerHtml='<div class="chat-msg clearfix">';
                        answerHtml+='<div class="chat-msg-left fl">';
                        answerHtml+='<span class="head-portrait fl"><img src="/images/left_head.png"></span>';
                        answerHtml+='<span class="chat-msg-box fl">';

                        answerHtml+='<div class="reply">';
                        answerHtml+='<div class="reply-text">'+answer[0]['hpAnswer']+'</div>';
                        answerHtml+='<div class="reply-confirm" rel="'+answer[0]['hpName']+'" id="'+answer[0]['hpId']+'">';
                        answerHtml+='<span class="reply-btn"><img src="/images/icon-satisfied.png">有用</span>';
                        answerHtml+='<span class="reply-btn-show"><img src="/images/icon-satisfied-show.png">有用</span>';
                        answerHtml+='<span class="reply-btn-dissatisfied"><img src="/images/icon-dissatisfied.png">没用</span>';
                        answerHtml+='<span class="reply-btn-dissatisfied-show"><img src="/images/icon-dissatisfied-show.png">没用</span>';
                        answerHtml+='</div>';
                        if(answer[0]['relProblem']!=undefined && answer[0]['relProblem'].length>0){
                            answerHtml+='<div class="relation-problem-list">';
                            for(var i=0;i<answer[0]['relProblem'].length;i++){
                                answerHtml+='<a href="#" id="'+answer[0]['relProblem'][i]['hpId']+'">'+answer[0]['relProblem'][i]['hpName']+'</a>';
                            }
                            answerHtml+='</div>';
                        }
                        answerHtml+='<div class="diss">';
                        answerHtml+='<input class="diss-text" type="text" placeholder="感谢你的评价，请填写具体原因供我们改进">';
                        answerHtml+='</div>';
                        answerHtml+='</div>';
                        answerHtml+='</span>';
                        answerHtml+='</div>';
                        answerHtml+='</div>';
                    }else{
                        var answerHtml='<div class="chat-msg clearfix">';
                        answerHtml+='<div class="chat-msg-left fl">';
                        answerHtml+='<span class="head-portrait fl"><img src="/images/left_head.png"></span>';
                        answerHtml+='<span class="chat-msg-box fl">';
                        answerHtml+='<p class="chat-msg-text">'+defaultAnswer+'</p>';
                        answerHtml+='<div>';

                        answerHtml+='</div></span></div></div>';
                        NoAnswer(keyword);
                    }
                }




                $('.scollBox').append(answerHtml);
                $(".chat-box").animate({"scrollTop":$(".scollBox").height()},900);
            }
        });
    }

    function NoAnswer(key){
        $.ajax({
            url:'<?php echo $this->createUrl('help/noanswer')?>',
            method:'POST',
            dataType:'json',
            data:{'name':key},
            success:function(res){
            }
        });
    }
    //查看标准答案
    function viewQuestion(id,isAnswer,needcount){
        $.ajax({
            url:'<?php echo $this->createUrl('help/view') ?>',
            method:'POST',
            dataType:'json',
            data:{'id':id,'isAnswer':isAnswer,'needcount':needcount},
            success:function(res){
                if(res.status==1){
                    var answerHtml='<div class="chat-msg clearfix">';
                    answerHtml+='<div class="chat-msg-left fl">';
                    answerHtml+='<span class="head-portrait fl"><img src="/images/left_head.png"></span>';
                    answerHtml+='<span class="chat-msg-box fl">';

                    answerHtml+='<div class="reply">';
                    answerHtml+='<div class="reply-text">'+res.data['hpAnswer']+'</div>';
                    if(res.data['relProblem'].length>0){
                        answerHtml+='<div class="relation-problem-list">';
                        for(var i=0;i<res.data['relProblem'].length;i++){
                            answerHtml+='<a href="#" id="'+res.data['relProblem'][i]['hpId']+'">'+res.data['relProblem'][i]['hpName']+'</a>';
                        }
                        answerHtml+='</div>';
                    }
                    answerHtml+='<div class="reply-confirm" rel="'+res.data['hpName']+'" id="'+res.data['hpId']+'">';
                    answerHtml+='<span class="reply-btn"><img src="/images/icon-satisfied.png">有用</span>';
                    answerHtml+='<span class="reply-btn-show"><img src="/images/icon-satisfied-show.png">有用</span>';
                    answerHtml+='<span class="reply-btn-dissatisfied"><img src="/images/icon-dissatisfied.png">没用</span>';
                    answerHtml+='<span class="reply-btn-dissatisfied-show"><img src="/images/icon-dissatisfied-show.png">没用</span>';
                    answerHtml+='</div>';
                    answerHtml+='<div class="diss">';
                    answerHtml+='<input class="diss-text" type="text" placeholder="感谢你的评价，请填写具体原因供我们改进">';
                    answerHtml+='</div>';
                    answerHtml+='</div>';
                    answerHtml+='</span>';
                    answerHtml+='</div>';
                    answerHtml+='</div>';

                    $('.scollBox').append(answerHtml);
                    $(".chat-box").animate({"scrollTop":$(".scollBox").height()},900);
                }
            }

        });
    }
</script>