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

<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">
                <div class="amount">
                    <a-tooltip :title="'$' + canWithdrawBalance">
                        ${{ getBit(canWithdrawBalance) }}
                    </a-tooltip>
                </div>

                <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-list.svg')" />
                    </div>

                    <img :src="require('@/assets/svg/icon-home-refresh.svg')" class="icon"
                        :class="{ transform_rotate: iconRotate }" @click="refreshList" />
                </div>
            </div>
        </div>

        <currency-list 
            v-if="userInfo.accessToken"
            style="height: calc(100% - 103px);"
            ref="currencyListDom"
            :showRefresh="false"
            @selectCurrency="selectCurrency"></currency-list>
    </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount, 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 { 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 = 0;
withdraw_info.balance = 0

let isRequestWithdrawBalance = ref(false);

let currencyListDom = ref('');
let iconRotate = ref(false)

// 钱包未读数
let unReadCountWallet = ref(0);

let walletWithdrawConfig = ref({
    withdrawUSDPaypalFee: 0,
    withdrawUSDPreMinAmount: 100,
    withdrawUSDSwitch: "",
    withdrawUSDPaypalFeeDesc: ''
});
withdraw_info.paypal.wallet_withdraw_config = walletWithdrawConfig


function selectCurrency(_params) {
    router.push({
        path: 'currencyDetail',
        query: {
            params: JSON.stringify(_params)
        }
    });
}

const init = () => {
    checkLoginState((res) => {
        if (res) {
            getAccountBalance();
            Report.reportLog({
                pageSource: Report.pageSource.denetHomePage,
                businessType: Report.businessType.pageView,
            }, {
                type: window.location.href.indexOf('home.html') > -1 ? 'web' : 'extensions'
            });
            setMessageCount();
        } else {
            Report.reportLog({
                pageSource: Report.pageSource.denetLogin,
                businessType: Report.businessType.pageView,
            });
        }
    });
}

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 = () => {
    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');
}

const refreshList = () => {
    if (iconRotate.value) {
        return
    }
    iconRotate.value = true
    setTimeout(() => {
        iconRotate.value = false
    }, 1000)

    getAccountBalance();
    if(currencyListDom.value) {
        currencyListDom.value.refresh && currencyListDom.value.refresh();
    }
}

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

const msgListener = (req, sender, sendResponse) => {
    ;
    switch (req.actionType) {
        case 'CONTENT_POPUP_PAGE_SHOW':
            init();
            if (currencyListDom.value) {
                currencyListDom.value.getCurrencyInfoList && currencyListDom.value.getCurrencyInfoList();
            }
            break;
    }
}


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

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

</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: 12px 16px 10px 16px;
        background: #1D9BF0;
        box-sizing: border-box;

        .icon-money {
            width: 70px;
            height: 70px;
        }

        .balance {
            display: flex;
            justify-content: space-between;

            .wallet {
                font {
                    font-size: 13px;
                    color: #fff;
                    opacity: 0.7;
                }
            }
        }

        .amount-wrapper {
            margin-top: 2px;
            font-weight: 700;
            font-size: 36px;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .amount {
                display: inline-block;
            }

            .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;
                        z-index: 100;
                    }
                }

                .icon {
                    margin-left: 22px;
                    cursor: pointer;
                }

                .transform_rotate {
                    transform: rotate(360deg);
                    transition-duration: 1s;
                }
            }
        }

        .msg {
            margin-top: 10px;
            font-size: 13px;
            color: #b6b6b6;
        }
    }



}

.page-wrapper::-webkit-scrollbar {
    display: none;
}
</style>