huangjinming/CounterFireGames
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改滚动翻页

Browse Source
This commit is contained in:
yuyongdong 2024-07-04 00:02:50 +08:00
parent e087402927
commit afcc0bf42c
5 changed files with 105 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/Dialogs/loadingDialog.vue
View File

@ -18,7 +18,7 @@ const props = defineProps({
loadingDialogVisible: {
type: Boolean,
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%;

4
src/components/Dialogs/sellDialog.vue
View File

@ -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>

20
src/components/assets/collectibles.vue
View File

@ -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(() => {

105
src/components/marketplace/mktContent.vue
View File

@ -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],
([preTest1, preTest2, preTest3, preTest4, preTest5, preTest6, preTest7],
[oldTest1, oldTest2, oldTest3, oldTest4, oldTest5, oldTest6, oldTest7]) => {
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 )) {
watch(() => [marketplaceList.overview,marketplaceList.minPrice,marketplaceList.maxPrice,marketplaceList.hero,marketplaceList.rank,marketplaceList.gold],
([preTest1, preTest2, preTest3, preTest4, preTest5, preTest6],
[oldTest1, oldTest2, oldTest3, oldTest4, oldTest5, oldTest6]) => {
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 {
// console.log('不用请求')
} else {
return false;
}
return false;
}
}
onMounted(() => {
window.addEventListener("scroll", marketHandleScroll, true);
getHeroData()
window.addEventListener("scroll", marketHandleScroll, true);
})
onUnmounted(() => {

28
src/views/MarketplaceView.vue
View File

@ -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>