[edit][消息通知]

src/manifest.json

@@ -41,9 +41,6 @@
             "run_at": "document_idle",
             "js": [
                 "/js/content.js"
-            ],
-            "css": [
-                "/css/content.css"
             ]
         }
     ],

src/view/content/message/index.vue

@@ -1,35 +1,73 @@
 <template>
-    <div class="denet-message">
-        <!-- <template v-for="item in ">
-
-        </template> -->
-        <div class="denet-message-area" @click="clickItem()">
-            <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">
-                <img :src="require('@/assets/img/icon-message-close.png')" alt />
+    <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">
+                <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>
-        <div class="denet-message-area">
-            <img :src="require('@/assets/img/icon-message-win.png')" alt />
-            <span>Congratulations! You won <b class="denet-message-money">23.6 USDT</b> from jerryWang's giveaway!
-                🎉</span>
-            <div class="denet-message-close">
-                <img :src="require('@/assets/img/icon-message-close.png')" alt />
+            <div class="denet-message-area" @click="clickItem(item)" v-if="item.type == 2 && item.show">
+                <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>
+                <div class="denet-message-close" @click="clickClose(item)">
+                    <img :src="require('@/assets/img/icon-message-close.png')" alt />
+                </div>
             </div>
-        </div>
+        </template>
     </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:[]
+    list: [
+        {
+            id: 0,
+            bizType: 1, // 1.中奖 2.未中奖
+            show: true,
+        }
+    ],
+    // 过5秒已读消息记录
+    read_list: []
 })
 
 onMounted(() => {
-
+    overTimeClose([])
 })
-const clickItem = () => {
+
+// 过5秒消失逻辑
+const overTimeClose = (list) => {
+    list.forEach((item) => {
+        state.read_list.push(item.id)
+    })
+    setTimeout(() => {
+        state.list.forEach(item => {
+            // 所有的数据全部清除掉
+
+            // 请求已读接口
+
+        })
+    }, 5000)
+}
+
+const clickClose = (item) => {
+    // 通知已读
+    // for(let i in state.list){
+    //     if(state.list[i].id == item.id){
+
+    //     }
+    // }
+    item.show = false
+}
+
+const clickItem = (item) => {
+    // 跳转详情页
+
     chrome.runtime.sendMessage({
         actionType: "CONTENT_HTTP_NET_WORK",
         funcName: '通知已读',
@@ -40,18 +78,27 @@ const clickItem = () => {
             }
         }
     });
+
 }
 
 chrome.runtime.onMessage.addListener((req, sender, sendResponse) => {
-
     if (req.actionType == 'CONTENT_HTTP_NET_WORK') {
         switch (req.funcName) {
             case '通知已读':
                 break
         }
     } else if (req.actionType == 'BACK_未读消息') {
-
-        console.log('req.data',req)
+        let data = []
+        if (req.data.code == 0) {
+            data = req.data.data
+        }
+        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>
@@ -64,6 +111,7 @@ chrome.runtime.onMessage.addListener((req, sender, sendResponse) => {
     top: 0;
     right: 0;
     width: 500px;
+    z-index: 9999;
 
     &-area {
         width: 344px;