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" :key="item.createTimestamp">
            <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 {{item.bizData.twitterAccount}}'s 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"> {{getPrize(item.bizData)}}</b> from {{item.bizData.twitterAccount}}'s giveaway!🎉</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 == 3">
                <img :src="item.bizData.icon" alt />
                <span>{{ item.bizData.text }}</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";
import { RewardType } from '@/types';
let state = reactive({
    list: [],
})
let timer, now_time

// 获取奖励
const getPrize = (item) => { 
    const { lotteryMoney, lotteryTokenSymbol, twitterAccount, rewardType, customizedReward } = item;
    if (rewardType === RewardType.custom) {
        return customizedReward;
    } else {
        return `${item.bizData.lotteryMoney} ${item.bizData.lotteryTokenSymbol}` 
    }
}

// 过5秒消失逻辑
const overTimeClose = () => {
    if (timer) {
        return
    }
    timer = setInterval(() => {
        if (state.list.length == 0) {
            clearInterval(timer)
            timer = null
        }
        now_time = new Date().getTime()
        for (let i in state.list) {
            if ((now_time - state.list[i].read_time) >= 5000) {
                state.list.splice(i, 1)
            }
        }
    }, 1000)
}

const clickClose = (item) => {
    // 通知已读
    for (let i in state.list) {
        if (item.id == state.list[i].id) {
            state.list.splice(i, 1)
        }
    }
}

const clickItem = (item) => {
    switch (String(item.bizType)) {
        case '1':
            // 跳转详情页
            window.open(`https://twitter.com/${item.bizData.twitterAccount}/status/${item.bizData.twitterId}`)
            break;
        case '2':
            window.open('https://twitter.com/search?q=%23DeNet&src=typed_query')
            break;
        case '3':
            // 自定义消息
            window.open(item.bizData.jumpUrl)
            break
    }
}

// 读取消息
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 || []
        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" >
#denet_message{
    text-align: left;
}
.denet-message {
    position: fixed;
    max-height: 100%;
    overflow: hidden;
    top: 0;
    right: 0;
    width: 500px;
    z-index: 9999;    
    text-align: left;

    &-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;
        animation: right_to_left 1s;
        text-align: left;
        
        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;
        }
    }
}

@keyframes right_to_left {
    0% {
        right: -400px;
    }

    100% {
        right: 0;
    }
}
</style>