index.html 73.3 KB

Edit Raw Blame History

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <!-- Apple devices fullscreen -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <!-- Apple devices fullscreen -->
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <title>聊天工具</title>
    <link type="text/css" rel="stylesheet" href="__PUBLIC__/static/css/main.css"/>
    <link type="text/css" rel="stylesheet" href="__PUBLIC__/static/css/conversation.css"/>
    <script type="text/javascript" src="__PUBLIC__/js/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="__PUBLIC__/static/js/jquery.nicescroll.js"></script>
    <script type="text/javascript" src="__PUBLIC__/static/js/jquery.qqFace.js"></script>
    <script type="text/javascript" src="__PUBLIC__/js/global.js"></script>
    <script type="text/javascript" src="__PUBLIC__/js/layer/layer.js"></script>
    <script type="text/javascript" src="__PUBLIC__/js/mchat_global.js"></script>
</head>
<style type="text/css">
    .comment {
        width: 680px;
        margin: 20px auto;
        position: relative
    }
    .comment h3 {
        height: 28px;
        line-height: 28px
    }

    .com_form {
        width: 100%;
        position: relative
    }

    .input {
        width: 101%;
        height: 60px;
        border: 1px solid #ccc
    }

    .com_form p {
        height: 28px;
        line-height: 28px;
        position: relative
    }

    span.emotion {
        width: 42px;
        height: 20px;
        background: url(icon.gif) no-repeat 2px 2px;
        padding-left: 20px;
        cursor: pointer
    }

    span.emotion:hover {
        background-position: 2px -28px
    }

    .qqFace {
        margin-top: 4px;
        background: #fff;
        padding: 2px;
        border: 1px #dfe6f6 solid;
    }

    .qqFace table td {
        padding: 0px;
    }

    .qqFace table td img {
        cursor: pointer;
        border: 1px #fff solid;
    }

    .qqFace table td img:hover {
        border: 1px #0066cc solid;
    }

    #show {
        width: 680px;
        margin: 20px auto
    }

    .left_middle .user_list li .close{
        float: right;
        /*padding: 32px 0px;*/
        /*width: 16px;*/
        /*height: 17px;*/
        width: 36px;
        height: 60px;
        display: block;
        /*background-image: url("__PUBLIC__/static/images/msg/close.png");*/
        /*background-repeat: no-repeat;*/
        /*background-position: center center;*/
        opacity: 0;
    }

    .left_middle .user_list li .close img{
        padding: 21.5px 10px;
    }


    /*链接*/

    .sto_goods {
        width: 350px;
        margin:10px auto;
    }

    .sto_goods .rel .chat_goods_img {
        position: absolute;
        left: 0;
        top: 10px;
        margin-top: -8px;
        z-index: 10;
        width: 82px;
        height: 82px;
    }

    .sto_goods .rel {
        padding-left: 100px;
        font-size: 14px;
        height: 82px;
        position: relative;
        text-align: left;
    }

    .chat_goods_name {
        height: 40px;
        line-height: 20px;
        margin-bottom: 10px;
        overflow: hidden;
    }

    .return_href {
        float: right;
        display: inline-block;
        padding: 2px 5px;
        font-size: 12px;
        border: 1px #c4182e solid;
        color: #c4182e;
        -moz-border-radius-bottomleft: 24px;
        -moz-border-radius-bottomright: 24px;
        -webkit-border-bottom-left-radius: 24px;
        -webkit-border-bottom-right-radius: 24px;
        border-bottom-left-radius: 24px;
        border-bottom-right-radius: 24px;
        -moz-border-radius-topleft: 24px;
        -moz-border-radius-topright: 24px;
        -webkit-border-top-left-radius: 24px;
        -webkit-border-top-right-radius: 24px;
        border-top-left-radius: 24px;
        border-top-right-radius: 24px;
    }
     .s_name .online{
        display: inline-block;
    vertical-align: middle;
    width: 10px;
    height: 10px;
    background: #83E145;
    border-radius: 50%;
    margin-top: 3px;
    margin-right: -5px;
    }
    .s_name select{
    background-color: #2b2526;
    border: #2b2526;
    color: #fff;
    display: inline-block;
    vertical-align: middle;
    }
    .s_name .online .on {
        background-color: #418a5b;
    }
    .s_name {
        display: inline-block;
    }
    select {
        /*Chrome和Firefox里面的边框是不一样的，所以复写了一下*/
        border: solid 1px #000;
        /*很关键：将默认的select选择框样式清除*/
        appearance:none;
        -moz-appearance:none;
        -webkit-appearance:none;
        /*将背景改为红色*/
        background:red;
        /*加padding防止文字覆盖*/
        padding-right: 14px;
    }
    /*清除ie的默认选择框样式清除，隐藏下拉箭头*/
    select::-ms-expand { display: none; }
    .qqFace table td img {
        cursor: pointer;
        border: 1px #fff solid;
        width: 24px;
    }
</style>
<body >
<div class="chatbox">
    <div class="left">
        <div class="left_head">
            <div>
                <img class="touxiang" src="{:getimg($store_logo)}"/>
                <span class="s_name">
                  <div> {$store_name}</div>
                  <div>
                  <div class="online"></div>
                  <select onchange="login_change(this)">
                  <option selected="selected" value="0">在线</option>
                   <option value="1">离开</option>
                  </select></div>
                  </span>
                <input name="admin_id" value="{$admin_id}" hidden="hidden">
            </div>
            <p class="selectbox">
                <img src="__PUBLIC__/static/images/msg/select.png"/>
                <input type="text" class="disib vam" placeholder="搜索"/>
            </p>
            <!--by 1019 2017-11-11-->
            <div class="nav">
                <span class="msg" onclick="show_user_list()">
                    <img src="__PUBLIC__/static/images/msg/msg_on.png" style="width: 30px;height: 28px;"></img>
                    <span class="tipbox">消息</span>
                    <div class="msg_count" style="visibility: visible">0</div>
                </span>
                <span class="history" onclick="show_history_list()">
                    <img src="__PUBLIC__/static/images/msg/history.png" style="width: 30px;height: 26px;"></img>
                    <span class="tipbox">历史</span>
                </span>
            </div>
        </div>
        <div class="left_middle">
            <!--消息-->
            <ul class="news user_list">
            </ul>
            <!--历史-->
            <ul class="h_record user_list dn">
                <li>
                    <img class="touxiang" src="__PUBLIC__/static/images/index/touxiang.png"/>
                    <div class="user_name">
                        <p>明月</p>
                        <p class="info">你好，我是明月</p>
                    </div>
                    <div class="time">14:23</div>
                </li>

            </ul>
            <!--暂无消息-->
            <!--<p class="nomsg">暂无消息</p>-->
        </div>

        <div class="left_foot">
            <p style="font-size: 16px;text-align: left;padding: 0 10px;">接待中：&nbsp;<span class="cr" id="nrecive_um">0</span>&nbsp;人
                <!--<span class="admincp-header-r disib">-->
                    <!--接待数：-->
                    <!--<select>-->
                        <!--<option>0</option>-->
                        <!--<option>1</option>-->
                        <!--<option>5</option>-->
                        <!--<option>10</option>-->
                        <!--<option>15</option>-->
                        <!--<option>20</option>-->
                        <!--<option>30</option>-->
                        <!--<option>50</option>-->
                    <!--</select>-->
                <!--</span>-->
            </p>
        </div>
    </div>
    <div class="right">
        <!--头部-->
        <div class="right_head">
                    <span class="name">
                        <span class="fanhui" onclick="show_user_list()"></span>
                        <span class="vam">明月</span>
                    </span>
            <a onclick="close_hide()">
                <img src="__PUBLIC__/static/images/msg/close.png"/>
            </a>
            <p class="clear"></p>
        </div>
        <!--右侧-->
        <div class="right_info">
            <div class="info_tit">
                <span class="titinfo titone  on">资料</span>
                <span class="titinfo">订单</span>
                <div class="clear"></div>
            </div>
            <div class="info_inner">
                <div class="vipdata ">
                    <ul>
                        <!--by 1019-->
                        <li class="vip_info_nickname"><img src="__PUBLIC__/static/images/msg/zl1.png"/>明月</li>
                        <li class="vip_info_vipname"><img src="__PUBLIC__/static/images/msg/zl2.png"/>唐晓敏</li>
                        <li class="vip_info_mobile"><img src="__PUBLIC__/static/images/msg/zl3.png"/>15705932336</li>
                        <li class="vip_info_birthday"><img src="__PUBLIC__/static/images/msg/zl4.png"/>1998-08-15</li>
                        <li class="vip_info_pickname fgx"><img src="__PUBLIC__/static/images/msg/zl5.png"/>中山门店</li>
                        <!--<li class="fgx"><img src="__PUBLIC__/static/images/msg/zl6.png"/>2017-09-28</li>-->
                        <!--<li> 最后购买时间&nbsp;:</li>-->
                        <li class="vip_info_last_time">最后购买时间&nbsp;:&nbsp;2017-09-28 16:36:54</li>
                        <li class="vip_info_count"> 购买次数&nbsp;:&nbsp;1次</li>
                        <li class="vip_info_avg"> 每单均价&nbsp;:&nbsp;￥124.30</li>
                        <li class="vip_info_sum"> 总消费&nbsp;:&nbsp;￥124.30</li>
                    </ul>
                </div>
                <div class="viporder dn">
                    <div class="ordertit">
                        <!--by 1019-->
                        <span>历史订单</span>
                        <span style="text-align: right"><a id="much_order" href="" target="_blank">更多</a></span>
                        <div class="clear"></div>
                    </div>
                    <div class="gdtbox">
                        <ul>
                            <li>
                            <span class="order_info">
                                <img src="__PUBLIC__/static/images/del/sc1.jpg" alt="">
                                <div class="name ">
                                     <div class="cut">4545645454545454</div>
                                      <div class="cut">实付金额：<em class="cr">￥78.00</em></div>
                                     <div class="cut" style="color: #999">2017.09.25  16:45</div>
                                      <div class="cut">下单门店：中山店</div>
                                </div>
                                <div class="clear"></div>
                            </span>
                                <span class="order_pro">
                                查看详情 <img class="ml10" src="__PUBLIC__/static/images/msg/rr.png" alt="">
                            </span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <!--中间-->
        <div class="right_middle">
            <a class="more">隐藏详情</a>
            <div id="messages" class="messages">
            </div>
            <!--底部-->
            <div class="right_foot">
                <div class="p10">
                    <div class="picbox">
                        <!-- 表情 -->
                        <div class="picbox_img emotion">
                            <img id='emotion' src="__PUBLIC__/static/images/msg/smile.png" style="width: 29px;height: 29px;"/>
                        </div>
                        <!-- 图片上传 -->
                        <div class="picbox_img" id="upload_img"><img  onclick="GetUploadify_new(5,'emotion','temp','mchat','wxd_chat_msg','id','msg','','call_back')" src="__PUBLIC__/static/images/msg/pic.png" style="width: 29px;height: 24px;"/>
                        </div>
                        <!-- 快捷回复 -->
                        <div class="picbox_img">
                             <img  onclick="replys(this);" src="__PUBLIC__/static/images/msg/kjdh.png" style="width: 29px;height: 29px;"/>
                            <div class="absbox dn" id='absbox'>
                                <div class="textbox dn">
                                    <textarea placeholder="最多输入1000字" ></textarea>
                                </div>
                                <div class="addbtn dn">
                                    <div class="disib" onclick="sure_add(this);">确认添加</div>
                                    <div class="clear"></div>
                                </div>
                                <div class="add" style="width: 125px;" onclick="add_input();"><img   class="mr10" src="__PUBLIC__/static/images/msg/addkjhf.png"
                                    alt="">添加快捷回复
                                </div>
                            </div>
                        </div>
                        <!-- 历史记录 -->
                        <div class="picbox_img" >
                            <img  onclick="sel_history_list('@#$%');" id="history" src="__PUBLIC__/static/images/msg/lsjl.png" style="width: 29px;height: 24px;"/>
                            <div class="absbox dn" id="history_list">
                                <div class="history_info">
                                    <div class="tit">
                                        <span>
                                            <img style="margin:-3px 5px 0 0;"
                                                 src="__PUBLIC__/static/images/msg/xxjl1.png" alt="">消息记录
                                        </span>
                                        <span class="tar">
                                            <em class="inputbox1" >
                                                <img src="__PUBLIC__/static/images/msg/xxjl2.png" alt=""><input
                                                    type="text" id="history_key" placeholder="内容关键字"  style="width: 200px">
                                            </em>
                                            <a class="selmore" onclick="sel_history_list($('#history_key').val());">搜索</a>
                                        </span>
                                        <div class="clear"></div>
                                    </div>
                                    <div class="info">
                                        <div class="inner">
                                        </div>
                                    </div>
                                    <div class="bot">
                                        <div class="history_data">
                                            <img src="__PUBLIC__/static/images/msg/data.png"/>
                                            <!--<span class="data">2017-09-19</span>-->
                                            <input type="date" class="h_date" onchange="sel_history_list('','','',$(this).val());">
                                            <img src="__PUBLIC__/static/images/msg/ll.png" class="first" title="首页" />
                                            <img src="__PUBLIC__/static/images/msg/l.png"  class="prior" title="上一页"/>
                                            <img src="__PUBLIC__/static/images/msg/rr.png" class="next" title="下一页"/>
                                            <img src="__PUBLIC__/static/images/msg/r.png"  class="last" title="末页"/>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- 商品查询 -->
                        <div class="picbox_img" >
                             <img  src="__PUBLIC__/static/images/msg/soncard.png" onclick="sel_goods_list(this);" style="width: 29px;height: 24px;" />
                            <div class="absbox dn"  id='sel_goods'>
                                <div class="history_info">
                                    <div class="tit">
                                        <span class="tar" style="width: 100%">
                                    <em class="inputbox1">
                                        <img src="__PUBLIC__/static/images/msg/xxjl2.png" alt=""><input
                                            type="text" id='selgoods' placeholder="搜索关键字" style="width: 320px">
                                    </em>
                                    <a class="selmore" onclick='selgoods($("#selgoods").val());'>搜索</a>
                                         </span>
                                        <div class="clear"></div>
                                    </div>
                                    <div class="info1" style="padding-right: 10px;">
                                        <div class="sto_goods" >
                                            <div class="rel" style="padding-left: 135px;    margin-top: 80px;">
                                            输入关键字 搜索商品
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="txt_box">
                      <div contentEditable="true"  contenteditable="plaintext-only" class="input" id="show_msg"  name="show_msg" style='font-size:14px; font-size:14px;overflow-y: auto;'>
                        </div>
                        <textarea class="dn" id="saytext1" name="saytext1"></textarea>
                    </div>
                    <div class="btn" onclick="sendss();">发 送</div>
                    <p class="clear"></p>
                </div>
            </div>
        </div>


        <!--暂时没有新会话-->
        <div class="nomsgbox dn">
            <img src="__PUBLIC__/static/images/msg/no_msg.png"/>
            <p class="mt20">暂时没有新会话！</p>
        </div>
    </div>
</div>
<div id="overlay" onclick="overlay_click();"></div>
  <script>
    var d = document.getElementById("show_msg");
    document.addEventListener( "keyup", function() {
        d.innerHTML = d.innerHTML.replace( /<[^>]*>/g, "" );
    } );
</script>
 <script>
 function cli_img_big(url,e)
 {
        layer.open({
        type: 1,
        title: false,
        closeBtn: 0,
        shadeClose: true,
        area: ['auto','auto'], //宽高
        content: "<div><img style='height:720px;' src="  + url + " /></div>"
        });
         }
 function login_change(e)
 {
    if($(e).val()==1)
    {
    $('.online').css('background-color','#C4182E');
    var data={
        'admin_id':"{$admin_id}",
        'state':"1"
    };
    }else
    {
    //上线
    $('.online').css('background-color','#418a5b');
    var data={
        'admin_id':"{$admin_id}",
        'state':"0"
    };
        window.location.reload();
    }
    var r = ajax_return('{:url("index/out_line")}', data, false,'post',2);
 }
  function sendss(e)
    {
        var ee=document.getElementById("show_msg").innerHTML;
        if(ee!=''){
        send_msg(1,'');
        }
    }
 function str_msg()
    {
        var ee=document.getElementById("show_msg").innerHTML;
        ee=ee.replace(/\s/g, "");

        var n=(ee.split('http://jmh.xinda100.cn')).length-1;
       //     var n=(ee.split('http://localhost')).length-1;
        if (n>0) {
        for(var i=0;i<n;i++)
        {
     // ee=ee.replace('http://localhost', "");
          ee=ee.replace('http://jmh.xinda100.cn', "");
        }

         var m=(ee.split('style="width:24px;";=""')).length-1;
       //     var n=(ee.split('http://localhost')).length-1;
        if (m>0) {
        for(var i=0;i<m;i++)
        {
     // ee=ee.replace('http://localhost', "");
          ee=ee.replace('style="width:24px;";=""', "");
        }
        }
        var ret = "";
        var reg = new RegExp('<imgsrc="/public/static/images/arclist/', "g");
        var reg1 = new RegExp('.png">', "g");
        ee = ee.replace(reg, "[em_");
        ee = ee.replace(reg1, "]");
        }
        $('#saytext1').val(ee);
    }
     var QCLOUD= '{:QCLOUD_IMGURL}';

        window.onload = function()
        {
            connectServer();
            refresh_user_list();
            //检测是否有未接入的会员
        var data={
                    'admin_id':"{$admin_id}",
                };
        var r=ajax_return('{:url("index/not_recive")}',data, false,'post',2);
        }
        //定义一个连服务的函数
        function connectServer(){
            var username ="{$admin_id}111";
            socket = new WebSocket("ws://workerman.vipzhuang.cn");
            //socket = new WebSocket("ws://14.23.33.124:2345");
            socket.onopen = function() {
            socket.send('admin_login:' + username);
            };
            //获取workman发送过来的消息
            socket.onmessage = function(e) {
            var getMsg = e.data;
            if(isJSON(getMsg))
            {
               getMsg= JSON.parse(getMsg);
               var dt=getMsg['part_time'];
               var msg=getMsg['msg'];
               var part_time=timetrans(dt);
               var msg_right=0;
               //获取左上角计数
                var msg_uc =$('.nav .msg .msg_count').text();
                var arr='';
                $('.news').find('li').each(function(){
                arr+=$(this).attr('user_id')+',';
                if($(this).attr('user_id')==getMsg['user_id'])
                {
                    if(!$(this).hasClass('on'))
                    {
                    if($(this).find('.msg_count').length==0)
                    {
                        var insertHtml='<div class="msg_count">0</div>';
                        $(this).find('div:first').after(insertHtml);
                    }
                    }
                    //改变内容
                    if(getMsg['msg'].indexOf('goods_name')>=0)
                    {
                    getMsg['msg']='[商品链接]';
                    $(this).find('div p:last-child').text(getMsg['msg']);
                    }
                    if(getMsg['msg'].indexOf('/public/upload/mchat/temp/')>=0)
                    {
                       getMsg['msg']='[图片]';
                    $(this).find('div p:last-child').text(getMsg['msg']);
                    }
                    if(getMsg['msg'].indexOf('/public/upload/mchat/temp/')<0&&getMsg['msg'].indexOf('original_img')<0)
                    {
                    $(this).find('div p:last-child').html(replace_em(getMsg['msg']));
                    }
                    //改变时间
                    $(this).find('div.time').text(part_time);
                    //改变消息计数
                    if(!$(this).hasClass('on'))
                    {
                    $('.nav .msg .msg_count').text(Number(msg_uc)+1).show();
                    }
                    msg_right =$(this).find('.msg_count').text();
                    $(this).find('.msg_count').text(Number(msg_right)+1).show();
                    //判断是否当前正在聊天
                    if($(this).hasClass('on'))
                    {
                    var user_png = $(this).children('img').attr("src");
                    var user_name = $(this).find('.user_name p:eq(0)').text();
                    get_msg(msg,user_png);
                    update_uc_sql(this);
                    }
                }
                 });
            var is_exit_history=0;
            $('.h_record ').find('li').each(function(){
                if($(this).attr('user_id')==getMsg['user_id'])
                {

                  // re_user_list(getMsg);
                   $(".msg").trigger("click");
                is_exit_history=is_exit_history+1;
                }
                    });
             var is_exit = arr.indexOf(getMsg['user_id']);
             if(is_exit<0)
             {
             var flag=$('#nrecive_um').html();
             $('.left_foot .cr').text(Number(flag)+1);
             if(is_exit_history=0)
             {
             re_user_list(getMsg);
             }
             }
            }
          }
        }
        //接收到消息
        function get_msg(msg,user_png)
        {
            var link=msg.indexOf('original_img');
            var img=msg.indexOf('/public/upload/mchat/temp/');
            if(link>=0)
            {
            var msg = JSON.parse(msg);
            msg='<div class="sto_goods">'+
                '<div class="rel">'+
                '<img class="chat_goods_img" src="'+ '{:QCLOUD_IMGURL}'+ msg['original_img'] +'">'+
                '<div class="chat_goods_name"> '+ msg['goods_name']+' </div>'+
                '<div style="color: #c4182e">￥'+ msg['shop_price'] +'<a class="return_href moz_b24 moz_t24" target="_blank" href="'+msg['url']+'">查看商品详情</a></div>'+
                '</div>'+
                '</div>';
            }
            if(img>=0)
            {
                msg='<img style="max-width: 100%;max-height: 300px;"  onclick="cli_img_big(this.src,this);" src="'+QCLOUD+msg+'" />';
            }
            if(img<0&&link<0)
            {
                msg=replace_em(msg);
            }
             var p='<div class="left_msg"><img class="touxiang" src="'+user_png+'"/><div class="msg_text"><div class="l_sanjiao_b"><div class="l_sanjiao"></div></div>'+msg+'</div></div>';
            $('#messages').append(p);
            $('#messages').scrollTop($('#messages')[0].scrollHeight );
        }
        //加载中间聊天内容
        function mid_chat_msg(data,user_name,user_png)
        {
            $('#messages').html("");
            var data=JSON.parse(data);
            var p='';
            for(var i=0;i<data.length;i++)
            {
                if (data[i]['msg_type']==3){
                var r = JSON.parse(data[i]['msg']);
                        msg ='<div class="sto_goods">'+
                        '<div class="rel">'+'<img class="chat_goods_img" src="'+ '{:QCLOUD_IMGURL}'+ r['original_img'] +'">'+
                        '<div class="chat_goods_name"> '+ r['goods_name']+' </div>'+
                        '<div style="color: #c4182e">￥'+ r['shop_price'] +'<a class="return_href moz_b24 moz_t24" target="_blank" href="'+r['url']+'">查看商品详情</a></div>'+
                        '</div>'+
                        '</div>';
                }else if(data[i]['msg_type']==2){
                  msg='<img style="max-width: 100%;max-height: 300px;" src="'+QCLOUD+data[i]['msg']+'" alt="" onclick="cli_img_big(this.src,this);"/>';
                }else{
                    msg=replace_em(data[i]['msg']);
                }
                if(data[i]['chat_type']==0){

                    p+='<div class="left_msg"><img class="touxiang" src="'+user_png+'"/><div class="msg_text"><div class="l_sanjiao_b"><div class="l_sanjiao"></div></div>'+msg+'</div></div>';
                }else{
                    p+='<div class="right_msg"><div class="msg_text"><div class="r_sanjiao_b"><div class="r_sanjiao"></div></div>'+msg+'</div><img class="touxiang" src="{:getimg($store_logo)}"/></div>';
                }
            }
            $('.right_head').find('.name span:eq(1)').text(user_name);
            $('#messages').append(p);
            $('#messages').scrollTop($('#messages')[0].scrollHeight );
        }

        //是否是json
        function isJSON(str) {
        if (typeof str == 'string') {
            try {
                var obj=JSON.parse(str);
                if(str.indexOf('{')>-1){
                    return true;
                }else{
                    return false;
                }

            } catch(e) {
                return false;
            }
        }
}
        //刷新用户列表
        function   re_user_list(getMsg)
        {
                if(getMsg['msg'].indexOf('goods_name')>=0)
                {
                getMsg['msg']='[商品链接]';
                }
                if(getMsg['msg'].indexOf('/public/upload/mchat/temp/')>=0)
                {
                   getMsg['msg']='[图片]';
                }
                if(getMsg['msg'].indexOf('/public/upload/mchat/temp/')<0&&getMsg['msg'].indexOf('original_img')<0)
                {
                getMsg['msg']=replace_em(getMsg['msg'])

                }
                var msg_uc =$('.nav .msg .msg_count').text();
                $('.nav .msg .msg_count').css('visibility','visible');
                $('.nav .msg .msg_count').text(parseInt(msg_uc)+1);
                var dt=getMsg['part_time'];
                var part_time=timetrans(dt);
                var p=' <li user_id='+getMsg['user_id']+' user_ip='+getMsg['user_ip']+'><img class="touxiang" src="'+getMsg['head_pic']+'"/><div class="user_name"><p>'+getMsg['nickname']+'</p><p class="info">'+getMsg['msg']+'</p></div><div class="msg_count">1</div><div class="time">'+part_time+'</div><div class="close"><img onclick="update_receive_state(this,'+ getMsg['user_id'] +')" src="__PUBLIC__/static/images/msg/close.png"></div></li>';
                $('.news').append(p);
                $("ul.news li").click(function (e) {
                var user_png = $(this).children('img').attr("src");
                var user_name = $(this).find('.user_name p:eq(0)').text();
                var user_id = $(this).attr('user_id');
                // $('.right_head').find('.name span:eq(1)').text(user_name);
                var data={
                    'user_id':user_id,
                    'admin_id':"{$admin_id}",
                    'keyword':'%',
                    'date':getNowFormatDate('date'),
                    'curpage':1,
                    'pagecount':1000,
                };
                var r = ajax_return('{:url("index/sel_history")}', data, false,'post',2);
                $("ul.news li").removeClass("on");
                $(this).addClass("on");
                $(".right").css("visibility", "visible");
                $(".user_list li").removeClass("on");
                $(this).addClass("on");
                $(".right_middle").removeClass("dn");
                $(".right_foot").removeClass("dn");
                $(".right_foot_h").addClass("dn");
                $(".right_head .name").removeClass("dn");
                //更新未读消息计数（页面）
                update_uc_page(this);
                //同步用户资料
                sel_user_info(this);
                //同步用户历史订单
                sel_order_list(this);
                //更新未读消息计数（数据库）
                update_uc_sql(this);
                mid_chat_msg(r,user_name,user_png);
            });

            //添加鼠标移动时，打叉按钮hover事件
            $(".left_middle .news li").hover(
                function(){
                   $(this).find(".msg_count").hide();
                   $(this).find(".time").hide();
                   $(this).find(".close").css({'opacity':1,});
                },
                function(){
                    $(this).find(".msg_count").show();
                    $(this).find(".time").show();
                    $(this).find(".close").css({'opacity':0,});
                }
            );
        }

        function timetrans(date){
    var date = new Date(date*1000);//如果date为10位不需要乘1000
    var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
    var m = (date.getMinutes() <10 ? '0' + date.getMinutes() : date.getMinutes());
    return h+m;
}
    </script>
<!-- workman -->


<script type="text/javascript">
 var down=0;
    $("#selgoods").focus(function(){
    document.onkeydown = function (e) {
            if (!e) e = window.event;
            if ((e.keyCode || e.which) == 13) {
                selgoods();
            }
        }
    });
       $("#history_key").focus(function(){
    document.onkeydown = function (e) {
            if (!e) e = window.event;
            if ((e.keyCode || e.which) == 13) {
            sel_history_list($('#history_key').val());
            }
        }
    });
         var woohecc = {
    placeCaretAtEnd : function(el) {
            el.focus();
            if (typeof window.getSelection != "undefined"
                && typeof document.createRange != "undefined") {
                var range = document.createRange();
                range.selectNodeContents(el);
                range.collapse(false);
                var sel = window.getSelection();
                sel.removeAllRanges();
                sel.addRange(range);
            }
            else if (typeof document.body.createTextRange != "undefined") {
                var textRange = document.body.createTextRange();
                textRange.moveToElementText(el);
                textRange.collapse(false);
                textRange.select();
            }
        },
    }
    $(document).keydown(function (e) {
    var e = e || window.event, ec = e.keyCode || e.which;
    if (!e.ctrlKey && 13 == ec) {
        //console.log('发送');
        sendss();
        return false;
    }
    if (e.ctrlKey && 13 == ec) {
        //console.log('换行');
        if (browserType() == "IE" || browserType() == "Edge") {
            $("#show_msg").append("<div></div>");
        }
        else if (browserType() == "FF") {
            $("#show_msg").append("<br/><br/>");
        } else {
            $("#show_msg").append("<div><br/></div>");
        }
        //设置输入焦点
        var o = document.getElementById("show_msg").lastChild;
        var textbox = document.getElementById('show_msg');
        var sel = window.getSelection();
        var range = document.createRange();
        range.selectNodeContents(textbox);
        range.collapse(false);
        range.setEndAfter(o);//
        range.setStartAfter(o);//
        sel.removeAllRanges();
        sel.addRange(range);
    }
});
function browserType () {
        var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
        var isOpera = false;
        if (userAgent.indexOf('Edge') > -1) {
            return "Edge";
        }
        if (userAgent.indexOf('.NET') > -1) {
            return "IE";
        }
        if (userAgent.indexOf("Opera") > -1 || userAgent.indexOf("OPR") > -1) {
            isOpera = true;
            return "Opera"
        }; //判断是否Opera浏览器
        if (userAgent.indexOf("Firefox") > -1) {
            return "FF";
        } //判断是否Firefox浏览器
        if (userAgent.indexOf("Chrome") > -1) {
            return "Chrome";
        }
        if (userAgent.indexOf("Safari") > -1) {
            return "Safari";
        } //判断是否Safari浏览器
        if (userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera) {
            return "IE";
        }; //判断是否IE浏览器
}
    /*搜索商品*/
    function selgoods(keyword)
    {
        var data = {
            'url': '{:url("Index/sel_goods_list")}',
            'keyword': keyword,
            'store_id': "{$store_id}",
        };
      var r = ajax_return(data['url'], data, false,'post',2);
      r=JSON.parse(r);
      var p='';
      if(r.length>0)
      {
       for(var i=0;i<r.length;i++)
       {
         var  info=JSON.stringify(r[i]);
        p+='<div class="sto_goods"><div class="rel"><img class="chat_goods_img" src="'+QCLOUD+r[i]['original_img']+'" alt=""><div class="chat_goods_name">'+r[i]['goods_name']+'</div><div style="color: #c4182e">￥'+r[i]['shop_price']+'<a class="return_href moz_b24 moz_t24" onclick=\'send_msg(3,'+info+');\'>发送商品链接</a></div></div></div>';
       }
      }else{
        p='<div class="sto_goods" ><div class="rel" style="padding-left: 135px;margin-top: 80px;">查无类似商品</div></div>';
      }
    $('.info1').html("");
    $('.info1').append(p);
    $('.info1').scrollTop($('.info1')[0].scrollHeight );
    }

 /*图片上传*/
    function call_back(url)
    {
            send_msg(2,url[0]);
    }

    /*保存聊天记录*/
    function save_chat_history()
    {
        var user_ip='';
        $('.news li').each(function(i){
            if($(this).hasClass("on"))
            {
                user_ip= $(this).attr('user_ip');
                var chat_list=$('#messages').html();
            }
        });
        return user_ip;
    }
    /*获取用户ip*/
    function get_user_ip(){
        var user_ip='';
        $('.news li').each(function(i){
            if($(this).hasClass("on"))
            {
                user_ip= $(this).attr('user_ip');

            }
        });
        return user_ip;
    }


    /*消息发送*/
    function send_msg(type,url)
    {

        str_msg();
        var type=type?type:'';
        var url=url?url:'';
        var msg='';
        var  history_id=get_history();
        var user_id =get_user_id();
        user_id=user_id==''?history_id:user_id;
        var user_ip=get_user_id();
        var  p='';
        switch (type) {
            case 1:
                var  all_msg=$('#saytext1').val();
                msg=replace_em(all_msg);
                break;
            case 2:
                var  all_msg=url;
                msg='<img width="300px"; src="'+url+'" alt="" onclick="cli_img_big(this.src,this);"/>';
                break;
        }
        p='<div class="right_msg"><div class="msg_text"><div class="r_sanjiao_b"><div class="r_sanjiao"></div></div>'+msg+'</div><img class="touxiang" src="{:getimg($store_logo)}"/></div>';
        if(type==3)
        {
        p='<div class="right_msg"><div class="msg_text"><div class="r_sanjiao_b"><div class="r_sanjiao"></div></div><div class="sto_goods"><div class="rel"><img class="chat_goods_img" src="'+QCLOUD+url['original_img']+'"><div class="chat_goods_name">'+url['goods_name']+'</div><div style="color: #c4182e">￥'+url['shop_price']+'<a class="return_href moz_b24 moz_t24" target="_blank" href="/Mobile/Goods/goodsInfo/stoid/'+url['store_id']+'/id/'+url['goods_id']+'.html">查看商品详情</a></div></div></div></div><img class="touxiang" src="{:getimg($store_logo)}"></div>';
        var a={};
        a['original_img']=url['original_img'];
        a['shop_price']=url['shop_price'];
        a['store_id']=url['store_id'];
        a['goods_id']=url['goods_id'];
        a['goods_name']=url['goods_name'];
        a['touxiang']='{:getimg($store_logo)}';
        var all_msg=JSON.stringify(a);
        }
        $('#saytext1').val("");
        $('#show_msg').empty();
         if(all_msg!='')
        {
         socket.send('chat:<'+user_id+'>:'+all_msg);
         $('#messages').append(p);
        }
        var admin_id='{$admin_id}';
        // 提交聊天数据
        var data = {
            'url': '{:url("Index/save_msg")}',
            'msg':all_msg,
            'msg_type':type,
            'chat_type':1,
            'is_read':1,
            'user_id':user_id,
            'admin_id':admin_id,
        };
        $('#messages').scrollTop($('#messages')[0].scrollHeight );
        ajax_return(data['url'], data, true,'post',2);
    }

    /*转换表情*/
    function replace_em(str){

        str = str.replace(/\</g,'<');
        str = str.replace(/\>/g,'>');
        str = str.replace(/\r\n/g,"<br/>");
        str = str.replace(/\[em_([0-9]*)\]/g,'<img style="width:24px;" src="__PUBLIC__/static/images/arclist/$1.png" border="0" />');
        return str;
    }

    right_bottom();
    niceScroll1();

    /*删除某个快捷回复*/
    function del_reply(e){
        var data_id = $(e).siblings('input').attr('data_id');
        $(e).parent().addClass('dn');
        $.ajax({
            type: 'post',
            url: "{:U('del_reply')}",
            data:{'id':data_id},
        });
    }

    /*显示快捷回复*/
    function replys(e){
        $(e).siblings('div').toggleClass('dn');
        if ($(e).siblings('div').hasClass('dn')){
            return;
        }
        $('#history_list').addClass('dn');
        $('#sel_goods').addClass('dn');
        $('#overlay').removeAttr('style');
         $('#absbox').parent().css('z-index','6000');

        reply_list();
        overlay();
    }
     /*显示商品查询*/
    function sel_goods_list(e){
        $(e).siblings('div').toggleClass('dn');
        if ($(e).siblings('div').hasClass('dn')){
            return;
        }
        $('#absbox').addClass('dn');
        $('#history_list').addClass('dn');
        $('#overlay').removeAttr('style');
        $('#sel_goods').parent().css('z-index','6000');
        overlay();
    }
    //点击商品吃

    /*新增快捷语言*/
    function add_input(){
        $('.addbtn').toggleClass("dn");
        $('.textbox').toggleClass("dn");
    }

    /*编辑快捷语言*/
    function edit_reply(e){
        $(e).siblings('input').removeAttr('readonly');
        $(e).siblings('input').css('cursor','default');
        $(e).siblings('input').blur(function()
        {
            // if($(e).siblings('input').attr('readonly')!='readonly')
            // {
                var save_val=$(e).siblings('input').val();
                var data_id=$(e).siblings('input').attr('data_id');
                var admin_id ="{$admin_id}";
                var store_id ="{$store_id}";
                $.ajax({
                    type: 'post',
                    url: "{:U('save_reply')}",
                    data:{'msg':save_val,'id':data_id,'admin_id':admin_id,'store_id':store_id},
                    success: function (data) {
                        console.log(data);
                    }
                });
            // }

        });

    }
    /*确认添加快捷框*/
    function sure_add(e)
    {
        $('.addbtn').toggleClass("dn");
        $('.textbox').toggleClass("dn");
         var val=$('.textbox').find('textarea').val();
         var admin_id ="{$admin_id}";
         var store_id ="{$store_id}";
         $.ajax({
            type: 'post',
            url: "{:U('add_reply')}",
            data:{'msg':val,'admin_id':admin_id,'store_id':store_id},
            success: function (data) {
            $('.textbox').find('textarea').val("");
            if(data['code']==1)
            {
             var p=' <div class="inputbox"><input type="text"  data_id="'+data['id']+'" name="reply_input" onclick="add_msg(this);" style="cursor: pointer; border: solid 0px #D7D7D7;"  class="bzfont cut" readonly="readonly" value="'+val+'"><img src="__PUBLIC__/static/images/msg/edit.png" onclick="edit_reply(this);" alt=""><img src="__PUBLIC__/static/images/msg/del.png"  onclick="del_reply(this);" alt=""></div>';  $(e).parent().parent().prepend(p);
            }

            }
        });
    }

    /*点击快捷回复添加至聊天输入框*/
    function add_msg(e){
        $(e).blur(function()
        {
            $(e).attr("readonly","readonly");
            $(e).css('cursor','pointer');
        });
        if($(e).attr('readonly'))
        {
            var ee=document.getElementById("show_msg");
            a=ee.innerHTML;
            var msg=$(e).val();
          //  var msg_text=$('.txt_box').find('textarea').val()+msg;
            ee.innerHTML=a+msg;
          //  $('#saytext1').val(msg_text);
        }
    }

    /*保存自动回复*/
    function save_reply(e){
        var save_val=$(e).siblings('input').val();
        var data_id=$(e).siblings('input').attr('data_id');
        $.ajax({
            type: 'post',
            url: "{:U('save_reply')}",
            data:{'msg':save_val,'id':data_id},
            success: function (data) {
            }
        });
    }

    /*后台加载快捷回复列表*/
    function reply_list()
    {
        $.ajax({
            type: 'post',
            url: "{:U('reply_list')}",
            data:{'admin_id':"{$admin_id}"},
            success: function (data) {
                if (data){
                    var p='';
                    for (var i = 0; i < data.length; i++) {
                        p+=' <div class="inputbox"><input type="text" data_id="'+data[i]['id']+'" name="reply_input" onclick="add_msg(this);" style="cursor: pointer; border: solid 0px #D7D7D7;"  class="bzfont cut" readonly="readonly" value="'+data[i]['msg']+'"><img src="__PUBLIC__/static/images/msg/edit.png" onclick="edit_reply(this);" alt=""><img src="__PUBLIC__/static/images/msg/del.png"  onclick="del_reply(this);" alt=""></div>';
                    }
                   $('#absbox').find('.inputbox').remove();
                   $('#absbox').prepend(p);
                }


            }
        });
    }


    /*查询历史记录*/
    function sel_history_list(keyword,curpage,pagecount,date)
    {
        var keyword = keyword ? keyword : '';
        var curpage = curpage ? curpage : 1;
        var pagecount = pagecount ? pagecount : 50;
        var date = date ? date : '';
        //点击图标【显示或隐藏】历史记录框
        if (keyword=='@#$%'){
            keyword = '%';
            $('.h_date').val(getNowFormatDate('date'));
            $('#history').siblings('.absbox').toggleClass('dn');
        }
        if ($('#history').siblings('.absbox').hasClass('dn')){
            return;
        }
        //按日期搜索时，不使用关键字搜索
        if (date!=''){
            $('#history_key').val('');
        }
        var admin_id = '{$admin_id}';
        var user_id = $('.user_list li[class="on"]').attr('user_id');
        var user_name = $('.user_list li[class="on"] .user_name p:first').text();
        if ((user_id !== undefined) && (user_id !== '') && (admin_id !== ''))
        {
            //解除img分页事件,防止多次重复绑定
            $('.bot .history_data .first').prop("onclick",null).off("click");//jQuery1.7+
            $('.bot .history_data .prior').prop("onclick",null).off("click");//jQuery1.7+
            $('.bot .history_data .next').prop("onclick",null).off("click");//jQuery1.7+
            $('.bot .history_data .last').prop("onclick",null).off("click");//jQuery1.7+
            $.ajax({
                type: 'post',
                url: "{:U('sel_history_list')}",
                data:{
                    'user_id':user_id,
                    'keyword':keyword,
                    'date':date,
                    'admin_id':"{$admin_id}",
                    'curpage':curpage,
                    'pagecount':pagecount,
                },
                success: function (data) {
                    if (data){
                        var p ='';
                        var pclass ='';
                        var pname = '';
                        var msg = '';
                        $('.inner').html('');
                        for (var i =0;i<data['data'].length;i++){
                            if (data['data'][i]['chat_type']==1){
                                pname = '{$admin_name}';
                                pclass = 'vip';
                            } else {
                                pname = user_name;
                                pclass = 'kefu';
                            }

                            if (data['data'][i]['msg_type']==3){
                                var r = JSON.parse(data['data'][i]['msg']);
                                msg ='<div class="p10" style="background-color: white;">' +
                                    '<div class="sto_goods">'+
                                    '<div class="rel">'+
                                    '<img class="chat_goods_img" src="'+ '{:QCLOUD_IMGURL}'+ r['original_img'] +'">'+
                                    '<div class="chat_goods_name"> '+ r['goods_name']+' </div>'+
//                                            '<div style="color: #c4182e">￥'+ r['shop_price'] +'<a class="return_href moz_b24 moz_t24" onclick="send_msg(3)"></a></div>'+
                                    '<div style="color: #c4182e">￥'+ r['shop_price'] +'</div>'+
                                    '</div>'+
                                    '</div>' +
                                    '</div>';
                            } else if (data['data'][i]['msg_type']==2){
                                //图片
                                msg = '<img width="200px"; src="'+'{:QCLOUD_IMGURL}'+data['data'][i]['msg']+'" onclick="cli_img_big(this.src,this);"/>'
                            } else {
                                //文字或表情
                                msg = replace_em(data['data'][i]['msg']);
                            }
                            p+='<dl><dt class="'+pclass+'">'+ pname + ' : ' + getLocalTime(data['data'][i]['add_time']) +'</dt>' +
                                '<dd>'+msg+'</dd></dl>';
                        };
                        $('.inner').prepend(p);
                        //绑定img分页事件
                        var prior = curpage - 1;
                        var next = curpage + 1;
                        if (prior == 0){
                            prior = 1;
                        }
                        if (next > data['pages']){
                            next = data['pages'];
                        }
                        $('.bot .history_data .first').bind('click',function () {
                            sel_history_list(keyword,1,pagecount,date)
                        });
                        $('.bot .history_data .prior').bind('click',function () {
                            sel_history_list(keyword,prior,pagecount,date)
                        });
                        $('.bot .history_data .next').bind('click',function () {
                            sel_history_list(keyword,next,pagecount,date)
                        });
                        $('.bot .history_data .last').bind('click',function () {
                            sel_history_list(keyword,data['pages'],pagecount,date)
                        });


                    }
                }
            });
        $('#absbox').addClass('dn');
        $('#sel_goods').addClass('dn');
        $('#overlay').removeAttr('style');
        $('#history_list').parent().css('z-index','6000');
        overlay();
        }

    }

    function getLocalTime(DT) {
        return new Date(parseInt(DT) * 1000).toLocaleString().replace(/年|月/g, "-").replace(/日/g, " ");
    }


    //获取user_id
    function get_user_id(){
        var user_id='';
        $('.news').find('li').each(function(){
            if($(this).hasClass("on"))
            {
                user_id= $(this).attr('user_id');
            }
        });
        return user_id;
    }

   //获取user_id
    function get_history(){
        var user_id='';
        $('.h_record').find('li').each(function(){
            if($(this).hasClass("on"))
            {
                user_id= $(this).attr('user_id');
            }
        });
        return user_id;
    }

    /*生成遮罩*/
    function  overlay()
    {

        $('#upload_img').css('z-index','6000');
        var docHeight = $(document).height(); //获取窗口高度
        $('#overlay')
            .height(docHeight)
            .css({
//                'opacity': .9, //透明度
                'position': 'absolute',
                'top': 0,
                'left': 0,
                'width': '100%',
                'height': '100%',
                'z-index': 5000,
                'background-color':'rgba(0,0,0,0.7)',
            });
    }


    /*点击遮罩促发*/
    function overlay_click()
    {
        $('#absbox').addClass('dn');
        $('#history_list').addClass('dn');
        $('#sel_goods').addClass('dn');
        $('#overlay').removeAttr('style');
        }

    $(function () {

        /*发送*/
        /*qq表情*/
        $('.emotion').qqFace({
            assign:'saytext1', //给输入框赋值
            show_msg:'show_msg',
            path:'/public/static/images/arclist/' //表情图片存放的路径
        });
        /*计算订单高度*/
        $(".titinfo ").click(function () {
            var ordh;
            ordh = $("body").height() - $(".right_head").height() - $(".right_info .info_tit").height() - $(".viporder .ordertit").height();
            $(".viporder .gdtbox").css("height", ordh);
        });


        /*右侧点击效果*/
        $(".info_tit .titinfo").click(function () {
            $(".info_tit .titinfo").removeClass("on");
            $(this).addClass("on");
            if ($(".titone").hasClass("on")) {
                $(".info_inner .vipdata").removeClass("dn");
                $(".info_inner .viporder").addClass("dn");
            } else {
                $(".info_inner .vipdata").addClass("dn");
                $(".info_inner .viporder").removeClass("dn");
            }
        });

        /*右侧隐藏显示*/
        $(".more").click(function () {
            $(".right_info").toggleClass("dn");
            if ($(".right_info").hasClass("dn")) {
                $(".more").text('展开详情');
                $(".right_middle").css("width", "100%");
            } else {
                $(".more").text('隐藏详情');
                $(".right_middle").css("width", "69.9%");
            }
        });

        /*历史记录滚动条*/
        $('.history_info .info').niceScroll({
            cursorcolor: "#ccc",//#CC0071 光标颜色
            cursoropacitymax: 1, //改变不透明度非常光标处于活动状态（scrollabar“可见”状态），范围从1到0
            touchbehavior: false, //使光标拖动滚动像在台式电脑触摸设备
            cursorwidth: "5px", //像素光标的宽度
            cursorborder: "0", //   游标边框css定义
            cursorborderradius: "5px",//以像素为光标边界半径
            autohidemode: true //是否隐藏滚动条
        });
    });

    function niceScroll1() {
        /*滚动条*/
        $('#messages').niceScroll({
            cursorcolor: "#ccc",//#CC0071 光标颜色
            cursoropacitymax: 1, //改变不透明度非常光标处于活动状态（scrollabar“可见”状态），范围从1到0
            touchbehavior: false, //使光标拖动滚动像在台式电脑触摸设备
            cursorwidth: "5px", //像素光标的宽度
            cursorborder: "0", //   游标边框css定义
            cursorborderradius: "5px",//以像素为光标边界半径
            autohidemode: true //是否隐藏滚动条
        });
    }

    function right_bottom() {
        var lh = $("body").height() - $(".left_head").height() - $(".left_foot").height();
        var rh;
        if ($(".right_foot").hasClass("dn")) {
            rh = $("body").height() - $(".right_head").height();
            mb = 20;
        } else {
            rh = $("body").height() - $(".right_head").height() - $(".right_foot").height();
            mb = $(".right_foot").height();
        }
        $(".left_middle").css("height", lh);
        $(".messages").css("height", rh);
        $(".right_middle").css("margin-bottom", mb);
    }
    //点击消息图标，刷新聊天列表
    function show_user_list() {
        close_hide();
        $(".news").removeClass("dn");
        $(".h_record").addClass("dn");
        $(".nav .msg img").attr("src", "__PUBLIC__/static/images/msg/msg_on.png");
        $(".nav .history img").attr("src", "__PUBLIC__/static/images/msg/history.png");
        $(".right_foot").removeClass("dn");
        $(".right_foot_h").addClass("dn");
        $('ul.news').html('');
        refresh_user_list();
    }

    //用户消息列表单击事件
    $(".news li").click(function () {
        $(".right").css("visibility", "visible");
        $(".user_list li").removeClass("on");
        $(this).addClass("on");
        $(".right_middle").removeClass("dn");
        $(".right_foot").removeClass("dn");
        $(".right_foot_h").addClass("dn");
        $(".right_head .name").removeClass("dn");
        //更新未读消息计数（页面）
        update_uc_page(this);
        //同步用户资料
        sel_user_info(this);
        //同步用户历史订单
        sel_order_list(this);
        //更新未读消息计数（数据库）
        update_uc_sql(this);

    });


    //历史记录列表
    function show_history_list() {
        close_hide();
        $(".news").addClass("dn");
        $(".h_record").removeClass("dn");
        $(".nav .msg img").attr("src", "__PUBLIC__/static/images/msg/msg.png");
        $(".nav .history img").attr("src", "__PUBLIC__/static/images/msg/history_on.png");
        $(".right_middle").addClass("dn");
        $(".right_foot").addClass("dn");
        $(".right_foot_h").addClass("dn");
        $(".right_head .name").addClass("dn");
        $(".user_list li").removeClass("on");
        //消息记录的用户对应的历史记录的用户增加样式on
        refresh_history_list();
    }


    //历史记录列表单击事件
    $(".h_record li").click(function () {
        $(".right").css("visibility", "visible");
        $(".user_list li").removeClass("on");
        $(this).addClass("on");
        $(".right_middle").removeClass("dn");
        $(".right_foot").addClass("dn");
        $(".right_foot_h").removeClass("dn");
        $(".right_head .name").removeClass("dn");
        right_bottom();
    });


    //提示信息
    $(".nav img").mousemove(function () {
        $(this).siblings(".tipbox").css("display", "block");
    });
    $(".nav img").mouseout(function () {
        $(this).siblings(".tipbox").css("display", "none");
    });


    //消息记录-》历史记录
    function show_ms_record() {
        $(".news").addClass("dn");
        $(".h_record").removeClass("dn");
        $(".nav .msg img").attr("src", "__PUBLIC__/static/images/msg/msg.png");
        $(".nav .history img").attr("src", "__PUBLIC__/static/images/msg/history_on.png");
        $(".right_middle").removeClass("dn");
//        $(".right_foot").addClass("dn");
//        $(".right_foot_h").removeClass("dn");
        $(".right_head .name").removeClass("dn");
        $(".fanhui").css("visibility", "visible");
        $(".nomsgbox").addClass("dn");
        $(".user_list li").removeClass("on");
        right_bottom();
        //消息记录的用户对应的历史记录的用户增加样式on

    }
    //关闭消息框
    function close_hide() {
        $(".user_list li").removeClass("on");
        $(".right").css("visibility", "hidden");
    }


    //by 1019：定位搜索 for 消息列表页、历史记录页
    $('p.selectbox input.vam').bind('input propertychange', function (input) {
        if ($("ul.news").hasClass('dn')){
            //历史记录页
            if (input.target.value == ''){
                //无关键值，全部显示
                $('ul.h_record li').each(function(index,li){
                    $(li).show();
                });
            } else {
                //按关键值显示
                if ($("ul.h_record").children('li').length>0){
                    $('ul.h_record li').each(function(index,li){
                        var name = $(li).find('div p:first-child').text();
                        if (name.indexOf(input.target.value)<0){
                            $(this).hide();
                        } else {
                            $(this).show();
                        }
                    });
                }
            }
        } else {
            //消息列表页
            if (input.target.value == ''){
                //无关键值，全部显示
                $('.news li').each(function(index,li){
                    $(li).show();
                });
                return;
            } else {
                //按关键值显示
                if ($("ul.news").children('li').length>0){
                    $('ul.news li').each(function(index,li){
                        var name = $(li).find('div p:first-child').text();
                        if (name.indexOf(input.target.value)<0){
                            $(this).hide();
                        } else {
                            $(this).show();
                        }
                    });
                }
            }
        }
    });

    //搜索 for 用户列表页 use 数据库查询方式
    function refresh_user_list() {

        //刷新接入用户列表
        var data = {
            'url': '{:url("Getinfo/sel_user_list")}',
            'admin_id':"{$admin_id}",
        };
        $('ul.news').html('');
        var r = ajax_return(data['url'], data, false,'post',2);
        if (r){
            var str = '';
            var msg = '';
            var msg_uc = 0;
            for (var i = 0;i<r.length;i++){

                //未读消息数
                if (r[i]['msg_uc'] !== 0){
                    msg_uc = msg_uc + r[i]['msg_uc'];
                    str = '<div class="msg_count">' + r[i]['msg_uc'] + '</div>';
                };

                if (r[i]['msg_type']==3){
                    msg = '[商品链接]';
                } else if (r[i]['msg_type']==2){
                    msg = '[图片]';
                } else {
                    msg = replace_em(r[i]['msg']);
                }
                $('ul.news').append(
                    '<li user_id='+ r[i]['user_id'] +' user_ip='+ r[i]['user_ip'] +'>'+
                    '<img class="touxiang" src="'+ r[i]['head_pic'] +'">'+
                    '<div class="user_name">'+
                        '<p>'+ r[i]['nickname'] +'</p>'+
                        '<p class="info">'+ msg +'</p>'+
                    '</div>'+ str +
                    '<div class="time">' + r[i]['part_time'] + '</div>'+
                    '<div class="close"><img onclick="update_receive_state(this,'+ r[i]['user_id'] +')" src="__PUBLIC__/static/images/msg/close.png"></div>' +
                    '</li>'
                );
                str = ''
            }
            //接待数
            $('.left_foot .cr').text(r.length);
            //更新 未读消息 总数
            if (msg_uc > 0){
                $('.nav .msg .msg_count').css('visibility','visible');
                $('.nav .msg .msg_count').show();
                $('.nav .msg .msg_count').text(msg_uc);
            } else {
                $('div.nav span.msg div.msg_count').css('visibility','hidden');
            }
            $("ul.news li").click(function (e) {
                var user_png = $(this).children('img').attr("src");
                var user_name = $(this).find('.user_name p:eq(0)').text();
                var user_id = $(this).attr('user_id');
                var data={
                'user_id':user_id,
                'admin_id':"{$admin_id}",
                'keyword':'%',
                'date':getNowFormatDate('date'),
                'curpage':1,
                'pagecount':1000,
                };
               // $('.right_head').find('.name span:eq(1)').text(user_name);
                var r = ajax_return('{:url("index/sel_history")}', data, false,'post',2);
                $('#messages').scrollTop($('#messages')[0].scrollHeight );
                $("ul.news li").removeClass("on");
                $(this).addClass("on");
                $(".right").css("visibility", "visible");
                $(".user_list li").removeClass("on");
                $(this).addClass("on");
                $(".right_middle").removeClass("dn");
                $(".right_foot").removeClass("dn");
                $(".right_foot_h").addClass("dn");
                $(".right_head .name").removeClass("dn");
                //更新未读消息计数（页面）
                update_uc_page(this);
                //同步用户资料
                sel_user_info(this);
                //同步用户历史订单
                sel_order_list(this);
                //更新未读消息计数（数据库）
                update_uc_sql(this);
                //加载聊天界面聊天记录
                mid_chat_msg(r,user_name,user_png);
            });

            //添加鼠标移动时，打叉按钮hover事件
            $(".left_middle .news li").hover(
                function(){
                   $(this).find(".msg_count").hide();
                   $(this).find(".time").hide();
                   $(this).find(".close").css({'opacity':1,});
                },
                function(){
                    $(this).find(".msg_count").show();
                    $(this).find(".time").show();
                    $(this).find(".close").css({'opacity':0,});
                }
            );
        }
    }
    //点击左侧--用户列表，刷新右侧--用户资料&&购买统计
    function sel_user_info(obj) {
        var data = {
            'url': '{:url("Getinfo/sel_user_info")}',
            'user_id':$(obj).attr('user_id'),
        };
//        var r = ajax_return(data['url'], data, false,'post',2);
        $.ajax({
            type : 'post',  //提交方式
            url  : '{:url("Getinfo/sel_user_info")}',
            data : data,
            dataType : 'json',
            success: function(r) {
                if (r){
                    $('.vipdata .vip_info_nickname').html('<img src="__PUBLIC__/static/images/msg/zl1.png"/>'+r['data']['nickname']);
                    $('.vipdata .vip_info_vipname').html('<img src="__PUBLIC__/static/images/msg/zl2.png"/>'+r['data']['vipname']);
                    $('.vipdata .vip_info_mobile').html('<img src="__PUBLIC__/static/images/msg/zl3.png"/>'+r['data']['mobile']);
                    $('.vipdata .vip_info_birthday').html('<img src="__PUBLIC__/static/images/msg/zl4.png"/>'+r['data']['birthday']);
                    $('.vipdata .vip_info_pickname').html('<img src="__PUBLIC__/static/images/msg/zl5.png"/>'+r['data']['pickup_name']);
                    $('.vipdata .vip_info_last_time').html('最后购买时间&nbsp;:&nbsp;'+r['last_time']);
                    $('.vipdata .vip_info_count').html('购买次数&nbsp;:&nbsp;'+r['count']+' 次');
                    $('.vipdata .vip_info_avg').html('每单均价&nbsp;:&nbsp;'+r['avg'] +' 元');
                    $('.vipdata .vip_info_sum').html('总消费&nbsp;:&nbsp;'+r['sum'] +' 元');
                    var url='/index.php?m=Admin&c=Order&a=index&keytype=2&keywords='+r['data']['mobile'];
                    $('#much_order').attr('href',url);
                }


            },
        });
    }

    //点击左侧--用户列表，刷新右侧--用户历史订单
    function sel_order_list(obj) {
        var data = {
            'url': '{:url("Getinfo/sel_order_list")}',
            'user_id':$(obj).attr('user_id'),
        };
        $('div.gdtbox ul').html('');
  // var r = ajax_return(data['url'], data, false,'post',2);
        $.ajax({
            type : 'post',  //提交方式
            url  : '{:url("Getinfo/sel_order_list")}',
            data : data,
            dataType : 'json',
            success: function(r) {
                if (r){
                    for (var i=0;i<r.length;i++){
                        $('div.gdtbox ul').append(
                            '<li>'+
                            '<span class="order_info">'+
                            '<img src="'+QCLOUD+ r[i]['original_img'] + '">' +
                            '<div class="name">' +
                            '<div class="cut">' + r[i]['order_sn'] +'</div>' +
                            '<div class="cut">实付金额：<em class="cr">￥' + r[i]['total_amount'] + '</em></div>'+
                            '<div class="cut">' + r[i]['add_time'] + '</div>' +
                            '<div class="cut">下单门店：'  + r[i]['pickup_name'] + '</div>' +
                            '</div>'+
                            '<div class="clear"></div>'+
                            '</span>'+
                            '<span class="order_pro"><a target="_blank" href="/index.php/admin/order/detail/order_id/'+r[i]['order_id']+'.html">查看详情</span>'+
                            '</li>'
                        );
                    }
                }
            },
        });

    }


    //历史列表
    function refresh_history_list() {

        var data = {
            'url': '{:url("Getinfo/sel_history_list")}',
            'admin_id':"{$admin_id}",
        };
        $('ul.h_record').html('');
        var r = ajax_return(data['url'], data, false,'post',2);
        if (r){
            var msg = '';
            for (var i = 0;i<r.length;i++)
            {
                if (r[i]['msg_type']==3){
                    msg = '[商品链接]';
                } else if (r[i]['msg_type']==2){
                    msg = '[图片]';
                } else {
                    msg = replace_em(r[i]['msg']);
                }
                $('ul.h_record').append(
                    '<li user_id='+ r[i]['user_id'] +'>'+
                    '<img class="touxiang" src="'+ r[i]['head_pic'] +'">'+
                    '<div class="user_name">'+
                    '<p>'+ r[i]['nickname'] +'</p>'+
                    '<p class="info">'+ msg +'</p>'+
                    '</div>'+
                    '<div class="time">' + r[i]['part_time'] + '</div>'+
                    '</li>'
                );
            }
            $("ul.h_record li").click(function (e) {
                $(".h_record li").removeClass("on");
                $(".user_list li").removeClass("on");
                $(this).addClass("on");
                $(".right").css("visibility", "visible");
                $(".right_middle").removeClass("dn");
                $(".right_foot").removeClass("dn");
                $(".right_foot_h").addClass("dn");
                $(".right_head .name").removeClass("dn");
                //同步用户资料
                sel_user_info(this);
                //同步用户历史订单
                sel_order_list(this);
                var user_png = $(this).children('img').attr("src");
                var user_name = $(this).find('.user_name p:eq(0)').text();
                var user_id = $(this).attr('user_id');
                var data={
                'user_id':user_id,
                'admin_id':"{$admin_id}",
                'keyword':'%',
                'date':'',
                'curpage':1,
                'pagecount':1000,
                };

                var r = ajax_return('{:url("index/sel_history")}', data, false,'post',2);
                mid_chat_msg(r,user_name,user_png);
                check_state(e);
                $('#messages').scrollTop($('#messages')[0].scrollHeight );
            });
        }
    }
             $(".left_middle .news li").hover(
                function(){
                   $(this).find(".msg_count").hide();
                   $(this).find(".time").hide();
                   $(this).find(".close").css({'opacity':1,});
                },
                function(){
                    $(this).find(".msg_count").show();
                    $(this).find(".time").show();
                    $(this).find(".close").css({'opacity':0,});
                }
            );

        function check_state(e)
        {
                var data={
                'user_id':get_history(),
                };
                var r = ajax_return('{:url("index/check_state")}', data, false,'post',2);
              if(r)
              {
                 //正在接待
                if(r['code']==1)
                {
                show_history_list();
                layer.msg('其他客服接待中。。。');
               }
              }

        }
    //结束会话
    function update_receive_state(obj,user_id)
    {
        layer.open({
            title:'提示',
            content: '确定结束本次会话吗？',
            btn: ['确定', '取消'],
            yes: function(index, layero){
                var flag=$('#nrecive_um').html();
                $('.left_foot .cr').text(Number(flag)-1);
                 close_hide();
                 socket.send('chat:<'+user_id+'>:'+'recive_again_flags');
                //按钮【按钮一】的回调
                $(obj).parent().parent().remove();
                layer.closeAll();
                var data = {
                    'url': '{:url("Getinfo/update_data")}',
                    'table':'chat_receive',
                    'data':{'state':1},
//                  'data':{'state':1,'msg_uc':0},
                    'where':{'user_id':user_id,'admin_id':"{$admin_id}"},
                };
                var r = ajax_return(data['url'], data, true,'post',2);
            },
            btn2: function(index, layero){
                //按钮【按钮二】的回调
            },
        });
    }
    //更新未读消息计数（页面）
    function update_uc_page(obj) {
        if ($(obj).children('div.msg_count')){
            //更新总计数
            if (parseInt($('.nav .msg .msg_count').text() - $(obj).children('div.msg_count').text()) == 0){
                $('.nav .msg .msg_count').hide();
                $('.nav .msg .msg_count').text(0);
            } else {
                $('.nav .msg .msg_count').text($('.nav .msg .msg_count').text() - $(obj).children('div.msg_count').text());
            }
            $(obj).children('div.msg_count').remove();
        }
    }

    //更新未读消息计数（数据库）
    function update_uc_sql(obj)
    {
        var data = {
            'url': '{:url("Getinfo/update_data")}',
            'table':'chat_msg',
            'data':{'is_read':1},
            'where':{'user_id':$(obj).attr('user_id'),'admin_id':"{$admin_id}",'is_read':0},
        };
     var r= ajax_return(data['url'], data, true,'post',2);
    }


</script>
</body>

</html>