de-net/src/view/content/message/index.vue

<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.bizType == 2">
                <img :src="require('@/assets/img/icon-message-fail.png')" alt />
                <span>You were not selected from the giveaway events... Click to see more giveaways!</span>
                <div class="denet-message-close" @click.stop="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.bizType == 1">
                <img :src="require('@/assets/img/icon-message-win.png')" alt />
                <span>Congratulations! You won <b class="denet-message-money">{{ item.bizData.lotteryMoney }}
                        {{ item.bizData.lotteryTokenSymbol }}</b> from the giveaway!🎉</span>
                <div class="denet-message-close" @click.stop="clickClose(item)">
                    <img :src="require('@/assets/img/icon-message-close.png')" alt />
                </div>
            </div>
        </template>
    </div>
</template>
<script setup>
import { onMounted, reactive } from "vue";
let state = reactive({
    list: [],
})

// 过5秒消失逻辑
const overTimeClose = () => {
    setTimeout(() => {
        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 (item.id == state.list[i].id) {
            state.list.splice(i, 1)
        }
    }
}

const clickItem = (item) => {
    if (item.bizType == 1) {
        // 跳转详情页
        window.open(`https://twitter.com/${item.bizData.twitterAccount}/status/${item.bizData.twitterId}`)
    } else {
        window.open('https://twitter.com/search?q=%23DeNet&src=typed_query')
    }
}

// 读取消息
const readMessage = (id = 0) => {
    chrome.runtime.sendMessage({
        actionType: "CONTENT_HTTP_NET_WORK",
        funcName: '通知已读',
        data: {
            url: '/notice/read',
            params: {
                noticeId: id
            }
        }
    });
}

chrome.runtime.onMessage.addListener((req, sender, sendResponse) => {
    if (req.actionType == 'BACK_UNREAD_MESSAGE') {
        let data = req.data.data || []
        console.log('BACK_UNREAD_MESSAGE', 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()
        }
    }
})
</script>

<style lang="scss" scoped>
.denet-message {
    position: fixed;
    max-height: 100%;
    overflow: hidden;
    top: 0;
    right: 0;
    width: 500px;
    z-index: 9999;

    &-area {
        width: 344px;
        background: #FFFFFF;
        border-radius: 15px;
        min-height: 72px;
        position: relative;
        margin-top: 22px;
        display: flex;
        cursor: pointer;
        filter: drop-shadow(0px 5px 20px rgba(0, 0, 0, 0.22));
        margin-left: 129px;

        img:first-child {
            width: 40px;
            height: 40px;
            margin: 16px 14px 0 16px;
        }

        span {
            padding: 14px 26px 14px 0;
            font-style: normal;
            font-weight: 500;
            font-size: 14px;
            line-height: 20px;
        }

        .denet-message-money {
            color: #3D7CB4;
        }
    }

    &-area:last-child {
        margin-bottom: 50px;
    }

    &-close {
        border-radius: 100px;
        width: 24px;
        height: 24px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #F2F2F2;
        position: absolute;
        right: -10px;
        top: -10px;
        filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.12));
        cursor: pointer;

        img:first-child {
            height: 10px;
            width: 10px;
            margin: 0;
        }
    }
}
</style>