js 原生外掛 彈窗通知提醒 徽標
阿新 • • 發佈:2018-12-27
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); } }; })();