page

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

@@ -1,362 +1,67 @@
 <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>
+    <iframe class="iframe" :id="iframeId" :src="iframeSrc"></iframe>
 </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 { ref, onBeforeMount, onMounted, inject } from "vue";
+import { iframeHost } from '@/http/configAPI';
+import { getInnerIframeURL } from '@/uilts/help';
+import messageCenter from '@/uilts/messageCenter';
+import MESSAGE_ENUM from "@/uilts/messageCenter/messageEnum";
 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);
+import { getExtensionStorgeDataForIframe } from "@/logic/content/twitter.js";
 
-let walletWithdrawConfig = ref({
-    withdrawUSDPaypalFee: 0,
-    withdrawUSDPreMinAmount: 100,
-    withdrawUSDSwitch: "",
-    withdrawUSDPaypalFeeDesc: ''
-});
-withdraw_info.paypal.wallet_withdraw_config = walletWithdrawConfig
+let iframeId = ref('de-nav-wallet-index-page');
+let iframeSrc = ref('');
+let showMenu = inject('showMenu');
+let withdraw_info = inject('withdraw_info');
 
+onBeforeMount(() => {
+    iframeSrc.value = getInnerIframeURL(`${iframeHost}/nav-wallet-index` + `?iframeID=${iframeId.value}`)
+})
 
-function selectCurrency(_params) {
-    router.push({
-        path: 'currencyDetail',
-        query: {
-            params: JSON.stringify(_params)
-        }
-    });
-}
-
-const init = () => {
-    checkLoginState((res) => {
-        if (res) {
-            getAccountBalance();
-            setMessageCount();
-            if(window.location.pathname.indexOf('popup-page.html') > -1) {
-              return
-            }
-            Report.reportLog({
-                pageSource: Report.pageSource.denetHomePage,
-                businessType: Report.businessType.pageView,
-            }, {
-                type: window.location.href.indexOf('home.html') > -1 ? 'web' : 'extensions'
-            });
-        } else {
-            Report.reportLog({
-                pageSource: Report.pageSource.denetLogin,
-                businessType: Report.businessType.pageView,
-            });
-        }
-    });
-}
+onMounted(() => {
+    onMessage()
+})
 
-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 {
+window.onmessage = (res) => {
+    if (res.data && res.data.actionType) {
+        let data = res.data.data;
+        switch (res.data.actionType) {
+            case MESSAGE_ENUM.IFRAME_GET_EXTENSION_STORGE_DATA:
+                getExtensionStorgeDataForIframe(data)
+                break;
+            case MESSAGE_ENUM.IFRAME_SHOW_FOOTER_MENU:
+                showMenu.value = data.showMenu
+                break;
+            case MESSAGE_ENUM.IFRAME_MESSAGE_PAGE_SETBADGEINFO:
+                setBadgeInfo({ data: data });
+                break;
+            case MESSAGE_ENUM.IFRAME_MESSAGE_PAGE_HIDEBADGE:
                 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
-            }
+                break;
+            case MESSAGE_ENUM.IFRAME_RUNTIME_CONNECT_POPUP:
+                chrome.runtime.connect({ name: "popup_transactions" });
         }
-    });
-};
-
-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;
-    }
+    chrome.runtime.onMessage.addListener((req) => {
+        switch (req.actionType) {
+            case MESSAGE_ENUM.CONTENT_POPUP_PAGE_SHOW:
+                messageCenter.send(iframeId.value, MESSAGE_ENUM.CONTENT_POPUP_PAGE_SHOW, req);
+                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;
+<style scoped lang="scss">
+.iframe {
+    width: 100%;
     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;
+    border: 0;
 }
-</style>
+</style>