227 lines
6.9 KiB
Vue
227 lines
6.9 KiB
Vue
<template>
|
|
<div>
|
|
<a-table :data-source="nftData" :pagination="false">
|
|
<a-table-column title="NFT" data-index="nft" :width="400">
|
|
<template #default="{ text: nft }">
|
|
<div class="nft">
|
|
<div class="nft-img">
|
|
<ImgCard :nftData="nft" />
|
|
</div>
|
|
<div class="nft-name">{{ nft.name }}</div>
|
|
</div>
|
|
</template>
|
|
</a-table-column>
|
|
<a-table-column title="Price" data-index="event">
|
|
<template #default="{ text: event }">
|
|
<div class="price">
|
|
<div>
|
|
{{ priceCalculated(event.amount, event.decimals) }}
|
|
</div>
|
|
<p>$ {{ (event.usd) }}</p>
|
|
</div>
|
|
</template>
|
|
</a-table-column>
|
|
<a-table-column title="" data-index="event">
|
|
<template #default="{ text: event }">
|
|
<div class="price-icon">
|
|
<!-- <span>{{event}}</span> -->
|
|
<img :src="event.icon" alt="">
|
|
</div>
|
|
</template>
|
|
</a-table-column>
|
|
<a-table-column title="Listing Time" data-index="event">
|
|
<template #default="{ text: event }">
|
|
<div>
|
|
{{ showTime(event.data.created_at) }}
|
|
</div>
|
|
</template>
|
|
</a-table-column>
|
|
<a-table-column title="Expiration Time" data-index="event">
|
|
<template #default="{ text: event }">
|
|
<div>
|
|
{{ showTime(event.data.end_at) }}
|
|
</div>
|
|
</template>
|
|
</a-table-column>
|
|
<a-table-column title="" data-index="event">
|
|
<template #default="{ text: event }">
|
|
<div class="event-btn" @click="eventNft(event)">
|
|
Off the shelves
|
|
</div>
|
|
</template>
|
|
</a-table-column>
|
|
</a-table>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, toRaw, onMounted, inject } from "vue"
|
|
const message = inject('$message')
|
|
import ImgCard from "@/components/common/imgCard.vue"
|
|
import { priceCalculated, showTime } from "@/configs/priceCalculate"
|
|
import { BlockChain } from "@/components/chain/BlockChain"
|
|
const emit = defineEmits(['renewMyNft'])
|
|
|
|
|
|
const props = defineProps({
|
|
nftData: {
|
|
type: Array,
|
|
required: true,
|
|
},
|
|
});
|
|
|
|
// 取消出售
|
|
const eventNft = async (e) => {
|
|
try {
|
|
const bc = new BlockChain()
|
|
let res = await bc.market.cancelOrder([e.data.id])
|
|
if(res.result) {
|
|
let timer = setTimeout(() => {
|
|
message.success('Your item has been unlisted.')
|
|
emit('renewMyNft')
|
|
clearTimeout(timer);
|
|
}, 2000);
|
|
}
|
|
} catch (e) {
|
|
message.error('Your item has failed to be unlisted.')
|
|
}
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
div {
|
|
:deep(.ant-table-wrapper) {
|
|
.ant-spin-nested-loading {
|
|
.ant-spin-container {
|
|
.ant-table {
|
|
color: #fff;
|
|
background: #16141b;
|
|
.ant-table-container {
|
|
.ant-table-content {
|
|
.ant-table-thead {
|
|
tr {
|
|
th {
|
|
color: #B3B5DA;
|
|
background: #16141b;
|
|
border-color: #34354e;
|
|
text-align: center;
|
|
font-size: 24px;
|
|
&::before {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.ant-table-tbody {
|
|
tr {
|
|
background: #16141b;
|
|
td {
|
|
border-color: #34354e;
|
|
background: #16141b !important;
|
|
vertical-align: middle;
|
|
>div {
|
|
text-align: center;
|
|
font-family: 'Poppins';
|
|
font-weight: 600;
|
|
font-size: 20px;
|
|
color: #F3F0FF;
|
|
}
|
|
.nft {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-evenly;
|
|
.nft-img {
|
|
width: 213px;
|
|
height: 100%;
|
|
.card-img-common {
|
|
.img-top {
|
|
width: 60px;
|
|
height: 20px;
|
|
top: 10px;
|
|
left: 10px;
|
|
font-size: 14px;
|
|
}
|
|
.img-btm {
|
|
bottom: 15px;
|
|
left: 20px;
|
|
>div {
|
|
width: 58px;
|
|
height: 20px;
|
|
font-size: 12px;
|
|
}
|
|
div:nth-child(2) {
|
|
margin-left: 8px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.nft-name {
|
|
width: 120px;
|
|
text-align: left;
|
|
margin-left: 20px;
|
|
}
|
|
}
|
|
.price {
|
|
font-weight: 400;
|
|
color: #BB7FFF;
|
|
position: relative;
|
|
div {
|
|
font-family: 'Anton';
|
|
font-size: 42px;
|
|
}
|
|
p {
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 100%;
|
|
font-family: 'Poppins';
|
|
font-size: 24px;
|
|
}
|
|
}
|
|
.price-icon {
|
|
width: 39px;
|
|
height: 39px;
|
|
margin-left: 10px;
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
.event-btn {
|
|
width: 348px;
|
|
margin: 0 auto;
|
|
height: 57px;
|
|
line-height: 57px;
|
|
background: #FF6271;
|
|
border-radius: 12px;
|
|
font-family: 'Poppins';
|
|
font-weight: bold;
|
|
font-size: 28px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
}
|
|
&:hover {
|
|
background: #16141b !important;
|
|
td {
|
|
background: #16141b !important;
|
|
}
|
|
.ant-table-cell-row-hover {
|
|
background: #16141b !important;
|
|
}
|
|
.ant-table-cell {
|
|
background: #16141b !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |