调用购买合约
This commit is contained in:
yuyongdong
parent
05e1605c69
commit
1d63826bb5
3
components.d.ts
vendored
3
components.d.ts
vendored
@ -16,6 +16,7 @@ declare module 'vue' {
|
||||
ACollapsePanel: typeof import('ant-design-vue/es')['CollapsePanel']
|
||||
AInput: typeof import('ant-design-vue/es')['Input']
|
||||
AInputSearch: typeof import('ant-design-vue/es')['InputSearch']
|
||||
AModal: typeof import('ant-design-vue/es')['Modal']
|
||||
ASelect: typeof import('ant-design-vue/es')['Select']
|
||||
ASelectOption: typeof import('ant-design-vue/es')['SelectOption']
|
||||
ASpace: typeof import('ant-design-vue/es')['Space']
|
||||
@ -25,6 +26,7 @@ declare module 'vue' {
|
||||
ATableColumn: typeof import('ant-design-vue/es')['TableColumn']
|
||||
ATooltip: typeof import('ant-design-vue/es')['Tooltip']
|
||||
Banner: typeof import('./src/components/home/banner.vue')['default']
|
||||
BuyDialog: typeof import('./src/components/Dialogs/buyDialog.vue')['default']
|
||||
Card: typeof import('./src/components/common/card.vue')['default']
|
||||
Cart: typeof import('./src/components/cart/index.vue')['default']
|
||||
ChainModel: typeof import('./src/components/home/ChainModel.vue')['default']
|
||||
@ -59,6 +61,7 @@ declare module 'vue' {
|
||||
RouterLink: typeof import('vue-router')['RouterLink']
|
||||
RouterView: typeof import('vue-router')['RouterView']
|
||||
Sort: typeof import('./src/components/common/searchView/Sort.vue')['default']
|
||||
StarTimer: typeof import('./src/components/common/starTimer.vue')['default']
|
||||
Status: typeof import('./src/components/common/searchView/status.vue')['default']
|
||||
Stotus: typeof import('./src/components/common/searchView/stotus.vue')['default']
|
||||
TeamMember: typeof import('./src/components/about/TeamMember.vue')['default']
|
||||
|
||||
BIN
src/assets/img/marketplace/Add shopping cart.png
Normal file
BIN
src/assets/img/marketplace/Add shopping cart.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
BIN
src/assets/img/marketplace/BG01.jpg
Normal file
BIN
src/assets/img/marketplace/BG01.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 34 MiB |
BIN
src/assets/img/marketplace/Close counter.png
Normal file
BIN
src/assets/img/marketplace/Close counter.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.5 KiB |
BIN
src/assets/img/marketplace/Move out.png
Normal file
BIN
src/assets/img/marketplace/Move out.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
251
src/components/Dialogs/buyDialog.vue
Normal file
251
src/components/Dialogs/buyDialog.vue
Normal file
@ -0,0 +1,251 @@
|
||||
<template>
|
||||
<a-modal :class="'buyDia'" v-model:open="props.buyDialogVisible" :closable="false" :footer="null" @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">Transaction confirmation ( 2 )</div>
|
||||
<div class="content-table">
|
||||
<div>NFT</div>
|
||||
<div>Token ID</div>
|
||||
<div>Price</div>
|
||||
</div>
|
||||
<div class="content-nfts">
|
||||
<li>
|
||||
<div class="nft">
|
||||
<div class="nft-img">
|
||||
<img src="" alt="">
|
||||
</div>
|
||||
<div class="nft-name">NFT Name</div>
|
||||
</div>
|
||||
<div class="id">2516</div>
|
||||
<div class="price">
|
||||
<div>0.018</div>
|
||||
<div class="price-img"><img src="@/assets/img/marketplace/ETHicon.png" alt=""></div>
|
||||
</div>
|
||||
</li>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btm">
|
||||
<div class="btm-left">
|
||||
<li>Total : </li>
|
||||
<li>
|
||||
<div>
|
||||
<span>0.36</span>
|
||||
<img src="@/assets/img/marketplace/ETHicon.png" alt="">
|
||||
</div>
|
||||
<div class="money">$ 400</div>
|
||||
</li>
|
||||
</div>
|
||||
<div class="btm-right" @click="buyConfirm">Confirm</div>
|
||||
</div>
|
||||
</a-modal>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref, toRaw, defineEmits } from "vue";
|
||||
import {PassportWallet} from "@/wallet/passPort.js"
|
||||
// const passProd = ref(new PassportWallet())
|
||||
const props = defineProps({
|
||||
buyDialogVisible: {
|
||||
type: Boolean,
|
||||
required: true,
|
||||
},
|
||||
buyDataArr: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(['handleClose'])
|
||||
|
||||
const handleOk = (e) => {
|
||||
emit('handleClose')
|
||||
};
|
||||
const buyConfirm = async () => {
|
||||
const pass = new PassportWallet()
|
||||
|
||||
let ids = []
|
||||
ids.push(toRaw(props.buyDataArr)[0].nft.token_id)
|
||||
// console.log(toRaw(props.buyDataArr)[0].nft.token_id)
|
||||
// return
|
||||
let res = await pass.beginBuy(toRaw(props.buyDataArr)[0].nft.token_id)
|
||||
console.log('购买', res)
|
||||
}
|
||||
|
||||
const handleCancel = (e) => {
|
||||
emit('handleClose')
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
// .ant-modal-wrap{
|
||||
|
||||
.buyDia {
|
||||
width: 1140px !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: -53px;
|
||||
right: -53px;
|
||||
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: 1017px;
|
||||
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: left;
|
||||
padding-left: 100px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
&:nth-child(3) {
|
||||
text-align: right;
|
||||
padding-right: 100px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
}
|
||||
.content-nfts {
|
||||
width: 1017px;
|
||||
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: 110px;
|
||||
height: 164px;
|
||||
border: 1px solid #fff;
|
||||
margin-left: 50px;
|
||||
}
|
||||
.nft-name {
|
||||
font-weight: bold;
|
||||
margin-left: 20px;
|
||||
}
|
||||
}
|
||||
.id {
|
||||
}
|
||||
.price {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.price-img {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
margin-left: 10px;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.btm {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-left: 60px;
|
||||
padding-top: 20px;
|
||||
border-top: 2px solid #3A3B57;
|
||||
box-sizing: border-box;
|
||||
.btm-left {
|
||||
display: flex;
|
||||
margin-left: 20px;
|
||||
li {
|
||||
font-family: 'Anton';
|
||||
font-weight: 400;
|
||||
font-size: 42px;
|
||||
color: #BB7FFF;
|
||||
div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
img {
|
||||
width: 39px;
|
||||
height: 39px;
|
||||
margin-left: 20px;
|
||||
}
|
||||
}
|
||||
.money {
|
||||
font-family: 'Poppins';
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.btm-right {
|
||||
width: 240px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
line-height: 40px;
|
||||
margin-right: 20px;
|
||||
background: #fec25d;
|
||||
color: #2D2738;
|
||||
font-family: 'Poppins';
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
border-radius: 20px;
|
||||
box-shadow: 0 0 5px 0px #fec25d;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// }
|
||||
</style>
|
||||
@ -32,7 +32,8 @@ import { ref, defineEmits, onMounted } from "vue"
|
||||
import { useRouter, useRoute } from "vue-router";
|
||||
import { useImmutableStore } from "@/store/immutable"
|
||||
import {
|
||||
apiGetCartList
|
||||
apiGetCartList,
|
||||
apiClearCartList,
|
||||
} from "@/utils/marketplace"
|
||||
const router = useRouter();
|
||||
// console.log(marketplaceStore.cartList,'Cart-------')
|
||||
@ -49,8 +50,14 @@ const toMarketplace = () => {
|
||||
router.push('/marketplace');
|
||||
}
|
||||
|
||||
const clearCart = () => {
|
||||
const clearCart = async () => {
|
||||
console.log('清楚购物车')
|
||||
try {
|
||||
let res = await apiClearCartList()
|
||||
console.log(res)
|
||||
} catch (e) {
|
||||
console.log(e)
|
||||
}
|
||||
}
|
||||
|
||||
const getCartList = async () => {
|
||||
@ -66,7 +73,7 @@ const getCartList = async () => {
|
||||
}
|
||||
|
||||
onMounted(()=> {
|
||||
// getCartList()
|
||||
getCartList()
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="cards">
|
||||
<div class="card-top" v-if="nftData">
|
||||
<div class="card-top" v-if="nftData" @click="toDetail">
|
||||
<div class="card-img">
|
||||
<img :src="nftData.nft.image" alt="图片">
|
||||
</div>
|
||||
@ -18,27 +18,26 @@
|
||||
<div>{{ nftData.nft.owner_address.substr(0,6) }}...{{ nftData.nft.owner_address.substr(-6) }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-btn" @click="getData(nftData)">
|
||||
<span>Buy Now</span>
|
||||
<div class="card-btn">
|
||||
<div class="card-buy" @click="buyNft(nftData)">Buy Now</div>
|
||||
<div class="card-cat" @click.stop="addCart(nftData)">
|
||||
<img src="@/assets/img/marketplace/Add shopping cart02.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<BuyDialog :buyDialogVisible="buyDialogVisible" :buyDataArr="buyDataArr" @handleClose="buyHandleClose" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, getCurrentInstance } from "vue"
|
||||
import axios from "axios"
|
||||
import { ref, toRaw, onMounted, getCurrentInstance } from "vue"
|
||||
import BuyDialog from "@/components/Dialogs/buyDialog.vue"
|
||||
import { useDetailStore } from "@/store/detail"
|
||||
import {
|
||||
apiAddCartList
|
||||
} from "@/utils/marketplace"
|
||||
const detailData = useDetailStore()
|
||||
|
||||
import { useRouter } from "vue-router";
|
||||
const router = useRouter();
|
||||
|
||||
const { proxy } = getCurrentInstance();
|
||||
const props = defineProps({
|
||||
nftData: {
|
||||
@ -46,22 +45,23 @@ const props = defineProps({
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
// const nftData = proxy.props.nftData
|
||||
|
||||
const buyDialogVisible = ref(false)
|
||||
const buyDataArr = ref([])
|
||||
|
||||
const getData = (val) => {
|
||||
// console.log(JSON.parse(JSON.stringify(props.nftData)).token_id)
|
||||
detailData.nftData = JSON.parse(JSON.stringify(props.nftData))
|
||||
router.push('/detail');
|
||||
// 确认购买弹窗
|
||||
const buyNft = (val) => {
|
||||
buyDataArr.value.push(val)
|
||||
buyDialogVisible.value = true
|
||||
}
|
||||
|
||||
const getImageUrl = (name) => {
|
||||
return new URL(`@/assets/img/marketplace/${name}.png`, import.meta.url).href
|
||||
}
|
||||
|
||||
// 去详情页面
|
||||
const toDetail = () => {
|
||||
// console.log((data))
|
||||
detailData.nftData = JSON.parse(JSON.stringify(props.nftData))
|
||||
detailData.nftData = toRaw(props.nftData)
|
||||
router.push('/detail');
|
||||
}
|
||||
|
||||
@ -77,16 +77,23 @@ const addCart = async (val) => {
|
||||
}
|
||||
]
|
||||
}
|
||||
return
|
||||
console.log(data)
|
||||
// return
|
||||
try {
|
||||
// let res = await axios.post(`/api/shopcart/add`,{})
|
||||
let res = await apiAddCartList()
|
||||
let res = await apiAddCartList(data)
|
||||
console.log(res)
|
||||
} catch (e) {
|
||||
console.log(e)
|
||||
}
|
||||
}
|
||||
|
||||
// 关闭弹窗
|
||||
const buyHandleClose = () => {
|
||||
buyDialogVisible.value = false
|
||||
buyDataArr.value = []
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
// console.log(JSON.parse(JSON.stringify(props.nftData)), "-=-=-");
|
||||
});
|
||||
@ -136,30 +143,34 @@ onMounted(() => {
|
||||
width: 95%;
|
||||
height: 50px;
|
||||
margin: 0 auto;
|
||||
// padding: 5px;
|
||||
margin-bottom: 5px;
|
||||
background: #1778f1;
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
span {
|
||||
margin-bottom: 5px;
|
||||
>div {
|
||||
height: 57px;
|
||||
background: #1778f1;
|
||||
border-radius: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
.card-buy {
|
||||
width: 272px;
|
||||
line-height: 57px;
|
||||
color: #fff;
|
||||
font-weight: 700;
|
||||
font-size: 28px;
|
||||
}
|
||||
.card-cat {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 20px;
|
||||
// transform: translateY(-50%);
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
z-index: 99;
|
||||
width: 71px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-left: 3px;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
width: 43px;
|
||||
height: 39px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
76
src/components/common/starTimer.vue
Normal file
76
src/components/common/starTimer.vue
Normal file
@ -0,0 +1,76 @@
|
||||
<template>
|
||||
<div>
|
||||
{{day}}d:{{hour}}h:{{min}}m
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, onUnmounted, defineComponent } from 'vue';
|
||||
const props = defineProps({
|
||||
getAddress: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
console.log(new Date(props.getAddress).getTime(),'----')
|
||||
let remainingTime = ref(0); // 24小时 = 86400秒
|
||||
const day = ref(0);
|
||||
const hour = ref(0);
|
||||
const min = ref(0);
|
||||
const sec = ref(0);
|
||||
const entTime = ref(new Date(props.getAddress).getTime());
|
||||
let intervalId = null
|
||||
const emit = defineEmits(['stopTime'])
|
||||
const starTimer = () => {
|
||||
let nowTime = new Date().getTime();
|
||||
// let str = localStorage.getItem(`openTime${props.getAddress}`)
|
||||
// let strTime = (1718098200000 - nowTime) / 1000
|
||||
let strTime = (entTime.value - nowTime) / 1000
|
||||
intervalId = setInterval(() => {
|
||||
if (strTime >= 1) {
|
||||
// remainingTime.value -= 1;
|
||||
strTime--;
|
||||
//js获取剩余天数
|
||||
let d = Math.floor(strTime / 60 / 60 / 24);
|
||||
d = d < 10 ? "0" + d : d;
|
||||
//js获取剩余小时
|
||||
let h = Math.floor((strTime / 60 / 60) % 24);
|
||||
h = h < 10 ? "0" + h : h;
|
||||
//js获取剩余分钟
|
||||
let m = Math.floor((strTime / 60) % 60);
|
||||
m = m < 10 ? "0" + m : m;
|
||||
//js获取剩余秒
|
||||
let s = Math.floor(strTime % 60);
|
||||
s = s < 10 ? "0" + s : s;
|
||||
//赋值给当前变量
|
||||
day.value = d;
|
||||
hour.value = h;
|
||||
min.value = m;
|
||||
sec.value = s;
|
||||
} else {
|
||||
emit('stopTime')
|
||||
localStorage.removeItem(`openTime${props.getAddress}`)
|
||||
clearInterval(intervalId);
|
||||
intervalId = null
|
||||
}
|
||||
}, 1000);
|
||||
}
|
||||
// 判断是否登录 判断是否显示mint成功倒计时
|
||||
const isOpenTime = () => {
|
||||
let openTime = localStorage.getItem(`openTime${props.getAddress}`)
|
||||
if(props.getAddress) {
|
||||
// if(props.getAddress == openTime.split('-')[0]) {
|
||||
starTimer()
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
isOpenTime()
|
||||
// 清除定时器
|
||||
onUnmounted(() => {
|
||||
clearInterval(intervalId);
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
@ -159,7 +159,7 @@ const formatAddress = computed(() => {
|
||||
const accountId = localStorage.getItem('assessAddress');
|
||||
if (!accountId) return "-";
|
||||
if (accountId.length >= 10) {
|
||||
return `${accountId.substring(0, 6)}......${accountId.slice(-4)}`;
|
||||
return `${accountId.substring(0, 6)}......${accountId.slice(-6)}`;
|
||||
}
|
||||
return accountId;
|
||||
});
|
||||
@ -254,6 +254,10 @@ const immuTableLogin = async () => {
|
||||
|
||||
const immuTableLogout = async () => {
|
||||
try {
|
||||
localStorage.removeItem('assessToken')
|
||||
localStorage.removeItem('assessAddress')
|
||||
immutableStore.accessToken = ''
|
||||
immutableStore.accounts = ''
|
||||
await new PassportWallet().logout()
|
||||
} catch (e) {
|
||||
console.log(e)
|
||||
@ -271,7 +275,7 @@ const myCart = async () => {
|
||||
}
|
||||
|
||||
watch(() => route.path,(newPath, oldPath) => {
|
||||
if(newPath == '/marketplace' || newPath == '/assets') {
|
||||
if(newPath == '/marketplace' || newPath == '/assets' || newPath == '/detail') {
|
||||
isCart.value = true
|
||||
} else {
|
||||
isCart.value = false
|
||||
@ -482,6 +486,7 @@ watch(() => route.path,(newPath, oldPath) => {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
// right: 11px;
|
||||
margin-right: 50px;
|
||||
|
||||
.metaMask-logo {
|
||||
width: 60px;
|
||||
@ -643,7 +648,7 @@ watch(() => route.path,(newPath, oldPath) => {
|
||||
}
|
||||
}
|
||||
.cart-con {
|
||||
position: absolute;
|
||||
position: fixed;
|
||||
right: 0;
|
||||
top: 84px;
|
||||
background: #1e1b23;
|
||||
|
||||
@ -65,7 +65,7 @@ export const apiMarketplaceState = async () => {
|
||||
// 详情
|
||||
export const apiDetail = async (account_address) => {
|
||||
const url = `/api/market/transaction/history/${net_id}/${account_address}`
|
||||
return httpGet(url, {data})
|
||||
return httpGet(url, {})
|
||||
}
|
||||
|
||||
// 获取购物车列表
|
||||
|
||||
@ -19,14 +19,14 @@
|
||||
<div>Price</div>
|
||||
<div class="time">
|
||||
<img src="@/assets/img/marketplace/time.png" alt="图片">
|
||||
<span>Time remaining: 6d:10h:22m</span>
|
||||
<div>Time remaining: <StarTimer :getAddress="detailData.nftData.event.data.end_at" /></div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="price">
|
||||
<span class="bold">0.01</span>
|
||||
<span class="bold">{{ priceWei(detailData.nftData.event.data.buy[0].amount) }} </span>
|
||||
<img src="@/assets/img/marketplace/ETHicon.png" alt="ICON">
|
||||
<span>($ 37.64)</span>
|
||||
<span>( $ 37.64 )</span>
|
||||
</div>
|
||||
</li>
|
||||
</div>
|
||||
@ -37,24 +37,34 @@
|
||||
3、购买
|
||||
4、
|
||||
-->
|
||||
{{ detailData.nftData.nft }}
|
||||
<div>
|
||||
<div class="add">Add to cart</div>
|
||||
<div class="remove">Remove from cart</div>
|
||||
<div v-if="myAddress != detailData.nftData.nft.owner_address">
|
||||
<div class="buy" @click="buyNow">Buy Now</div>
|
||||
<div class="add">
|
||||
<span>Add to cart </span>
|
||||
<div>
|
||||
<img src="@/assets/img/marketplace/Add shopping cart.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="remove" v-if="!myAddress">
|
||||
<span>Remove from cart</span>
|
||||
<div>
|
||||
<img src="@/assets/img/marketplace/Move out.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--
|
||||
1、上架
|
||||
2、下架
|
||||
3、使用
|
||||
-->
|
||||
<div>
|
||||
<div v-else>
|
||||
<div class="sell">上架</div>
|
||||
<div class="cancel">下架</div>
|
||||
<div class="redeem">使用</div>
|
||||
</div>
|
||||
</div>
|
||||
<h2>Info</h2>
|
||||
<div class="info">
|
||||
<h2>Info</h2>
|
||||
<li>
|
||||
<div>Contract address</div>
|
||||
<div>{{ sliceAddress(detailData.nftData.nft.contract_address) }}</div>
|
||||
@ -79,18 +89,77 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="btm-left">
|
||||
<h2>Property</h2>
|
||||
<div class="btm-detail">
|
||||
<li v-for="(item, val, index) in nftAbilities" :key="index">
|
||||
<div v-show="val == 'quality'">
|
||||
<h5>Tier</h5>
|
||||
<p>{{ item }}</p>
|
||||
</div>
|
||||
<div v-show="val == 'max_mining_days'">
|
||||
<h5>Active Days</h5>
|
||||
<p>{{ item }}</p>
|
||||
</div>
|
||||
<div v-show="val == 'wealth'">
|
||||
<h5>Wealth Value</h5>
|
||||
<p>{{ parseInt(item) }}</p>
|
||||
</div>
|
||||
<div v-show="val == 'lucky'">
|
||||
<h5>Luck Value</h5>
|
||||
<p>{{ parseInt(item) }}</p>
|
||||
</div>
|
||||
<div v-show="val == 'hp'">
|
||||
<h5>HP</h5>
|
||||
<p>{{ parseInt(item) }}</p>
|
||||
</div>
|
||||
<div v-show="val == 'atk'">
|
||||
<h5>Attack</h5>
|
||||
<p>{{ parseInt(item) }}</p>
|
||||
</div>
|
||||
<div v-show="val == 'def'">
|
||||
<h5>Defense</h5>
|
||||
<p>{{ Number(item).toFixed(2) }}%</p>
|
||||
</div>
|
||||
<div v-show="val == 'block'">
|
||||
<h5>Block Rate</h5>
|
||||
<p>{{ Number(item).toFixed(2) }}%</p>
|
||||
</div>
|
||||
<div v-show="val == 'crit'">
|
||||
<h5>Crit Rate</h5>
|
||||
<p>{{ Number(item).toFixed(2) }}%</p>
|
||||
</div>
|
||||
</li>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from "vue"
|
||||
import { ref, toRaw, onMounted } from "vue"
|
||||
import StarTimer from "@/components/common/starTimer.vue"
|
||||
import { apiDetail } from "@/utils/marketplace"
|
||||
import { useDetailStore } from "@/store/detail"
|
||||
const detailData = useDetailStore()
|
||||
console.log(detailData.nftData)
|
||||
|
||||
console.log(toRaw(detailData.nftData))
|
||||
import { PassportWallet } from "@/wallet/passPort"
|
||||
// const nftData = ref()
|
||||
const myAddress = localStorage.getItem("assessAddress")
|
||||
const nftAbilities = ref(detailData.nftData.nft.detail)
|
||||
// const newAbilitiesName = (data) => {
|
||||
// const newName = {
|
||||
// Tier: "",
|
||||
// Active Days: "",
|
||||
// Tier: "",
|
||||
// Tier: "",
|
||||
// Tier: "",
|
||||
// Tier: "",
|
||||
// Tier: "",
|
||||
// Tier: "",
|
||||
// }
|
||||
// }
|
||||
|
||||
|
||||
// const formatAddress = computed(() => {
|
||||
@ -102,6 +171,23 @@ console.log(detailData.nftData)
|
||||
// return accountId;
|
||||
// });
|
||||
|
||||
// 购买
|
||||
const buyNow = async () => {
|
||||
let tokenIds = []
|
||||
tokenIds.push(detailData.nftData.nft.token_id)
|
||||
console.log(tokenIds)
|
||||
|
||||
console.log(await new PassportWallet().batchBuy(tokenIds))
|
||||
return
|
||||
try {
|
||||
let res = await batchBuy(tokenIds)
|
||||
console.log(rse)
|
||||
} catch (e) {
|
||||
console.log(e)
|
||||
}
|
||||
}
|
||||
|
||||
// 处理地址
|
||||
const sliceAddress = (address) => {
|
||||
if (!address) return "-";
|
||||
if (address.length >= 10) {
|
||||
@ -110,55 +196,66 @@ const sliceAddress = (address) => {
|
||||
return address;
|
||||
}
|
||||
|
||||
// 处理货币
|
||||
const priceWei = (price) => {
|
||||
let toPrice = parseInt(BigInt(price))/1e18
|
||||
return priceFixed(toPrice)
|
||||
}
|
||||
const priceFixed = (num) => {
|
||||
if(isNaN(num)){return num};
|
||||
//处理不需要转换的数字
|
||||
var str = ''+num;
|
||||
if(!/e/i.test(str)){return num;};
|
||||
//先获取到精确的小数位
|
||||
var fixed = (''+num).match(/\d+$/)[0];
|
||||
//拿到保留指定的小数
|
||||
return new Number(num).toFixed(fixed);
|
||||
}
|
||||
|
||||
const getDetail = async () => {
|
||||
let address = localStorage.getItem('address')
|
||||
let res = await apiDetail(address)
|
||||
console.log(res)
|
||||
console.log('getDetail',toRaw(res))
|
||||
nftData.value = res.rows
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getDetail()
|
||||
// getDetail()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.detail {
|
||||
width: 100%;
|
||||
height: calc(100vh);
|
||||
// height: 800px;
|
||||
// margin-top: 85px;
|
||||
// padding-top: 80px;
|
||||
box-sizing: border-box;
|
||||
// background: #16141b;
|
||||
// background: url('./../assets/img/home/BG01.png') no-repeat;
|
||||
// background-size: 100% 100%;
|
||||
overflow: hidden;
|
||||
background: url('@/assets/img/marketplace/BG01.jpg') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
.detail-bg {
|
||||
width: 100%;
|
||||
height: 95px;
|
||||
background: #040304;
|
||||
height: 84px;
|
||||
}
|
||||
.detail-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: url('./../assets/img/home/BG01.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
.content {
|
||||
width: 1200px;
|
||||
background: #666;
|
||||
width: 1266px;
|
||||
margin: 0 auto;
|
||||
padding-top: 50px;
|
||||
padding-top: 76px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
color: #fff;
|
||||
.top-left {
|
||||
background: #ccc;
|
||||
width: 453px;
|
||||
.top-left-img {
|
||||
width: 453px;
|
||||
height: 678px;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.top-right {
|
||||
width: 719px;
|
||||
h2 {
|
||||
font-size: 42px;
|
||||
font-family: 'Poppins';
|
||||
@ -189,7 +286,6 @@ onMounted(() => {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
>div {
|
||||
width: 50%;
|
||||
display: flex;
|
||||
font-size: 28px;
|
||||
color: #9950FD;
|
||||
@ -197,22 +293,30 @@ onMounted(() => {
|
||||
.time {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: end;
|
||||
font-size: 18px;
|
||||
img {
|
||||
width: 25px;
|
||||
height: 28px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
.price {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 18px;
|
||||
color: #BB7FFF;
|
||||
span {
|
||||
font-family: 'Poppins';
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
color: #BB7FFF;
|
||||
}
|
||||
.bold {
|
||||
font-weight: bold;
|
||||
font-size: 48px;
|
||||
color: #BB7FFF;
|
||||
}
|
||||
img {
|
||||
width: 30px;
|
||||
@ -225,19 +329,67 @@ onMounted(() => {
|
||||
.top-right-btns {
|
||||
div {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin: 10px 0;
|
||||
>div {
|
||||
height: 57px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-family: 'Poppins';
|
||||
font-weight: bold;
|
||||
font-size: 28px;
|
||||
color: #FFFFFF;
|
||||
border-radius: 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.buy {
|
||||
background: #6336d7;
|
||||
width: 348px;
|
||||
}
|
||||
.add {
|
||||
span {
|
||||
width: 269px;
|
||||
height: 100%;
|
||||
line-height: 57px;
|
||||
border-radius: 12px;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
background: #1778f1;
|
||||
}
|
||||
div {
|
||||
width: 76px;
|
||||
height: 100%;
|
||||
background: #1778f1;
|
||||
margin-left: 2px;
|
||||
img {
|
||||
width: 43px;
|
||||
height: 44px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.info {
|
||||
border-top: 2px solid #3A3B57;
|
||||
padding-top: 10px;
|
||||
color: #B3B5DA;
|
||||
margin-top: 40px;
|
||||
h2 {
|
||||
font-family: 'Poppins';
|
||||
font-weight: bold;
|
||||
font-size: 30px;
|
||||
color: #fff;
|
||||
border-bottom: 2px solid #3A3B57;
|
||||
}
|
||||
li {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 10px;
|
||||
div {
|
||||
width: 300px;
|
||||
font-size: 22px;
|
||||
text-align: left;
|
||||
margin-top: 10px;
|
||||
a {
|
||||
color: #B3B5DA;
|
||||
}
|
||||
@ -245,6 +397,45 @@ onMounted(() => {
|
||||
}
|
||||
}
|
||||
}
|
||||
.btm-left {
|
||||
padding-bottom: 90px;
|
||||
h2 {
|
||||
font-size: 30px;
|
||||
font-family: 'Poppins';
|
||||
font-weight: bold;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.btm-detail {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
clear: both;
|
||||
width: 489px;
|
||||
li {
|
||||
width: 154px;
|
||||
height: 84px;
|
||||
background: #2d2738;
|
||||
border-radius: 20px;
|
||||
margin-right: 9px;
|
||||
margin-bottom: 10px;
|
||||
div {
|
||||
text-align: center;
|
||||
font-size: 22px;
|
||||
color: #B3B5DA;
|
||||
font-family: "Poppins";
|
||||
h5 {
|
||||
font-weight: bold;
|
||||
}
|
||||
p {
|
||||
font-weight: 400;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&:nth-child(2) {
|
||||
padding-top: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -179,7 +179,9 @@ class LPassportWallet {
|
||||
* @param {*} listingId
|
||||
*/
|
||||
async beginBuy(listingId) {
|
||||
const fulfiller = await this.signer.getAddress();
|
||||
// const fulfiller = await this.signer.getAddress();
|
||||
const fulfiller = marketAddress
|
||||
console.log(listingId,fulfiller)
|
||||
const { actions, expiration, order } = await this.client.fulfillOrder(
|
||||
listingId,
|
||||
fulfiller,
|
||||
@ -200,7 +202,9 @@ class LPassportWallet {
|
||||
* @param { string[] } listingIds: listingId列表
|
||||
*/
|
||||
async batchBuy(listingIds) {
|
||||
const fulfiller = await this.signer.getAddress();
|
||||
// const fulfiller = await this.signer.getAddress();
|
||||
console.log(listingIds, marketAddress,'---')
|
||||
// return
|
||||
try {
|
||||
const fulfillResponse = await this.client.fulfillBulkOrders(
|
||||
listingIds.map((listingId) => ({
|
||||
@ -208,7 +212,7 @@ class LPassportWallet {
|
||||
// you could have up to 2 marketplace fees
|
||||
takerFees: [],
|
||||
})),
|
||||
fulfiller
|
||||
marketAddress
|
||||
);
|
||||
|
||||
if (fulfillResponse.sufficientBalance) {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user