spfm-market
/
spfm-market-front


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248
							<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <link rel="stylesheet" type="text/css" href="/static/chat/font_Icon/iconfont.css">
    <link rel="stylesheet" type="text/css" href="/static/chat/css/chat.css">
    <link charset="utf-8" rel="stylesheet" href="/static/css/layui.css?v=1.0.0">
    <link rel="stylesheet" href="/static/css/temp.css" media="all">
    <script src="/static/js/jquery-1.8.2.min.js?v=1.0.0"></script>
    <script src="/static/js/layui.js?v=1.0.0"></script>
    <script src="/static/js/api.config.js"></script>
    <script src="/static/js/util.js?v=1.0.0"></script>
    <script src="/static/js/customform.js?v=1.0.0"></script>
    <script src="/static/js/url.js?v=1.0.0"></script>
    <script src="/static/js/lay/lay-config.js?v=1.0.0"></script>
    <script src="/static/css/inconfont/iconfont.js"></script>
    <script src="/static/js/jquery-ui.min.js"></script>
</head>

<body>

    <div class="chatContainer">
        <div class="chatBox" ref="chatBox">
            <div class="chatBox-kuang" ref="chatBoxkuang">
                <div class="chatBox-content">
                    <div class="chatBox-content-demo" id="chatBox-content-demo">


                    </div>
                </div>
                <div class="chatBox-send">
                    <div class="div-textarea" contenteditable="true"></div>
                    <div>
                        <!-- <button id="chat-biaoqing" class="btn-default-styles">
                            <i class="iconfont icon-biaoqing"></i>
                        </button> -->
                        <!-- <label id="chat-tuxiang" title="发送图片" for="inputImage" class="btn-default-styles">
                            <input type="file" onchange="selectImg(this)" accept="image/jpg,image/jpeg,image/png"
                                   name="file" id="inputImage" class="hidden">
                            <i class="iconfont icon-tuxiang"></i>
                        </label> -->
                        <button id="chat-fasong" class="btn-default-styles"><i class="iconfont icon-fasong"></i>
                        </button>
                    </div>
                    <div class="biaoqing-photo">
                        <ul>
                            <li><span class="emoji-picker-image" style="background-position: -9px -18px;"></span></li>
                            <li><span class="emoji-picker-image" style="background-position: -40px -18px;"></span></li>
                            <li><span class="emoji-picker-image" style="background-position: -71px -18px;"></span></li>
                            <li><span class="emoji-picker-image" style="background-position: -102px -18px;"></span></li>
                            <li><span class="emoji-picker-image" style="background-position: -133px -18px;"></span></li>
                            <li><span class="emoji-picker-image" style="background-position: -164px -18px;"></span></li>
                            <li><span class="emoji-picker-image" style="background-position: -9px -52px;"></span></li>
                            <li><span class="emoji-picker-image" style="background-position: -40px -52px;"></span></li>
                            <li><span class="emoji-picker-image" style="background-position: -71px -52px;"></span></li>
                            <li><span class="emoji-picker-image" style="background-position: -102px -52px;"></span></li>
                            <li><span class="emoji-picker-image" style="background-position: -133px -52px;"></span></li>
                            <li><span class="emoji-picker-image" style="background-position: -164px -52px;"></span></li>
                            <li><span class="emoji-picker-image" style="background-position: -9px -86px;"></span></li>
                            <li><span class="emoji-picker-image" style="background-position: -40px -86px;"></span></li>
                            <li><span class="emoji-picker-image" style="background-position: -71px -86px;"></span></li>
                            <li><span class="emoji-picker-image" style="background-position: -102px -86px;"></span></li>
                            <li><span class="emoji-picker-image" style="background-position: -133px -86px;"></span></li>
                            <li><span class="emoji-picker-image" style="background-position: -164px -86px;"></span></li>
                            <li><span class="emoji-picker-image" style="background-position: -9px -120px;"></span></li>
                            <li><span class="emoji-picker-image" style="background-position: -40px -120px;"></span></li>
                            <li><span class="emoji-picker-image" style="background-position: -71px -120px;"></span></li>
                            <li><span class="emoji-picker-image" style="background-position: -102px -120px;"></span>
                            </li>
                            <li><span class="emoji-picker-image" style="background-position: -133px -120px;"></span>
                            </li>
                            <li><span class="emoji-picker-image" style="background-position: -164px -120px;"></span>
                            </li>
                            <li><span class="emoji-picker-image" style="background-position: -9px -154px;"></span></li>
                            <li><span class="emoji-picker-image" style="background-position: -40px -154px;"></span></li>
                            <li><span class="emoji-picker-image" style="background-position: -71px -154px;"></span></li>
                            <li><span class="emoji-picker-image" style="background-position: -102px -154px;"></span>
                            </li>
                            <li><span class="emoji-picker-image" style="background-position: -133px -154px;"></span>
                            </li>
                            <li><span class="emoji-picker-image" style="background-position: -164px -154px;"></span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>


    <script>

        screenFuc();

        sendLeft("您好，请问有什么可以帮助您！");

        function screenFuc() {
            //屏幕小于768px时候,布局change
            var winWidth = $(window).width();
            var totalHeight = $(window).height(); //页面整体高度

            winWidth = winWidth < 768 ? 400 : (winWidth - 80)
            //中间内容高度
            $(".chatBox-content").css("height", totalHeight - 46);
            $(".chatBox-content-demo").css("height", totalHeight - 46);
            $(".chatBox-list").css("height", totalHeight);
            $(".chatBox-kuang").css("height", totalHeight);
            $(".div-textarea").css("width", winWidth - 50);
        }
        (window.onresize = function () {
            screenFuc();
        })();


        $(".first-date").html(util.getTime());


        function sendLeft(textContent, flag) {

            $('.clearfloat.ls').remove();

            $(".chatBox-content-demo").append("<div class=\"clearfloat " + (flag ? "ls" : "") + "\">" +
                "<div class=\"author-name\"><small class=\"chat-date\">" + util.getTime() + "</small> </div> " +
                "<div class=\"left\"> " +
                "<div class=\"chat-avatars\"><img src=\"/static/chat/img/jqr.png\" alt=\"头像\" /></div> " +
                "<div class=\"chat-message\"> " + textContent + " </div> " +
                "</div> </div>");

            //聊天框默认最底部
            $(document).ready(function () {
                $("#chatBox-content-demo").scrollTop($("#chatBox-content-demo")[0].scrollHeight);
            });


        }

        //      发送信息
        $("#chat-fasong").click(function () {

            if ($('.clearfloat.ls').length > 0) {

                util.warning("机器人思考中,请等待...")

                return;
            }

            var textContent = $(".div-textarea").html().replace(/[\n\r]/g, '<br>')
            if (textContent != "") {
                $(".chatBox-content-demo").append("<div class=\"clearfloat\">" +
                    "<div class=\"author-name\"><small class=\"chat-date\">" + util.getTime() + "</small> </div> " +
                    "<div class=\"right\"> <div class=\"chat-message\"> " + textContent + " </div> " +
                    "<div class=\"chat-avatars\"><img src=\"/static/chat/img/icon01.png\" alt=\"头像\" /></div> </div> </div>");
                //发送后清空输入框
                $(".div-textarea").html("");
                //聊天框默认最底部
                $(document).ready(function () {
                    $("#chatBox-content-demo").scrollTop($("#chatBox-content-demo")[0].scrollHeight);
                });

                sendLeft('请稍等...', true)

                postTextContent(textContent);
            }
        });


        function postTextContent(textContent) {

            util.ajaxJson("", ctx + '/facemgr/chat/multipleConversations', {
                "content": textContent
            }, function (data) {

                if (data.result == "0") {

                    var json = $.parseJSON(data.body);

                    sendLeft(json.message)

                    return;
                }

                sendLeft('哎呀,这个问题有点深奥,不知道怎么回答~')


            });
        }

        //      发送表情
        $("#chat-biaoqing").click(function () {
            $(".biaoqing-photo").toggle();
        });
        $(document).click(function () {
            $(".biaoqing-photo").css("display", "none");
        });
        $("#chat-biaoqing").click(function (event) {
            event.stopPropagation();//阻止事件
        });

        $(".emoji-picker-image").each(function () {
            $(this).click(function () {
                var bq = $(this).parent().html();
                console.log(bq)
                $(".chatBox-content-demo").append("<div class=\"clearfloat\">" +
                    "<div class=\"author-name\"><small class=\"chat-date\">" + util.getTime() + "</small> </div> " +
                    "<div class=\"right\"> <div class=\"chat-message\"> " + bq + " </div> " +
                    "<div class=\"chat-avatars\"><img src=\"/static/chat/img/icon01.png\" alt=\"头像\" /></div> </div> </div>");
                //发送后关闭表情框
                $(".biaoqing-photo").toggle();
                //聊天框默认最底部
                $(document).ready(function () {
                    $("#chatBox-content-demo").scrollTop($("#chatBox-content-demo")[0].scrollHeight);
                });
            })
        });

        //      发送图片
        function selectImg(pic) {
            if (!pic.files || !pic.files[0]) {
                return;
            }
            var reader = new FileReader();
            reader.onload = function (evt) {
                var images = evt.target.result;
                $(".chatBox-content-demo").append("<div class=\"clearfloat\">" +
                    "<div class=\"author-name\"><small class=\"chat-date\">" + util.getTime() + "</small> </div> " +
                    "<div class=\"right\"> <div class=\"chat-message\"><img src=" + images + "></div> " +
                    "<div class=\"chat-avatars\"><img src=\"/static/chat/img/icon01.png\" alt=\"头像\" /></div> </div> </div>");
                //聊天框默认最底部
                $(document).ready(function () {
                    $("#chatBox-content-demo").scrollTop($("#chatBox-content-demo")[0].scrollHeight);
                });
            };
            reader.readAsDataURL(pic.files[0]);

        }


    </script>

</body>

</html>