[edit][消息通知]

src/entry/background.js

@@ -31,7 +31,7 @@ import {
 } from "@/logic/background/facebook";
 
 setInterval(() => {
-    getLuckMessage()    
+    getLuckMessage()
 }, 5000);
 
 //加载bg.js 执行
@@ -154,7 +154,7 @@ function onMessageMethod(req, sender, sendResponse) {
                 nftTxtPublish(req.data, sender)
                 break
             case 'CONTENT_HTTP_NET_WORK':
-                httpNetWork(req.data, sender, sendResponse)
+                httpNetWork(req.funcName, req.data, sender, sendResponse)
                 break
         }
     }

src/entry/content_help.js

@@ -41,8 +41,5 @@ chrome.runtime.onMessage.addListener((req, sender, sendResponse) => {
         case 'BG_INJECT_EXTENSION_POPUP':
             tiggerInjectPopupPage();
             break
-        case 'CONTENT_HTTP_NET_WORK':
-            httpNetWork(req.funcName, req.data, sender, sendResponse)
-            break
     }
 })

src/logic/background/help.js

@@ -29,7 +29,7 @@ export const setContentMessage = (data) => {
             let tab = tabs.filter((item) => { return item.active == true }) || []
             if (tab.length) {
                 // 未读消息
-                chrome.tabs.sendMessage(tab[0].id, { actionType: 'BACK_未读消息', data });
+                chrome.tabs.sendMessage(tab[0].id, { actionType: 'BACK_UNREAD_MESSAGE', data });
             }
         }
     })

src/view/content/message/index.vue

@@ -1,17 +1,17 @@
 <template>
     <div class="denet-message" v-show="state.list.length > 0">
         <template v-for="item in state.list">
-            <div class="denet-message-area" @click="clickItem(item)" v-if="item.type == 1 && item.show">
+            <div class="denet-message-area" @click="clickItem(item)" v-if="item.bizType == 2">
                 <img :src="require('@/assets/img/icon-message-fail.png')" alt />
                 <span>You were not selected from jerryWang's giveaway... click to see more giveaway!</span>
                 <div class="denet-message-close" @click="clickClose(item)">
                     <img :src="require('@/assets/img/icon-message-close.png')" alt />
                 </div>
             </div>
-            <div class="denet-message-area" @click="clickItem(item)" v-if="item.type == 2 && item.show">
+            <div class="denet-message-area" @click="clickItem(item)" v-if="item.bizType == 1">
                 <img :src="require('@/assets/img/icon-message-win.png')" alt />
-                <span>Congratulations! You won <b class="denet-message-money">{{ item.data.lotteryMoney }}
-                        {{ item.data.lotteryTokenSymbol }}</b> from jerryWang's giveaway!
+                <span>Congratulations! You won <b class="denet-message-money">{{ item.bizData.lotteryMoney }}
+                        {{ item.bizData.lotteryTokenSymbol }}</b> from jerryWang's giveaway!
                     🎉</span>
                 <div class="denet-message-close" @click="clickClose(item)">
                     <img :src="require('@/assets/img/icon-message-close.png')" alt />
@@ -21,84 +21,65 @@
     </div>
 </template>
 <script setup>
-import { json } from "body-parser";
 import { onMounted, reactive } from "vue";
-import { escapeJsonPointer } from "_ajv@8.11.0@ajv/dist/compile/util";
 let state = reactive({
-    list: [
-        {
-            id: 0,
-            bizType: 1, // 1.中奖 2.未中奖
-            show: true,
-        }
-    ],
-    // 过5秒已读消息记录
-    read_list: []
-})
-
-onMounted(() => {
-    overTimeClose([])
+    list: [],
 })
 
 // 过5秒消失逻辑
-const overTimeClose = (list) => {
-    list.forEach((item) => {
-        state.read_list.push(item.id)
-    })
+const overTimeClose = () => {
     setTimeout(() => {
-        state.list.forEach(item => {
-            // 所有的数据全部清除掉
-
-            // 请求已读接口
-
-        })
+        let now_time = new Date().getTime()
+        for (let i in state.list) {
+            if ((now_time - state.list[i].read_time) > 4500) {
+                state.list.splice(i, 1)
+            }
+        }
     }, 5000)
 }
 
 const clickClose = (item) => {
     // 通知已读
-    // for(let i in state.list){
-    //     if(state.list[i].id == item.id){
-
-    //     }
-    // }
-    item.show = false
+    for (let i in state.list) {
+        if (item.id == state.list[i].id) {
+            state.list.splice(i, 1)
+        }
+    }
 }
 
 const clickItem = (item) => {
     // 跳转详情页
+    window.open(`https://twitter.com/${item.bizData.twitterAccount}/status/${item.bizData.twitterId}`)
+}
 
+// 读取消息
+const readMessage = (id = 0) => {
     chrome.runtime.sendMessage({
         actionType: "CONTENT_HTTP_NET_WORK",
         funcName: '通知已读',
         data: {
             url: '/notice/read',
             params: {
-                noticeId: 0
+                noticeId: id
             }
         }
     });
-
 }
 
 chrome.runtime.onMessage.addListener((req, sender, sendResponse) => {
-    if (req.actionType == 'CONTENT_HTTP_NET_WORK') {
-        switch (req.funcName) {
-            case '通知已读':
-                break
-        }
-    } else if (req.actionType == 'BACK_未读消息') {
-        let data = []
-        if (req.data.code == 0) {
-            data = req.data.data
+    if (req.actionType == 'BACK_UNREAD_MESSAGE') {
+        let data = req.data.data || []
+        if (req.data.code == 0 && data.length > 0) {
+            data.forEach((item) => {
+                if (state.list.filter((filter_item) => { return filter_item.id == item.id }).length == 0) {
+                    item.bizData = JSON.parse(item.bizData)
+                    item.read_time = new Date().getTime()
+                    state.list.push(item)
+                }
+                readMessage(item.id)
+            })
+            overTimeClose()
         }
-        data.forEach((item) => {
-            if (state.list.filter((filter_item) => { return filter_item == item.id }).length == 0) {
-                item.bizData = JSON.parse(item.bizData)
-                state.list.push(item)
-            }
-        })
-        console.log('state.list', state.list)
     }
 })
 </script>