购买弹窗
This commit is contained in:
parent
d3170e6337
commit
8d449b5aaf
BIN
src/assets/img/marketplace/Calendar .png
Normal file
BIN
src/assets/img/marketplace/Calendar .png
Normal file
Binary file not shown.
After Width: | Height: | Size: 945 B |
@ -37,6 +37,29 @@
|
|||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="content-nfts-top-right-title">Period</div>
|
||||||
|
<div class="content-nfts-top-right-period">
|
||||||
|
<div class="option-day">
|
||||||
|
<a-space>
|
||||||
|
<a-select ref="select" v-model:value="optionDayValue" :options="optionsDay" @focus="focus" @change="handleChange">
|
||||||
|
</a-select>
|
||||||
|
</a-space>
|
||||||
|
</div>
|
||||||
|
<div class="calendar">
|
||||||
|
<img src="@/assets/img/marketplace/Calendar .png" alt="">
|
||||||
|
<span>{{ formatDateGMT() }} PM</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="content-nfts-top-right-total">
|
||||||
|
<div class="left">
|
||||||
|
<div>Total price</div>
|
||||||
|
<div><down-outlined /> <up-outlined /></div>
|
||||||
|
</div>
|
||||||
|
<div class="right">
|
||||||
|
<span>0.018</span>
|
||||||
|
<img src="@/assets/img/marketplace/ETHicon.png" alt="">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="content-nfts-btm">
|
<div class="content-nfts-btm">
|
||||||
@ -84,7 +107,8 @@
|
|||||||
</template>
|
</template>
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, toRaw, defineEmits, onMounted } from "vue";
|
import { ref, toRaw, defineEmits, onMounted } from "vue";
|
||||||
import {priceCalculated} from "@/configs/priceCalculate.js"
|
import { DownOutlined, UpOutlined } from "@ant-design/icons-vue"
|
||||||
|
import { priceCalculated, timeFormat } from "@/configs/priceCalculate.js"
|
||||||
import {PassportWallet} from "@/wallet/passPort.js"
|
import {PassportWallet} from "@/wallet/passPort.js"
|
||||||
// const passProd = ref(new PassportWallet())
|
// const passProd = ref(new PassportWallet())
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
@ -103,6 +127,25 @@ const props = defineProps({
|
|||||||
});
|
});
|
||||||
|
|
||||||
const emit = defineEmits(['handleClose'])
|
const emit = defineEmits(['handleClose'])
|
||||||
|
const optionsDay = ref([
|
||||||
|
{
|
||||||
|
value: "86400000",
|
||||||
|
label: "1 day",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "604800000",
|
||||||
|
label: "7 day",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "2592000000",
|
||||||
|
label: "30 day",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "15552000000",
|
||||||
|
label: "180 day",
|
||||||
|
}
|
||||||
|
])
|
||||||
|
const optionDayValue = ref('1day')
|
||||||
const priceValue = ref()
|
const priceValue = ref()
|
||||||
|
|
||||||
const handleOk = (e) => {
|
const handleOk = (e) => {
|
||||||
@ -115,17 +158,24 @@ const overviewData = (e) => {
|
|||||||
console.log(e)
|
console.log(e)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const handleChange = (value) => {
|
||||||
|
console.log(value)
|
||||||
|
// marketplaceList.sort = value
|
||||||
|
};
|
||||||
|
|
||||||
const currency = import.meta.env.VUE_APP_MARKET_CURRENCY
|
const currency = import.meta.env.VUE_APP_MARKET_CURRENCY
|
||||||
const sellConfirm = async () => {
|
const sellConfirm = async () => {
|
||||||
if(priceValue.value) {
|
if(priceValue.value) {
|
||||||
|
let curDate = new Date()
|
||||||
|
let orderData = new Date(curDate.getTime() + 24*60*60*1000)
|
||||||
const pass = new PassportWallet()
|
const pass = new PassportWallet()
|
||||||
const data = {
|
const data = {
|
||||||
// import.meta.env.VUE_APP_PASSPORT_MARKET_ADDRESS
|
// import.meta.env.VUE_APP_PASSPORT_MARKET_ADDRESS
|
||||||
contractAddress: props.sellDataArr.contract_address,
|
contractAddress: props.sellDataArr.contract_address,
|
||||||
tokenId: props.sellDataArr.token_id,
|
tokenId: props.sellDataArr.token_id,
|
||||||
currencyAddress: currency,
|
currencyAddress: currency,
|
||||||
currencyAmount: '1000000000000000000'
|
currencyAmount: '1000000000000000000',
|
||||||
|
orderExpiry: orderData,
|
||||||
}
|
}
|
||||||
// sellDataArr.value.push(val)
|
// sellDataArr.value.push(val)
|
||||||
// buyDialogVisible.value = true
|
// buyDialogVisible.value = true
|
||||||
@ -143,6 +193,13 @@ const handleCancel = (e) => {
|
|||||||
emit('handleClose')
|
emit('handleClose')
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 获取当前时间
|
||||||
|
const formatDateGMT = () => {
|
||||||
|
// let date = new Date().toGMTString();
|
||||||
|
let date = timeFormat(new Date());
|
||||||
|
return date;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
})
|
})
|
||||||
@ -293,6 +350,38 @@ onMounted(() => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.content-nfts-top-right-period {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
.option-day {
|
||||||
|
width: 205px;
|
||||||
|
height: 54px;
|
||||||
|
margin-top: 8px;
|
||||||
|
background: pink;
|
||||||
|
}
|
||||||
|
.calendar {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
width: 413.5px;
|
||||||
|
height: 54px;
|
||||||
|
margin-top: 8px;
|
||||||
|
background: rgba(179,181,218,0);
|
||||||
|
border-radius: 27px;
|
||||||
|
border: 2px solid rgba(74,75,110,0.7);
|
||||||
|
img {
|
||||||
|
width: 33px;
|
||||||
|
height: 33px;
|
||||||
|
margin-left: 29px;
|
||||||
|
margin-right: 17px;
|
||||||
|
}
|
||||||
|
span {
|
||||||
|
font-family: 'Poppins';
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 24px;
|
||||||
|
color: #FFFFFF;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.content-nfts-btm {
|
.content-nfts-btm {
|
||||||
|
Loading…
x
Reference in New Issue
Block a user