Customer-Service/public/entranceJs/FloatingButton.js

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://manage.281570.com';   //服务器域名
var serverDomain = 'http://customer.281570.com';   //客服域名
var userDomain = 'http://www.281570.com?pid='+escape("这就是一个编码没有什么用啊");   //用户域名
if(isIE8){
  availheight= screen.height;
}
//IE11升级弹出窗口小
if (!!window.ActiveXObject || "ActiveXObject" in window){
  availheight= screen.height;
}


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

data = [];
//浮动按钮样式
div.style = `position: fixed; right:15px; top:${data[data.length - 1].margin_top}px;width:80px;background: #867c7c00;border-radius: 10px 0 0 10px;
            display:flex;flex-direction: column; justify-content: space-between;z-index:1000;`;
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='${adminDomain}${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();
}, data[data.length - 1].stop_time * 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上
setTimeout(function(){
  document.body.appendChild(div);
}, 2000);




/**
 * 提示框样式
 */
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;">${data[data.length - 1].copywriting}</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;
//     }
// }