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-02 17:35:47 +08:00
parent dc2f8e1af3
commit 749349ae76
9 changed files with 182 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/img/marketplace/0000.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 327 KiB

36
src/components/assets/assetsContent.vue
View File

@ -1,11 +1,5 @@
<template>
<div class="assets-content">
<div class="assets-user">
<div class="assets-user-img">
<img src="" alt="">
</div>
<div class="assets-user-name">adderss</div>
</div>
<div class="assets-content-nav">
<li :class="{ active: navIndex == index}" v-for="(item, index) in navList" :key="index" @click="navTable(index)">
{{ item.name }}
@ -20,13 +14,14 @@
</template>
<script setup>
import { ref } from "vue"
import { ref, onMounted } from "vue"
import OverView from "@/components/common/searchView/Overview.vue"
import Status from "@/components/common/searchView/status.vue"
import Collectibles from "./collectibles.vue"
import Hanging from "./hanging.vue"
import Trading from "./trading.vue"
import { useMarketplaceStore } from "@/store/marketplace"
const marketplaceList = useMarketplaceStore()
const navList = ref([
@ -57,23 +52,28 @@ const clearHeroAll = () => {
marketplaceList.status = ''
}
onMounted(() => {
})
</script>
<style lang="scss" scoped>
.assets-content {
width: 100%;
height: 100%;
position: relative;
top: -600px;
left: 0;
.assets-user {
.assets-user-img {}
.assets-user-name {}
}
// position: relative;
// top: -600px;
// left: 0;
.assets-content-nav {
display: flex;
align-items: center;
padding-left: 35px;
position: sticky;
top: 0;
z-index: 1;
padding-top: 90px;
background: #16141b;
li {
display: flex;
align-items: center;
@ -101,8 +101,12 @@ const clearHeroAll = () => {
width: 100%;
margin-top: 20px;
.content-left {
width: 300px;
padding: 0 35px;
// width: 300px;
// height: 800px;
// position: sticky;
// top: 0;
// padding: 0 35px;
// padding-top: 120px;
}
.content-right {
width: calc(100% - 300px);

34
src/components/assets/assetsHeader.vue
View File

@ -1,18 +1,46 @@
<template>
<div class="mkt-header">
<div class="assets-user">
<div class="assets-user-img">
<img src="@/assets/img/marketplace/0000.png" alt="">
</div>
<div class="assets-user-name">{{ localWalletStore.showAddress }}</div>
</div>
</div>
</template>
<script setup>
import { ref } from "vue"
import {walletStore} from "@/store/wallet";
const localWalletStore = walletStore()
</script>
<style lang="scss" scoped>
.mkt-header {
width: 100%;
height: 1000px;
background: url('@/assets/img/marketplace/rolesbg.png') no-repeat;
background-size: 100% 100%;
.assets-user {
display: flex;
// margin: 168px 0 45px 77px;
padding: 168px 0 45px 77px;
.assets-user-img {
width: 173.8px;
height: 173.8px;
// border: 1px solid #000;
margin-right: 25px;
border-radius: 20px;
img {
width: 100%;
height: 100%;
}
}
.assets-user-name {
font-family: 'Poppins';
font-weight: bold;
font-size: 30px;
color: #FFFFFF;
}
}
}
</style>

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

@ -1,8 +1,10 @@
<template>
<div class="collection">
<div class="content-left">
<OverView :overviewValue="overviewValue" @clickOverviewChild="overviewChild" />
<Status :statusValue="statusValue" @clickStatusChild="statusChild" />
<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">
@ -33,7 +35,9 @@ import Status from "@/components/common/searchView/statusRadio.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([])
@ -42,11 +46,13 @@ const statusValue = ref('0')
const overviewChild = (val) => {
overviewValue.value = val
marketplaceStore.cursorObj.next_cursor = ''
getMyAssets()
}
const statusChild = (val) => {
statusValue.value = val
marketplaceStore.cursorObj.next_cursor = ''
getMyAssets()
}
@ -56,20 +62,47 @@ const getMyAssets = async () => {
const data = {
type: statusValue.value,
page_size: '20',
cursor: '0',
cursor: marketplaceStore.cursorObj.next_cursor,
search_name: overviewValue.value
}
if(myADdress) {
try {
let res = await apiAssetsState(myADdress, data)
nftList.value = res.rows
marketplaceStore.cursorObj = res.page
} 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) {
// console.log('请求')
getMyAssets()
// } else {
// console.log('不用请求')
}
return false;
}
}
}
onMounted(() => {
window.addEventListener("scroll", handleScroll, true);
getMyAssets()
})
</script>
@ -80,14 +113,24 @@ onMounted(() => {
display: flex;
justify-content: space-between;
margin-top: 30px;
background: #16141b;
box-shadow: 0 -10px 10px #16141b;
.content-left {
width: 300px;
height: 800px;
position: sticky;
top: 0;
padding: 0 35px;
padding-top: 140px;
box-sizing: border-box;
.left-content-left {
// background: #fff;
}
}
.content-right {
width: calc(100% - 300px);
padding-right: 40px;
// background: #fff;
padding-top: 140px;
.content-right-header {
width: calc(100% - 10px);
height: 60px;

2
src/components/assets/myCard.vue
View File

@ -273,7 +273,7 @@ onMounted(() => {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 5px;
padding-bottom: 8px;
>div {
height: 57px;
background: #1778f1;

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

@ -64,9 +64,9 @@
<div class="pages" v-if="nftList != undefined && nftList.length > 0">
<li v-for="(item, index) in nftList" :key="index">
<Card v-if="nftList != undefined || nftList.length > 0" @renewNft="renewNft" :nftData="item" />
<!-- <Card v-if="nftList != undefined || nftList.length > 0" @renewNft="renewNft" :nftData="item" />
<Card v-if="nftList != undefined || nftList.length > 0" @renewNft="renewNft" :nftData="item" />
<Card v-if="nftList != undefined || nftList.length > 0" @renewNft="renewNft" :nftData="item" />
<Card v-if="nftList != undefined || nftList.length > 0" @renewNft="renewNft" :nftData="item" />
<Card v-if="nftList != undefined || nftList.length > 0" @renewNft="renewNft" :nftData="item" /> -->
</li>
</div>
<div class="pages-no" v-else>
@ -222,9 +222,13 @@ const renewNft = async() => {
const getHeroData = async () => {
loadingDialogVisible.value = false;
try {
let res = await marketplaceList.getMarketplaceState(marketplaceList.getParamsData)
nftList.value = res.rows
console.log(res,'-----')
const { errcode, errmsg, rows, page } = await marketplaceList.getMarketplaceState(marketplaceList.getParamsData)
// console.log((toRaw(marketplaceList.cursorObj))
if(!errmsg) {
nftList.value = rows
// marketplaceList.cursorObj = page
console.log(rows,'-----')
}
// loadingDialogVisible.value = false;
} catch(e) {
// console.log(e)
@ -244,9 +248,29 @@ watch(() => [marketplaceList.overview,marketplaceList.sort,marketplaceList.minPr
})
// 滚动条变化修改游标
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) {
//请求数据接口
// this.seeMoreSchoolList();
console.log('scrollTop + windowHeight == scrollHeight请求接口',toRaw(marketplaceList.cursorObj), scrollTop, windowHeight, scrollHeight)
// if(toRaw(marketplaceList.cursorObj).remaining == 0) {
// console.log('请求',toRaw(marketplaceList.getParamsData), toRaw(marketplaceList.cursorObj))
// // getMyAssets()
// } else {
// console.log('不用请求')
// }
// return false;
}
}
onMounted(() => {
window.addEventListener("scroll", handleScroll, true);
getHeroData()
})
</script>
@ -257,7 +281,7 @@ onMounted(() => {
display: flex;
justify-content: space-between;
background: #16141b;
box-shadow: 0 -30px 30px #16141b;
box-shadow: 0 -10px 10px #16141b;
.mkt-content-left {
position: -webkit-sticky;
position: sticky;
@ -281,6 +305,7 @@ onMounted(() => {
width: calc(100% - 300px);
padding-right: 40px;
margin-left: 40px;
padding-top: 100px;
.mkt-content-right-header {
width: calc(100% - 10px);
height: 60px;

8
src/store/marketplace.js
View File

@ -13,6 +13,12 @@ export const useMarketplaceStore = defineStore('marketplace', () => {
const status = ref([])
const getCartList = ref([])
const currencyPrice = ref([])
const cursorObj = ref({
count: 0,
next_cursor: '',
previous_cursor: '',
remaining: ''
})
const getParamsData = ref({
page_size: 20,
cursor: '',
@ -81,7 +87,7 @@ export const useMarketplaceStore = defineStore('marketplace', () => {
}
return {
getParamsData,
getParamsData, cursorObj,
overview, updateOverviewStatus,
sort, updateSortStatus,
minPrice, updateMinPriceStatus,

45
src/views/AssetsView.vue
View File

@ -1,6 +1,9 @@
<template>
<div class="market">
<MktHeader />
<div class="market" ref="contentScroll">
<div class="header">
<MktHeader />
</div>
<!-- <div class="header"></div> -->
<MktContent class="content" />
</div>
</template>
@ -11,13 +14,49 @@ import { ref, reactive, onMounted, onUnmounted } from "vue";
import MktHeader from '@/components/assets/assetsHeader.vue'
import MktContent from '@/components/assets/assetsContent.vue'
// const scrollDirection = ref(null);
// const handleScroll = (event) => {
// if(event) {
// console.log(event)
// }
// // const deltaY = event.deltaY;
// // if (deltaY < 0) {
// // scrollDirection.value = 'up'; // 向上滚动
// // } else if (deltaY > 0) {
// // scrollDirection.value = 'down'; // 向下滚动
// // }
// }
// 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) {
// //请求数据接口
// // this.seeMoreSchoolList();
// console.log('scrollTop + windowHeight == scrollHeight',scrollTop, windowHeight, scrollHeight)
// return false;
// }
// }
onMounted(() => {
// handleScroll()
// window.addEventListener("scroll", handleScroll, true);
})
</script>
<style lang="scss" scoped>
.market {
background: #16141b;
.header {
width: 100%;
height: 480px;
background: url('@/assets/img/marketplace/rolesbg.png') no-repeat;
background-size: 100%;
// background: #fff;
}
}
</style>

4
src/views/MarketplaceView.vue
View File

@ -48,15 +48,15 @@ onUnmounted(() => {
<style lang="scss" scoped>
.market {
width: 100%;
// background:#16141b;
.header {
height: 480px;
background: url('@/assets/img/marketplace/rolesbg.png') no-repeat;
background-size: 100% 100
background-size: 100%;
}
.content {
// position: relative;
// top: -100px;
// margin-top: -140px;
}
}
</style>