161 lines
4.5 KiB
Vue
161 lines
4.5 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">
|
|
<img :src="nft.image" alt="">
|
|
</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">
|
|
{{ event.data.buy[0].amount }}
|
|
</div>
|
|
</template>
|
|
</a-table-column>
|
|
<a-table-column title="Create time" data-index="event">
|
|
<template #default="{ text: event }">
|
|
<div>
|
|
{{ event.data.created_at }}
|
|
</div>
|
|
</template>
|
|
</a-table-column>
|
|
<a-table-column title="Expiry date" data-index="event">
|
|
<template #default="{ text: event }">
|
|
<div>
|
|
{{ 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 } from "vue"
|
|
import { BlockChain } from "@/components/chain/BlockChain"
|
|
|
|
const props = defineProps({
|
|
nftData: {
|
|
type: Array,
|
|
required: true,
|
|
},
|
|
});
|
|
|
|
const eventNft = async (e) => {
|
|
console.log(e.data.id)
|
|
// return
|
|
const bc = new BlockChain()
|
|
let res = await bc.market.cancelOrder(e.data.id)
|
|
console.log("---",res)
|
|
}
|
|
|
|
|
|
</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;
|
|
&::before {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.ant-table-tbody {
|
|
tr {
|
|
background: #16141b;
|
|
td {
|
|
border-color: #34354e;
|
|
background: #16141b !important;
|
|
vertical-align: middle;
|
|
>div {
|
|
text-align: center;
|
|
}
|
|
.nft {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-evenly;
|
|
.nft-img {
|
|
width: 213px;
|
|
height: 100%;
|
|
// display: none;
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
.nft-name {
|
|
width: 120px;
|
|
text-align: left;
|
|
margin-left: 20px;
|
|
}
|
|
}
|
|
.price {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.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> |