aqm
/
Customer-Service


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189
							<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>效果展示</title>
</head>
<body class="gray-bg">
<script type="text/javascript">

  var xmlhttp=new XMLHttpRequest();
  var data = [];//配置信息
  var appip_source = '';
  var appuip_user = '';
  var isIE=!!window.ActiveXObject;    //是否IE浏览器
  var isIE6=isIE&&!window.XMLHttpRequest;  //是否IE6浏览器
  var isIE7=isIE&&!isIE6&&!isIE8;  //是否IE7浏览器
  var isIE8=isIE&&!!document.documentMode;  //是否IE8浏览器
  var availheight = screen.availHeight;   //默认高度为屏幕的高度
  var hostname = location.protocol+'//'+location.host;
  var adminDomain = 'http://kfadmin.bocai186.com';   //服务器域名
  var serverDomain = 'http://kefu.bocai186.com';   //客服域名
  var userDomain = 'http://kf.bocai186.com?pid='+escape("这就是一个编码没有什么用啊");   //用户域名
  if(isIE8){
    availheight= screen.height;
  }
  //IE11升级弹出窗口小
  if (!!window.ActiveXObject || "ActiveXObject" in window){
    availheight= screen.height;
  }
  function getQueryVariable(variable)
  {
    var query = window.location.search.substring(1);
    var vars = query.split("&");
    for (var i=0;i<vars.length;i++) {
      var pair = vars[i].split("=");
      if(pair[0] == variable){return pair[1];}
    }
    return(false);
  }

  var div = document.createElement('div');

  //ajax获取浮动按钮和提示配置信息
  xmlhttp.open("GET",hostname+"/service/Index/getGuestEnter?t="+ Math.random(),true);
  xmlhttp.send();
  var runTime = getQueryVariable('runTime');
  var runContent = decodeURI(getQueryVariable('runContent'));
  var distance = getQueryVariable('distance');
  xmlhttp.onreadystatechange=function(){
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
      console.log(JSON.parse(xmlhttp.responseText));
      let res = JSON.parse(xmlhttp.responseText);
      if(res.code == 1 ){
        data = res.data;
        //浮动按钮样式
        div.style= `position: fixed; right:15px; top:${distance}px;width:80px;background: #867c7c00;border-radius: 10px 0 0 10px;
            display:flex;flex-direction: column; justify-content: space-between;`;
        div.style.height = 80*(data.length)+'px';
        //拼接浮动按钮样式
        let btn_html ='';
        for(let i = 0 ;i<data.length-1;i++){
          btn_html += `<div id='set_user_info_${data[i].group_id}' style="width:80px;height:80px;background:#9a949775;display:flex;
                flex-direction: column;justify-content: center;align-items: center; cursor:pointer;z-index:1000; ">
                <img  id='set_user_img_${data[i].group_id}'src='${data[i].image}'></img>
                <span id='set_user_span_${data[i].group_id}' style="font-size:12px;font-weight:bold; color: #f0f0f0;">${data[i].name}</span> </div>`;
        }
        div.innerHTML = btn_html;
      }
      //延时显示提示框
      setTimeout(function(){
        create_prompt_box();
      }, runTime*1000);
    }
  }

  /***
   * 打开会话窗口
   */
  div.onclick =function(e){
    console.log(window.location.href)
    var index=e.target.id.lastIndexOf("_");
    // console.log(e.target,index);
    var group_id  = e.target.id.substring(index+1,e.target.id.length);
    console.log(window);
    if(appuip_user && appip_source){
      openWindowCenter(userDomain+"&appid="+appip_source+"&appuid="+appuip_user+'&group_id='+group_id,700,700);
    }else{
      openWindowCenter(userDomain+"&appid="+appip_source+"&appuid="+appuip_user,700,700);
    }
  }
  //将浮动按钮添加到对应到网站body上
  document.body.appendChild(div);


  /**
   * 提示框样式
   */
  function create_prompt_box(){
    var popupWindowBox = document.createElement('div');
    popupWindowBox.style = `position: fixed; top:35%; padding: 10px; left:45%;width:350px;height:160px;
    background:#e5e5e5;border-radius:10px;font-size:17px;display:flex; flex-direction: column;
    justify-content: space-between;z-index:9999;`;
    //拼接提示框样式
    popupWindowBox.innerHTML =`
    <div style='display:flex;flex-direction: row;justify-content: center;'>
    <span style="font-weight:bold; color: #666666;">${runContent}</span>
    </div>
    <div style='flex-direction: row;display:flex;justify-content: flex-end;'>
    <div id="$startSession" style='margin-right: 10px; padding: 4px;border: 1px solid #999; border-radius: 4px; color: #666666;font-weight: bold;cursor:pointer;'>开始会话</div>
    <div id="$cancel" style="padding: 3px;border: 1px solid #999; border-radius: 4px; color: #666666;font-weight: bold;cursor:pointer;">下次再说</div>
    </div>
    `;
    popupWindowBox.onclick =function(e){
      if(e.target.id == '$startSession'){
        openWindowCenter(userDomain+"&appid="+appip_source+"&appuid="+appuip_user,700,700);
      }else if(e.target.id == '$cancel'){
        popupWindowBox.style.display="none";
      }
    }


    //将提示框添加到对应到网站body上
    document.body.appendChild(popupWindowBox);
  }

  // padding: 3px;border: 1px solid #999; border-radius: 4px; color: #666666;font-weight: bold;

  // /***
  //  *
  //  */
  // function   (){

  // }

  /**
   * 打开一个居中的窗口
   * @param pageUrl url链接
   * @param innerWidth 宽度，不带px，小于0表示百分比
   * @param innerHeight 高度，不带px，小于0表示百分比
   */
  function openWindowCenter(pageUrl, innerWidth, innerHeight){
    var screenWidth = screen.availWidth;
    var screenHeight = screen.availHeight;
    var width = screenWidth;
    var height = screenHeight;

    if(innerWidth < 1){
      width = screenWidth * innerWidth;
      screenWidth = (screen.availWidth - width)/2;
    }else{
      width = innerWidth;
      screenWidth = (screen.availWidth - innerWidth)/2;
    }
    if(innerHeight < 1){
      height = screenHeight * innerHeight;
      screenHeight = (screen.availHeight - height)/2;
    }else{
      height = innerHeight;
      screenHeight = (screen.availHeight - innerHeight)/2;
    }
    window.open(pageUrl, "", "left=" + screenWidth + ",top=" + screenHeight +",width=" + width + ",height=" + height + ",resizable=no,scrollbars=no,status=no,toolbar=no,menubar=no,location=no");
  };


  //html页面调用
  /**
   * 获取数据
   */
  function set_user_info_js(a,b){
    appip_source = a;
    appuip_user=b;
  }

  //vue调用
  // export default {
  //     /**
  //      * 获取数据
  //      */
  //     set_user_info_vue: function (a,b){
  //         appip_source = a;
  //         appuip_user =b;
  //     }
  // }

</script>
</body>
</html>