修改详情界面数据获取方式

src/components/assets/card.vue

@@ -2,7 +2,7 @@
   <div class="cards">
     <div class="card-top" v-if="nftData">
       <!-- @click="toDetail" -->
-      <div class="card-img">
+      <div class="card-img" @click="toDetail">
         <img :src="nftData.image" alt="图片">
       </div>
       <div class="card-name">
@@ -96,8 +96,9 @@ const getImageUrl = (name) => {
 const toDetail = () => {
   // detailData.nftData = toRaw(props.nftData)
   // router.push('/detail');
-  const nftData = toRaw(props.nftData)
-  router.push({name: 'Detail', state: { nftData }});
+  router.push(`/detail/${props.nftData.contract_address}/${props.nftData.token_id}`)
+  // const nftData = toRaw(props.nftData)
+  // router.push({name: 'Detail', state: { nftData }});
 }
 
 // 添加购物车

src/components/common/card.vue

@@ -66,12 +66,8 @@ const getImageUrl = (name) => {
 
 // 去详情页面
 const toDetail = () => {
-  // detailData.nftData = toRaw(props.nftData)
-  // router.push('/detail');
-  const _nftData = toRaw(props.nftData)
-  const nftData = _nftData.nft
-  nftData.event = _nftData.event
-  router.push({name: 'Detail', state: { nftData}});
+  const _data = toRaw(props.nftData)
+  router.push(`/detail/${_data.nft.contract_address}/${_data.nft.token_id}`)
 }
 
 // 添加购物车

src/router/index.js

@@ -43,6 +43,16 @@ const routes = [
       canonical: "https://.counterfire.games",
     },
   },
+  {
+    path: "/detail/:address/:tokenid",
+    name: "Detail",
+    component: Detail,
+    props: true,
+    meta: {
+      title: "Counter Fire-Detail",
+      canonical: "https://.counterfire.games",
+    },
+  },
   {
     path: "/assets",
     name: "Assets",

src/utils/marketplace.js

@@ -93,3 +93,8 @@ export const apiDelCartList = async () => {
 export const apiClearCartList = async () => {
   const url = `${API_BASE}/api/shopcart/clear`
 }
+
+export const nftDetail = async(address, tokenId) => {
+  const url = `${API_BASE}/api/market/product/goods/${net_id}/${address}/${tokenId}`
+  return httpGet(url, {})
+}

src/views/DetailView.vue

@@ -141,19 +141,21 @@
 import { ref, toRaw, onMounted } from "vue"
 import { useRouter } from "vue-router";
 import StarTimer from "@/components/common/starTimer.vue"
-import { apiDetail } from "@/utils/marketplace"
+import { nftDetail } from "@/utils/marketplace"
 import {priceCalculated} from "@/configs/priceCalculate.js"
-import { useDetailStore } from "@/store/detail"
-
-
 import { BlockChain } from "@/components/chain/BlockChain"
 import {walletStore} from "@/store/wallet";
 const router = useRouter();
 const localWalletStore = walletStore()
-const detailData = window.history.state.nftData
-console.log(detailData)
-const myAddress = localWalletStore.address
-const nftAbilities = ref(detailData.detail)
+const props = defineProps({
+  address: String,
+  tokenid: String
+})
+const detailData = ref(null)
+// const detailData = window.history.state.nftData
+// console.log(detailData)
+// const myAddress = localWalletStore.address
+// const nftAbilities = ref(detailData.detail)
 
 // 购买
 const buyNow = async () => {
@@ -227,10 +229,16 @@ const priceWei = (price) => {
 }
 
 const getDetail = async () => {
-  let address = localStorage.getItem('assessAddress')
-  let res = await apiDetail(address)
-  console.log('getDetail',toRaw(res))
-  nftData.value = res.rows
+  // let address = localStorage.getItem('assessAddress')
+  let { errcode, errmsg, data} = await nftDetail(props.address, props.tokenid)
+  if (errcode) {
+    console.log(errmsg)
+    //TODO:: 提示错误信息
+    return
+  }
+  const nftData = data.nft
+  nftData.event = data.event
+  detailData.value = nftData
 }
 
 onMounted(() => {