问答中的图片点击放大效果 

<%@ 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" %>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>互动问答</title>
    <link rel="stylesheet" href="/kms/faq/css/faq-index.css" type="text/css">
    <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>
</head>
<style type="text/css">
    .content-wrap{
        line-height: 21px;
    }
</style>
<body>
<div class="wrap">
    <div class="hd">
        <img src="/kms/faq/images/faq-avatar.png" alt="">
        <span>客服</span>
    </div>
    <!-- 主体 -->
    <div class="content">
        <div class="left">
            <!-- 聊天内容 -->
            <div class="interflow">
                <c:forEach items="${history}" var="h" varStatus="vs">
                    <!-- 结束时间 -->
                              <div class="message-item time">
                                <div class="time-box">
                                  ${h.answerTime}
                                </div>
                              </div>
                    <!-- 用户发送 -->
                    <div class="message-item user-enquire">
                        <img src="/kms/imgs/user.gif">
                        <div class="content-info">
                            <div class="nameWrap">${h.customerName}</div>
                            <div class="content-wrap">${h.problem}</div>
                        </div>
                    </div>
                    <!-- 客户回复 -->
                    <div class="message-item customer-service">
                        <img src="/kms/faq/images/kefu-avatar.png" alt="">
                        <div class="content-info">
                            <div class="nameWrap">客服中心</div>
                            <div class="content-wrap">${h.answer}</div>
                        </div>
                    </div>
                </c:forEach>

                <c:if test="${history!=null}">
                    <!-- 结束时间 -->
                    <div class="message-item exchange">
                        <div class="exchange-time">
                                <%--22:29--%>
                            <div class="tipsBox">上次聊到这里</div>
                        </div>
                    </div>
                </c:if>

                <!-- 默认列表 -->
                <div id="acqlist" class="message-item relevant">
                    <img src="/kms/faq/images/kefu-avatar.png" alt="">
                    <div class="content-info">
                        <div class="relevant-hd">
                            <div class="hd-left">
                                <!-- <span>?</span> -->
                                <img src="/kms/faq/images/problem.png" alt="">
                                <span>猜你想问</span>
                            </div>
                            <%--<div class="hd-right">
                                <img src="/kms/faq/images/refresh.png" alt="">
                                <span>换一换</span>
                            </div>--%>
                        </div>
                        <!-- 问题列表 -->
                        <ul class="relevant-bd">
                            <c:forEach end="4" items="${hot}" var="h">
                                <li>
                                    <div class="ellipsis">${h.title}</div>
                                    <img src="/kms/faq/images/right-icon.png" alt="">
                                </li>
                            </c:forEach>
                        </ul>
                    </div>
                </div>
            </div>
            <!-- 问答分类 -->
            <div class="guess-item">
                <span id="c100">猜你想问</span>
                <c:forEach items="${Category}" var="c" varStatus="vc">
                    <c:choose>
                        <c:when test="${vc.index>5}">
                            <span class="display" id="${c.id}">${c.categoryName}</span>
                        </c:when>
                        <c:otherwise>
                            <span id="${c.id}">${c.categoryName}</span>
                        </c:otherwise>
                    </c:choose>
                </c:forEach>
                <img src="/kms/faq/images/right-icon.png" alt="" onclick="setdisplay()">
                <%--<div class="guess-checkbox">
                    是否公开：<input type="checkbox" id="isopen" checked>
                </div>--%>
            </div>
            <!-- 消息输入 -->
            <div class="message-input">
                <textarea placeholder="请输入内容" class="textarea" rows="5" cols="20"></textarea>
                <div class="send-btn">
                    <div>发送</div>
                </div>
                <!-- 推荐 -->
                <ul class="recom">
                </ul>
            </div>
        </div>
        <div class="right">
            <!-- 头部 -->
            <div class="right-hd">
                <div class="right-hd-item">相关回答</div>
                <div class="currentAnswer right-hd-item">热点回答</div>
            </div>
            <!-- 内容 -->
            <div class="right-bd">
                <!-- 这是相关回答 -->
                <div class="item">
                    <c:forEach var="r" items="${relevant}">
                        <div>${r.title}</div>
                    </c:forEach>
                </div>
                <!-- 这是热点回答 -->
                <div class="item" style="display: block;">
                    <c:forEach var="h" items="${hot}">
                        <div>${h.title}</div>
                    </c:forEach>
                </div>
            </div>
        </div>
    </div>
</div>
</body>


<script>
    function setdisplay() {
        if($('.display').css("display")=='none'){
            $('.display').show();
        }else {
            $('.display').hide();
        }
    }
    $(function () {
        getScroll();
        // 相关回答和热点回答的切换
        /*var answer = $('.right-hd').children()
        answer.click(function () {
            $(this).addClass('currentAnswer').siblings('div').removeClass('currentAnswer')
            // 内容切换
            $('.right-bd .item').eq($(this).index()).show().siblings().hide()
        })*/
        $('.right-hd .right-hd-item').on('click', function () {
            $(this).addClass('currentAnswer').siblings('div').removeClass('currentAnswer')
            $('.right-bd .item').eq($(this).index()).show().siblings().hide()
        });

        // 多行文本框的值
        $('.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, "i");
                                var result=regExp.exec(item.title);
                                var newHtml = item.title.replace(regExp, "<span>"+result+"</span>");
                                var recomHTML =
                                    "<li>"+
                                    "<div class='ellipsis'>" +
                                    newHtml
                                    + "</div>"+
                                    "</li>";
                                $(".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 = '';
                    let arr = JSON.parse(data)
                    console.log(arr);
                    arr.question.forEach(function(item,index,obj){
                        if(index<=4) {
                            html += "<li>\n" +
                                "   <div class=\"ellipsis\">" + item.title + "</div>\n" +
                                "   <img src=\"/kms/faq/images/right-icon.png\">\n" +
                                "</li>";
                        }
                    });
                    if (html ===''){
                        html += "<li>\n" +
                            "   <div class=\"none\">暂时没有此类型的问答</div>\n" +
                            "</li>";
                    }
                    $(".relevant-bd").empty();
                    $(".relevant-bd").append(html);
                    var html=$("#acqlist").prop("outerHTML");
                    $("#acqlist").remove();
                    $('.interflow').append(html);
                    getScroll();
                }
            )
        })


    });

    // 客户消息回复模板
    var customerHtml =
        "<div class=\"message-item customer-service\">\n" +
        "    <img src=\"/kms/faq/images/kefu-avatar.png\" alt=\"\">\n" +
        "    <div class=\"content-info\">\n" +
        "                <div class=\"nameWrap\">客服中心</div>\n" +
        "        <div class=\"content-wrap\">没有找到相关问题或答案，您可以<a href='/ServiceAction/com.velcro.workflow.workflow.servlet.WfViewAction?pipeid=2c923dae75d5c7a70175d6194c5a0049&targeturl=' target='_blank'>点击这里</a>前往问答流程提问 </div>\n" +
        "    </div>\n" +
        "</div>";
    // 在父元素中末尾处添加
    // $('.interflow').append(customerHtml)

    // 相关回答与相关回答的点击事件
    $('.right-bd .item').children().on('click', function () {
        // 用户的模板字符串
        var usrHtml =
            "<div class=\"message-item user-enquire\">" +
            "  <img src=\"/kms/imgs/user.gif\" >" +
            "  <div class=\"content-info\">" +
            "      <!--<div class=\"nameWrap\">用户</div>-->" +
            "      <div class=\"content-wrap\">" + $(this)[0].innerText + "</div>" +
            "  </div>" +
            "</div>";
        $('.interflow').append(usrHtml);
        getScroll();
        var currentStr = $(this)[0].innerText;

        //获取答案
        $.post(
            "/kms/faq/getQuestionAnswer.do",
            {
                "question": $(this).text()
            },
            function (data) {
                if (data.question != null) {
                    // 客户消息回复模板
                    var serviceHTML =
                        "<div class=\"message-item customer-service\">\n" +
                        "    <img src=\"/kms/faq/images/kefu-avatar.png\" alt=\"\">\n" +
                        "    <div class=\"content-info\">\n" +
                        "                <div class=\"nameWrap\">客服中心</div>\n" +
                        "        <div class=\"content-wrap\">"+data.question.content+"</div>\n" +
                        "    </div>\n" +
                        "</div>";
                    $('.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();
                    /*var isopen;
                    if($("#isopen").is(":checked")){
                        isopen = "40288110301fdb1601301fedb6080096";
                    }else{
                        isopen = "40288110301fdb1601301fedb6080097";
                    }


                    //记录聊天记录
                    $.post(
                        "/kms/faq/saveChat.do",
                        {
                            "problem":currentStr,
                            "answerId":null,
                            "answerName":"客服中心",
                            "isopen":isopen,
                            "answer":"暂时没有您要查找的回答或者您查找的回答暂未回复"
                        },
                        function(data){
                            console.log("保存是否成功:"+data.success)
                        }
                    )*/
                }
            }, "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 =
            "<div class=\"message-item user-enquire\">\n" +
            "  <img src=\"/kms/imgs/user.gif\" alt=\"\">\n" +
            "  <div class=\"content-info\">\n" +
            "      <!--<div class=\"nameWrap\">用户</div>-->\n" +
            "      <div class=\"content-wrap\">" + $(this)[0].innerText + "</div>\n" +
            "  </div>\n" +
            "</div>";
        $('.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 =
                        "<div class=\"message-item customer-service\">\n" +
                        "    <img src=\"/kms/faq/images/kefu-avatar.png\" alt=\"\">\n" +
                        "    <div class=\"content-info\">\n" +
                        "                <div class=\"nameWrap\">客服中心</div>\n" +
                        "        <div class=\"content-wrap\">"+data.question.content+"</div>\n" +
                        "    </div>\n" +
                        "</div>";
                    $('.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();
                    /*var isopen;
                    if($("#isopen").is(":checked")){
                        isopen = "40288110301fdb1601301fedb6080096";
                    }else{
                        isopen = "40288110301fdb1601301fedb6080097";
                    }


                    //记录聊天记录
                    $.post(
                        "/kms/faq/saveChat.do",
                        {
                            "problem":currentStr,
                            "answerId":null,
                            "answerName":"客服中心",
                            "isopen":isopen,
                            "answer":"暂时没有您要查找的回答或者您查找的回答暂未回复"
                        },
                        function(data){
                            console.log("保存是否成功:"+data.success)
                        }
                    )*/
                }
            }, "json"
        )
    });

    // 用户消息发送
    function userClick(){
        if ($('.textarea').val().length > 0) {
            // 用户的模板字符串
            var usrHtml =
                "<div class=\"message-item user-enquire\">\n" +
                "    <img src=\"/kms/imgs/user.gif\" alt=\"\">\n" +
                "    <div class=\"content-info\">\n" +
                "            <!--<div class=\"nameWrap\">用户</div>-->\n" +
                "            <div class=\"content-wrap\">" + $('.textarea').val() + "</div>\n" +
                "    </div>\n" +
                "</div>";
            // 在父元素中末尾处添加
            $('.interflow').append(usrHtml);
            getScroll();
            // 推荐隐藏
            $('.recom').hide();

            var currentStr = $('.textarea').val();

            //获取答案
            $.post(
                "/kms/faq/getQuestionAnswer.do",
                {
                    "question": $('.textarea').val()
                },
                function (data) {
                    //console.log("data = "+data);
                    if (data.question != null) {
                        // 客户消息回复模板
                        var serviceHTML =
                            "<div class=\"message-item customer-service\">\n" +
                            "    <img src=\"/kms/faq/images/kefu-avatar.png\" alt=\"\">\n" +
                            "    <div class=\"content-info\">\n" +
                            "                <div class=\"nameWrap\">客服中心</div>\n" +
                            "        <div class=\"content-wrap\">"+data.question.content+"</div>\n" +
                            "    </div>\n" +
                            "</div>";
                        //图片点击事件
                        var serviceHTMLnode = $(serviceHTML);
                        serviceHTMLnode.find('.content-wrap').click(function (e) {
                            if (e.target.nodeName.toLowerCase() == 'img') {
                                var imgUrl = $(e.target).attr('src')
                                var imgMask = $('<div style="position: fixed;width: 100%;height: 100%;background: rgba(0,0,0,.5);z-index: 999999999;top: 0;left: 0;"><img style="position: absolute;height: 500px;left: 40%;top: 150px;" src="'+ imgUrl +'" /></div>')
                                imgMask.click(function () {
                                    $(this).remove()
                                })
                                $(window.parent.document.body).append(imgMask[0])
                            }
                        })
                        $('.interflow').append(serviceHTMLnode);
                        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();
                        /*var isopen;
                        if($("#isopen").is(":checked")){
                            isopen = "40288110301fdb1601301fedb6080096";
                        }else{
                            isopen = "40288110301fdb1601301fedb6080097";
                        }

                        //记录聊天记录
                        $.post(
                            "/kms/faq/saveChat.do",
                            {
                                "problem":currentStr,
                                "answerId":null,
                                "answerName":"客服中心",
                                "isopen":isopen,
                                "answer":"暂时没有您要查找的回答或者您查找的回答暂未回复"
                            },
                            function(data){
                                console.log("保存是否成功:"+data.success)
                            }
                        )*/
                    }
                }, "json"
            );
        }
        // 清空输入框的值
        $('.textarea').val('');
    }

    document.onkeydown = function (e) {
        if (e.keyCode === 13) {
            e.preventDefault();//禁止回车键换行
            userClick();
        }
    }
    function getScroll() {//保持显示滚动最后
        $('.interflow').scrollTop( $('.interflow')[0].scrollHeight);
    }
</script>
<script type="text/javascript">
    $(function () {
        setImg()
    })
    
    function setImg() {
        //是否存在public类
        var publicDivs= $("div").hasClass("content-wrap");
        console.log("是否存在content-wrap类: " + publicDivs);
        //一共有多少个public类
        var numItems = $('.content-wrap').length;
        console.log("一共有多少个content-wrap类: " + numItems);
    }
</script>

</html>

 

posted @ 2022-06-06 17:24  java璀璨小菜鸟  阅读(43)  评论(0)    收藏  举报