huangjinming/CounterFireGames
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改详情页的传参方式

Browse Source
This commit is contained in:
CounterFire2023 2024-06-25 10:36:47 +08:00
parent 0aff913c1a
commit 2bd2df4fab
2 changed files with 21 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/assets/card.vue
View File

@ -31,11 +31,10 @@
<script setup>
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";
import { BlockChain } from "@/components/chain/BlockChain"
const router = useRouter();
@ -72,8 +71,10 @@ const getImageUrl = (name) => {
// 去详情页面
const toDetail = () => {
detailData.nftData = toRaw(props.nftData)
router.push('/detail');
// detailData.nftData = toRaw(props.nftData)
// router.push('/detail');
const nftData = toRaw(props.nftData)
router.push({name: 'Detail', state: { nftData }});
}
// 添加购物车

53
src/views/DetailView.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="detail">
<div class="detail-bg"></div>
<div v-if="detailData.nftData" class="detail-content">
<div v-if="detailData" class="detail-content">
<div class="content">
<div class="top-left">
<div class="top-left-img">
@ -12,19 +12,19 @@
<h2>Item name</h2>
<div class="top-right-owner">
<div>Owner:</div>
<div class="address">{{ sliceAddress(detailData.nftData.nft.owner_address) }}</div>
<div class="address">{{ sliceAddress(detailData.owner_address) }}</div>
</div>
<div class="top-right-price">
<div class="top-right-price" v-if="detailData.event">
<li>
<div>Price</div>
<div class="time">
<img src="@/assets/img/marketplace/time.png" alt="图片">
<div>Time remaining: &nbsp;<StarTimer :getAddress="detailData.nftData.event.data.end_at" /></div>
<div>Time remaining: &nbsp;<StarTimer :getAddress="detailData.event.data.end_at" /></div>
</div>
</li>
<li>
<div class="price">
<span class="bold">{{ priceWei(detailData.nftData.event.data.buy[0].amount) }}&nbsp;</span>
<span class="bold">{{ priceWei(detailData.event.data.buy[0].amount) }}&nbsp;</span>
<img src="@/assets/img/marketplace/ETHicon.png" alt="ICON">
<span>( $ 37.64 )</span>
</div>
@ -37,7 +37,7 @@
3、购买
4、
-->
<div v-if="myAddress != detailData.nftData.nft.owner_address">
<div v-if="myAddress != detailData.owner_address">
<div class="buy" @click="buyNow">Buy Now</div>
<div class="add">
<span>Add to cart </span>
@ -67,11 +67,11 @@
<h2>Info</h2>
<li>
<div>Contract address</div>
<div>{{ sliceAddress(detailData.nftData.nft.contract_address) }}</div>
<div>{{ sliceAddress(detailData.contract_address) }}</div>
</li>
<li>
<div>Token ID</div>
<div>{{ detailData.nftData.nft.token_id }}</div>
<div>{{ detailData.token_id }}</div>
</li>
<li>
<div>Blockchain</div>
@ -79,7 +79,7 @@
</li>
<li>
<div>Metadata</div>
<div><a :href="detailData.nftData.nft.meta_url" target="_blank">{{ sliceAddress(detailData.nftData.nft.meta_url) }}</a></div>
<div><a :href="detailData.meta_url" target="_blank">{{ sliceAddress(detailData.meta_url) }}</a></div>
</li>
<li>
<div>Royalties</div>
@ -141,40 +141,19 @@
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(toRaw(detailData.nftData))
import {walletStore} from "@/store/wallet";
import { BlockChain } from "@/components/chain/BlockChain"
// 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 localWalletStore = walletStore()
const detailData = window.history.state.nftData
console.log(detailData)
// 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;
// });
const myAddress = localWalletStore.address
const nftAbilities = ref(detailData.detail)
// 购买
const buyNow = async () => {
let tokenIds = []
tokenIds.push(detailData.nftData.nft.token_id)
tokenIds.push(detailData.token_id)
console.log(tokenIds)
console.log(await new BlockChain().market.batchBuy(tokenIds))