135 lines
2.9 KiB
Vue
135 lines
2.9 KiB
Vue
<template>
|
|
<div class="hanging">
|
|
<div class="content-left">
|
|
<OverView :overviewValue="overviewValue" @clickOverviewChild="overviewChild" />
|
|
</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 } from "vue";
|
|
import OverView from "@/components/common/searchView/Overview.vue";
|
|
import Card from "@/components/common/hangingCard.vue";
|
|
import { apiHangingState } from "@/utils/marketplace"
|
|
import {walletStore} from "@/store/wallet";
|
|
import { formatPrice } from "@/components/chain/utils"
|
|
const localWalletStore = walletStore()
|
|
|
|
const nftList = ref([])
|
|
const overviewValue = ref()
|
|
|
|
const overviewChild = (val) => {
|
|
overviewValue.value = val
|
|
getHistoryList()
|
|
}
|
|
|
|
const getHistoryList = async () => {
|
|
const myAddress = localWalletStore.address
|
|
let data = {
|
|
page_size: 20, //TODO:: 根据实际情况修改该值
|
|
cursor: '',
|
|
search: {
|
|
name: overviewValue.value,
|
|
},
|
|
filter: {
|
|
price_min: '',
|
|
price_max: '',
|
|
item_ids: [],
|
|
hero_ranks: []
|
|
},
|
|
sort: {
|
|
fields: [
|
|
{
|
|
name: '',
|
|
type: 0,
|
|
}
|
|
]
|
|
}
|
|
}
|
|
if(myAddress) {
|
|
let res = await apiHangingState(data)
|
|
for (let sub of res.rows) {
|
|
if (sub.event?.data) {
|
|
const _data = formatPrice(sub.event.data)
|
|
sub.event.icon = _data.icon
|
|
sub.event.usd = _data.usd
|
|
sub.event.currencyName = _data.currencyName
|
|
sub.event.amount = _data.amount
|
|
}
|
|
}
|
|
nftList.value = res.rows
|
|
}
|
|
}
|
|
|
|
onMounted(() => {
|
|
getHistoryList()
|
|
})
|
|
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.hanging {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
.content-left {
|
|
width: 300px;
|
|
padding: 0 35px;
|
|
}
|
|
.content-right {
|
|
width: calc(100% - 300px);
|
|
padding-right: 40px;
|
|
// background: #fff;
|
|
.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;
|
|
}
|
|
.search-list {
|
|
display: flex;
|
|
align-items: center;
|
|
color: #fff;
|
|
li {
|
|
margin-left: 10px;
|
|
background: #2d2738;
|
|
padding: 5px 10px;
|
|
border-radius: 10px;
|
|
font-size: 12px;
|
|
cursor: pointer;
|
|
}
|
|
.clear-all {
|
|
background: #5a4a6d;
|
|
}
|
|
}
|
|
}
|
|
.content-right-content {
|
|
margin-top: 30px;
|
|
.pages-horizontal {
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |