no message

src/router/popup.js

@@ -1,9 +1,10 @@
 /* eslint-disable */
 import { createRouter, createWebHashHistory, createWebHistory } from "vue-router"
-import Home from '@/view/popup/popup.vue'
-import Nft  from '@/view/popup/nft/index.vue'
-import Message from '@/view/popup/message/index.vue'
-import More from '@/view/popup/more/index.vue'
+import Tabcontent from '@/view/popup/tabbar-page/index.vue'
+import Home from '@/view/popup/tabbar-page/wallter/popup.vue'
+import Nft  from '@/view/popup/tabbar-page/nft/index.vue'
+import Message from '@/view/popup/tabbar-page/message/index.vue'
+import More from '@/view/popup/tabbar-page/more/index.vue'
 
 import Withdraw from '@/view/popup/withdraw/index.vue'
 import WithdrawInfo from '@/view/popup/withdraw/info.vue'
@@ -21,24 +22,31 @@ import TopUpHome from '@/view/popup/top-up/home.vue'
 // 2. 定义路由配置
 const routes = [
     {
-        path: "/",
-        name: 'home',
-        component: Home
-    },
-    {
-        path: "/nft",
-        name: 'nft',
-        component: Nft
-    },
-    {
-        path: "/message",
-        name: 'message',
-        component: Message
-    },
-    {
-        path: "/more",
-        name: 'more',
-        component: More
+        path: '/',
+        name: 'tabcontent',
+        component: Tabcontent,
+        children: [
+            {
+                path: "",
+                name: 'home',
+                component: Home
+            },
+            {
+                path: "nft",
+                name: 'nft',
+                component: Nft
+            },
+            {
+                path: "message",
+                name: 'message',
+                component: Message
+            },
+            {
+                path: "more",
+                name: 'more',
+                component: More
+            },
+        ]
     },
     {
         path: '/withdraw',
@@ -101,7 +109,6 @@ const routes = [
         name: 'Transactions',
         component: Transactions
     }
-
 ]
 
 

src/view/iframe/home/home.vue

@@ -39,6 +39,7 @@ onMounted(() => {
         box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.2);
         border-radius: 15px;
         position: relative;
+        overflow-y: auto;
     }
 }
 /deep/ .page-wrapper {

src/view/iframe/publish/components/follow-input.vue

@@ -307,7 +307,7 @@ const onUserMouseLeave = (params, index) => {
                 max-height: 430px;
                 position: absolute;
                 box-shadow: 0px 4px 20px 0px #0000004D;
-                overflow-y: scroll;
+                overflow-y: auto;
                 background-color: #fff; 
                 top: 30px;
                 left: -150px;

src/view/iframe/publish/components/top-up.vue

@@ -153,7 +153,7 @@ onMounted(() => {
     position: relative;
     .content-wrapper {
         height: calc(100% - 60px);
-        overflow-y: scroll;
+        overflow-y: auto;
         .top {
             width: 100%;
             display: flex;

src/view/iframe/publish/give-dialog.vue

@@ -1619,7 +1619,7 @@ onMounted(() => {
                 box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.3);
                 background-color: #fff;
                 border-radius: 20px;
-                overflow-y: scroll;
+                overflow-y: auto;
             }
 
             .left,
@@ -1660,7 +1660,7 @@ onMounted(() => {
                 .form-wrapper {
                     padding: 0px 18px 18px 18px;
                     height: calc(100% - 80px);
-                    overflow-y: scroll;
+                    overflow-y: auto;
                     overflow-x: hidden;
                     box-sizing: border-box;
 

src/view/popup/components/tabbar.vue

@@ -0,0 +1,97 @@
+<template>
+    <div class="tab-bar-wrappeer">
+        <div class="tab-bar-item"
+            v-for="(item,index) in tabbarData" 
+            :key="index"
+            @click="tabbarHandler(item, index)">
+            <img src="" alt="">
+            <div class="text"  :class="{'active-tab': index == currentTab.index}">
+                {{item.name}}
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted, defineEmits } from "vue";
+
+import router from "@/router/popup.js";
+
+let currentTab = ref({
+    index: 0
+})
+
+let tabbarData = ref([
+    {
+        name:  'Wallet',
+        path: '/',
+        iconActive: '',
+        iconInActive: ''
+    },
+    {
+        name:  'NFTs',
+        path: '/nft',
+        iconActive: '',
+        iconInActive: ''
+    },
+    {
+        name:  'Message',
+        path: '/message',
+        iconActive: '',
+        iconInActive: ''
+    },
+    {
+        name:  'More',
+        path: '/more',
+        iconActive: '',
+        iconInActive: ''
+    }
+])
+
+const emits = defineEmits(['tabbarClick']);
+
+
+const tabbarHandler  = (params, index)  => {
+    currentTab.value.index = index;
+    router.push(params.path);
+    emits("tabbarClick", params);
+}
+
+onMounted(() => {
+})
+
+</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-bar-item {
+        flex: 1;    
+        text-align: center;
+
+        .text {
+            font-weight: 500;
+            font-size: 12px;
+            color: #C0C0C0;
+        }
+
+        .active-tab {
+            color: #1D9BF0 !important;
+        }
+    }
+}
+</style>

src/view/popup/components/top-bar.vue

@@ -0,0 +1,63 @@
+<template>
+    <div class="top-bar-wrapper" :style="{background: bgColor, boxShadow: boxShadow}">
+        <div class="left">
+            <img :src="userInfo.avatarUrl" class="icon-avatar">
+            <span class="nick-name" :style="{color: color}">{{userInfo.nickName}}</span>
+        </div>
+        <div>
+            <img :src="require('@/assets/svg/icon-denet-logo.svg')" />
+        </div>
+    </div>
+</template>
+
+<script setup>
+import {defineProps} from 'vue';
+
+defineProps({
+    userInfo: {
+        type: Object,
+        default: () => {
+            return {};
+        }
+    },
+    bgColor: {
+        type: String,
+        default: '#fff'
+    },
+    boxShadow: {
+        type: String,
+        default: 'none'
+    },
+    color: {
+        type: String,
+        default: '#fff'
+    }
+})
+</script>
+
+<style scoped lang='scss'>
+.top-bar-wrapper {
+    width: 100%;
+    height: 48px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 12px 16px;
+    box-sizing: border-box;
+
+    .left {
+        display: flex;
+        align-items: center;
+        .icon-avatar {
+            width: 24px;
+            height: 24px;
+            margin-right: 8px;
+            border-radius: 50%;
+        }
+        .nick-name {
+            font-weight: 500;
+            font-size: 14px;
+        }
+    }
+}
+</style>

src/view/popup/message/index.vue

@@ -1,15 +0,0 @@
-<template>
-    <div>
-msg
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted, inject } from "vue";
-
-</script>
-
-
-<style scoped lang="scss">
-
-</style>

src/view/popup/more/index.vue

@@ -1,15 +0,0 @@
-<template>
-    <div>
-more
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted, inject } from "vue";
-
-</script>
-
-
-<style scoped lang="scss">
-
-</style>

src/view/popup/nft/index.vue

@@ -1,15 +0,0 @@
-<template>
-    <div>
-more
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted, inject } from "vue";
-
-</script>
-
-
-<style scoped lang="scss">
-
-</style>

src/view/popup/popup.vue

@@ -1,1028 +0,0 @@
-<template>
-    <global-tip :type="'3'"></global-tip>
-    <div class="page-wrapper" ref="pageWrapperDom" @scroll="pageScroll">
-        <template v-if="isLogin && homeVisibility">
-            <v-head :show_more="true" :show_state="'home'" :user_info="userInfo"></v-head>
-            <div class="content">
-                <div class="balance">
-                    <div class="wallet">
-                        <img :src="require('@/assets/svg/icon-home-wallet.svg')" />
-                        <font>Balance Valuation</font>
-                    </div>
-                    <div class="bill" @click="showTransactions">
-                        <red-dot class="red-dot" v-if="unReadCountWallet > 0"></red-dot>
-                        <img :src="require('@/assets/svg/icon-home-bill.svg')" />
-                    </div>
-                </div>
-                <div class="amount">
-                    <a-tooltip :title="'$'+canWithdrawBalance">
-                        ${{ getBit(canWithdrawBalance) }}
-                    </a-tooltip>
-                </div>
-                <div class="area-btn">
-                    <div class="withdraw-btn" @click="clickWithdraw">Withdraw</div>
-                    <div class="top-up-btn" @click="clickTopUp">Deposit</div>
-                </div>
-            </div>
-
-            <div class="tab-bar">
-                <div class="tab-item" 
-                    :class="{ active: currentTabIndex == index }" 
-                    v-for="(item, index) in tabList"
-                    :key="index" 
-                    @click="clickTab(item, index)">
-                    <img :src="item.icon" class="icon" />
-                    {{ item.label }}
-                </div>
-            </div>
-            <div class="list-wrapper" ref="pageGiveListDom">
-                <div class="give-list" v-if="currentTabIndex == 0">
-                    <template v-if="giveList.length">
-                        <div class="cell" 
-                            :class="{'cell-center': item.type == 1}"
-                            v-for="(item, index) in giveList" 
-                            :key="index"
-                            @click="clickListItem(item, index)">
-
-                            <red-dot class="red-dots"
-                                v-if="item.unReadMsgCount > 0 && isReadMsg"></red-dot>
-
-                            <div class="img-wrapper">
-                                <!-- 收到红包 -->
-                                <template v-if="item.type == 1">
-                                    <img class="icon-avatar" :src="item.userInfo.avatarUrl" />
-                                    <img class="icon-give" :src="
-                                        require('@/assets/svg/icon-giveaways.svg')
-                                    " />
-                                </template>
-                                <!-- 发出去红包 -->
-                                <template v-else-if="2">
-                                    <img 
-                                        class="icon-big-give"
-                                        :src="
-                                        require('@/assets/svg/icon-list-big-give.svg')
-                                    " />
-                                </template>
-                            </div>
-                            <div class="info-wrapper"
-                                :class="{'info-center': item.type == 1}">
-                                <div class="left">
-                                    <div class="nickname">
-                                        {{
-                                                item.type == 1
-                                                    ? item.userInfo.nickName
-                                                    : "Giveaways"
-                                        }}
-                                    </div>
-                                    <div class="time">
-                                        {{
-                                                moment(item.timestamp).format(
-                                                    "MM-DD HH:mm:ss"
-                                                )
-                                        }}
-                                    </div>
-                                </div>
-                                <div class="right">
-                                    <div class="msg">
-                                        <div class="bold" 
-                                            :class="{'align-content': (item.type == 2 || (item.type == 1 && item.status == 1)) && 
-                                                                        item.amount.length + item.currencySymbol.length > 12 }">
-                                            <!-- 收到的 -->
-                                            <template v-if="item.type == 1">
-                                                <!-- 进行中-->
-                                                <template v-if="item.status == 0">
-                                                    in progress
-                                                </template>
-                                                <!-- 已完成 -->
-                                                <template v-else-if="item.status == 1">
-                                                    <span class="blance">
-                                                        <a-tooltip :title="item.amount">
-                                                            {{ getBit(item.amount) }}</a-tooltip>
-                                                    </span>
-                                                    <div class="coin-type-wrapper">
-                                                        <span class="coin-type">{{ item.currencySymbol || '' }}</span>
-                                                        <img :src="item.currencyIconPath" alt="">
-                                                    </div>
-                                                </template>
-                                                <!-- 已过期 -->
-                                                <template v-else-if="item.status == 2">
-                                                    Timeout
-                                                </template>
-                                            </template>
-                                            <!-- 发出去的 -->
-                                            <template v-else-if="item.type == 2">
-                                                <span class="blance">
-                                                    <a-tooltip :title="'-' + item.amount">
-                                                        -{{ getBit(item.amount) }}
-                                                    </a-tooltip>
-                                                </span>
-                                                <div class="coin-type-wrapper">
-                                                    <span class="coin-type">{{ item.currencySymbol || '' }}</span>
-                                                    <img :src="item.currencyIconPath" alt="">   
-                                                </div>
-                                            </template>
-                                        </div>
-                                        <!-- 发出的红包显示 -->
-                                        <div class="desc" v-if="item.type == 2">
-                                            <!-- 未发送-->
-                                            <template v-if="item.postTaskLuckdrop.reSendAvailable">
-                                                Unpublished
-                                            </template>
-                                            <!-- 进行中 -->
-                                            <template v-else-if="item.status == 1">
-                                                {{item.postTaskLuckdrop.receivedCount}}/{{item.postTaskLuckdrop.totalCount}}
-                                            </template>
-                                            <!-- 2:已结束; 3:提前终止-->
-                                            <template v-else-if="item.status == 2 || item.status == 3">
-                                                ({{item.status == 2 ? 'Time expired' : 'Termination'}})
-                                                {{
-                                                        item.postTaskLuckdrop
-                                                            .receivedCount
-                                                }}/{{
-                                                        item.postTaskLuckdrop
-                                                            .totalCount
-                                                }}
-                                            </template>
-                                            <!-- 红包提前终止/退款（进行中）显示-->
-                                            <template v-if="item.status == 4">
-                                                Terminating
-                                            </template>
-
-                                            <!-- 进行中或者未发送成功时显示 
-                                                v-if="item.status == 1 || item.postTaskLuckdrop.reSendAvailable"-->
-                                            <div  class="desc-bottom-bar">
-                                                <!-- 没有终止红包时显示 -->
-                                                <div v-if="item.postTaskLuckdrop.terminatedAvailable"
-                                                    class="btn"
-                                                    @click.stop="terminaHandler(item, index)">
-                                                    Termination
-                                                </div>
-                                                
-                                                <!-- 红包未发出显示 -->
-                                                <div class="btn send-btn"
-                                                    v-if="item.postTaskLuckdrop.reSendAvailable"       
-                                                    @click.stop="sendTwitter(item)">
-                                                    Send
-                                                </div>
-                                                <div v-else-if="item.srcContentId"
-                                                    class="btn detail-btn"
-                                                    @click.stop="clickListItem(item, index)">details</div>
-                                            </div>
-                                        </div>
-                                    </div>
-                                    <!-- 发红包—— 未发出、进行中 隐藏 -->
-                                    <img v-if="item.type != 2" 
-                                        class="icon" 
-                                        :src="require('@/assets/svg/icon-cell-arrow-right.svg')" />
-                                </div>
-                            </div>
-                        </div>
-                    </template>
-                    <template v-else>
-                        <img class="icon-empty" :src="require('@/assets/svg/icon-empty-list.svg')" />
-                    </template>
-                </div>
-                <div class="more-list" v-else>
-                    <div class="cell" 
-                    v-for="(item, index) in moreTabList" 
-                    :key="index"
-                    @click="moreItemHandle(item)">
-                        <img class="icon" :src="item.icon" />
-                        <div class="info-wrapper">
-                            <div class="left">
-                                {{ item.label }}
-                            </div>
-                            <div class="right">
-                                <img class="icon" :src="
-                                    require('@/assets/svg/icon-cell-arrow-right.svg')
-                                " />
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </template>
-        <!-- login -->
-        <popup-login v-if="!isLogin" @loginAction="loginAction" />
-        <template v-if="isLogin && !homeVisibility">
-            <!-- 交易列表 -->
-            <popup-transactions v-if="transactionsVisibility" @back="transactionsBack" />
-            <!-- 提现页 -->
-            <popup-withdraw :amountValue="canWithdrawBalance" :walletWithdrawConfig="walletWithdrawConfig"
-                v-if="withdrawVisibility" @back="withdrawBack" />
-        </template>
-        <modal :visible="modalVisible"   
-            title="Early termination of Giveaway?"
-            content="The remaining amount will be returned to your wallet within 1 day."
-            cancelText="Termination"
-            confirmText="Cancel"
-            @cancel="modalCancel"
-            @confirm="modalConfirm" />
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted, inject } from "vue";
-
-import popupLogin from "@/view/popup/components/login.vue";
-import popupTransactions from "@/view/components/popup-transactions";
-import popupWithdraw from "@/view/components/popup-withdraw.vue";
-import redDot from "@/view/components/red-dot.vue";
-import modal from "@/view/popup/components/modal.vue";
-
-import {
-    getChromeStorage,
-} from "@/uilts/chromeExtension";
-import { getBalance, getMineLuckdropRecords } from "@/http/account";
-import { readAllMsgByType, getAllMessageInfo } from "@/http/messageApi"
-import { terminatedLuckdrop } from "@/http/redPacket";
-import { setBadgeInfo, hideBadge } from "@/logic/background/twitter";
-import Report from "@/log-center/log";
-import router from "@/router/popup.js";
-import { getBit } from "@/uilts/help";
-import  GlobalTip  from '@/view/components/global-tip.vue'
-
-import VHead from '@/view/popup/components/head.vue';
-
-
-let withdraw_info = inject('withdraw_info')
-withdraw_info.paypal = {}
-
-var moment = require("moment");
-
-let pageWrapperDom = ref(null);
-let pageGiveListDom = ref(null);
-
-let isLogin = ref(false);
-let homeVisibility = ref(false);
-let transactionsVisibility = ref(false);
-let withdrawVisibility = ref(false);
-let modalVisible = ref(false);
-
-let terminaTask = {};
-
-let userInfo = ref({});
-let canWithdrawBalance = ref(0);
-withdraw_info.paypal.amount_value = canWithdrawBalance
-withdraw_info.balance = 0
-
-let isRequestWithdrawBalance = ref(false);
-
-let currentTabIndex = ref(0);
-let giveList = ref([]);
-
-// 钱包未读数
-let unReadCountWallet = ref(0);
-let isReadMsg = ref(true);
-
-let giveReqParams = {
-    params: {
-        pageNum: 1,
-        pageSize: 10,
-    },
-    loadMore: false,
-};
-
-
-let walletWithdrawConfig = ref({
-    withdrawUSDPaypalFee: 0,
-    withdrawUSDPreMinAmount: 100,
-    withdrawUSDSwitch: "",
-    withdrawUSDPaypalFeeDesc: ''
-});
-withdraw_info.paypal.wallet_withdraw_config = walletWithdrawConfig
-
-
-let moreTabList = ref([
-    {
-        icon: require("@/assets/svg/icon-website.svg"),
-        label: "Website",
-        href: 'https://denet.me'
-    },
-    {
-        icon: require("@/assets/svg/icon-twitter.svg"),
-        label: "Twitter",
-        href: 'https://twitter.com/denet2022'
-    },
-    {
-        icon: require("@/assets/svg/icon-discord.svg"),
-        label: "Discord",
-        href: 'https://discord.gg/wZSz9p8ddG'
-    }
-    // , {
-    //     icon: require("@/assets/svg/icon-telegram.svg"),
-    //     label: "Telegram",
-    //     href: 'https://t.me/denetpro'
-    // }
-]);
-
-let tabList = ref([
-    {
-        icon: require("@/assets/svg/icon-giveaways.svg"),
-        label: "Giveaways",
-    },
-    {
-        icon: require("@/assets/svg/icon-more.svg"),
-        label: "More",
-    },
-]);
-
-onMounted(() => {
-    checkLoginState(() => {
-        if (isLogin.value) {
-            getAccountBalance();
-            getLuckdropRecordsList();
-            chrome.runtime.connect({ name: "popup" });
-            Report.reportLog({
-                pageSource: Report.pageSource.denetHomePage,
-                businessType: Report.businessType.pageView,
-            },{
-                type: window.location.href.indexOf('home.html') > -1 ? 'web' : 'extensions'
-            });
-            setMessageCount();
-            setTimeout(() => {
-                isReadMsg.value = false;
-                readAllMsg({msgType: 1}, () => {
-                    setMessageCount();
-                });
-            }, 2000);
-        } else {
-            Report.reportLog({
-                pageSource: Report.pageSource.denetLogin,
-                businessType: Report.businessType.pageView,
-            });
-        }
-    });
-});
-
-const readAllMsg = ({msgType}, cb) => {
-    readAllMsgByType({
-        params: {
-            msgType
-        }
-    }).then(res => {
-        cb && cb();
-    })
-};
-
-const setMessageCount = () => {
-    getAllMessageInfo({params: {
-    }}).then(res => {
-        if(res.code == 0) {
-            let {unReadCountTotal = 0, unReadCountWalletDetail = 0, unReadCountTaskLuckdrop = 0} = res.data;
-            unReadCountWallet.value = unReadCountWalletDetail;
-            if(unReadCountTotal > 0) {
-                let text = unReadCountTotal > 99 ? '99+' : unReadCountTotal+'';
-                setBadgeInfo({data: {text}});
-            } else {
-                hideBadge();
-            }
-        }
-    });
-}
-
-const moreItemHandle = (params) => {
-    window.open(params.href);
-}
-
-
-/**
- * 获取账户余额
- */
-const getAccountBalance = () => {
-    isRequestWithdrawBalance.value = false;
-    getBalance({}).then((res) => {
-        isRequestWithdrawBalance.value = true;
-        if (res.code == 0) {
-            if (res.data) {
-                canWithdrawBalance.value = res.data.allAssetValuationUSD;
-                withdraw_info.balance = res.data.allAssetValuationUSD || 0
-            }
-        }
-    });
-};
-
-const getUserInfo = (cb) => {
-    getChromeStorage("userInfo", (res) => {
-        cb && cb(res);
-    });
-};
-
-/**
- * 检查登录状态
- */
-const checkLoginState = (cb) => {
-    getUserInfo((res) => {
-        if (res && res.accessToken) {
-            userInfo.value = res;
-            isLogin.value = true;
-            homeVisibility.value = true;
-        } else {
-            userInfo.value = {};
-            isLogin.value = false;
-        }
-        cb && cb();
-    });
-};
-
-const pageScroll = (e) => {
-    let wrapperHeight = pageWrapperDom.value.offsetHeight;
-    let pageGiveListHeight = pageGiveListDom.value.offsetHeight;
-    let scrollTop = e.target.scrollTop || 0;
-    if (currentTabIndex.value != 0) {
-        return;
-    }
-    if (
-        giveReqParams.loadMore === false &&
-        wrapperHeight + scrollTop >= pageGiveListHeight
-    ) {
-        giveReqParams.loadMore = true;
-        giveReqParams.params.pageNum++;
-        getLuckdropRecordsList();
-    }
-};
-
-/**
- * 获取红包列表
- */
-const getLuckdropRecordsList = () => {
-    getMineLuckdropRecords({
-        params: giveReqParams.params,
-    }).then((res) => {
-        if (res.data && res.data.length) {
-            if (giveReqParams.params.pageNum < 2) {
-                giveList.value = res.data;
-            } else {
-                let data = giveList.value;
-                data = data.concat(res.data);
-                giveList.value = data;
-            }
-            giveReqParams.loadMore = false;
-        }
-    });
-};
-
-const clickTab = (params, index) => {
-    currentTabIndex.value = index;
-    console.log(params, index);
-};
-
-/**
- * 点击列表跳转到推文
- */
-const clickListItem = (params) => {
-    if (!params.srcContentId) {
-        return;
-    }
-    let twitterUrl = "https://twitter.com/";
-    let nickName = "";
-    if (params.type == 1) {
-        nickName = params.userInfo.nickName;
-    } else if (params.type == 2) {
-        nickName = userInfo.value.nickName;
-    }
-    let url = twitterUrl + nickName + "/status/" + params.srcContentId;
-
-    chrome.tabs.create({
-        url,
-    });
-};
-
-/**
- * 交易列表返回
- */
-const transactionsBack = () => {
-    if (!homeVisibility.value) {
-        if (transactionsVisibility.value) {
-            transactionsVisibility.value = false;
-        }
-        homeVisibility.value = true;
-    }
-};
-
-/**
- * 提现返回
- */
-const withdrawBack = () => {
-    if (!homeVisibility.value) {
-        if (withdrawVisibility.value) {
-            withdrawVisibility.value = false;
-        }
-        homeVisibility.value = true;
-        getAccountBalance();
-        giveReqParams.params.pageNum = 1;
-        getLuckdropRecordsList();
-    }
-};
-
-
-const showTransactions = () => {
-//     // homeVisibility.value = false;
-//     // transactionsVisibility.value = true;
-
-    readAllMsg({msgType: 1});
-    router.push('/transactions')
-};
-
-// const clickWithdraw = () => {
-//     if (isRequestWithdrawBalance.value) {
-//         homeVisibility.value = false;
-//         withdrawVisibility.value = true;
-//     }
-// };
-
-const loginAction = () => {
-    Report.reportLog({
-        pageSource: Report.pageSource.denetLogin,
-        businessType: Report.businessType.buttonClick,
-        objectType: Report.objectType.loginButton
-    });
-    login();
-};
-
-const login = () => {
-    callEventPageMethod("POPUP_LOGIN", "", function (response) {
-        console.log("res", response);
-    });
-};
-
-/**
- * sendMessage
- */
-const callEventPageMethod = (actionType, data, callback) => {
-    chrome.runtime.sendMessage(
-        { 
-            actionType: actionType, 
-            data: data 
-        },
-        function (response) {
-            if (typeof callback === "function") callback(response);
-        }
-    );
-};
-
-/**
- * 点击发送，去发推
- */
-const sendTwitter = (params) => {
-    console.log(params)
-    callEventPageMethod(
-        "POPUP_PUBLISH_TWITTER_RED_PACK",
-        { 
-            srcContent: params.postTaskLuckdrop.srcContent, 
-            postId: params.postTaskLuckdrop.postId 
-        },
-        function (response) {
-            console.log("res", response);
-        }
-    );
-};
-// 点击提现
-const clickWithdraw = () => {
-    Report.reportLog({
-        pageSource: Report.pageSource.denetHomePage,
-        businessType: Report.businessType.buttonClick,
-        objectType: Report.objectType.withdrawButton
-    });
-    router.push('/withdraw/home');
-}
-const clickTopUp = () => {
-    Report.reportLog({
-        pageSource: Report.pageSource.denetHomePage,
-        businessType: Report.businessType.buttonClick,
-        objectType: Report.objectType.topupButton
-    });
-    router.push('/top-up/home');
-}
-
-const terminaHandler = (params, index) => {
-    terminaTask = params;
-    terminaTask.index = index;
-    modalVisible.value = true;
-}
-
-const modalCancel = () => {
-    //请求终止接口 id terminaTask.id 、 刷新当前列表、 关闭 
-    modalVisible.value = false;
-    let index = terminaTask.index;
-    terminatedLuckdrop({
-        params: {
-            luckdropId: terminaTask.id
-        }
-    }).then(res => {
-        if(res.code == 0) {
-            giveList.value[index]['status'] = res.data.status;
-            giveList.value[index]['postTaskLuckdrop']['reSendAvailable'] = false;
-            giveList.value[index]['postTaskLuckdrop']['terminatedAvailable'] = false;
-        }
-    });
-    terminaTask = {};
-}
-
-const modalConfirm = () => {
-    modalVisible.value = false;
-    terminaTask = {};
-}
-
-</script>
-
-<style lang="scss" scoped>
-html,
-body {
-    padding: 0 !important;
-    margin: 0 !important;
-}
-
-.page-wrapper {
-    width: 375px;
-    height: 600px;
-    box-sizing: border-box;
-    overflow-y: scroll;
-
-    .nav-bar {
-        padding: 14px;
-        box-sizing: border-box;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-
-        .item {
-            display: flex;
-            align-items: center;
-            font-size: 13px;
-            cursor: pointer;
-
-            img {
-                width: 16px;
-                height: 16px;
-                margin-right: 4px;
-            }
-        }
-
-        .left {
-            font-weight: 500;
-        }
-
-        .right {
-            color: #b6b6b6;
-        }
-    }
-
-    .content {
-        padding: 20px;
-        background-color: #F0F8FE;
-
-        .icon-money {
-            width: 70px;
-            height: 70px;
-        }
-
-        .balance {
-            display: flex;
-            justify-content: space-between;
-            .wallet {
-                img {
-                    width: 24px;
-                    height: 24px;
-                    margin-right: 6px;
-                    vertical-align: middle;
-                }
-                font {
-                    color: #000;
-                    font-size: 14px;
-                    font-weight: bold;
-                }
-            }
-            .bill {
-                position: relative;
-                img {
-                    width: 24px;
-                    height: 24px;
-                    cursor: pointer;
-                }
-                .red-dot {
-                    position: absolute;
-                    right: 0px;
-                    top: -1px;
-                }
-            }
-        }
-
-        .amount {
-            margin-top: 20px;
-            margin-bottom: 20px;
-            font-weight: 700;
-            font-size: 36px;
-            line-height: 43px;
-        }
-
-        .area-btn {
-            display: flex;
-            justify-content: space-between;
-            font-weight: 600;
-            font-size: 15px;
-
-            .top-up-btn {
-                cursor: pointer;
-                border: 1px solid #1D9BF0;
-                color: #fff;
-                background: #1D9BF0;
-                border-radius: 100px;
-                width: 165px;
-                height: 38px;
-                text-align: center;
-                margin-left: 8px;
-                line-height: 36px;
-            }
-
-            .withdraw-btn {
-                background: rgba(56, 154, 255, 0.01);
-                border: 1px solid #1D9BF0;
-                box-sizing: border-box;
-                width: 165px;
-                font-size: 15px;
-                height: 38px;
-                text-align: center;
-                line-height: 36px;
-                border-radius: 100px;
-                color: #1D9BF0;
-                display: inline-block;
-                cursor: pointer;
-            }
-        }
-
-        .msg {
-            margin-top: 10px;
-            font-size: 13px;
-            color: #b6b6b6;
-        }
-    }
-
-    .tab-bar {
-        display: flex;
-        align-items: center;
-        position: sticky;
-        position: -webkit-sticky;
-        top: 0px;
-        z-index: 1000;
-        background-color: #fff;
-
-        .tab-item {
-            flex: 1;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            padding: 17px 0;
-            box-sizing: border-box;
-            border-bottom: 1px solid #ECECEC;
-            cursor: pointer;
-
-            .icon {
-                width: 16px;
-                height: 16px;
-                margin-right: 5px;
-                font-weight: 500;
-                font-size: 16px;
-            }
-        }
-
-        .active {
-            border-bottom: 2px solid #000;
-        }
-    }
-
-    .list-wrapper {
-        min-height: 202px;
-
-        .give-list {
-            min-height: 202px;
-            position: relative;
-
-            .cell {
-                display: flex;
-                justify-content: space-between;
-                min-height: 66px;
-                box-sizing: border-box;
-                padding-left: 14px;
-                position: relative;
-                cursor: pointer;
-
-                .red-dots {
-                    position: absolute; 
-                    right: 4px; 
-                    top: 4px;
-                }
-
-                .img-wrapper {
-                    position: relative;
-                    margin-right: 16px;
-                    box-sizing: border-box;
-
-                    .icon-avatar {
-                        width: 34px;
-                        height: 34px;
-                        border-radius: 50%;
-                    }
-
-                    .icon-give {
-                        position: absolute;
-                        right: -4px;
-                        bottom: 2px;
-                    }
-
-                    .icon-big-give {
-                        margin-top: 14px;
-                    }
-                }
-
-                .info-wrapper {
-                    flex: 1;
-                    height: 100%;
-                    display: flex;
-                    justify-content: space-between;
-                    border-bottom: 1px solid #ECECEC;
-                    box-sizing: border-box;
-                    padding: 10px 14px 10px 0;
-
-                    .left {
-                        .nickname {
-                            font-weight: 500;
-                            font-size: 14px;
-                            margin-bottom: 5px;
-                            max-width: 132px;
-                            word-break: break-all;
-                        }
-
-                        .time {
-                            font-size: 12px;
-                            color: #B0B0B0;
-                        }
-                    }
-
-                    .right {
-                        display: flex;
-                        align-items: center;
-                        cursor: pointer;
-
-                        .msg {
-                            .bold {
-                                font-weight: 500;
-                                font-size: 14px;
-                                text-align: right;
-                                display: flex;
-                                justify-content: flex-end;
-                                align-items: center;
-
-                                .blance {
-                                    margin-left: 3px;
-                                    display: inline-block;
-                                    max-width: 80px;
-                                    word-break: break-all;
-                                    line-height: 18px;
-                                    color: #E29A2E;
-                                }
-
-                                .coin-type-wrapper {
-                                    display: flex;
-                                    align-items: center;
-                                }
-
-                                .coin-type {
-                                    margin-left: 3px;
-                                }
-
-                                img {
-                                    margin-left: 4px;
-                                    width: 14px;
-                                    height: 14px;
-                                }
-                            }
-
-                            .align-content {
-                                flex-direction: column;
-                                align-items: flex-end;
-
-                                .blance {
-                                    max-width: 130px;
-                                }
-                            }
-
-                            .desc {
-                                font-size: 12px;
-                                color: #b6b6b6;
-                                margin-top: 5px;
-                                text-align: right;
-
-                                .desc-bottom-bar {
-                                    display: flex;
-                                    align-items: center;
-                                    justify-content: end;
-                                    margin-top: 10px;
-
-                                    .btn {
-                                        min-width: 80px;
-                                        height: 29px;
-                                        padding: 0 8px;
-                                        box-sizing: border-box;
-                                        font-weight: 400;
-                                        font-size: 14px;
-                                        cursor: pointer;
-                                        text-align: center;
-                                        border-radius: 100px;
-                                        color: #5E5E5E;
-                                        border: 1px solid #DFDFDF;
-                                        display: flex;
-                                        align-items: center;
-                                        justify-content: center;
-                                    }
-
-                                    .send-btn {
-                                        border: 1px solid #1D9BF0;
-                                        color: #1D9BF0;
-                                    }
-
-                                    .detail-btn, .send-btn {
-                                        margin-left: 8px;
-                                    }
-                                }
-                            }
-                        }
-
-                        .icon {
-                            width: 18px;
-                            height: 24px;
-                            margin-left: 4px;
-                            margin-right: -5px;
-                        }
-                    }
-                }
-                .info-center {
-                    align-items: center;
-                }
-            }
-            .cell-center {
-                align-items: center;
-            }
-
-            .icon-empty {
-                position: absolute;
-                left: 50%;
-                top: 50%;
-                transform: translate(-50%, -50%);
-            }
-        }
-
-        .more-list {
-            .cell {
-                cursor: pointer;
-                display: flex;
-                justify-content: space-between;
-                align-items: center;
-                height: 66px;
-                box-sizing: border-box;
-                padding-left: 20px;
-
-                .icon {
-                    width: 42px;
-                    height: 42px;
-                    border-radius: 50%;
-                }
-
-                .info-wrapper {
-                    flex: 1;
-                    height: 100%;
-                    display: flex;
-                    justify-content: space-between;
-                    align-items: center;
-                    border-bottom: 1px solid #ECECEC;
-                    box-sizing: border-box;
-                    padding-right: 16px;
-
-                    .left {
-                        font-weight: 500;
-                        font-size: 16px;
-                        .time {
-                            color: #B0B0B0;
-                        }
-                    }
-
-                    .right {
-                        display: flex;
-                        align-items: center;
-                        cursor: pointer;
-
-                        .icon {
-                            width: 18px;
-                            height: 24px;
-                        }
-                    }
-                }
-            }
-        }
-    }
-}
-
-.page-wrapper::-webkit-scrollbar {
-    display: none;
-}
-</style>

src/view/popup/tabbar-page/index.vue

@@ -0,0 +1,114 @@
+<template>
+  <div class="tabbar-page-wrapper">
+    <global-tip :type="'3'"></global-tip>
+    <!-- login -->
+    <popup-login v-if="!userInfo.accessToken" @loginAction="loginAction" />
+    <template v-else>
+      <top-bar  :userInfo="userInfo" 
+                :bgColor="bgColor"
+                :color="color"
+                :boxShadow="boxShadow"></top-bar>
+      <div class="tabbar-content">
+        <router-view></router-view>
+      </div>
+      <tabbar @tabbarClick = "onTabbarHandler"></tabbar>
+    </template>
+  </div>
+</template>
+
+<script setup>
+import { reactive, onMounted, ref, provide, watch } from "vue";
+import { getChromeStorage } from "@/uilts/chromeExtension";
+import { setStorage, getStorage } from "@/uilts/help";
+import Report from "@/log-center/log";
+
+import TopBar from "@/view/popup/components/top-bar.vue";
+import Tabbar from "@/view/popup/components/tabbar.vue";
+import  GlobalTip  from '@/view/components/global-tip.vue';
+import popupLogin from "@/view/popup/components/login.vue";
+
+let userInfo = ref({});
+let bgColor = ref('#1b92e2');
+let color =  ref('#fff');
+let boxShadow = ref('none');
+
+let top_up_info = reactive(getStorage("top_up_info") || {});
+
+watch(top_up_info, (newVal) => {
+  setStorage("top_up_info", newVal);
+});
+
+provide("top_up_info", top_up_info);
+
+const getUserInfo = (cb) => {
+  getChromeStorage("userInfo", (res) => {
+    if (res && res.accessToken) {
+      userInfo.value = res;
+    } else {
+      userInfo.value = {};
+    }
+    cb && cb(res);
+  });
+};
+
+const onTabbarHandler = (params) => {
+  if(params.path == '/') {
+    bgColor.value = '#1b92e2';
+    boxShadow.value = 'none';
+    color.value = '#fff'
+  } else {
+    bgColor.value = '#fff';
+    boxShadow.value = '0px 0.5px 0px 0px #D1D9DD';
+    color.value = '#000'
+  }
+}
+
+const loginAction = () => {
+    Report.reportLog({
+        pageSource: Report.pageSource.denetLogin,
+        businessType: Report.businessType.buttonClick,
+        objectType: Report.objectType.loginButton
+    });
+    login();
+};
+
+const login = () => {
+    callEventPageMethod("POPUP_LOGIN", "", function (response) {
+        console.log("res", response);
+    });
+}
+
+
+/**
+ * sendMessage
+ */
+const callEventPageMethod = (actionType, data, callback) => {
+    chrome.runtime.sendMessage(
+        { 
+            actionType: actionType, 
+            data: data 
+        },
+        function (response) {
+            if (typeof callback === "function") callback(response);
+        }
+    );
+};
+
+onMounted(() => {
+  getUserInfo();
+});
+</script>
+
+
+<style lang='scss'>
+.tabbar-page-wrapper {
+  width: 100%;
+  height: 100%;
+  position: relative;
+
+  .tabbar-content {
+    width: 100%;
+    height: calc(100% - 120px);
+  }
+}
+</style>

src/view/popup/tabbar-page/message/index.vue

@@ -0,0 +1,585 @@
+<template>
+  <div class="message-wrapper">
+    <div class="tab-bar">
+      <div
+        class="tab-item"
+        :class="{ active: currentTabIndex == index }"
+        v-for="(item, index) in tabList"
+        :key="index"
+        @click="clickTab(item, index)"
+      >
+        {{ item.label }}
+      </div>
+    </div>
+    <div style="
+            height: calc(100% - 52px);
+            overflow-y: auto;"
+        ref="pageWrapperDom" 
+        @scroll="pageScroll">
+      <div class="list-wrapper" ref="pageGiveListDom">
+        <div class="give-list" v-if="currentTabIndex == 0">
+          <template v-if="giveList.length">
+            <div
+              class="cell"
+              :class="{ 'cell-center': item.type == 1 }"
+              v-for="(item, index) in giveList"
+              :key="index"
+              @click="clickListItem(item, index)"
+            >
+              <red-dot
+                class="red-dots"
+                v-if="item.unReadMsgCount > 0 && isReadMsg"
+              ></red-dot>
+
+              <div class="img-wrapper">
+                <!-- 收到红包 -->
+                <template v-if="item.type == 1">
+                  <img class="icon-avatar" :src="item.userInfo.avatarUrl" />
+                  <img
+                    class="icon-give"
+                    :src="require('@/assets/svg/icon-get-giveaways-s.svg')"
+                  />
+                </template>
+                <!-- 发出去红包 -->
+                <template v-else-if="2">
+                  <img
+                    class="icon-big-give"
+                    :src="require('@/assets/svg/icon-send-giveaways-s.svg')"
+                  />
+                </template>
+              </div>
+              <div
+                class="info-wrapper"
+                :class="{ 'info-center': item.type == 1 }"
+              >
+                <div class="left">
+                  <div class="nickname">
+                    {{ item.type == 1 ? "Get Giveaway" : "Send Giveaways" }}
+                  </div>
+                  <div class="time">
+                    {{ moment(item.timestamp).format("MM-DD HH:mm:ss") }}
+                  </div>
+                </div>
+                <div class="right">
+                  <div class="msg">
+                    <div
+                      class="bold"
+                      :class="{
+                        'align-content':
+                          (item.type == 2 ||
+                            (item.type == 1 && item.status == 1)) &&
+                          item.amount.length + item.currencySymbol.length > 12,
+                      }"
+                    >
+                      <!-- 收到的 -->
+                      <template v-if="item.type == 1">
+                        <!-- 进行中-->
+                        <template v-if="item.status == 0">
+                          in progress
+                        </template>
+                        <!-- 已完成 -->
+                        <template v-else-if="item.status == 1">
+                          <span class="blance">
+                            <a-tooltip :title="item.amount">
+                              {{ getBit(item.amount) }}</a-tooltip
+                            >
+                          </span>
+                          <div class="coin-type-wrapper">
+                            <span class="coin-type">{{
+                              item.currencySymbol || ""
+                            }}</span>
+                            <img :src="item.currencyIconPath" alt="" />
+                          </div>
+                        </template>
+                        <!-- 已过期 -->
+                        <template v-else-if="item.status == 2">
+                          Timeout
+                        </template>
+                      </template>
+                      <!-- 发出去的 -->
+                      <template v-else-if="item.type == 2">
+                        <span class="blance">
+                          <a-tooltip :title="'-' + item.amount">
+                            -{{ getBit(item.amount) }}
+                          </a-tooltip>
+                        </span>
+                        <div class="coin-type-wrapper">
+                          <span class="coin-type">{{
+                            item.currencySymbol || ""
+                          }}</span>
+                          <img :src="item.currencyIconPath" alt="" />
+                        </div>
+                      </template>
+                    </div>
+                    <!-- 发出的红包显示 -->
+                    <div class="desc" v-if="item.type == 2">
+                      <!-- 未发送-->
+                      <template v-if="item.postTaskLuckdrop.reSendAvailable">
+                        Unpublished
+                      </template>
+                      <!-- 进行中 -->
+                      <template v-else-if="item.status == 1">
+                        {{ item.postTaskLuckdrop.receivedCount }}/{{
+                          item.postTaskLuckdrop.totalCount
+                        }}
+                      </template>
+                      <!-- 2:已结束; 3:提前终止-->
+                      <template
+                        v-else-if="item.status == 2 || item.status == 3"
+                      >
+                        ({{
+                          item.status == 2 ? "Time expired" : "Termination"
+                        }}) {{ item.postTaskLuckdrop.receivedCount }}/{{
+                          item.postTaskLuckdrop.totalCount
+                        }}
+                      </template>
+                      <!-- 红包提前终止/退款（进行中）显示-->
+                      <template v-if="item.status == 4"> Terminating </template>
+
+                      <!-- 进行中或者未发送成功时显示 
+                                                v-if="item.status == 1 || item.postTaskLuckdrop.reSendAvailable"-->
+                      <div class="desc-bottom-bar">
+                        <!-- 没有终止红包时显示 -->
+                        <div
+                          v-if="item.postTaskLuckdrop.terminatedAvailable"
+                          class="btn"
+                          @click.stop="terminaHandler(item, index)"
+                        >
+                          Termination
+                        </div>
+
+                        <!-- 红包未发出显示 -->
+                        <div
+                          class="btn send-btn"
+                          v-if="item.postTaskLuckdrop.reSendAvailable"
+                          @click.stop="sendTwitter(item)"
+                        >
+                          Send
+                        </div>
+                        <div
+                          v-else-if="item.srcContentId"
+                          class="btn detail-btn"
+                          @click.stop="clickListItem(item, index)"
+                        >
+                          details
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <!-- 发红包—— 未发出、进行中 隐藏 -->
+                  <img
+                    v-if="item.type != 2"
+                    class="icon"
+                    :src="require('@/assets/svg/icon-cell-arrow-right.svg')"
+                  />
+                </div>
+              </div>
+            </div>
+          </template>
+          <template v-else>
+            <img
+              class="icon-empty"
+              :src="require('@/assets/svg/icon-empty-list.svg')"
+            />
+          </template>
+        </div>
+ 
+      </div>
+    </div>
+    <modal
+      :visible="modalVisible"
+      title="Early termination of Giveaway?"
+      content="The remaining amount will be returned to your wallet within 1 day."
+      cancelText="Termination"
+      confirmText="Cancel"
+      @cancel="modalCancel"
+      @confirm="modalConfirm"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, inject } from "vue";
+
+import modal from "@/view/popup/components/modal.vue";
+import redDot from "@/view/components/red-dot.vue";
+
+import { getBit } from "@/uilts/help";
+import { getMineLuckdropRecords } from "@/http/account";
+import { terminatedLuckdrop } from "@/http/redPacket";
+var moment = require("moment");
+
+let currentTabIndex = ref(0);
+
+let tabList = ref([
+  {
+    label: "ALL",
+  },
+  {
+    label: "Giveaway",
+  },
+  {
+    label: "NFT",
+  },
+]);
+
+let pageWrapperDom = ref(null);
+let pageGiveListDom = ref(null);
+
+let modalVisible = ref(false);
+let terminaTask = {};
+
+let giveList = ref([]);
+let giveReqParams = {
+  params: {
+    pageNum: 1,
+    pageSize: 20,
+  },
+  loadMore: false,
+};
+
+
+const clickTab = (params, index) => {
+  currentTabIndex.value = index;
+};
+
+/**
+ * 获取红包列表
+ */
+const getLuckdropRecordsList = () => {
+  getMineLuckdropRecords({
+    params: giveReqParams.params,
+  }).then((res) => {
+    if (res.data && res.data.length) {
+      if (giveReqParams.params.pageNum < 2) {
+        giveList.value = res.data;
+      } else {
+        let data = giveList.value;
+        data = data.concat(res.data);
+        giveList.value = data;
+      }
+      giveReqParams.loadMore = false;
+    }
+  });
+};
+
+/**
+ * 点击列表跳转到推文
+ */
+const clickListItem = (params) => {
+  if (!params.srcContentId) {
+    return;
+  }
+  let twitterUrl = "https://twitter.com/";
+  let nickName = "";
+  if (params.type == 1) {
+    nickName = params.userInfo.nickName;
+  } else if (params.type == 2) {
+    nickName = userInfo.value.nickName;
+  }
+  let url = twitterUrl + nickName + "/status/" + params.srcContentId;
+
+  chrome.tabs.create({
+    url,
+  });
+};
+
+const pageScroll = (e) => {
+  let wrapperHeight = pageWrapperDom.value.offsetHeight;
+  let pageGiveListHeight = pageGiveListDom.value.offsetHeight;
+  let scrollTop = e.target.scrollTop || 0;
+  if (currentTabIndex.value != 0) {
+    return;
+  }
+  console.log('scrollTop', scrollTop, wrapperHeight, pageGiveListHeight)
+  if (
+    giveReqParams.loadMore === false &&
+    wrapperHeight + scrollTop >= (pageGiveListHeight - 60)
+  ) {
+    giveReqParams.loadMore = true;
+    giveReqParams.params.pageNum++;
+    getLuckdropRecordsList();
+  }
+};
+
+/**
+ * 点击发送，去发推
+ */
+const sendTwitter = (params) => {
+  console.log(params);
+  callEventPageMethod(
+    "POPUP_PUBLISH_TWITTER_RED_PACK",
+    {
+      srcContent: params.postTaskLuckdrop.srcContent,
+      postId: params.postTaskLuckdrop.postId,
+    },
+    function (response) {
+      console.log("res", response);
+    }
+  );
+};
+
+/**
+ * sendMessage
+ */
+const callEventPageMethod = (actionType, data, callback) => {
+  chrome.runtime.sendMessage(
+    {
+      actionType: actionType,
+      data: data,
+    },
+    function (response) {
+      if (typeof callback === "function") callback(response);
+    }
+  );
+};
+
+const terminaHandler = (params, index) => {
+  terminaTask = params;
+  terminaTask.index = index;
+  modalVisible.value = true;
+};
+
+const modalCancel = () => {
+  //请求终止接口 id terminaTask.id 、 刷新当前列表、 关闭
+  modalVisible.value = false;
+  let index = terminaTask.index;
+  terminatedLuckdrop({
+    params: {
+      luckdropId: terminaTask.id,
+    },
+  }).then((res) => {
+    if (res.code == 0) {
+      giveList.value[index]["status"] = res.data.status;
+      giveList.value[index]["postTaskLuckdrop"]["reSendAvailable"] = false;
+      giveList.value[index]["postTaskLuckdrop"]["terminatedAvailable"] = false;
+    }
+  });
+  terminaTask = {};
+};
+
+const modalConfirm = () => {
+  modalVisible.value = false;
+  terminaTask = {};
+};
+
+onMounted(() => {
+  getLuckdropRecordsList();
+});
+</script>
+
+
+<style scoped lang="scss">
+.message-wrapper {
+  width: 100%;
+  height: 100%;
+  margin-top: 1px;
+  .tab-bar {
+    display: flex;
+    align-items: center;
+    background-color: #fff;
+    box-shadow: 0px 0.5px 0px #d1d9dd;
+
+    .tab-item {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 14px 0px;
+      box-sizing: border-box;
+      border-bottom: 2px solid #fff;
+      margin: 0 12px;
+      font-size: 14px;
+      color: #949494;
+      cursor: pointer;
+    }
+
+    .active {
+      border-bottom: 2px solid #1d9bf0;
+      font-weight: 500;
+      color: #000;
+    }
+  }
+
+  .list-wrapper {
+    min-height: 202px;
+
+    .give-list {
+      min-height: 202px;
+      position: relative;
+
+      .cell {
+        display: flex;
+        justify-content: space-between;
+        min-height: 76px;
+        box-sizing: border-box;
+        padding-left: 14px;
+        position: relative;
+        cursor: pointer;
+
+        .red-dots {
+          position: absolute;
+          right: 4px;
+          top: 4px;
+        }
+
+        .img-wrapper {
+          position: relative;
+          margin-right: 16px;
+          box-sizing: border-box;
+
+          .icon-avatar {
+            width: 34px;
+            height: 34px;
+            border-radius: 50%;
+          }
+
+          .icon-give {
+            position: absolute;
+            right: -4px;
+            bottom: 2px;
+          }
+
+          .icon-big-give {
+            margin-top: 14px;
+          }
+        }
+
+        .info-wrapper {
+          flex: 1;
+          height: 100%;
+          display: flex;
+          justify-content: space-between;
+          box-sizing: border-box;
+          padding: 10px 14px 10px 0;
+
+          .left {
+            .nickname {
+              font-weight: 500;
+              font-size: 13px;
+              margin-bottom: 5px;
+              max-width: 132px;
+              word-break: break-all;
+            }
+
+            .time {
+              font-size: 12px;
+              color: #b0b0b0;
+            }
+          }
+
+          .right {
+            display: flex;
+            align-items: center;
+            cursor: pointer;
+
+            .msg {
+              .bold {
+                font-weight: 500;
+                font-size: 14px;
+                text-align: right;
+                display: flex;
+                justify-content: flex-end;
+                align-items: center;
+
+                .blance {
+                  margin-left: 3px;
+                  display: inline-block;
+                  max-width: 80px;
+                  word-break: break-all;
+                  line-height: 18px;
+                  color: #e29a2e;
+                }
+
+                .coin-type-wrapper {
+                  display: flex;
+                  align-items: center;
+                }
+
+                .coin-type {
+                  margin-left: 3px;
+                }
+
+                img {
+                  margin-left: 4px;
+                  width: 14px;
+                  height: 14px;
+                }
+              }
+
+              .align-content {
+                flex-direction: column;
+                align-items: flex-end;
+
+                .blance {
+                  max-width: 130px;
+                }
+              }
+
+              .desc {
+                font-size: 12px;
+                color: #b6b6b6;
+                margin-top: 5px;
+                text-align: right;
+
+                .desc-bottom-bar {
+                  display: flex;
+                  align-items: center;
+                  justify-content: end;
+                  margin-top: 10px;
+
+                  .btn {
+                    min-width: 80px;
+                    height: 29px;
+                    padding: 0 8px;
+                    box-sizing: border-box;
+                    font-weight: 400;
+                    font-size: 14px;
+                    cursor: pointer;
+                    text-align: center;
+                    border-radius: 100px;
+                    color: #5e5e5e;
+                    border: 1px solid #dfdfdf;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                  }
+
+                  .send-btn {
+                    border: 1px solid #1d9bf0;
+                    color: #1d9bf0;
+                  }
+
+                  .detail-btn,
+                  .send-btn {
+                    margin-left: 8px;
+                  }
+                }
+              }
+            }
+
+            .icon {
+              width: 18px;
+              height: 24px;
+              margin-left: 4px;
+              margin-right: -5px;
+            }
+          }
+        }
+        .info-center {
+          align-items: center;
+        }
+      }
+      .cell-center {
+        align-items: center;
+      }
+
+      .icon-empty {
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+      }
+    }
+  }
+}
+</style>

src/view/popup/tabbar-page/more/index.vue

@@ -0,0 +1,117 @@
+<template>
+  <div class="more-page">
+    <div class="more-list">
+      <div
+        class="cell"
+        v-for="(item, index) in moreTabList"
+        :key="index"
+        @click="moreItemHandle(item)"
+      >
+        <img class="icon" :src="item.icon" />
+        <div class="info-wrapper">
+          <div class="left">
+            {{ item.label }}
+          </div>
+          <div class="right">
+            <img
+              class="icon"
+              :src="require('@/assets/svg/icon-cell-arrow-right.svg')"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+let moreTabList = ref([
+  {
+    icon: require("@/assets/svg/icon-website.svg"),
+    label: "Website",
+    href: "https://denet.me",
+  },
+  {
+    icon: require("@/assets/svg/icon-twitter.svg"),
+    label: "Twitter",
+    href: "https://twitter.com/denet2022",
+  },
+  {
+    icon: require("@/assets/svg/icon-discord.svg"),
+    label: "Discord",
+    href: "https://discord.gg/wZSz9p8ddG",
+  },
+  // , {
+  //     icon: require("@/assets/svg/icon-telegram.svg"),
+  //     label: "Telegram",
+  //     href: 'https://t.me/denetpro'
+  // }
+]);
+
+const moreItemHandle = (params) => {
+  window.open(params.href);
+};
+</script>
+
+<style scoped lang="scss">
+.more-page {
+  background: #e7e7e7;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  margin-top: 1px;
+
+  .more-list {
+    background: #fff;
+    height: calc(100% - 10px);
+    margin-top: 10px;
+
+    .cell {
+      cursor: pointer;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      height: 56px;
+      box-sizing: border-box;
+      padding: 0 16px;
+
+      .icon {
+        width: 40px;
+        height: 40px;
+        border-radius: 50%;
+      }
+
+      .info-wrapper {
+        flex: 1;
+        height: 100%;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        box-sizing: border-box;
+        margin-left: 13px;
+
+        .left {
+          font-weight: 500;
+          font-size: 16px;
+          .time {
+            color: #b0b0b0;
+          }
+        }
+
+        .right {
+          display: flex;
+          align-items: center;
+          cursor: pointer;
+
+          .icon {
+            width: 18px;
+            height: 24px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/view/popup/tabbar-page/nft/index.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="more-list">
+    
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+</script>
+
+
+<style scoped lang="scss">
+    .more-list {
+    }
+</style>

src/view/popup/tabbar-page/wallter/popup.vue

@@ -0,0 +1,360 @@
+<template>
+    <div class="page-wrapper" ref="pageWrapperDom">
+        <div class="content">
+            <div class="balance">
+                <div class="wallet">
+                    <font>Balance Valuation</font>
+                </div>
+            </div>
+            <div class="amount-wrapper">
+                <a-tooltip :title="'$'+canWithdrawBalance">
+                    ${{ getBit(canWithdrawBalance) }}
+                </a-tooltip>
+
+                <div class="right">
+                    <div class="bill" @click="showTransactions">
+                        <red-dot class="red-dot" v-if="unReadCountWallet > 0"></red-dot>
+                        <img :src="require('@/assets/svg/icon-home-bill.svg')" />
+                    </div>
+
+                    <img :src="require('@/assets/svg/icon-form-refresh.svg')" 
+                        class="icon"
+                        >
+                </div>
+            </div>
+            <!-- <div class="area-btn">
+                <div class="withdraw-btn" @click="clickWithdraw">Withdraw</div>
+                <div class="top-up-btn" @click="clickTopUp">Deposit</div>
+            </div> -->
+        </div>
+
+        <currency-list style="height: calc(100% - 118px);" @selectCurrency="selectCurrency" :page="'top-up'"></currency-list>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted, inject } from "vue";
+
+import redDot from "@/view/components/red-dot.vue";
+import CurrencyList from "@/view/components/currency-list.vue";
+
+import {
+    getChromeStorage,
+} from "@/uilts/chromeExtension";
+import { getBalance } from "@/http/account";
+import { readAllMsgByType, getAllMessageInfo } from "@/http/messageApi"
+import { setBadgeInfo, hideBadge } from "@/logic/background/twitter";
+import Report from "@/log-center/log";
+import router from "@/router/popup.js";
+import { getBit } from "@/uilts/help";
+
+let withdraw_info = inject('withdraw_info')
+withdraw_info.paypal = {}
+
+var moment = require("moment");
+
+let userInfo = ref({});
+let canWithdrawBalance = ref(0);
+withdraw_info.paypal.amount_value = canWithdrawBalance
+withdraw_info.balance = 0
+
+let isRequestWithdrawBalance = ref(false);
+
+
+// 钱包未读数
+let unReadCountWallet = ref(0);
+let isReadMsg = ref(true);
+
+let walletWithdrawConfig = ref({
+    withdrawUSDPaypalFee: 0,
+    withdrawUSDPreMinAmount: 100,
+    withdrawUSDSwitch: "",
+    withdrawUSDPaypalFeeDesc: ''
+});
+withdraw_info.paypal.wallet_withdraw_config = walletWithdrawConfig
+
+
+let top_up_info = inject('top_up_info')
+
+function selectCurrency(_params) {
+    top_up_info.token = _params.currencyName || ''
+    top_up_info.token_chain = _params.tokenChain 
+    // top_up_info.token_chain = 'BNB Smart Chain (BEP20)'
+    top_up_info.token_symbol = _params.tokenSymbol || ''
+    top_up_info.currency_code = _params.currencyCode
+    top_up_info.icon_token = _params.iconPath || ''
+    top_up_info.icon_net = require('@/assets/svg/icon-BNB.svg')
+    router.push({ path: '/top-up/info'});
+}
+
+onMounted(() => {
+    checkLoginState((res) => {
+        if (res) {
+            getAccountBalance();
+            chrome.runtime.connect({ name: "popup" });
+            Report.reportLog({
+                pageSource: Report.pageSource.denetHomePage,
+                businessType: Report.businessType.pageView,
+            },{
+                type: window.location.href.indexOf('home.html') > -1 ? 'web' : 'extensions'
+            });
+            setMessageCount();
+            setTimeout(() => {
+                isReadMsg.value = false;
+                readAllMsg({msgType: 1}, () => {
+                    setMessageCount();
+                });
+            }, 2000);
+        } else {
+            Report.reportLog({
+                pageSource: Report.pageSource.denetLogin,
+                businessType: Report.businessType.pageView,
+            });
+        }
+    });
+});
+
+const readAllMsg = ({msgType}, cb) => {
+    readAllMsgByType({
+        params: {
+            msgType
+        }
+    }).then(res => {
+        cb && cb();
+    })
+};
+
+const setMessageCount = () => {
+    getAllMessageInfo({params: {
+    }}).then(res => {
+        if(res.code == 0) {
+            let {unReadCountTotal = 0, unReadCountWalletDetail = 0, unReadCountTaskLuckdrop = 0} = res.data;
+            unReadCountWallet.value = unReadCountWalletDetail;
+            if(unReadCountTotal > 0) {
+                let text = unReadCountTotal > 99 ? '99+' : unReadCountTotal+'';
+                setBadgeInfo({data: {text}});
+            } else {
+                hideBadge();
+            }
+        }
+    });
+}
+
+
+/**
+ * 获取账户余额
+ */
+const getAccountBalance = () => {
+    isRequestWithdrawBalance.value = false;
+    getBalance({}).then((res) => {
+        isRequestWithdrawBalance.value = true;
+        if (res.code == 0) {
+            if (res.data) {
+                canWithdrawBalance.value = res.data.allAssetValuationUSD;
+                withdraw_info.balance = res.data.allAssetValuationUSD || 0
+            }
+        }
+    });
+};
+
+const getUserInfo = (cb) => {
+    getChromeStorage("userInfo", (res) => {
+        cb && cb(res);
+    });
+};
+
+/**
+ * 检查登录状态
+ */
+const checkLoginState = (cb) => {
+    getUserInfo((res) => {
+        if (res && res.accessToken) {
+            userInfo.value = res;
+        } else {
+            userInfo.value = {};
+        }
+        cb && cb(res);
+    });
+};
+
+const showTransactions = () => {
+    readAllMsg({msgType: 1});
+    router.push('/transactions')
+};
+
+// 点击提现
+const clickWithdraw = () => {
+    Report.reportLog({
+        pageSource: Report.pageSource.denetHomePage,
+        businessType: Report.businessType.buttonClick,
+        objectType: Report.objectType.withdrawButton
+    });
+    router.push('/withdraw/home');
+}
+
+const clickTopUp = () => {
+    Report.reportLog({
+        pageSource: Report.pageSource.denetHomePage,
+        businessType: Report.businessType.buttonClick,
+        objectType: Report.objectType.topupButton
+    });
+    router.push('/top-up/home');
+}
+
+</script>
+
+<style lang="scss" scoped>
+html,
+body {
+    padding: 0 !important;
+    margin: 0 !important;
+}
+
+.page-wrapper {
+    width: 375px;
+    height: 100%;
+    box-sizing: border-box;
+    overflow-y: auto;
+
+    .nav-bar {
+        padding: 14px;
+        box-sizing: border-box;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
+        .item {
+            display: flex;
+            align-items: center;
+            font-size: 13px;
+            cursor: pointer;
+
+            img {
+                width: 16px;
+                height: 16px;
+                margin-right: 4px;
+            }
+        }
+
+        .left {
+            font-weight: 500;
+        }
+
+        .right {
+            color: #b6b6b6;
+        }
+    }
+
+    .content {
+        padding: 16px;
+        background: #1D9BF0;
+        box-sizing: border-box;
+
+        .icon-money {
+            width: 70px;
+            height: 70px;
+        }
+
+        .balance {
+            display: flex;
+            justify-content: space-between;
+            .wallet {
+                font {
+                    font-weight: 500;
+                    font-size: 13px;
+                    color: #fff;
+                    opacity: 0.7;
+                }
+            }
+        }
+
+        .amount-wrapper {
+            margin-top: 8px;
+            font-weight: 700;
+            font-size: 36px;
+            color: #fff;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+
+            .right {
+                display: flex;
+                align-items: center;
+
+                .bill {
+                    height: 24px;
+                    width: 24px;
+                    position: relative;
+
+                    img {
+                        width: 24px;
+                        height: 24px;
+                        cursor: pointer;
+                        position: absolute;
+                        left: 0;
+                        top: 0;
+                    }
+
+                    .red-dot {
+                        position: absolute;
+                        right: 0px;
+                        top: -1px;
+                    }
+                }
+
+                .icon {
+                    margin-left: 22px;
+                }
+            }
+        }
+
+        .area-btn {
+            display: flex;
+            justify-content: space-between;
+            font-weight: 600;
+            font-size: 15px;
+
+            .top-up-btn {
+                cursor: pointer;
+                border: 1px solid #1D9BF0;
+                color: #fff;
+                background: #1D9BF0;
+                border-radius: 100px;
+                width: 165px;
+                height: 38px;
+                text-align: center;
+                margin-left: 8px;
+                line-height: 36px;
+            }
+
+            .withdraw-btn {
+                background: rgba(56, 154, 255, 0.01);
+                border: 1px solid #1D9BF0;
+                box-sizing: border-box;
+                width: 165px;
+                font-size: 15px;
+                height: 38px;
+                text-align: center;
+                line-height: 36px;
+                border-radius: 100px;
+                color: #1D9BF0;
+                display: inline-block;
+                cursor: pointer;
+            }
+        }
+
+        .msg {
+            margin-top: 10px;
+            font-size: 13px;
+            color: #b6b6b6;
+        }
+    }
+
+
+
+}
+
+.page-wrapper::-webkit-scrollbar {
+    display: none;
+}
+</style>