CounterFireGames/src/components/assets/collectibles.vue

<template>
  <div class="collection">
    <div class="content-left">
      <div class="left-content-left">
        <OverView :overviewValue="overviewValue" @clickOverviewChild="overviewChild" />
        <Status :statusValue="statusValue" @clickStatusChild="statusChild" />
      </div>
    </div>
    <div class="content-right">
      <div class="content-right-header">
        <div class="bg-cor"></div>
        <div class="results-total">{{ nftList.length }} Results</div>
      </div>
      <div class="content-right-content">
        <div class="pages-horizontal" v-show="nftList !== undefined  && nftList.length > 0">
          <li v-for="(item, index) in nftList" :key="index">
            <Card v-if="nftList != undefined || nftList.length > 0" :nftData="item" @renewMyNft="renewMyNft" />
          </li>
        </div>
        <div class="pages-no" v-show="nftList == undefined || nftList.length <= 0">
          <div>
            <img src="@/assets/img/marketplace/Empty_state.png" alt="">
          </div>
          <p>No NFT yet</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, toRaw, onUnmounted, watch } from "vue";
import OverView from "@/components/common/searchView/Overview.vue";
import Status from "@/components/common/searchView/nftStatusRadio.vue";
import Card from "./myCard.vue";
import NftId from "@/configs/item.json"
import { apiAssetsState } from "@/utils/marketplace"
import {useMarketplaceStore} from "@/store/marketplace";
import {walletStore} from "@/store/wallet";
const marketplaceStore = useMarketplaceStore()
const localWalletStore = walletStore()
const nftList = ref([])
// console.log('localWalletStore', localWalletStore.token)
const overviewValue = ref()
const statusValue = ref('0')

const overviewChild = (val) => {
  overviewValue.value = val
  next_cursor.value = ''
  marketplaceStore.cursorObj.next_cursor = ''
  nftList.value = []
  getMyAssets()
}

const statusChild = (val) => {
  statusValue.value = val
  next_cursor.value = ''
  marketplaceStore.cursorObj.next_cursor = ''
  nftList.value = []
  getMyAssets()
}

// 更新数据
const renewMyNft = async() => {
  let timer = setTimeout(() => {
    getMyAssets()
    // location.reload()
    clearTimeout(timer);
  }, 2000);
}

const next_cursor = ref()
const getMyAssets = async () => {
  // nftList.value = []
  const myADdress = localWalletStore.address
  const data = {
    type: statusValue.value,
    page_size: '20',
    cursor: next_cursor.value,
    search_name: overviewValue.value
  }
  if(myADdress) {
    try {
      let nftListBox 
      let res = await apiAssetsState(myADdress, data)
      nftList.value = [...nftList.value, ...res.rows]
      nftListBox = nftList.value.reduce((acc, obj) => {
        const existingObj = acc.find(item => item.token_id == obj.token_id)
        if(!existingObj) {
          acc.push(obj)
        }
        return acc
      },[])
      nftList.value = nftListBox
      marketplaceStore.cursorObj = res.page
      next_cursor.value = res.page.next_cursor
    } catch(e) {
      console.log(e)
    }
  }
}

const handleScroll = () => {
  const myADdress = localWalletStore.address
  var scrollTop =
  document.documentElement.scrollTop || document.body.scrollTop; //变量windowHeight是可视区的高度
  var windowHeight =
  document.documentElement.clientHeight || document.body.clientHeight; //变量scrollHeight是滚动条的总高度
  var scrollHeight =
  document.documentElement.scrollHeight || document.body.scrollHeight;
  if (scrollTop + windowHeight == scrollHeight) {
  //请求数据接口
  // this.seeMoreSchoolList();
  // console.log('scrollTop + windowHeight == scrollHeight请求接口',toRaw(marketplaceStore.cursorObj), scrollTop, windowHeight, scrollHeight)
  // if(myADdress) {
    if(toRaw(marketplaceStore.cursorObj).remaining != 0) {
  //     getMyAssets()
    // } else {
      console.log('请求coll')
    } else {
      console.log('不用请求coll')
  //     return false;
    }
    return false;
    // }
  }
}

watch(localWalletStore,() => {
  if(!localWalletStore.token) {
    getMyAssets()
  } else {
    getMyAssets()
  }
})

onMounted(() => {
  getMyAssets()
  window.addEventListener("scroll", handleScroll, true);
})

onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll)
})
</script>

<style lang="scss" scoped>
.collection {
  width: 100%;
  display: flex;
  justify-content: space-between;
  background: #16141b;
  box-shadow: 0 -10px 10px #16141b;
  .content-left {
    width: 300px;
    height: 800px;
    position: sticky;
    top: 140px;
    padding: 0 35px;
    box-sizing: border-box;
    .left-content-left {
    }
  }
  .content-right {
    width: calc(100% - 300px);
    padding-right: 40px;
    .content-right-header {
      width: calc(100% - 10px);
      height: 60px;
      display: flex;
      align-items: center;
      border-bottom: 2px solid #3a3b57;
      .bg-cor {
        width: 15px;
        height: 15px;
        background: #18ff00;
        margin-left: 10px;
        border-radius: 50%;
      }
      .results-total {
        display: flex;
        align-items: center;
        margin-left: 15px;
        font-size: 14px;
        color: #b3b5da;
      }
    }
    .content-right-content {
      margin-top: 30px;
      .pages-horizontal {
        display: flex;
        // justify-content: space-between;
        flex-wrap: wrap;
        clear: both;
        li {
          width: calc(25% - 10px);
          // height: 360px;
          margin-right: 10px;
          margin-bottom: 10px;
          cursor: pointer;
          &:nth-child(4n) {
            margin-right: 0;
          }
        }
      }
      .pages-no {
        position: relative;
        margin-top: 256px;
        div {
          margin: 0 auto;
          width: 401px;
          height: 322px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        p {
          position: absolute;
          top: 260px;
          left: 52%;
          transform: translateX(-50%);
          font-family: 'Poppins';
          font-weight: bold;
          font-size: 40px;
          color: #8587B2;
        }
      }
      .pages-vertical {
        color: #fff;
      }
    }
  }
}
</style>