1. 程式人生 > >js 原生外掛 彈窗通知提醒 徽標

js 原生外掛 彈窗通知提醒 徽標


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);
    }
  };
})();