146 lines
3.8 KiB
Vue
146 lines
3.8 KiB
Vue
<template>
|
|
<div class="trading">
|
|
<div class="content-left">
|
|
<OverView :overviewValue="overviewValue" @clickOverviewChild="overviewChild" />
|
|
<StatusRadio :statusValue="statusValue" @clickStatusChild="statusChild" />
|
|
</div>
|
|
<div class="content-right">
|
|
<div class="content-right-content">
|
|
<div class="pages-horizontal">
|
|
<Card :nftData="nftList" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, onMounted, onUnmounted, toRaw, watch } from "vue";
|
|
import OverView from "@/components/common/searchView/Overview.vue";
|
|
import StatusRadio from "@/components/common/searchView/statusRadio.vue";
|
|
import Card from "@/components/common/tradingCard.vue";
|
|
import { apiHistoryState, nftDetail } from "@/utils/marketplace"
|
|
import {walletStore} from "@/store/wallet";
|
|
import {useMarketplaceStore} from "@/store/marketplace";
|
|
import { parseTradeEvent } from "@/components/chain/utils"
|
|
const localWalletStore = walletStore()
|
|
const nftList = ref([])
|
|
const overviewValue = ref()
|
|
const statusValue = ref('0')
|
|
|
|
const cursorObj = ref()
|
|
|
|
const overviewChild = (val) => {
|
|
overviewValue.value = val
|
|
getHistoryList()
|
|
}
|
|
|
|
const statusChild = (val) => {
|
|
statusValue.value = val
|
|
nftList.value = []
|
|
getHistoryList()
|
|
}
|
|
|
|
const next_cursor = ref({
|
|
type: 0,
|
|
page_size: '20',
|
|
cursor: '',
|
|
search_name: '',
|
|
total_count: 0,
|
|
})
|
|
const getHistoryList = async () => {
|
|
const myADdress = localWalletStore.address
|
|
const data = {
|
|
type: statusValue.value,
|
|
page_size: '20',
|
|
cursor: next_cursor.value.next_cursor,
|
|
search_name: overviewValue.value,
|
|
}
|
|
if(myADdress) {
|
|
let nftListBox
|
|
let res = await apiHistoryState(myADdress,data)
|
|
next_cursor.value = res.page
|
|
nftList.value = [...nftList.value, ...res.rows]
|
|
nftListBox = nftList.value.reduce((acc, obj) => {
|
|
const existingObj = acc.find(item => item.nft.token_id == obj.nft.token_id)
|
|
if(!existingObj) {
|
|
acc.push(obj)
|
|
}
|
|
return acc
|
|
},[])
|
|
for (let sub of nftListBox) {
|
|
if (sub.event?.data) {
|
|
const _data = parseTradeEvent(sub.event)
|
|
sub.event.icon = _data.icon
|
|
sub.event.usd = _data.usd
|
|
sub.event.currencyName = _data.currencyName
|
|
sub.event.amount = _data.amount
|
|
sub.event.decimals = _data.decimals
|
|
}
|
|
}
|
|
console.log(nftListBox)
|
|
nftList.value = nftListBox
|
|
}
|
|
}
|
|
|
|
const handleScrollTrad = () => {
|
|
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(next_cursor.value.remaining != 0) {
|
|
getHistoryList()
|
|
}
|
|
return false;
|
|
}
|
|
}
|
|
|
|
watch(localWalletStore,() => {
|
|
if(!localWalletStore.token) {
|
|
nftList.value = []
|
|
} else {
|
|
getHistoryList()
|
|
}
|
|
})
|
|
|
|
onMounted(() => {
|
|
getHistoryList()
|
|
window.addEventListener("scroll", handleScrollTrad, true);
|
|
})
|
|
|
|
onUnmounted(() => {
|
|
window.removeEventListener('scroll', handleScrollTrad)
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.trading {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
.content-left {
|
|
width: 300px;
|
|
height: 480px;
|
|
padding: 0 35px;
|
|
position: sticky;
|
|
top: 140px;
|
|
}
|
|
.content-right {
|
|
width: calc(100% - 300px);
|
|
padding-right: 40px;
|
|
.content-right-content {
|
|
width: 1488px;
|
|
margin-top: 30px;
|
|
.pages-vertical {
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |