修改滚动翻页

src/components/Dialogs/loadingDialog.vue

@@ -16,9 +16,9 @@
 import { ref, toRaw } from "vue";
 const props = defineProps({
   loadingDialogVisible: {
-  type: Boolean,
+    type: Boolean,
-  required: true,
+    required: true,
-},
+  },
 });
 
 const emit = defineEmits(['handleClose'])
@@ -33,9 +33,9 @@ emit('handleClose')
 </script>
 
 <style lang="scss" scoped>
-// .ant-modal-wrap{
+.ant-modal {
 
-:deep(.buyDia) {
+// :deep(.buyDia) {
   width: 500px !important;
   color: #fff;
   // top: 50%;

src/components/Dialogs/sellDialog.vue

@@ -13,7 +13,7 @@
         <img src="@/assets/img/marketplace/Close_counter.png" alt />
       </div>
       <div class="content">
-        <div class="content-title">On the shelves NFT</div>
+        <div class="content-title">List for Sale</div>
         <div class="content-nfts">
           <div class="content-nfts-top">
             <div class="content-nfts-top-left">
@@ -119,7 +119,7 @@
               <p>NFT {{ sellDataArr.name }}</p>
               <p>#{{ sellDataArr.token_id }}</p>
             </div>
-            <div class="content-nfts-btm-right" @click="sellConfirm">On the shelves NFT</div>
+            <div class="content-nfts-btm-right" @click="sellConfirm">List for Sale</div>
           </div>
         </div>
       </div>

src/components/assets/collectibles.vue

@@ -46,30 +46,39 @@ 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 next_cursor = ref()
 const getMyAssets = async () => {
-  nftList.value = []
+  // nftList.value = []
   const myADdress = localWalletStore.address
   const data = {
     type: statusValue.value,
     page_size: '20',
-    cursor: marketplaceStore.cursorObj.next_cursor,
+    cursor: next_cursor.value,
     search_name: overviewValue.value
   }
   if(myADdress) {
+    console.log(data)
     try {
       let res = await apiAssetsState(myADdress, data)
-      nftList.value = res.rows
+      nftList.value = [...res.rows, ...nftList.value]
+      console.log(nftList.value)
       marketplaceStore.cursorObj = res.page
+      next_cursor.value = res.page.next_cursor
+      console.log('next_cursor.value', next_cursor.value)
     } catch(e) {
       console.log(e)
     }
@@ -90,10 +99,11 @@ const handleScroll = () => {
   // console.log('scrollTop + windowHeight == scrollHeight请求接口',toRaw(marketplaceStore.cursorObj), scrollTop, windowHeight, scrollHeight)
   if(myADdress) {
     if(toRaw(marketplaceStore.cursorObj).remaining != 0) {
-      // console.log('请求')
       getMyAssets()
     // } else {
     //   console.log('不用请求')
+    } else {
+      return false;
     }
     return false;
     }
@@ -109,8 +119,8 @@ watch(localWalletStore,() => {
 })
 
 onMounted(() => {
-  window.addEventListener("scroll", handleScroll, true);
   getMyAssets()
+  window.addEventListener("scroll", handleScroll, true);
 })
 
 onUnmounted(() => {

src/components/marketplace/mktContent.vue

@@ -18,11 +18,11 @@
             <span>{{ marketplaceList.overview }}</span>
             <span v-if="marketplaceList.overview" @click="clearOverviewAll">×</span>
           </li>
-          <li v-if="marketplaceList.sort">
+          <!-- <li v-if="marketplaceList.sort">
             <span>Sort By: </span>
             <span>{{ marketplaceList.sort == '-1' ? 'From low to high' : 'From high to low'}}</span>
             <span v-if="marketplaceList.sort" @click="clearSortAll">×</span>
-          </li>
+          </li> -->
           <li v-if="marketplaceList.minPrice || marketplaceList.maxPrice">
             <span>Price: </span>
             <span v-if="!marketplaceList.maxPrice">{{ `>` }}</span>
@@ -92,7 +92,33 @@ import {apiMarketplaceState} from "@/utils/marketplace.js"
 import { useMarketplaceStore } from "@/store/marketplace"
 const marketplaceList = useMarketplaceStore()
 
-
+const cursorObj = ref({
+  count: 0,
+  next_cursor: '',
+  previous_cursor: '',
+  remaining: ''
+})
+const reqData = ref({
+    page_size: 20,
+    cursor: '',
+    search: {
+      name: '',
+    },
+    filter: {
+      price_min: '',
+      price_max: '',
+      item_ids: [],
+      hero_ranks: [],
+    },
+    sort: {
+      fields: [
+        {
+          name: 'price', 
+          type: 0,
+        }
+      ]
+    }
+  })
 
 const loadingDialogVisible = ref(false)
 const nftList = ref([])
@@ -102,24 +128,34 @@ const contentScroll = ref()
 const clearOverviewAll = () => {
   marketplaceList.overview = ''
   toRaw(marketplaceList.getParamsData).search.name = ''
+  reqData.value.search.name = ''
+  reqData.value.cursor = ''
+  nftList.value = []
   getHeroData()
 }
 const overviewChild = (val) => {
   marketplaceList.overview = val
   toRaw(marketplaceList.getParamsData).search.name = val
+  reqData.value.search.name = val
+  nftList.value = []
   getHeroData()
 }
 
 const clearSortAll = () => {
   marketplaceList.sort = ''
   toRaw(marketplaceList.getParamsData).sort.fields[0].type = ''
+  reqData.value.sort.fields[0].type = ''
+  reqData.value.cursor = ''
+  nftList.value = []
   getHeroData()
 }
 const sortChild = (val) => {
-  nftList.value = []
+  // nftList.value = []
   marketplaceList.sort = val
   toRaw(marketplaceList.getParamsData).sort.fields[0].type = val
+  reqData.value.sort.fields[0].type = val
   console.log(toRaw(marketplaceList.getParamsData).sort.fields[0].name)
+  nftList.value = []
   getHeroData()
 }
 
@@ -129,44 +165,66 @@ const clearPriceAll = () => {
   marketplaceList.maxPrice = ''
   toRaw(marketplaceList.getParamsData).filter.price_min = ''
   toRaw(marketplaceList.getParamsData).filter.price_max = ''
-  getHeroData()
+  reqData.value.filter.price_min = ''
+  reqData.value.filter.price_max = ''
+  reqData.value.cursor = ''
+  // nftList.value = []
+  // getHeroData()
 }
 const priceChild = (minPrice, maxPrice) => {
   toRaw(marketplaceList.getParamsData).filter.price_min = minPrice
   toRaw(marketplaceList.getParamsData).filter.price_max = maxPrice
-  getHeroData()
+  reqData.value.filter.price_max = minPrice
+  reqData.value.filter.price_max = maxPrice
+  reqData.value.cursor = ''
+  // nftList.value = []
+  // getHeroData()
 }
 
 const clearHeroAll = () => {
   marketplaceList.hero = []
+  reqData.value.filter.item_ids = [...marketplaceList.gold,...marketplaceList.hero]
   toRaw(marketplaceList.getParamsData).filter.item_ids = [...marketplaceList.gold,...marketplaceList.hero]
+  reqData.value.cursor = ''
+  nftList.value = []
   getHeroData()
 }
 const heroChild = (val) => {
   marketplaceList.hero = val
+  reqData.value.filter.item_ids = [...marketplaceList.gold,...marketplaceList.hero]
   toRaw(marketplaceList.getParamsData).filter.item_ids = [...marketplaceList.gold,...marketplaceList.hero]
+  nftList.value = []
   getHeroData()
 }
 
 const clearRankAll = () => {
   marketplaceList.rank = []
+  reqData.value.filter.hero_ranks = []
   toRaw(marketplaceList.getParamsData).filter.hero_ranks = []
+  reqData.value.cursor = ''
+  nftList.value = []
   getHeroData()
 }
 const rankChild = (val) => {
   marketplaceList.rank = val
+  reqData.value.filter.hero_ranks = val
   toRaw(marketplaceList.getParamsData).filter.hero_ranks = val
+  nftList.value = []
   getHeroData()
 }
 
 const clearGoldAll = () => {
   marketplaceList.gold = []
+  reqData.value.filter.item_ids.filter.item_ids = [...marketplaceList.gold,...marketplaceList.hero]
   toRaw(marketplaceList.getParamsData).filter.item_ids = [...marketplaceList.gold,...marketplaceList.hero]
+  nftList.value = []
   getHeroData()
 }
 const goldChild = (val) => {
   marketplaceList.gold = val
+  reqData.value.filter.item_ids = [...marketplaceList.gold,...marketplaceList.hero]
   toRaw(marketplaceList.getParamsData).filter.item_ids = [...marketplaceList.gold,...marketplaceList.hero]
+  nftList.value = []
   getHeroData()
 }
 
@@ -178,7 +236,7 @@ const clearAll = () => {
   marketplaceList.hero = []
   marketplaceList.rank = []
   marketplaceList.gold = []
-  marketplaceList.getParamsData = {
+  nftList.value = {
     page_size: 20,
     cursor: '',
     search: {
@@ -199,6 +257,7 @@ const clearAll = () => {
       ]
     }
   }
+  nftList.value = []
   getHeroData()
 }
 
@@ -214,30 +273,33 @@ const renewNft = async() => {
   }, 2000);
 }
 
-const cursorObj = ref()
 const getHeroData = async () => {
-  loadingDialogVisible.value = false;
+  // loadingDialogVisible.value = false;
+  console.log(reqData.value)
+  // // return
   try {
-    const { errcode, errmsg, rows, page } = await marketplaceList.getMarketplaceState(marketplaceList.getParamsData)
+    const { errcode, errmsg, rows, page } = await marketplaceList.getMarketplaceState(reqData.value)
+    // const { errcode, errmsg, rows, page } = await apiMarketplaceState(reqData.value)
     // console.log((toRaw(marketplaceList.cursorObj))
     if(!errmsg) {
-      nftList.value = rows
+      nftList.value = [...rows, ...nftList.value]
       cursorObj.value = page
-      // marketplaceList.cursorObj = cursorObj.value
+      console.log(cursorObj.value)
+      marketplaceList.cursorObj = page
       console.log(rows,'-----')
     }
     // loadingDialogVisible.value = false;
   } catch(e) {
-    // console.log(e)
+    console.log(e)
   //   loadingDialogVisible.value = false;
   }
 }
 
 // 监听筛选变化
-watch(() => [marketplaceList.overview,marketplaceList.sort,marketplaceList.minPrice,marketplaceList.maxPrice,marketplaceList.hero,marketplaceList.rank,marketplaceList.gold],
+watch(() => [marketplaceList.overview,marketplaceList.minPrice,marketplaceList.maxPrice,marketplaceList.hero,marketplaceList.rank,marketplaceList.gold],
-([preTest1, preTest2, preTest3, preTest4, preTest5, preTest6, preTest7],
+([preTest1, preTest2, preTest3, preTest4, preTest5, preTest6],
-[oldTest1, oldTest2, oldTest3, oldTest4, oldTest5, oldTest6, oldTest7]) => {
+[oldTest1, oldTest2, oldTest3, oldTest4, oldTest5, oldTest6]) => {
-  if(toRaw(preTest1) || toRaw(preTest2) || toRaw(preTest3) || toRaw(preTest4) || (toRaw(preTest5) !=[] && preTest5.length > 0 ) || (toRaw(preTest6) !=[] && toRaw(preTest6).length > 0 ) || (toRaw(preTest7) !=[] && toRaw(preTest7).length > 0 )) {
+  if(toRaw(preTest1) || toRaw(preTest2) || toRaw(preTest3) || (toRaw(preTest4) !=[] && preTest4.length > 0 ) || (toRaw(preTest5) !=[] && toRaw(preTest5).length > 0 ) || (toRaw(preTest6) !=[] && toRaw(preTest6).length > 0 )) {
     isClearAll.value = true
   } else {
     isClearAll.value = false
@@ -254,20 +316,19 @@ const marketHandleScroll = () => {
   document.documentElement.scrollHeight || document.body.scrollHeight;
   if (scrollTop + windowHeight == scrollHeight) {
   //请求数据接口
-  // console.log('scrollTop + windowHeight == scrollHeight请求接口',toRaw(marketplaceList.cursorObj), scrollTop, windowHeight, scrollHeight)
     if(toRaw(cursorObj.value).remaining != 0) {
-      marketplaceList.getParamsData.cursor = toRaw(cursorObj.value).next_cursor
+      toRaw(reqData.value).cursor = toRaw(cursorObj.value).next_cursor
       getHeroData()
-    // } else {
+    } else {
-    //   console.log('不用请求')
+      return false;
     }
     return false;
   }
 }
 
 onMounted(() => {
-  window.addEventListener("scroll", marketHandleScroll, true);
   getHeroData()
+  window.addEventListener("scroll", marketHandleScroll, true);
 })
 
 onUnmounted(() => {

src/views/MarketplaceView.vue

@@ -15,34 +15,6 @@ import { ref, reactive, onMounted, onUnmounted } from "vue";
 import MktHeader from '@/components/marketplace/mktHeader.vue'
 import MktContent from '@/components/marketplace/mktContent.vue'
 
-const marketOverflow = ref()
-const headerHeight = ref()
-const marketplaceContent = ref()
-const isFixed = ref(false)
-const handleScroll = (e) => {
-  
-  // console.log(marketplaceContent.value.$el.getBoundingClientRect().top, headerHeight.value.offsetHeight, marketplaceContent.value.$el.getBoundingClientRect().top - headerHeight.value.offsetHeight, e.offsetY)
-  // console.log(marketplaceContent.value.scrollTop)
-  if(marketplaceContent.value.$el.getBoundingClientRect().top < e.offsetY) {
-  //   console.log('固定 ')
-  //   // isFixed.value = true
-    isFixed.value = 'fixed'
-  //   marketOverflow.value = 'hidden'
-  } else {
-  //   // isFixed.value = false
-    isFixed.value = 'static'
-  //   console.log('滚动')
-  //   marketOverflow.value = 'auto'
-  }
-}
-
-onMounted(() => {
-  // marketplaceContent.value.addEventListener('scroll', doScroll)
-})
-
-onUnmounted(() => {
-  // content.value.removeEventListener('scroll', doScroll)
-})
 </script>
 
 <style lang="scss" scoped>