历史图片点击后可以放大

<%@ page import="cn.jiguang.common.utils.StringUtils" %>
<%@ page import="com.navi.base.service.IDataService" %>
<%@ page import="com.velcro.base.BaseContext" %>
<%@ page import="com.velcro.base.security.service.acegi.VelcroUser" %>
<%@ page import="java.util.Map" %>
<%@ page import="java.util.List" %><%--
  Created by IntelliJ IDEA.
  User: czm42
  Date: 2021/11/22
  Time: 18:42
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>




    
    
    
    互动问答
    
    <script src="/kms/js/jquery-1.12.4.min.js"></script>
    <script src="/kms/js/kindeditor4.1.10/kindeditor-min.js"></script>
    <script src="/kms/js/kindeditor4.1.10/addRichEditor.js"></script>





    
        
        客服
    

    
    
        
            
            
                
                    
                              
                                
                                  ${h.answerTime}
                                

                              

                    
                    
                        
                        
                            ${h.customerName}

                            ${h.problem}

                        

                    

                    
                    
                        
                        
                            客服中心

                            ${h.answer}

                        

                    

                

                
                    
                    
                        
                                <%--22:29--%>
                            上次聊到这里

                        

                    

                

                
                
                    
                    
                        
                            
                                
                                
                                猜你想问
                            

                            <%--
                                
                                换一换
                            
--%>
                        

                        
                        
                            
                                
                                    ${h.title}

                                    
                                

                            
                        

                    

                

            

            
            
                猜你想问
                
                    
                        
                            ${c.categoryName}
                        
                        
                            ${c.categoryName}
                        
                    
                
                
                <%--
                    是否公开：
                
--%>
            

            
            
                
                
                    发送

                

                
                
                

            

        

    





<script>
    function setdisplay() {
        if($('.display').css("display")=='none'){
            $('.display').show();
        }else {
            $('.display').hide();
        }
    }
    $(function () {
        getScroll();

        /**$('.right-hd .right-hd-item').on('click', function () {
            $(this).addClass('currentAnswer').siblings('div').removeClass('currentAnswer')
            $('.right-bd .item').eq($(this).index()).show().siblings().hide()
        });**/
        var lineHeight = $(document).height() - $('.guess-item').innerHeight() - $('.message-input').innerHeight()- $('.hd').innerHeight()-40
        $('#scrolldIV').height(lineHeight)
        // 多行文本框的值
        $('.textarea').on('input', function () {
            // 输入框有值后触发
            if ($(this).val().length > 0) {
                $.post(
                    "/kms/faq/likeQuestion.do",
                    {
                        "question": $('.textarea').val()
                    },
                    function (data) {
                        $(".recom").html("");
                        if (data.list.length != 0) {
                            $.each(data.list, function (index, item) {
                                //console.log(index, item);
                                var searchText = $('.textarea').val();//获取你输入的关键字；
                                // var regExp = new RegExp(searchText, "g");
                                // var newHtml = item.title.replace(regExp, ""+searchText+"");
                                var regExp = new RegExp(searchText, "i");
                                var result=regExp.exec(item.title);
                                var newHtml = item.title.replace(regExp, ""+result+"");
                                var recomHTML =
                                    ""+
                                    "" +
                                    newHtml
                                    + "
"+
                                    "
";
                                $(".recom").append(recomHTML)
                            });
                            $('.recom').show();

                            // 推荐列表
                            recomClint();
                        }
                    }, "json"
                );
            } else {
                $('.recom').hide()
            }
        });


        $('.send-btn').on('click', function (e) {
            userClick();
        });

        //猜你想问切换分类
        $('.guess-item').children("span").on('click',function(){
            //console.log($(this).attr("id"));
            $.post(
                "/kms/faq/getCategoryData.do",
                {
                    "cate":$(this).attr("id")
                },
                function (data){
                    var html = '';
                    var arr = JSON.parse(data)
                    //console.log(arr);
                    arr.question.forEach(function(item,index,obj){
                        if(index<=4) {
                            html += "\n" +
                                "   " + item.title + "
\n" +
                                "   \n" +
                                "
";
                        }
                    });
                    if (html ===''){
                        html += "\n" +
                            "   暂时没有此类型的问答
\n" +
                            "
";
                    }
                    $(".relevant-bd").empty();
                    $(".relevant-bd").append(html);
                    var html=$("#acqlist").prop("outerHTML");
                    $("#acqlist").remove();
                    $('.interflow').append(html);
                    getScroll();
                }
            )
        })


    });

    // 客户消息回复模板
    var customerHtml =
        "\n" +
        "  \n" +
        "  \n" +
        "           客服中心
\n" +
        "     没有找到相关问题或答案，您可以点击这里前往问答流程提问 
\n" +
        "  
\n" +
        "
";
    // 在父元素中末尾处添加
    // $('.interflow').append(customerHtml)

    // 相关回答与相关回答的点击事件
    /**
     $('.right-bd .item').children().on('click', function () {
        // 用户的模板字符串
        var usrHtml =
            "" +
            "  " +
            "  " +
            "      " +
            "      " + $(this)[0].innerText + "
" +
            "  
" +
            "
";
        $('.interflow').append(usrHtml);

        var currentStr = $(this)[0].innerText;

        //获取答案
        $.post(
            "/kms/faq/getQuestionAnswer.do",
            {
                "question": $(this).text()
            },
            function (data) {
                if (data.question != null) {
                    // 客户消息回复模板
                    var serviceHTML =
                        "\n" +
                        "  \n" +
                        "  \n" +
                        "           客服中心
\n" +
                        "     "+data.question.content+"
\n" +
                        "  
\n" +
                        "
";
                    $('.interflow').append(serviceHTML);

                    //记录聊天记录
                    $.post(
                        "/kms/faq/saveChat.do",
                        {
                            "problem":currentStr,
                            "answerId":data.question.replyersId,
                            "answerName":data.question.replyersName,
                            "answer":data.question.content
                        },
                        function(data){
                            console.log("保存是否成功:"+data.success)
                        }
                    )
                }else{

                    $('.interflow').append(customerHtml);
                }
            }, "json"
        )
    });
     **/
    function recomClint() {
        // 推荐列表
        $('.recom').children().on('click', function () {
            $('.textarea').val($(this)[0].outerText);
            $('.recom').hide()
            $('.textarea').val('');
        })
    }

    recomClint();

    // 猜你想问
    $(document).children().on('click','.ellipsis', function () {
        // 用户的模板字符串
        var usrHtml =
            "\n" +
            "  \n" +
            "  \n" +
            "      \n" +
            "      " + $(this)[0].innerText + "
\n" +
            "  
\n" +
            "
";

        $('.interflow').append(usrHtml);
        getScroll();

        var currentStr = $(this)[0].innerText;

        //获取答案
        $.post(
            "/kms/faq/getQuestionAnswer.do",
            {
                "question": $(this)[0].innerText
            },
            function (data) {
                if (data.question != null) {
                    // 客户消息回复模板
                    var serviceHTML =
                        "\n" +
                        "  \n" +
                        "  \n" +
                        "           客服中心
\n" +
                        "     "+data.question.content+"
\n" +
                        "  
\n" +
                        "
";

                    //图片点击事件
                    getPhoto(serviceHTML);
                    // $('.interflow').append(serviceHTML);
                    getScroll();

                    //记录聊天记录
                    $.post(
                        "/kms/faq/saveChat.do",
                        {
                            "problem":currentStr,
                            "answerId":data.question.replyersId,
                            "answerName":data.question.replyersName,
                            "answer":data.question.content
                        },
                        function(data){
                            console.log("保存是否成功:"+data.success)
                        }
                    )
                }else{
                    $('.interflow').append(customerHtml)
                    getScroll();
                }
            }, "json"
        )
    });

    // 用户消息发送
    function userClick(){
        if ($('.textarea').val().length > 0) {
            // 用户的模板字符串
            var usrHtml =
                "\n" +
                "  \n" +
                "  \n" +
                "        \n" +
                "        " + $('.textarea').val() + "
\n" +
                "  
\n" +
                "
";
            // 在父元素中末尾处添加
            $('.interflow').append(usrHtml);
            // 推荐隐藏
            $('.recom').hide();
            getScroll();
            var currentStr = $('.textarea').val();

            //获取答案
            $.post(
                "/kms/faq/getQuestionAnswer.do",
                {
                    "question": $('.textarea').val()
                },
                function (data) {
                    //console.log("data = "+data);
                    if (data.question != null) {

                        // 客户消息回复模板
                        var serviceHTML =
                            "\n" +
                            "  \n" +
                            "  \n" +
                            "           客服中心
\n" +
                            "     "+data.question.content+"
\n" +
                            "  
\n" +
                            "
";

                        //图片点击事件
                        var serviceHTMLnode = $(serviceHTML);
                        serviceHTMLnode.find('.content-wrap').click(function (e) {
                            if (e.target.nodeName.toLowerCase() == 'img') {
                                var imgUrl = $(e.target).attr('src')
                                var imgMask = $('
')
                                imgMask.click(function () {
                                    $(this).remove()
                                })
                                $(window.parent.document.body).append(imgMask[0])
                            }
                        })
                        $('.interflow').append(serviceHTMLnode);

                        // $('.interflow').append(serviceHTML);
                        getScroll();
                        //记录聊天记录
                        $.post(
                            "/kms/faq/saveChat.do",
                            {
                                "problem":currentStr,
                                "answerId":data.question.replyersId,
                                "answerName":data.question.replyersName,
                                "answer":data.question.content
                            },
                            function(data){
                                console.log("保存是否成功:"+data.success)
                            }
                        )
                    }else{
                        $('.interflow').append(customerHtml);
                        getScroll();
                    }
                }, "json"
            );
        }
        // 清空输入框的值
        $('.textarea').val('');
    }

    document.onkeydown = function (e) {
        if (e.keyCode === 13) {
            e.preventDefault();
            userClick();
        }
    }
    function getScroll() {//保持显示滚动最后
        $('.interflow').scrollTop( $('.interflow')[0].scrollHeight);
    }

    function getPhoto(serviceHTML){//发送消息拼接图片事件
        var serviceHTMLnode = $(serviceHTML);
        serviceHTMLnode.find('.content-wrap').click(function (e) {
            if (e.target.nodeName.toLowerCase() == 'img') {
                var imgUrl = $(e.target).attr('src')
                var imgMask = $('
')
                imgMask.click(function () {
                    $(this).remove()
                })
                $(window.parent.document.body).append(imgMask[0])
            }
        })
        $('.interflow').append(serviceHTMLnode);
    }
</script>

<script type="text/javascript">
    $(function () {
        setImg();
    })
    function setImg() {//历史数据图片循环点击
        $(".customer-service").each(function(){
            $(this).find('.content-wrap').click(function (e) {
                if (e.target.nodeName.toLowerCase() == 'img') {
                    var imgUrl = $(e.target).attr('src')
                    var imgMask = $('
')
                    imgMask.click(function () {
                        $(this).remove()
                    })
                    $(window.parent.document.body).append(imgMask[0])
                }
            })

        });
    }
</script>