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

<template>
  <div class="tabbar-page-wrapper">
    <global-tip :type="'3'"></global-tip>
    <!-- login -->
    <popup-login v-if="!loginStatus" @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 :userInfo="userInfo" @tabbarClick="onTabbarHandler"></tabbar>
    </template>
  </div>
</template>

<script setup>
import { onMounted, onBeforeUnmount, ref, nextTick } from "vue";
import { getChromeStorage } from "@/uilts/chromeExtension";
import { setStorage, getStorage } from "@/uilts/help";
import Report from "@/log-center/log";
import router from "@/router/popup.js";

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 loginStatus = ref('default');

const getUserInfo = (cb) => {
  getChromeStorage("userInfo", (res) => {
    if (res && res.accessToken) {
      userInfo.value = res;
      loginStatus.value = res;
    } else {
      loginStatus.value = '';
      userInfo.value = {};
    }
    cb && cb(res);
  });
};

const onTabbarHandler = (params) => {
  if (params.path == '/') {
    bgColor.value = '#1b92e2';
    boxShadow.value = 'none';
    color.value = '#fff'
  } else {
    bgColor.value = '#fff';
    color.value = '#000';

    if (params.path != '/more') {
      boxShadow.value = '0px 0.5px 0px 0px #D1D9DD';
    } else {
      boxShadow.value = 'none';
    }
  }
}

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 onPageVisbile = () => {
  document.addEventListener('visibilitychange', function () {
    let isHidden = document.hidden;
    if (!isHidden) {
      if (!userInfo.value.accessToken) {
        setTimeout(() => {
          getUserInfo();
        }, 500)
      }
    }
  });
}

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

const msgListener = (req, sender, sendResponse) => {
  switch (req.actionType) {
    case 'BG_LOGIN_SET_USERINFO_CB':
      if (!userInfo.value.accessToken) {
        setTimeout(() => {
          getUserInfo();
        }, 800)
      }
      break;
    case 'CONTENT_POPUP_PAGE_SHOW':
      init();
      break;
  }
}

const init = () => {
  nextTick(() => {
    onTabbarHandler(router.currentRoute.value);
  })
  getUserInfo();
}

onMounted(() => {
  onPageVisbile();
  onRuntimeMsg();
  init();
});

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


<style lang='scss'>
.tabbar-page-wrapper {
  width: 100%;
  height: 100%;
  position: relative;

  .tabbar-content {
    width: 100%;
    height: calc(100% - 120px);
  }
}
</style>