de-net/src/view/popup/components/tabbar.vue

<template>
    <div class="tab-bar-wrappeer">
        <template
            v-for="(item, index) in tabbarData"
            :key="index">
            <div class="tab-item" 
                 v-if="item.path != '/NFT' || item.path == '/NFT' && showNFTTab"
                 @click="tabbarHandler(item, index)">
                    <red-dot class="red-dots"
                        v-if="unReadCountTask > 0 && item.path == '/message' && currentTab.path != '/message'"
                        ></red-dot>
                    <img
                        :src="
                            index == currentTab.index
                                ? item.iconActive
                                : item.iconInActive
                        "
                    />
                    <div
                        class="text"
                        :class="{ 'active-tab': index == currentTab.index }"
                    >
                        {{ item.name }}
                    </div>
            </div>
        </template>
    </div>
</template>

<script setup>
import { ref, onMounted, defineProps, defineEmits, nextTick, watch, onBeforeUnmount } from "vue";

import redDot from "@/view/components/red-dot.vue";
import router from "@/router/popup.js";
import { setBadgeInfo, hideBadge } from "@/logic/background/twitter";


import { nftListMine } from "@/http/nft.js";
import { getAllMessageInfo } from "@/http/messageApi"
import { getChromeStorage } from "@/uilts/chromeExtension";


const props = defineProps({
    userInfo: {
        type: Object,
        default: () => {
            return {
                accessToken: undefined,
            };
        }
    },
});

watch(
    () => props.userInfo,
    (newVal) => {
        getNFTListMine();
        setMessageCount();
    },
    {
        deep: true
    }
);


let currentTab = ref({
    index: 0,
    path: '/'
});

let unReadCountTask = ref(0);
let showNFTTab = ref(true);

let tabbarData = ref([
    {
        name: "Wallet",
        path: "/",
        iconActive: require("@/assets/svg/icon-tab-wallet-active.svg"),
        iconInActive: require("@/assets/svg/icon-tab-wallet.svg"),
    },
    {
        name: "NFTs",
        path: "/NFT",
        iconActive: require("@/assets/svg/icon-tab-NFT-active.svg"),
        iconInActive: require("@/assets/svg/icon-tab-NFT.svg"),
    },
    {
        name: "Message",
        path: "/message",
        iconActive: require("@/assets/svg/icon-tab-message-active.svg"),
        iconInActive: require("@/assets/svg/icon-tab-message.svg"),
    },
    {
        name: "More",
        path: "/more",
        iconActive: require("@/assets/svg/icon-tab-more-active.svg"),
        iconInActive: require("@/assets/svg/icon-tab-more.svg"),
    },
]);

let NFTReqParams = {
    params: {
        pageNum: 1,
        pageSize: 20,
    },
};

const emits = defineEmits(["tabbarClick"]);

const tabbarHandler = (params, index) => {
    unReadCountTask.value = 0;
    setMessageCount();
    currentTab.value.index = index;
    currentTab.value.path = params.path;
    router.push(params.path);
    emits("tabbarClick", params);
};

const setActiveTab = () => {
    nextTick(() => {
        let path = router.currentRoute.value.path;
        let list = tabbarData.value;
        for (let i = 0; i < list.length; i++) {
            if (path == list[i].path) {
                currentTab.value.index = i;
                currentTab.value.path = path;
                break;
            }
        }
    })
};

const getNFTListMine = (params = {}) => {
    if(!props.userInfo.accessToken && !params.accessToken) return;
    nftListMine({
        params: NFTReqParams.params,
    }).then((res) => {
        if (res.data && res.data.length) {
            showNFTTab.value = true;
        } else {
            showNFTTab.value = false;
        }
    });
};


const setMessageCount = () => {
    if(!props.userInfo.accessToken) return;
    getAllMessageInfo({params: {
    }}).then(res => {
        if(res.code == 0) {
            let {unReadCountTotal = 0, unReadCountWalletDetail = 0, unReadCountTaskLuckdrop = 0} = res.data;
            unReadCountTask.value = unReadCountTaskLuckdrop;
            if(unReadCountTotal > 0) {
                let text = unReadCountTotal > 99 ? '99+' : unReadCountTotal+'';
                setBadgeInfo({data: {text}});
            } else {
                hideBadge();
            }
        }
    });
}


const onMessage = () => {
    chrome.runtime.onMessage.addListener(msgListener)
}

const msgListener = (req, sender, sendResponse) => {
    sendResponse('');
    switch (req.actionType) {
        case 'CONTENT_POPUP_PAGE_SHOW':
            init();
            getNFTListMine();
            break;
    }
}

const init = () => {
    setActiveTab();
    setMessageCount();
}


const onPageVisbile = () => {
    document.addEventListener('visibilitychange', function () {
        let isHidden = document.hidden;
        if (!isHidden) {
            setTimeout(() => {
                getUserInfo((res) => {
                    getNFTListMine(res);
                })
            }, 1200);
        }
    });
}

const getUserInfo = (cb) => {
    getChromeStorage("userInfo", (res) => {
        cb && cb(res || {});
    });
};

onMounted(() => {
    onMessage();
    init();
});

onBeforeUnmount(() => {
    chrome.runtime.onMessage.removeListener(msgListener);
})
</script>

<style scoped lang="scss">
.tab-bar-wrappeer {
    background: #ffffff;
    box-shadow: inset 0px 1px 0px #ececec;
    width: 100%;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;

    position: absolute;
    z-index: 1000;
    bottom: 0px;

    cursor: pointer;

        .tab-item {
            flex: 1;
            text-align: center;
            position: relative;

            .text {
                font-size: 12px;
                color: #c0c0c0;
            }

            .active-tab {
                color: #1d9bf0 !important;
                font-weight: 500;
            }

            .red-dots {
                position: absolute;
                right: 32%;
                top: 0px;
            }
        }
    
}
</style>