js 原生插件 弹窗通知提醒 徽标

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_39517820/article/details/81457572

import oas from '../api/oas';
(function modal (option) {
  window.onload = function () {
    // 先检查登陆的人是否有此功能的权限
    let hasPromise = 'yyyyy';
    oas.get(hasPromise).then(res => {
      if (res.data) { // 有权限就执行此程序
        testHasSession();
        // 每10分钟运行一次
        setInterval(testHasSession, 60000);
      }
    });
    testHasSession();
    // 每10分钟运行一次
    setInterval(testHasSession, 6000);
    // 检查是否已经运行过，运行过就存有session
    function testHasSession () {
      // 首次加载检查是否已经存session
      let session = sessionStorage.time_modal;
      if (session) { // 若已经运行过,就请求数据
        newSession();
      } else { // 没运行过,先存session在
        let timeNow = Date.now();
        sessionStorage.time_modal = timeNow;
        ajax();
      }
    }
    // 刷新session
    function newSession () {
      let timeNow = Date.now();
      let timeold = sessionStorage.time_modal;
      // 现在的时间比session的时间超过10分钟就请求数据
      if (timeNow - timeold >= 6000) {
        // 刷新session
        sessionStorage.time_modal = timeNow;
        ajax();
      }
    }
    function ajax () {
      let url = 'xxxxxx';
      creatmodal(1);
      oas.get(url).then(res => {
        if (res.state == 200) {
          // 如果有未审核的数据就弹出窗口，把数据给模态框
          if (res.data) {
            creatmodal(res.data);
          }
        }
      });
    }
    /* js DOM */
    // 创建模态框
    function creatmodal (num) {
      let body = document.getElementsByTagName('body')[0];
      let hasMoadl = document.getElementById('modal_modal');
      let hasletterModal = document.getElementById('letter_modal');
      // 避免多个弹窗重叠
      if (hasMoadl) {
        body.removeChild(hasMoadl);
        body.removeChild(hasletterModal);
      }
      let wrap = document.createElement('div');
      wrap.setAttribute("id", "modal_modal");
      wrap.style.cssText = "position:fixed;top:50%;left:50%;margin-top:-100px;margin-left:-200px;width:400px;height:200px;background:white;color:white;";
      let title = document.createElement('div');
      title.style.cssText = 'background:#22a0d7;height:30px;line-height:30px;font-size:16px;text-indent:10px';
      // 关闭按钮
      let close = document.createElement('div');
      close.innerHTML = 'Χ';
      close.style.cssText = 'position:absolute;top:0;right:8px;font-size:20px;cursor:pointer;width:20px;height:30px;line-height:30px;text-align:center';
      close.onclick = () => {
        wrap.style.cssText += 'display:none';
      };
      // 缩小按钮
      let suoxiao = document.createElement('div');
      suoxiao.style.cssText = 'position:absolute;top:0;right:30px;font-size:16px;cursor:pointer;width:20px;height:30px;line-height:30px;text-align:center';
      suoxiao.innerHTML = "▬";
      // 提示框
      let tip = document.createElement('div');
      tip.style.cssText = 'height:170px;line-height:170px;color:black;text-align:center;font-size:18px;background:white;';
      let span1 = document.createElement('span');
      let span2 = document.createElement('span');
      span1.innerHTML = '你有';
      span2.innerHTML = '个退款需要审核';
      // 数字
      let btn = document.createElement('span');
      btn.style.cssText = 'color:#f66;font-size:20px;margin:0 10px 0;cursor:pointer;';
      btn.innerHTML = num;
      btn.onclick = function () {
        let url = 'baidu.com';
        window.open(url);
      };
      tip.appendChild(span1);
      tip.appendChild(btn);
      tip.appendChild(span2);
      title.innerText = '审核提醒';
      // 小浮窗
      let odiv = document.createElement('div');
      odiv.setAttribute("id", "letter_modal");
      odiv.style.cssText = 'position:absolute;width:60px;height:40px;right:0;top:200px;border-radius: 20px;background:#5cb85c;text-align:center;line-height:40px;color:red;cursor:pointer;box-shadow: 0 0 0 1px #fff;display:none;z-index:99999';
      odiv.innerHTML = `${num}`;
      odiv.onclick = function () {
        odiv.style.display = "none";
        wrap.style.display = 'block';
      };
      suoxiao.onclick = function () {
        wrap.style.display = 'none';
        odiv.style.display = "block";
      };
      wrap.appendChild(title);
      wrap.appendChild(close);
      wrap.appendChild(suoxiao);
      wrap.appendChild(tip);
      body.appendChild(wrap);
      body.appendChild(odiv);
    }
  };
})();