修改详情页的传参方式

src/components/assets/card.vue

@@ -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)
+  // detailData.nftData = toRaw(props.nftData)
-  router.push('/detail');
+  // router.push('/detail');
+  const nftData = toRaw(props.nftData)
+  router.push({name: 'Detail', state: { nftData }});
 }
 
 // 添加购物车

src/views/DetailView.vue

@@ -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"
+import {walletStore} from "@/store/wallet";
-const detailData = useDetailStore()
-console.log(toRaw(detailData.nftData))
 import { BlockChain } from "@/components/chain/BlockChain"
-// const nftData = ref()
+const localWalletStore = walletStore()
-const myAddress = localStorage.getItem("assessAddress")
+const detailData = window.history.state.nftData
-const nftAbilities = ref(detailData.nftData.nft.detail)
+console.log(detailData)
-// const newAbilitiesName = (data) => {
-//   const newName = {
-//     Tier: "",
-//     Active Days: "",
-//     Tier: "",
-//     Tier: "",
-//     Tier: "",
-//     Tier: "",
-//     Tier: "",
-//     Tier: "",
-//   }
-// }
 
-
+const myAddress = localWalletStore.address
-// const formatAddress = computed(() => {
+const nftAbilities = ref(detailData.detail)
-//   const accountId = localStorage.getItem('assessAddress');
-//   if (!accountId) return "-";
-//   if (accountId.length >= 10) {
-//     return `${accountId.substring(0, 6)}......${accountId.slice(-4)}`;
-//   }
-//   return accountId;
-// });
 
 // 购买
 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))