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

<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">
        <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>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from "vue";
import router from "@/router/popup.js";

import { nftListMine } from "@/http/nft.js";

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);

const clickNFT = (params) => {
  router.push({
    path: '/NFTDetail',
    query: {
      params: JSON.stringify(params)
    }
  })
}

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;
    }
  });
}



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);
}

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 {
    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;
      }
    }
  }
}
</style>