修改mint游戏内NFT，赎回NFT上链

src/components/assets/cenCard.vue

@@ -1,13 +1,14 @@
 <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">GENESIS HERO</span>
+          <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)">
@@ -32,8 +33,7 @@
       </div>
     </div>
     <div class="card-btn">
-      <div class="card-sell" v-if="nftData.on_sale == 0" @click="sellNft(nftData)">Mint for NFT</div>
+      <div class="card-sell" v-if="nftData.on_sale == 0" @click="mintNft(nftData)">Mint for NFT</div>
-      <div class="card-cancel" v-if="nftData.on_sale == 1" @click="cancelNft(nftData)">Mint for NFT</div>
     </div>
     <SellDialog :sellDialogVisible="sellDialogVisible" :floorPrice="floorPrice" :sellDataArr="sellDataArr" @handleClose="sellHandleClose" />
     <LoadingDialog :loadingDialogVisible="loadingDialogVisible" />
@@ -53,6 +53,7 @@ import placeholderImg from '@/assets/img/marketplace/GenesisHeroes_NFT.png'
 import {createModal} from "@/utils/model.util";
 import ConfirmDialog from "@/components/Dialogs/confirmDialog.vue"
 import { timeFormat } from "@/configs/priceCalculate"
+import { Locker } from "@/components/chain/contract/Locker"
 const emit = defineEmits(['renewMyNft'])
 import {formatPrice} from "@/components/chain/utils"
 
@@ -67,6 +68,14 @@ const props = defineProps({
   },
 });
 
+const mintNft = async () => {
+  console.log('-----', toRaw(props.nftData))
+  return
+  const locker = new Locker()
+  let res = await locker.mintNft(toRaw(props.nftData).nft.contract_address,[toRaw(props.nftData).nft.token_id])
+  console.log(res)
+}
+
 // 获取地板价
 const floorPrice = ref('0')
 const getFloorPrice = async (val) => {
@@ -107,69 +116,69 @@ const sellNft = async (val) => {
 }
 
 // 取消出售
-const cancelNft = async (val) => {
+// const cancelNft = async (val) => {
-  let orderIds = await getNftData(val)
+//   let orderIds = await getNftData(val)
-  try {
+//   try {
-    const bc = new BlockChain()
+//     const bc = new BlockChain()
-    let res = await bc.market.cancelOrder([orderIds.event.data.id])
+//     let res = await bc.market.cancelOrder([orderIds.event.data.id])
-    if(res.result) {
+//     if(res.result) {
-      let timer = setTimeout(() => {
+//       let timer = setTimeout(() => {
-        message.success('Your item has been unlisted.')
+//         message.success('Your item has been unlisted.')
-        emit('renewMyNft')
+//         emit('renewMyNft')
-        clearTimeout(timer);
+//         clearTimeout(timer);
-      }, 2000);
+//       }, 2000);
-    }
+//     }
-  } catch (e) {
+//   } catch (e) {
-    if(e.message.indexOf('rejected')  > -1) {
+//     if(e.message.indexOf('rejected')  > -1) {
-      message.error('User rejected the request')
+//       message.error('User rejected the request')
-    } else {
+//     } else {
-      message.error('Your item has failed to be unlisted.')
+//       message.error('Your item has failed to be unlisted.')
-    }
+//     }
-  }
+//   }
-}
+// }
 
 
 const loadingDialogVisible = ref(false)
 // 下链使用
-const lockToGame = async(type) => {
+// const lockToGame = async(type) => {
-  if(type == 'redeem') {
+//   if(type == 'redeem') {
-    const confirmResult = await createModal(ConfirmDialog, {
+//     const confirmResult = await createModal(ConfirmDialog, {
-        title: '', 
+//         title: '', 
-        message: `Redeem ${props.nftData.detail.gold_coins} Gold to your game account. Do you wish to proceed?`
+//         message: `Redeem ${props.nftData.detail.gold_coins} Gold to your game account. Do you wish to proceed?`
-      }).show()
+//       }).show()
-      if (confirmResult.errcode == 0) {
+//       if (confirmResult.errcode == 0) {
-        loadingDialogVisible.value = true
+//         loadingDialogVisible.value = true
-        lockToGameConfirm()
+//         lockToGameConfirm()
-      }
+//       }
-  } else if(type == 'convert') {
+//   } else if(type == 'convert') {
-    const confirmResult = await createModal(ConfirmDialog, {
+//     const confirmResult = await createModal(ConfirmDialog, {
-      title: '', 
+//       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?'
+//       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()
+//     }).show()
-    if (confirmResult.errcode == 0) {
+//     if (confirmResult.errcode == 0) {
-      loadingDialogVisible.value = true
+//       loadingDialogVisible.value = true
-      lockToGameConfirm()
+//       lockToGameConfirm()
-    }
+//     }
-  }
+//   }
-}
+// }
-const lockToGameConfirm = async () => {
+// const lockToGameConfirm = async () => {
-  try {
+//   try {
-    const bc = new BlockChain()
+//     const bc = new BlockChain()
-    let res = await bc.locker.lock(toRaw(props.nftData).contract_address, [toRaw(props.nftData).token_id])
+//     let res = await bc.locker.lock(toRaw(props.nftData).contract_address, [toRaw(props.nftData).token_id])
-    message.success('lockToGame success')
+//     message.success('lockToGame success')
-    // router.go(-1)
+//     // router.go(-1)
-    emit('renewMyNft')
+//     emit('renewMyNft')
-    loadingDialogVisible.value = false
+//     loadingDialogVisible.value = false
-    // router.push('/assets')
+//     // router.push('/assets')
-  } catch (e) {
+//   } catch (e) {
-    if(e.message.indexOf('rejected') > -1) {
+//     if(e.message.indexOf('rejected') > -1) {
-      message.error('User rejected the request')
+//       message.error('User rejected the request')
-    } else {
+//     } else {
-      message.error('lockToGame fail.')
+//       message.error('lockToGame fail.')
-    }
+//     }
-    loadingDialogVisible.value = false
+//     loadingDialogVisible.value = false
-  }
+//   }
-}
+// }
 
 
 // 获取出售中价格价格
@@ -205,7 +214,7 @@ const sellHandleClose = (val) => {
 }
 
 onMounted(() => {
-  cardPrice(toRaw(props.nftData))
+  // cardPrice(toRaw(props.nftData))
 });
 </script>
 

src/components/assets/centralization.vue

@@ -108,8 +108,8 @@ const getMyAssets = async () => {
         return acc
       },[])
       nftList.value = nftListBox
-      marketplaceStore.cursorObj = res.page
+      // marketplaceStore.cursorObj = res.page
-      next_cursor.value = res.page.next_cursor
+      // next_cursor.value = res.page.next_cursor
     } catch(e) {
       console.log(e)
     }
@@ -126,9 +126,9 @@ const handleScroll = () => {
   if (scrollTop + windowHeight == scrollHeight) {
   //请求数据接口
   // console.log('scrollTop + windowHeight == scrollHeight请求接口',toRaw(marketplaceStore.cursorObj), scrollTop, windowHeight, scrollHeight)
-    if(toRaw(marketplaceStore.cursorObj).remaining != 0) {
+    // if(toRaw(marketplaceStore.cursorObj).remaining != 0) {
-      getMyAssets()
+    //   getMyAssets()
-    }
+    // }
     return false;
   }
 }
@@ -144,11 +144,11 @@ watch(localWalletStore,() => {
 
 onMounted(() => {
   getMyAssets()
-  window.addEventListener("scroll", handleScroll, true);
+  // window.addEventListener("scroll", handleScroll, true);
 })
 
 onUnmounted(() => {
-  window.removeEventListener('scroll', handleScroll)
+  // window.removeEventListener('scroll', handleScroll)
 })
 </script>
 

src/components/assets/myCard.vue

@@ -24,19 +24,25 @@
             <img :src="icon" alt="">
           </div>
         </div>
-        <div v-if="nftData.type == 11 && nftData.on_sale == 0" class="enabled" @click="lockToGame('redeem')">
+        <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')">
           Redeem
         </div>
-        <div v-if="nftData.type == 1 && nftData.on_sale == 0" class="link-below" @click="lockToGame('convert')">
+        <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>{{ nftData.owner_address.substr(0,6) }}...{{ nftData.owner_address.substr(-6) }}</div> -->
       </div>
     </div>
-    <div class="card-btn">
+    <div class="card-btn" v-if="LOCKER_ADDRESS.toLowerCase() != nftData.owner_address.toLowerCase()">
       <div class="card-sell" v-if="nftData.on_sale == 0" @click="sellNft(nftData)">List</div>
       <div class="card-cancel" v-if="nftData.on_sale == 1" @click="cancelNft(nftData)">Cancel listing</div>
     </div>
+    <div class="card-btn" v-else>
+      <div class="card-cancel" v-if="nftData.on_sale == 0" @click="unStake(nftData)">Unstake</div>
+    </div>
     <SellDialog :sellDialogVisible="sellDialogVisible" :floorPrice="floorPrice" :sellDataArr="sellDataArr" @handleClose="sellHandleClose" />
     <LoadingDialog :loadingDialogVisible="loadingDialogVisible" />
   </div>
@@ -55,6 +61,7 @@ import placeholderImg from '@/assets/img/marketplace/GenesisHeroes_NFT.png'
 import {createModal} from "@/utils/model.util";
 import ConfirmDialog from "@/components/Dialogs/confirmDialog.vue"
 import { timeFormat } from "@/configs/priceCalculate"
+import { Locker } from "@/components/chain/contract/Locker"
 const emit = defineEmits(['renewMyNft'])
 import {formatPrice} from "@/components/chain/utils"
 
@@ -68,6 +75,7 @@ const props = defineProps({
     required: true,
   },
 });
+const LOCKER_ADDRESS = ref(import.meta.env.VUE_APP_LOCKER_ADDRESS)
 
 // 获取地板价
 const floorPrice = ref('0')
@@ -188,6 +196,15 @@ const cardPrice =  async (val) => {
   
 }
 
+// 赎回
+const unStake = async (data) => {
+  // debugger
+  console.log(toRaw(data).contract_address,[toRaw(data).token_id])
+  const locker = new Locker()
+  // console.log(locker.sendUnlockOrMint)
+  let res = await locker.sendUnlockOrMint(toRaw(data).contract_address,[toRaw(data).token_id])
+  console.log(res)
+}
 
 // 去详情页面
 const toDetail = () => {
@@ -297,6 +314,12 @@ onMounted(() => {
           margin-left: 10px;
         }
       }
+      .link-staking {
+        img {
+          width: 140px;
+          height: 48px;
+        }
+      }
       .enabled {
         justify-content: center;
         border: 2px solid #ffd45f;

src/components/chain/contract/Locker.js

@@ -17,7 +17,9 @@ const lockAddress = import.meta.env.VUE_APP_LOCKER_ADDRESS
 export class Locker {
 
   constructor(_chainInstance) {
+    console.log(_chainInstance)
     this.bc = _chainInstance
+    console.log(this.bc)
   }
 
   async lock(nft, tokenIds) {

src/views/DetailView.vue

@@ -19,7 +19,7 @@
               <li>
                 <div>Price</div>
                 <div class="time">
-                  <img src="@/assets/img/marketplace/time.png" alt="图片">
+                  <img src="@/assets/img/marketplace/time.png" alt="img">
                   <div>Time remaining: &nbsp;<StarTimer :getAddress="detailData.event.data.end_at" /></div>
                 </div>
               </li>
@@ -31,7 +31,14 @@
                 </div>
               </li>
             </div>
+            <div class="back-time" v-if="localWalletStore.token && LOCKER_ADDRESS.toLowerCase() == detailData.nft.owner_address.toLowerCase()">
+              <img src="@/assets/img/marketplace/time.png" alt="">
+              <span>Time remaining :  6d:10h:22m</span>
+            </div>
             <div class="top-right-btns">
+              <div v-if="localWalletStore.token && LOCKER_ADDRESS.toLowerCase() == detailData.nft.owner_address.toLowerCase()">
+                <div class="cancel" @click="localWalletStore.token == '' ? cardLogin() : backStaking()">Unstake</div>
+              </div>
               <!-- 
               1、添加购物车
               2、移除购物车
@@ -198,6 +205,8 @@ const icon = ref('')
 const usd = ref('')
 const price = ref('')
 const loadingDialogVisible = ref(false)
+const LOCKER_ADDRESS = ref(import.meta.env.VUE_APP_LOCKER_ADDRESS)
+
 
 // 登录
 const cardLogin = async () => {
@@ -317,7 +326,11 @@ const lockToGameConfirm = async () => {
     }
     loadingDialogVisible.value = false
   }
+}
 
+// 赎回
+const backStaking = () => {
+  console.log('---')
 }
 
 
@@ -556,6 +569,25 @@ onMounted(() => {
             }
           }
         }
+        .back-time {
+          width: 340px;
+          height: 40px;
+          line-height: 40px;
+          background: #272130;
+          border-radius: 20px;
+          font-family: 'Poppins';
+          font-weight: 300;
+          font-size: 18px;
+          color: #9A50FF;
+          display: flex;
+          align-items: center;
+          img {
+            width: 20px;
+            height: 25px;
+            margin-right: 6px;
+            margin-left: 24px;
+          }
+        }
         .top-right-btns {
           div {
             display: flex;