新增founder’s tag 页签

src/components/assets/assetsContent.vue

@@ -6,15 +6,16 @@
       </li>
     </div>
     <div class="content">
-      <Collectibles v-if="navIndex == 0" />
+      <Founder v-if="navIndex == 0" />
+      <Collectibles v-if="navIndex == 1" />
       <!-- <Hanging v-else-if="navIndex == 1" />
       <Trading v-else-if="navIndex == 2" />
       <Activity v-else-if="navIndex == 3" /> -->
-      <Centralization v-if="navIndex == 1" />
-      <Staking v-if="navIndex == 2" />
-      <Hanging v-else-if="navIndex == 3" />
-      <Trading v-else-if="navIndex == 4" />
-      <Activity v-else-if="navIndex == 5" />
+      <Centralization v-if="navIndex == 2" />
+      <Staking v-if="navIndex == 3" />
+      <Hanging v-else-if="navIndex == 4" />
+      <Trading v-else-if="navIndex == 5" />
+      <Activity v-else-if="navIndex == 6" />
     </div>
   </div>
 </template>
@@ -23,6 +24,7 @@
 import { ref, onMounted } from "vue"
 import OverView from "@/components/common/searchView/Overview.vue"
 import Status from "@/components/common/searchView/status.vue"
+import Founder from "./founder.vue"
 import Collectibles from "./collectibles.vue"
 import Centralization from "./centralization.vue"
 import Staking from "./staking.vue"
@@ -34,6 +36,9 @@ import { useMarketplaceStore } from "@/store/marketplace"
 const marketplaceList = useMarketplaceStore()
 
 const navList = ref([
+  {
+    name: "Founder's Tag"
+  },
   {
     name: "NFTs"
   },

src/components/assets/assetsHeader.vue

@@ -267,12 +267,12 @@ watch(localWalletStore,() => {
       ]
     }
   } else {
-    // getCecInfo()
+    getCecInfo()
   }
 })
 
 onMounted(() => {
-  // getCecInfo()
+  getCecInfo()
 })
 
 </script>

src/components/assets/cenCard.vue

@@ -25,7 +25,7 @@
             <img :src="icon" alt="">
           </div>
         </div>
-        <div class="link-below" @click="mintHero('convert')">
+        <div class="link-below" @click="mintHero()">
           <!-- Convert -->
           <img src="@/assets/img/marketplace/Off-Chain.png" alt="">
         </div>
@@ -33,7 +33,7 @@
       </div>
     </div>
     <div class="card-btn">
-      <div class="card-sell" v-if="nftData.on_sale == 0" @click="mintHero(nftData)">Mint for NFT</div>
+      <div class="card-sell" v-if="nftData.on_sale == 0" @click="mintHero()">Mint</div>
     </div>
     <SellDialog :sellDialogVisible="sellDialogVisible" :floorPrice="floorPrice" :sellDataArr="sellDataArr" @handleClose="sellHandleClose" />
     <LoadingDialog :loadingDialogVisible="loadingDialogVisible" />
@@ -154,15 +154,15 @@ const lockToGame = async(type) => {
 }
 // mint一个英雄
 const mintHero = async () => {
-  const confirmResult = await createModal(ConfirmDialog, {
-    title: '', 
-    message: 'After converting, you will be able to use the hero in the game. At the end of Season 1, the hero will automatically be returned to your wallet or Immutable Passport. Do you want to proceed?'
-  }).show()
-  if (confirmResult.errcode == 0) {
+  // const confirmResult = await createModal(ConfirmDialog, {
+  //   title: '', 
+  //   message: 'After converting, you will be able to use the hero in the game. At the end of Season 1, the hero will automatically be returned to your wallet or Immutable Passport. Do you want to proceed?'
+  // }).show()
+  // if (confirmResult.errcode == 0) {
     // loadingDialogVisible.value = true
     const res = await new BlockChain().locker.mintNft([toRaw(props.nftData).uniid])  
     console.log(res)
-  }
+  // }
 }
 const lockToGameConfirm = async () => {
   try {

src/components/assets/centralization.vue

@@ -17,7 +17,10 @@
           </li>
         </div>
         <div class="pages-no" v-show="nftList == undefined || nftList.length <= 0">
-          <div>
+          <div class="no-data-tips">
+            <span v-if="localWalletStore.walletType != 3">Please log into the wallet holding your Founder’s Tag to view details.</span>
+          </div>
+          <div class="no-data-img">
             <img src="@/assets/img/marketplace/Empty_state.png" alt="">
           </div>
           <p>No NFT yet</p>
@@ -214,7 +217,21 @@ onUnmounted(() => {
       .pages-no {
         position: relative;
         margin-top: 256px;
-        div {
+        .no-data-tips {
+          position: absolute;
+          left: 50%;
+          transform: translateX(-50%);
+          width: 100%;
+          text-align: center;
+          color: #fff;
+          margin-bottom: 20px;
+          font-size: 28px;
+        }
+        .no-data-img {
+          position: absolute;
+          top: 50px;
+          left: 50%;
+          transform: translateX(-50%);
           margin: 0 auto;
           width: 401px;
           height: 322px;
@@ -225,7 +242,7 @@ onUnmounted(() => {
         }
         p {
           position: absolute;
-          top: 260px;
+          top: 310px;
           left: 52%;
           transform: translateX(-50%);
           font-family: 'Poppins';

src/components/assets/founder.vue

@@ -0,0 +1,260 @@
+<template>
+  <div class="collection">
+    <div class="content-left">
+      <div class="left-content-left">
+        <OverView :overviewValue="overviewValue" @clickOverviewChild="overviewChild" />
+      </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 class="no-data-tips">
+            <span v-if="localWalletStore.walletType != 3">Please log into the wallet holding your Founder’s Tag to view details.</span>
+          </div>
+          <div class="no-data-img">
+            <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 Card from "./cenCard.vue";
+import NftId from "@/configs/item.json"
+import { apiHeroList } 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(() => {
+    next_cursor.value = ''
+    statusValue.value = ''
+    overviewValue.value = ''
+    nftList.value = []
+    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
+    page_size: 20,
+    cursor: '',
+    search: {
+      name: ''
+    },
+    filter: {
+      item_ids: [],
+      hero_ranks: [],
+    },
+    sort: {
+      fields: []
+    }
+  }
+  if(myADdress) {
+    try {
+      let nftListBox 
+      let res = await apiHeroList( data)
+      // console.log(res,'----------------------')
+      // return
+      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 = () => {
+  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) {
+  //请求数据接口
+  // console.log('scrollTop + windowHeight == scrollHeight请求接口',toRaw(marketplaceStore.cursorObj), scrollTop, windowHeight, scrollHeight)
+    // if(toRaw(marketplaceStore.cursorObj).remaining != 0) {
+    //   getMyAssets()
+    // }
+    return false;
+  }
+}
+
+watch(localWalletStore,() => {
+  // console.log('localWalletStore.token',localWalletStore.address,localWalletStore.token)
+  if(!localWalletStore.token) {
+    nftList.value = []
+  } 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;
+        .no-data-tips {
+          position: absolute;
+          left: 50%;
+          transform: translateX(-50%);
+          width: 100%;
+          text-align: center;
+          color: #fff;
+          margin-bottom: 20px;
+          font-size: 28px;
+        }
+        .no-data-img {
+          position: absolute;
+          top: 50px;
+          left: 50%;
+          transform: translateX(-50%);
+          margin: 0 auto;
+          width: 401px;
+          height: 322px;
+          img {
+            width: 100%;
+            height: 100%;
+          }
+        }
+        p {
+          position: absolute;
+          top: 310px;
+          left: 52%;
+          transform: translateX(-50%);
+          font-family: 'Poppins';
+          font-weight: bold;
+          font-size: 40px;
+          color: #8587B2;
+        }
+      }
+      .pages-vertical {
+        color: #fff;
+      }
+    }
+  }
+}
+</style>

src/components/assets/imgs.vue

@@ -94,7 +94,7 @@ const qualityImageUrl = computed(() => {
   }
   .imgs-detail {
     position: absolute;
-    bottom: 45px;
+    bottom: 43px;
     width: 184px;
     height: 30px;
     line-height: 30px;

src/components/assets/myCard.vue

@@ -27,12 +27,12 @@
         <div v-if="LOCKER_ADDRESS.toLowerCase() == nftData.owner_address.toLowerCase()" class="link-staking" @click="unStake(nftData)">
           <img src="@/assets/img/marketplace/Staking.png" alt="">
         </div>
-        <div v-if="LOCKER_ADDRESS.toLowerCase() != nftData.owner_address.toLowerCase() && nftData.type == 11 && nftData.on_sale == 0" class="enabled" @click="lockToGame('redeem')">
+        <!-- <div v-if="LOCKER_ADDRESS.toLowerCase() != nftData.owner_address.toLowerCase() && nftData.type == 11 && nftData.on_sale == 0" class="enabled" @click="lockToGame('redeem')">
           Redeem
         </div>
         <div v-if="LOCKER_ADDRESS.toLowerCase() != nftData.owner_address.toLowerCase() && nftData.type == 1 && nftData.on_sale == 0" class="link-below" @click="lockToGame('convert')">
           Convert
-        </div>
+        </div> -->
         <!-- <div>{{ nftData.owner_address.substr(0,6) }}...{{ nftData.owner_address.substr(-6) }}</div> -->
       </div>
     </div>

src/components/assets/staking.vue

@@ -17,7 +17,10 @@
           </li>
         </div>
         <div class="pages-no" v-show="nftList == undefined || nftList.length <= 0">
-          <div>
+          <div class="no-data-tips">
+            <span v-if="localWalletStore.walletType != 3">Please log into the wallet holding your Founder’s Tag to view details.</span>
+          </div>
+          <div class="no-data-img">
             <img src="@/assets/img/marketplace/Empty_state.png" alt="">
           </div>
           <p>No NFT yet</p>
@@ -41,7 +44,7 @@ const nftList = ref([])
 // console.log('localWalletStore', localWalletStore.token)
 const overviewValue = ref()
 const statusValue = ref('0')
-
+console.log(localWalletStore.walletType)
 const overviewChild = (val) => {
   overviewValue.value = val
   next_cursor.value = ''
@@ -198,7 +201,21 @@ onUnmounted(() => {
       .pages-no {
         position: relative;
         margin-top: 256px;
-        div {
+        .no-data-tips {
+          position: absolute;
+          left: 50%;
+          transform: translateX(-50%);
+          width: 100%;
+          text-align: center;
+          color: #fff;
+          margin-bottom: 20px;
+          font-size: 28px;
+        }
+        .no-data-img {
+          position: absolute;
+          top: 50px;
+          left: 50%;
+          transform: translateX(-50%);
           margin: 0 auto;
           width: 401px;
           height: 322px;
@@ -209,7 +226,7 @@ onUnmounted(() => {
         }
         p {
           position: absolute;
-          top: 260px;
+          top: 310px;
           left: 52%;
           transform: translateX(-50%);
           font-family: 'Poppins';