310 lines
8.9 KiB
Vue
310 lines
8.9 KiB
Vue
<template>
|
|
<div ref="sellModal">
|
|
|
|
<a-modal :class="'buyDia'" v-model:open="props.sellDialogVisible" :closable="false" :footer="null" :getContainer="() => $refs.sellModal" :maskClosable="false" @ok="handleOk">
|
|
<!-- <template #footer>
|
|
<a-button key="back" @click="handleCancel">Return</a-button>
|
|
<a-button key="submit" type="primary" :loading="loading" @click="handleOk">Submit</a-button>
|
|
</template> -->
|
|
<div class="top-close" @click="handleCancel">
|
|
<img src="@/assets/img/marketplace/Close counter.png" alt="">
|
|
</div>
|
|
<div class="content">
|
|
<div class="content-title">On the shelves NFT</div>
|
|
<div class="content-table">
|
|
<div>NFT</div>
|
|
<div>On the shelves Price</div>
|
|
<div>Royalties</div>
|
|
<div>Period</div>
|
|
<div>Expected profits</div>
|
|
</div>
|
|
<div class="content-nfts">
|
|
<li>
|
|
<div class="nft">
|
|
<div class="nft-img">
|
|
<img :src="sellDataArr.image" alt="tupian">
|
|
</div>
|
|
</div>
|
|
<div class="shelves-price">
|
|
<div class="price-top">
|
|
<div>
|
|
<a-input :value="priceValue" @pressEnter="overviewData" placeholder="Basic usage">
|
|
<template #prefix>
|
|
<search-outlined style="color: #9588ac;" />
|
|
</template>
|
|
</a-input>
|
|
</div>
|
|
<div>
|
|
<span>ETH</span>
|
|
<img src="@/assets/img/marketplace/ETHicon.png" alt="">
|
|
</div>
|
|
</div>
|
|
<div class="price-btm">
|
|
<span>The floor Price: {{ 0.18 }}</span>
|
|
<img src="@/assets/img/marketplace/ETHicon.png" alt="">
|
|
</div>
|
|
</div>
|
|
<div class="royalties">2%</div>
|
|
<div class="expected">Expected profits</div>
|
|
<div class="profits">
|
|
<!-- <div>{{ priceCalculated(sellDataArr[0].event.data.buy[0].amount) }}</div> -->
|
|
<div class="price-img"><span>{{ 0.08 }}</span><img src="@/assets/img/marketplace/ETHicon.png" alt=""></div>
|
|
</div>
|
|
</li>
|
|
</div>
|
|
</div>
|
|
<div class="btm">
|
|
<div class="btm-btn" @click="sellConfirm">Confirm</div>
|
|
</div>
|
|
</a-modal>
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
import { ref, toRaw, defineEmits } from "vue";
|
|
import {priceCalculated} from "@/configs/priceCalculate.js"
|
|
import {PassportWallet} from "@/wallet/passPort.js"
|
|
// const passProd = ref(new PassportWallet())
|
|
const props = defineProps({
|
|
sellDialogVisible: {
|
|
type: Boolean,
|
|
required: true,
|
|
},
|
|
sellDataArr: {
|
|
type: Object,
|
|
required: true,
|
|
},
|
|
});
|
|
|
|
const emit = defineEmits(['handleClose'])
|
|
const priceValue = ref(0.02)
|
|
|
|
const handleOk = (e) => {
|
|
emit('handleClose')
|
|
};
|
|
|
|
|
|
const currency = import.meta.env.VUE_APP_MARKET_CURRENCY
|
|
const sellConfirm = async () => {
|
|
if(priceValue.value) {
|
|
const pass = new PassportWallet()
|
|
const data = {
|
|
// import.meta.env.VUE_APP_PASSPORT_MARKET_ADDRESS
|
|
contractAddress: props.sellDataArr.contract_address,
|
|
tokenId: props.sellDataArr.token_id,
|
|
currencyAddress: currency,
|
|
currencyAmount: '1000000000000000000'
|
|
}
|
|
// sellDataArr.value.push(val)
|
|
// buyDialogVisible.value = true
|
|
let res = await pass.beginSellERC721(data)
|
|
console.log('售NFT', res)
|
|
} else {
|
|
alert('价格不能为空')
|
|
}
|
|
}
|
|
// const priceAmount = () => {
|
|
// return priceCalculated(price)
|
|
// }
|
|
|
|
const handleCancel = (e) => {
|
|
emit('handleClose')
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
// .ant-modal-wrap{
|
|
|
|
:deep(.ant-modal) {
|
|
width: 1362px !important;
|
|
color: #fff;
|
|
.ant-modal-content {
|
|
padding: 0px;
|
|
background: #1a1821;
|
|
border: 1px solid #B966FF;
|
|
box-shadow: 0px 15px 28px 3px rgba(22,22,22,0.13);
|
|
border-radius: 100px;
|
|
.top-close {
|
|
position: absolute;
|
|
top: -20px;
|
|
right: -20px;
|
|
width: 106px;
|
|
height: 106px;
|
|
cursor: pointer;
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
.ant-modal-body {
|
|
padding: 30px 50px;
|
|
padding-bottom: 10px;
|
|
.content {
|
|
.content-title {
|
|
font-family: 'Anton';
|
|
font-weight: 400;
|
|
font-size: 48px;
|
|
margin-left: 50px;
|
|
}
|
|
.content-table {
|
|
width: 1208px;
|
|
height: 48px;
|
|
line-height: 48px;
|
|
margin: 0 auto;
|
|
background: #2d2738;
|
|
border-radius: 20px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
color: #A8A5AC;
|
|
font-size: 14px;
|
|
div {
|
|
width: 240px;
|
|
text-align: center;
|
|
&:nth-child(1) {
|
|
width: 540px;
|
|
text-align: center;
|
|
// padding-left: 150px;
|
|
box-sizing: border-box;
|
|
}
|
|
&:nth-child(3) {
|
|
width: 120px;
|
|
text-align: center;
|
|
box-sizing: border-box;
|
|
}
|
|
&:nth-child(4) {
|
|
width: 209px;
|
|
text-align: center;
|
|
box-sizing: border-box;
|
|
}
|
|
}
|
|
}
|
|
.content-nfts {
|
|
width: 1208px;
|
|
margin: 0 auto;
|
|
li {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
// align-items: center;
|
|
margin: 20px 0;
|
|
>div {
|
|
width: 240px;
|
|
font-family: 'Poppins';
|
|
font-weight: 500;
|
|
font-size: 30px;
|
|
text-align: center;
|
|
}
|
|
.nft {
|
|
display: flex;
|
|
align-items: center;
|
|
width: 540px;
|
|
.nft-img {
|
|
width: 369px;
|
|
height: 551px;
|
|
border: 1px solid #fff;
|
|
margin-left: 50px;
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
.shelves-price {
|
|
width: 262px;
|
|
.price-top {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
width: 100%;
|
|
height: 54px;
|
|
background: #2d2738;
|
|
border-radius: 20px;
|
|
div {
|
|
display: flex;
|
|
align-items: center;
|
|
span {
|
|
color: #9950FD;
|
|
}
|
|
img {
|
|
width: 28px;
|
|
height: 28px;
|
|
margin-left: 10px;
|
|
}
|
|
}
|
|
}
|
|
.price-btm {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-top: 5px;
|
|
span {
|
|
font-family: 'Poppins';
|
|
font-weight: 400;
|
|
font-size: 18px;
|
|
}
|
|
img {
|
|
width: 19px;
|
|
height: 19px;
|
|
margin-left: 10px;
|
|
}
|
|
}
|
|
}
|
|
.royalties {
|
|
width: 120px;
|
|
}
|
|
.expected {
|
|
width: 209px;
|
|
height: 58px;
|
|
font-family: 'Poppins';
|
|
font-weight: 500;
|
|
font-size: 30px;
|
|
}
|
|
.profits {
|
|
.price-img {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
img {
|
|
width: 28px;
|
|
height: 28px;
|
|
margin-left: 10px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.btm {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
box-sizing: border-box;
|
|
padding-bottom: 20px;
|
|
position: relative;
|
|
.btm-btn {
|
|
position: absolute;
|
|
top: -120px;
|
|
right: 30px;
|
|
width: 362px;
|
|
height: 97px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
line-height: 40px;
|
|
margin-right: 20px;
|
|
background: #fec25d;
|
|
color: #2D2738;
|
|
text-align: center;
|
|
border-radius: 20px;
|
|
box-shadow: 0 0 5px 0px #fec25d;
|
|
border-radius: 100px;
|
|
font-family: 'Poppins';
|
|
font-weight: 500;
|
|
font-size: 30px;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// }
|
|
</style> |