From 76442812276cab5177ca968609e241339abc307a Mon Sep 17 00:00:00 2001
From: yuyongdong <yuyongdong@kingsome.cn>
Date: Thu, 18 Jul 2024 15:58:59 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=BC=B9=E7=AA=97=E6=8F=90?=
 =?UTF-8?q?=E7=A4=BA=EF=BC=8C=E4=B8=AD=E5=BF=83=E5=8C=96=E8=B5=84=E4=BA=A7?=
 =?UTF-8?q?=E8=AF=A6=E6=83=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../img/marketplace/totalContribution.png     | Bin 0 -> 1135 bytes
 src/components/assets/assetsHeader.vue        |  53 +++++++++++++-
 src/components/assets/cenCard.vue             |  43 +++++------
 src/components/assets/centralization.vue      |  16 ++---
 src/components/assets/imgs.vue                |  27 ++-----
 src/components/assets/myCard.vue              |  35 ++++++---
 src/configs/cenImg.js                         |  55 ++++++++++++++
 src/router/index.js                           |   3 +-
 src/store/marketplace.js                      |   2 +
 src/views/DetailView.vue                      |  68 +++++++++++++++---
 10 files changed, 222 insertions(+), 80 deletions(-)
 create mode 100644 src/assets/img/marketplace/totalContribution.png
 create mode 100644 src/configs/cenImg.js

diff --git a/src/assets/img/marketplace/totalContribution.png b/src/assets/img/marketplace/totalContribution.png
new file mode 100644
index 0000000000000000000000000000000000000000..70e914d33397c5849169aa9496599539236bfeb5
GIT binary patch
literal 1135
zcmV-#1d#iQP)<h;3K|Lk000e1NJLTq000{R000*V1^@s6`W7@U00001b5ch_0Itp)
z=>Px(DM>^@R7gv$)mf;ORTKyC-~P^3OD(g(GBW3=pdKPH>?tCtDBqd~QiF;fY%()L
z4Ya{>DyX0`!h#B-kcyzJKoW`uC>r%@^Q4qzmU{0wt8edn%=D@mwBbCQkG<A^@AV&c
zvg>+1I*f3Ma3=;M(A{g_&L8rgM*H`R<W^sJ!f9!zy40&lXPh8;7~`-RD}-;P0@{0j
zZcu4zIzTc3L-CF<#pv|mKl|@oye5XI+<{Bmjh|MzQ}|Qb1JL$v+aw*%!YmvlJR!_5
zCjGR1%MP%0v7eU7b<^8%2;Ne;QOilf1WCWTQLEP^a)(giQ(czoaJ6I-HVLy;mKvG1
z<hmZPh~z8dwLB~wi?4B$mQ9lTC8PH^!X4-vh57n;MYn}G6`yOk($Q8)DSE)x#&F3J
z;T-%SEYk3lmiailu(B^JtfAa&KrOB%l3~INm}*q|GWj3|8(=DKko3okx=hzFQRP+)
z+83Pmo|dq@KJd+w^QAJKtkQ)xTat9fq<WZhaI}1~RCudIQRJ9?7~igE`4w}uJYV1N
z9?7}*w$}2T47NgYTDxL}hN+q^mfRrh-}YH1xQT(iZW+4Uw&-XdEL&uyE?4PORDB&~
zVy`7@<1);|G4*VJ!DEt@TBfO-B5amCDg0csdpU;v12FG@wMS&ml*(b&m9f!PM8>Gv
zN}0=f$?E7=_)+{dTG&v;Qu#!fDGU*=w%IBJTqL=r4Vb|n)pVbZQula!3JYrff1~hy
zjL=yUrD=JO8hZdQsK<~!Hlj#BxmVMVDl_WBY}skHdQV>$;u<`wuZL_gRApZMKPS)P
z`d~j4pyUMMtNH-5H9c)?+PcHk-$j30U8dzW$x)KdLUhtqvy}z3r5@=t1Ff{l5h@#0
zj?*e47}2)NXIdpeP8PmXnX8{=j!b{-F!gp4*2e*UccpMM4zK0=aVf4GnAKGH>oC<e
zZwuq}akp?J76|W41!z3h*EX7Ophp~*Hua9H?O(o(!J4iuM&w}O-THPjC8LB{!bZtU
zb=c+rI8<0Dd9!dC&ZyP5vChWD8Xhn_WdZ%YcAw&_<1ihrFT&tJyrE&XRvAxLZcd1;
z<wm?xOdKZGyk_M-sM{iA)B0U)vU{++>x&p#r~UMr<jL3%%Z0n7BJs(>lbW7Wxn6Q!
zTSQAGcN>wu-(BkL87%K!6T>vzRwqj~XQTM7%l-Noq~&LoYlJIG<7AnpxyGa%;=5gY
z2g@a&#z=jOC34nv3y+r9p;2D*%xzyhW1HEIP1(?UT>lQ1OFLt%R7{`Ezoj1AN5b*-
zlaga72k#7{)9Sqe^_KqLcCU`(HHy?TXB~Pn@nsFu4No8c8_<6P%Ma{2C$^<NzJ9$|
zm9QS^gZwc5zhJpr23+g(I?kq)TpVS^z5?a)zW|X^Tl&=ya$5iZ002ovPDHLkV1g3E
BGqL~x

literal 0
HcmV?d00001

diff --git a/src/components/assets/assetsHeader.vue b/src/components/assets/assetsHeader.vue
index 226ee85..f24552c 100644
--- a/src/components/assets/assetsHeader.vue
+++ b/src/components/assets/assetsHeader.vue
@@ -5,7 +5,17 @@
         <img v-if="localWalletStore.showAddress" :src="imageUrl" alt="Dynamic Image">
         <img v-else src="@/assets/img/marketplace/0000.png" alt="Dynamic Image">
       </div>
-      <div class="assets-user-name">{{ localWalletStore.showAddress ? localWalletStore.showAddress : 'User Address' }}</div>
+      <div class="assets-user-name">
+        <div>{{ localWalletStore.showAddress ? localWalletStore.showAddress : 'User Address' }}</div>
+        <div class="total">
+          <img src="@/assets/img/marketplace/totalContribution.png" alt="">
+          <span>Total contribution:&nbsp; 999999999</span>
+        </div>
+        <div class="day">
+          <span>Contribution are expected daily:&nbsp;&nbsp; +150000/d</span>
+          <img @click="rulesDialogVisible = true" src="@/assets/img/marketplace/Description.png" alt="">
+        </div>
+      </div>
       <div>
       </div>
     </div>
@@ -164,6 +174,11 @@
           </div>
         </a-modal>
       </div>
+      <div ref="rulesModel">
+        <a-modal :class="'rulesModal'" :getContainer="() => $refs.rulesModel" v-model:open="rulesDialogVisible" :footer="null" :maskClosable="false">
+          <div>1212121</div>
+        </a-modal>
+      </div>
     </div>
   </div>
 </template>
@@ -207,6 +222,8 @@ const confirmCec = () => {
 
 }
 
+const rulesDialogVisible = ref(false)
+
 const cecInfo = ref({
   total: 0,
   available: '',
@@ -303,6 +320,37 @@ onMounted(() => {
       font-weight: bold;
       font-size: 30px;
       color: #FFFFFF;
+      background: rgba(26,24,33, .5);
+      border-radius: 40px;
+      padding: 20px;
+      >div {
+        display: flex;
+        align-items: center;
+        margin-bottom: 5px;
+      }
+      .total {
+        font-family: 'Poppins';
+        font-weight: bold;
+        font-size: 18px;
+        color: #00DEFF;
+        img {
+          width: 27px;
+          height: 23px;
+          margin-right: 10px;
+        }
+      }
+      .day {
+        font-family: 'Poppins';
+        font-weight: 500;
+        font-size: 14px;
+        color: #FFFFFF;
+        img {
+          width: 30px;
+          height: 30px;
+          margin-left: 10px;
+          cursor: pointer;
+        }
+      }
     }
   }
   .uaw-listing {
@@ -656,5 +704,8 @@ onMounted(() => {
       }
     }
   }
+  :deep(.rulesModal) {
+    background: #1a1821;
+  }
 }
 </style>
\ No newline at end of file
diff --git a/src/components/assets/cenCard.vue b/src/components/assets/cenCard.vue
index 3ce7818..e4c4b6d 100644
--- a/src/components/assets/cenCard.vue
+++ b/src/components/assets/cenCard.vue
@@ -1,15 +1,12 @@
 <template>
   <div class="cards">
     <div class="card-top" v-if="nftData">
-      <div class="card-img">
-        <!-- @click="toDetail" -->
+      <div class="card-img" @click="toDetail">
         <ImgCard :nftData="nftData" />
-        <!-- <LazyLoadImg :src="nftData.image" :src-placeholder="placeholderImg" alt="图片"/> -->
       </div>
       <div class="card-name">
         <div>
           <span v-if="nftData.type == 1">HERO</span>
-          <span v-if="nftData.type == 11">GOLD CARD</span>
         </div>
         <div class="no-sell" v-show="nftData.on_sale == 1" @click="cancelNft(nftData)">
           <img src="@/assets/img/marketplace/On_SeLL.png" alt="">
@@ -20,16 +17,13 @@
           <div v-show="nftData.on_sale == 1">
             <span>
               {{ nftPrice }}
-              <!-- {{cardPrice(nftData)}} -->
             </span>
             <img :src="icon" alt="">
           </div>
         </div>
         <div class="link-below" @click="mintHero()">
-          <!-- Convert -->
           <img src="@/assets/img/marketplace/Off-Chain.png" alt="">
         </div>
-        <!-- <div>{{ nftData.owner_address.substr(0,6) }}...{{ nftData.owner_address.substr(-6) }}</div> -->
       </div>
     </div>
     <div class="card-btn">
@@ -52,6 +46,7 @@ import LazyLoadImg from "@/components/lazyloadimg"
 import placeholderImg from '@/assets/img/marketplace/GenesisHeroes_NFT.png'
 import {createModal} from "@/utils/model.util";
 import ConfirmDialog from "@/components/Dialogs/confirmDialog.vue"
+import { useMarketplaceStore } from "@/store/marketplace"
 import { timeFormat } from "@/configs/priceCalculate"
 const emit = defineEmits(['renewMyNft'])
 import {formatPrice} from "@/components/chain/utils"
@@ -66,6 +61,7 @@ const props = defineProps({
     required: true,
   },
 });
+const marketplaceStore = useMarketplaceStore()
 
 // 获取地板价
 const floorPrice = ref('0')
@@ -154,15 +150,19 @@ const lockToGame = async(type) => {
 }
 // mint一个英雄
 const mintHero = async () => {
-  // const confirmResult = await createModal(ConfirmDialog, {
-  //   title: '', 
-  //   message: 'After converting, you will be able to use the hero in the game. At the end of Season 1, the hero will automatically be returned to your wallet or Immutable Passport. Do you want to proceed?'
-  // }).show()
-  // if (confirmResult.errcode == 0) {
-    // loadingDialogVisible.value = true
+  try {
     const res = await new BlockChain().locker.mintNft([toRaw(props.nftData).uniid])  
-    console.log(res)
-  // }
+    message.success('Mint success.')
+    emit('renewMyNft')
+  } catch (e) {
+    if(e.message.indexOf('rejected') > -1) {
+      message.error('User rejected the request')
+    } else if (e.message.indexOf('select wallet') > -1) {
+      message.error('user cancel select wallet')
+    } else {
+      message.error('Mint Failed.')
+    }
+  }
 }
 const lockToGameConfirm = async () => {
   try {
@@ -187,21 +187,12 @@ const lockToGameConfirm = async () => {
 // 获取出售中价格价格
 const nftPrice = ref('-')
 const icon = ref('')
-const cardPrice =  async (val) => {
-  let nftData = await getNftData(toRaw(val))
-  // console.log(nftData)
-  if (nftData?.event?.data) {
-    const data = formatPrice(nftData?.event?.data)
-    icon.value = data.icon
-    nftPrice.value = data.tokenAmount
-  }
-  
-}
 
 
 // 去详情页面
 const toDetail = () => {
-  router.push(`/detail/${props.nftData.contract_address}/${props.nftData.token_id}`)
+  marketplaceStore.detailData = {nft: props.nftData}
+  router.push('/detail')
 }
 
 // 关闭弹窗
diff --git a/src/components/assets/centralization.vue b/src/components/assets/centralization.vue
index dd69d23..6665ea0 100644
--- a/src/components/assets/centralization.vue
+++ b/src/components/assets/centralization.vue
@@ -103,14 +103,14 @@ const getMyAssets = async () => {
       // console.log(res,'----------------------')
       // return
       nftList.value = [...nftList.value, ...res.rows]
-      nftListBox = nftList.value.reduce((acc, obj) => {
-        const existingObj = acc.find(item => item.token_id == obj.token_id)
-        if(!existingObj) {
-          acc.push(obj)
-        }
-        return acc
-      },[])
-      nftList.value = nftListBox
+      // nftListBox = nftList.value.reduce((acc, obj) => {
+      //   const existingObj = acc.find(item => item.uniid == obj.uniid)
+      //   if(!existingObj) {
+      //     acc.push(obj)
+      //   }
+      //   return acc
+      // },[])
+      // nftList.value = nftListBox
       // marketplaceStore.cursorObj = res.page
       // next_cursor.value = res.page.next_cursor
     } catch(e) {
diff --git a/src/components/assets/imgs.vue b/src/components/assets/imgs.vue
index ff81219..fdc8e8c 100644
--- a/src/components/assets/imgs.vue
+++ b/src/components/assets/imgs.vue
@@ -1,10 +1,10 @@
 <template>
   <div class="imgs">
     <div class="imgs-bg">
-      <img :src="heroBgImageUrl" alt="">
+      <img :src="qualityImgList[props.nftData.detail.quality].bgImg" alt="">
     </div>
     <div class="imgs-img">
-      <img :src="heroImageUrl" alt="">
+      <img :src="heroImg[props.nftData.name].img" alt="">
     </div>
     <div class="imgs-day">
       {{ nftData.detail.max_mining_days }}
@@ -20,7 +20,7 @@
       </div>
     </div>
     <div class="imgs-quality">
-      <img :src="qualityImageUrl" alt="">
+      <img :src="qualityImgList[props.nftData.detail.quality].qualityImg" alt="">
     </div>
     <div class="imgs-name">
       {{ nftData.name }}
@@ -30,32 +30,13 @@
 
 <script setup>
 import { ref, computed, toRaw } from "vue"
+import { heroImg, qualityImgList } from "@/configs/cenImg"
 const props = defineProps({
   nftData: {
     type: Object,
     required: true,
   },
 });
-console.log(props.nftData, '----------------------nftDatanftDatanftDatanftData')
-
-const heroImageUrl = computed(() => {
-  // let imgUrl = `https://res.counterfire.games/headimg/0001.png`
-  let imgUrl = `./../../assets/img/marketplace/hero/${toRaw(props.nftData).name}.png`
-  return new URL(imgUrl, import.meta.url).href;
-});
-
-const heroBgImageUrl = computed(() => {
-  // let imgUrl = `https://res.counterfire.games/headimg/0001.png`
-  let imgUrl = `./../../assets/img/marketplace/hero/hero_cardBg0${toRaw(props.nftData).detail.quality}.png`
-  return new URL(imgUrl, import.meta.url).href;
-});
-
-const qualityImageUrl = computed(() => {
-  // let imgUrl = `https://res.counterfire.games/headimg/0001.png`
-  let imgUrl = `./../../assets/img/marketplace/hero/rarityLevel_bg${toRaw(props.nftData).detail.quality}.png`
-  return new URL(imgUrl, import.meta.url).href;
-});
-
 
 </script>
 
diff --git a/src/components/assets/myCard.vue b/src/components/assets/myCard.vue
index 4a34929..33327f3 100644
--- a/src/components/assets/myCard.vue
+++ b/src/components/assets/myCard.vue
@@ -23,16 +23,20 @@
             </span>
             <img :src="icon" alt="">
           </div>
+          <div v-if="LOCKER_ADDRESS.toLowerCase() == nftData.owner_address.toLowerCase()">
+            <span>22</span>
+            <img src="@/assets/img/marketplace/totalContribution.png" alt="">
+          </div>
         </div>
         <div v-if="LOCKER_ADDRESS.toLowerCase() == nftData.owner_address.toLowerCase()" class="link-staking" @click="unStake(nftData)">
           <img src="@/assets/img/marketplace/Staking.png" alt="">
         </div>
-        <!-- <div v-if="LOCKER_ADDRESS.toLowerCase() != nftData.owner_address.toLowerCase() && nftData.type == 11 && nftData.on_sale == 0" class="enabled" @click="lockToGame('redeem')">
+        <div v-if="LOCKER_ADDRESS.toLowerCase() != nftData.owner_address.toLowerCase() && nftData.type == 11 && nftData.on_sale == 0" class="enabled" @click="lockToGame('redeem')">
           Redeem
         </div>
         <div v-if="LOCKER_ADDRESS.toLowerCase() != nftData.owner_address.toLowerCase() && nftData.type == 1 && nftData.on_sale == 0" class="link-below" @click="lockToGame('convert')">
           Convert
-        </div> -->
+        </div>
         <!-- <div>{{ nftData.owner_address.substr(0,6) }}...{{ nftData.owner_address.substr(-6) }}</div> -->
       </div>
     </div>
@@ -198,14 +202,25 @@ const cardPrice =  async (val) => {
 
 // 赎回
 const unStake = async (data) => {
-  const bc = new BlockChain()
-  let res = await bc.locker.unlockOrMintGameNft(toRaw(data).contract_address,[toRaw(data).token_id])
-  if(res) {
-    let timer = setTimeout(() => {
-      message.success('Unstake success.')
-      emit('renewMyNft')
-      clearTimeout(timer);
-    }, 2000);
+  try {
+    const bc = new BlockChain()
+    let res = await bc.locker.unlockOrMintGameNft(toRaw(data).contract_address,[toRaw(data).token_id])
+    if(res) {
+      let timer = setTimeout(() => {
+        message.success('Unstake success.')
+        emit('renewMyNft')
+        clearTimeout(timer);
+      }, 2000);
+    }
+  } catch (e) {
+    console.log(e)
+    if(e.message.indexOf('rejected') > -1) {
+      message.error('User rejected the request')
+    } else if (e.message.indexOf('select wallet') > -1) {
+      message.error('user cancel select wallet')
+    } else {
+      message.error('Unstake fail')
+    }
   }
 }
 
diff --git a/src/configs/cenImg.js b/src/configs/cenImg.js
new file mode 100644
index 0000000..f0a6f96
--- /dev/null
+++ b/src/configs/cenImg.js
@@ -0,0 +1,55 @@
+export const heroImg = {
+  Aoi: {
+    img: new URL("@/assets/img/marketplace/hero/Aoi.png",import.meta.url).href,
+  },
+  Astral: {
+    img: new URL("@/assets/img/marketplace/hero/Astral.png",import.meta.url).href,
+  },
+  Canoe: {
+    img: new URL("@/assets/img/marketplace/hero/Canoe.png",import.meta.url).href,
+  },
+  Dragonscale: {
+    img: new URL("@/assets/img/marketplace/hero/Dragonscale.png",import.meta.url).href,
+  },
+  Hill: {
+    img: new URL("@/assets/img/marketplace/hero/Hill.png",import.meta.url).href,
+  },
+  Kurosawa: {
+    img: new URL("@/assets/img/marketplace/hero/Kurosawa.png",import.meta.url).href,
+  },
+  Lazar: {
+    img: new URL("@/assets/img/marketplace/hero/Lazar.png",import.meta.url).href,
+  },
+  Mariana: {
+    img: new URL("@/assets/img/marketplace/hero/Mariana.png",import.meta.url).href,
+  },
+  Miffy: {
+    img: new URL("@/assets/img/marketplace/hero/Miffy.png",import.meta.url).href,
+  },
+  Yamada: {
+    img: new URL("@/assets/img/marketplace/hero/Yamada.png",import.meta.url).href,
+  }
+}
+
+export const qualityImgList = {
+  1: {
+    bgImg: new URL("@/assets/img/marketplace/hero/hero_cardBg01.png",import.meta.url).href,
+    qualityImg: new URL("@/assets/img/marketplace/hero/rarityLevel_bg1.png",import.meta.url).href,
+  },
+  2: {
+    bgImg: new URL("@/assets/img/marketplace/hero/hero_cardBg02.png",import.meta.url).href,
+    qualityImg: new URL("@/assets/img/marketplace/hero/rarityLevel_bg2.png",import.meta.url).href,
+  },
+  3: {
+    bgImg: new URL("@/assets/img/marketplace/hero/hero_cardBg03.png",import.meta.url).href,
+    qualityImg: new URL("@/assets/img/marketplace/hero/rarityLevel_bg3.png",import.meta.url).href,
+  },
+  4: {
+    bgImg: new URL("@/assets/img/marketplace/hero/hero_cardBg04.png",import.meta.url).href,
+    qualityImg: new URL("@/assets/img/marketplace/hero/rarityLevel_bg4.png",import.meta.url).href,
+  },
+  5: {
+    bgImg: new URL("@/assets/img/marketplace/hero/hero_cardBg05.png",import.meta.url).href,
+    qualityImg: new URL("@/assets/img/marketplace/hero/rarityLevel_bg5.png",import.meta.url).href,
+  }
+}
\ No newline at end of file
diff --git a/src/router/index.js b/src/router/index.js
index 94884d2..9d0be8f 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -37,8 +37,9 @@ const routes = [
   },
   {
     path: "/detail",
-    name: "Detail",
+    name: "CDetail",
     component: Detail,
+    props: true,
     meta: {
       title: "Counter Fire-Detail",
       canonical: "https://.counterfire.games",
diff --git a/src/store/marketplace.js b/src/store/marketplace.js
index 3a13345..fa10f1a 100644
--- a/src/store/marketplace.js
+++ b/src/store/marketplace.js
@@ -40,6 +40,7 @@ export const useMarketplaceStore = defineStore('marketplace', () => {
       ]
     }
   })
+  const detailData = ref()
 
   const updateOverviewStatus = (_connected) => {
     overview.value = _connected;
@@ -101,6 +102,7 @@ export const useMarketplaceStore = defineStore('marketplace', () => {
     addCartListState,
     delCartListState,
     currencyPrice,priceDatas,
+    detailData,
   }
 },
 {
diff --git a/src/views/DetailView.vue b/src/views/DetailView.vue
index 0de055e..5ac10e7 100644
--- a/src/views/DetailView.vue
+++ b/src/views/DetailView.vue
@@ -13,7 +13,7 @@
             <h2>{{ detailData.nft.name }}</h2>
             <div class="top-right-owner">
               <div>Owner:</div>
-              <div class="address">{{ detailData.nft.owner_address }}</div>
+              <div class="address">{{ detailData.nft.owner_address ? detailData.nft.owner_address : myAddress }}</div>
             </div>
             <div class="top-right-price" v-if="detailData.event">
               <li>
@@ -39,6 +39,9 @@
               <div v-if="localWalletStore.token && LOCKER_ADDRESS.toLowerCase() == detailData.nft.owner_address.toLowerCase()">
                 <div class="cancel" @click="localWalletStore.token == '' ? cardLogin() : backStaking()">Unstake</div>
               </div>
+              <div v-else>
+                <div class="mint" @click="mintHero">Mint</div>
+              </div>
               <!-- 
               1、添加购物车
               2、移除购物车
@@ -80,12 +83,12 @@
               <li>
                 <div>Token ID</div>
                 <div>
-                  <a :href="contractTokenUrl" target="_blank">{{ detailData.nft.token_id }}</a>
+                  <a :href="contractTokenUrl" target="_blank">{{ detailData.nft.token_id ? detailData.nft.token_id : '-' }}</a>
                 </div>
               </li>
               <li>
                 <div>Blockchain</div>
-                <div>lmmutascan</div>
+                <div>{{ detailData.nft.token_id ? 'lmmutascan' : '-' }}</div>
               </li>
               <li>
                 <div>Metadata</div>
@@ -93,7 +96,7 @@
               </li>
               <li>
                 <div>Royalties</div>
-                <div>2%</div>
+                <div>{{ detailData.nft.token_id ? '2%' : '-' }}</div>
               </li>
             </div>
           </div>
@@ -170,9 +173,9 @@
 </template>
 
 <script setup>
-import { ref, toRaw, onMounted , inject} from "vue"
+import { ref, toRefs, toRaw, onMounted , inject} from "vue"
 const message = inject('$message')
-import { useRouter } from "vue-router";
+import { useRouter, useRoute } from "vue-router";
 import BuyDialog from "@/components/Dialogs/buyDialog.vue"
 import ConfirmDialog from "@/components/Dialogs/confirmDialog.vue"
 import LoadingDialog from "@/components/Dialogs/loadingDialog.vue"
@@ -189,6 +192,7 @@ import LazyLoadImg from "@/components/lazyloadimg"
 import {formatPrice} from "@/components/chain/utils"
 import {createModal} from "@/utils/model.util";
 const router = useRouter();
+const route = useRoute();
 const localWalletStore = walletStore()
 const marketplaceList = useMarketplaceStore()
 const props = defineProps({
@@ -197,6 +201,7 @@ const props = defineProps({
 })
 import placeholderImg from '@/assets/img/marketplace/GenesisHeroes_NFT.png'
 const detailData = ref(null)
+const assetsDetailData = ref(null)
 const myAddress = localWalletStore.address
 const contractBlankUrl = ref()
 const contractTokenUrl = ref()
@@ -329,8 +334,26 @@ const lockToGameConfirm = async () => {
 }
 
 // 赎回
-const backStaking = () => {
-  console.log('---')
+const backStaking = async () => {
+  try {
+    const bc = new BlockChain()
+    let res = await bc.locker.unlockOrMintGameNft(detailData.value.nft.contract_address,[detailData.value.nft.token_id])
+    if(res) {
+      let timer = setTimeout(() => {
+        message.success('Unstake success.')
+        router.go(-1)
+        clearTimeout(timer);
+      }, 2000);
+    }
+  } catch (e) {
+    if(e.message.indexOf('rejected') > -1) {
+      message.error('User rejected the request')
+    } else if (e.message.indexOf('select wallet') > -1) {
+      message.error('user cancel select wallet')
+    } else {
+      message.error('Unstake fail')
+    }
+  }
 }
 
 
@@ -417,6 +440,23 @@ const sellHandleClose = (val) => {
   }
 }
 
+// mint上链
+const mintHero = async () => {
+  try {
+    const res = await new BlockChain().locker.mintNft([detailData.value.nft.uniid])
+    message.success('Mint success.')
+    router.go(-1)
+  } catch (e) {
+    if(e.message.indexOf('rejected') > -1) {
+      message.error('User rejected the request')
+    } else if (e.message.indexOf('select wallet') > -1) {
+      message.error('user cancel select wallet')
+    } else {
+      message.error('Mint Failed.')
+    }
+  }
+}
+
 const getDetail = async () => {
   let { errcode, errmsg, data} = await nftDetail(props.address, props.tokenid)
   contractBlankUrl.value = `${import.meta.env.VUE_APP_EXPLORER_URL}/address/${data.nft.contract_address}`
@@ -437,11 +477,14 @@ const getDetail = async () => {
     price.value = _data.tokenAmount
     
   }
-  // console.log(detailData.value,contractBlankUrl.value,import.meta.env.VUE_APP_NET_ID,import.meta.env.VUE_APP_GPAL_API,`${import.meta.env.VUE_APP_EXPLORER_URL}${data.nft.contract_address}`,'----')
 }
-
 onMounted(() => {
-  getDetail()
+  if(location.pathname.length > 8) {
+    getDetail()
+  } else {
+    detailData.value = marketplaceList.detailData
+    nftAbilities.value = marketplaceList.detailData.nft.detail
+  }
 })
 </script>
 
@@ -652,6 +695,9 @@ onMounted(() => {
               width: 348px;
               background: #1778f1;
             }
+            .mint {
+              background: #6336d7;
+            }
           }
         }
         .info {