nft 详情

src/uilts/messageCenter/messageEnum.js

@@ -8,8 +8,8 @@ const SEND_MESSAGE_ENUM = {
     IFRAME_GET_EXTENSION_STORGE_DATA: 'IFRAME_GET_EXTENSION_STORGE_DATA',
 
     // ---- 做任务 ----
-    IFRAME_DO_TASK_CREATE_TWEET: 'IFRAME_DO_TASK_CREATE_TWEET'
-
+    IFRAME_DO_TASK_CREATE_TWEET: 'IFRAME_DO_TASK_CREATE_TWEET',
+    IFRAME_SHOW_FOOTER_MENU: 'IFRAME_SHOW_FOOTER_MENU',
 }
 
 /** 接收父窗口的事件定义 */
@@ -20,6 +20,7 @@ const RECEIVE_MESSAGE_ENUM = {
     CONTENT_GROUP_LIST_SCROLL: 'CONTENT_GROUP_LIST_SCROLL',
     CONTENT_SEND_GROUP_NAV_TOP: 'CONTENT_SEND_GROUP_NAV_TOP',
     CONTENT_SYS_THEME_CHANGE: 'CONTENT_SYS_THEME_CHANGE',
+    CONTENT_POPUP_PAGE_SHOW: 'CONTENT_POPUP_PAGE_SHOW',
     IFRAME_MESSAGE_PAGE_CREATE_TAB: 'IFRAME_MESSAGE_PAGE_CREATE_TAB',
     IFRAME_MESSAGE_PAGE_PUBLISH_TWITTER: 'IFRAME_MESSAGE_PAGE_PUBLISH_TWITTER',
     IFRAME_MESSAGE_PAGE_SETBADGEINFO: 'IFRAME_MESSAGE_PAGE_SETBADGEINFO',

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

@@ -4,19 +4,21 @@
     <!-- 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">
+      <top-bar v-if="showMenu" :userInfo="userInfo" :bgColor="bgColor" :color="color" :boxShadow="boxShadow"></top-bar>
+      <div
+        class="tabbar-content"
+        :class="{ big: showMenu === false }">
         <router-view></router-view>
       </div>
-      <tabbar :userInfo="userInfo" @tabbarClick="onTabbarHandler"></tabbar>
+      <tabbar v-if="showMenu" :userInfo="userInfo" @tabbarClick="onTabbarHandler"></tabbar>
     </template>
   </div>
 </template>
 
 <script setup>
-import { onMounted, onBeforeUnmount, ref, nextTick } from "vue";
+import { onMounted, onBeforeUnmount, ref, nextTick, provide } from "vue";
 import { getChromeStorage } from "@/uilts/chromeExtension";
-import { setStorage, getStorage } from "@/uilts/help";
+import MESSAGE_ENUM from "@/uilts/messageCenter/messageEnum";
 import Report from "@/log-center/log";
 import router from "@/router/popup.js";
 
@@ -29,9 +31,12 @@ let userInfo = ref({});
 let bgColor = ref('#1b92e2');
 let color = ref('#fff');
 let boxShadow = ref('none');
-
+let showMenu = ref(true);
 let loginStatus = ref('default');
 
+// provide
+provide('showMenu', showMenu);
+
 const getUserInfo = (cb) => {
   getChromeStorage("userInfo", (res) => {
     if (res && res.accessToken) {
@@ -153,6 +158,9 @@ onBeforeUnmount(() => {
   .tabbar-content {
     width: 100%;
     height: calc(100% - 120px);
+    &.big {
+      height: 99%;
+    }
   }
 }
 </style>

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

@@ -3,9 +3,10 @@
 </template>
 
 <script setup>
-import { ref, onBeforeMount } from "vue";
+import { ref, onBeforeMount, onMounted } 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 { getExtensionStorgeDataForIframe } from "@/logic/content/twitter.js";
 import { setBadgeInfo, hideBadge } from "@/logic/background/twitter";
@@ -17,6 +18,10 @@ onBeforeMount(() => {
     iframeSrc.value = getInnerIframeURL(`${iframeHost}/nav-message` + `?iframeID=${iframeId.value}`)
 })
 
+onMounted(() => {
+    onMessage()
+})
+
 window.onmessage = (res) => {
     if (res.data && res.data.actionType) {
         let data = res.data.data;
@@ -47,6 +52,17 @@ window.onmessage = (res) => {
         }
     }
 };
+
+const onMessage = () => {
+    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, {});
+                break;
+        }
+    })
+}
+
 </script>
 
 <style scoped lang="scss">

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

@@ -1,156 +1,57 @@
 <template>
-  <div class="nft-page-wrapper" ref="pageWrapperDom" @scroll="pageScroll">
-    <div class="content" ref="pageListDom">
-      <div class="item" v-for="(item, index) in listData" :key="index" @click="clickNFT(item)">
-        <img :src="item.imagePath" class="img" v-if="item.imagePath" />
-        <nft-card :nftItemId="item.nftItemId" :item="item.createImageInfo" :width="103" v-else></nft-card>
-        <div class="name">{{ item.nftItemName }}</div>
-      </div>
-    </div>
-    <join-group-finish-dialog :dialogVisible="joinGroupFinishShow" :position="'absolute'" :contentStyle="{
-      width: '315px',
-    }" :iconStyle="{ width: '80px', marginTop: '26px' }"
-      :descStyle="{ marginTop: '24px', marginBottom: '25px', fontSize: '19px' }" @confirm="confirmFinish">
-    </join-group-finish-dialog>
-  </div>
+    <iframe class="iframe" :id="iframeId" :src="iframeSrc"></iframe>
 </template>
 
 <script setup>
-import { ref, onMounted, onBeforeUnmount } from "vue";
-import router from "@/router/popup.js";
-
-import { nftListMine } from "@/http/nft.js";
-
-import nftCard from "@/view/components/nft-card.vue"
-import joinGroupFinishDialog from "@/view/components/join-group-finish-dialog.vue";
-
-let listData = ref([]);
-
-let NFTReqParams = {
-  params: {
-    pageNum: 1,
-    pageSize: 30,
-  },
-  loadMore: false,
-};
-
-let pageWrapperDom = ref(null);
-let pageListDom = ref(null);
-let joinGroupFinishShow = ref(false);
+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 { getExtensionStorgeDataForIframe } from "@/logic/content/twitter.js";
+
+let iframeId = ref('de-nav-nft-index-page');
+let iframeSrc = ref('');
+let showMenu = inject('showMenu');
+
+onBeforeMount(() => {
+    iframeSrc.value = getInnerIframeURL(`${iframeHost}/nav-nft-index` + `?iframeID=${iframeId.value}`)
+})
 
-const clickNFT = (params) => {
-  router.push({
-    path: '/NFTDetail',
-    query: {
-      params: JSON.stringify(params)
-    }
-  })
-}
+onMounted(() => {
+    onMessage()
+})
 
-const getNFTListMine = () => {
-  nftListMine({
-    params: NFTReqParams.params,
-  }).then((res) => {
-    if (res.data && res.data.length) {
-      if (NFTReqParams.params.pageNum < 2) {
-        listData.value = res.data;
-      } else {
-        let data = listData.value;
-        data = data.concat(res.data);
-        listData.value = data;
-      }
-      NFTReqParams.loadMore = false;
+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;
+        }
     }
-  });
-}
-
-
-
-const pageScroll = (e) => {
-  let wrapperHeight = pageWrapperDom.value.offsetHeight;
-  let pageListHeight = pageListDom.value.offsetHeight;
-  let scrollTop = e.target.scrollTop || 0;
-  if (
-    NFTReqParams.loadMore === false &&
-    wrapperHeight + scrollTop >= pageListHeight - 60
-  ) {
-    NFTReqParams.loadMore = true;
-    NFTReqParams.params.pageNum++;
-    getNFTListMine();
-  }
 };
 
-
 const onMessage = () => {
-  chrome.runtime.onMessage.addListener(msgListener);
+    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;
+        }
+    })
 }
 
-const msgListener = (req, sender, sendResponse) => {
-  switch (req.actionType) {
-    case 'CONTENT_POPUP_PAGE_SHOW':
-      getNFTListMine();
-      showJoinFinishHandler(req.data);
-      break;
-  }
-}
-
-const showJoinFinishHandler = (params) => {
-  let { path, showJoinGroupFinish } = params;
-  if (path == '/NFT' && showJoinGroupFinish) {
-    joinGroupFinishShow.value = true;
-  } else if (joinGroupFinishShow.value) {
-    joinGroupFinishShow.value = false;
-  }
-}
-
-const confirmFinish = () => {
-  joinGroupFinishShow.value = false;
-}
-
-onMounted(() => {
-  onMessage();
-  getNFTListMine();
-})
-
-onBeforeUnmount(() => {
-  chrome.runtime.onMessage.removeListener(msgListener);
-})
 </script>
 
-
 <style scoped lang="scss">
-.nft-page-wrapper {
-  width: 100%;
-  height: 100%;
-  overflow-y: auto;
-
-  .content {
+.iframe {
     width: 100%;
-    display: flex;
-    flex-wrap: wrap;
-    padding: 5px 2px 0 16px;
-    box-sizing: border-box;
-
-    .item {
-      width: 33%;
-      box-sizing: border-box;
-      padding-right: 14px;
-      margin-top: 15px;
-      cursor: pointer;
-
-      .img {
-        width: 100%;
-        border-radius: 5px;
-        height: 104px;
-        object-fit: cover;
-      }
-
-      .name {
-        font-weight: 400;
-        font-size: 12px;
-        margin-top: 6px;
-      }
-    }
-  }
+    height: 100%;
+    border: 0;
 }
 </style>