修改reward的展示方式

src/components/core/RewardModal.vue

@@ -9,7 +9,7 @@
         <hero-nft v-for="d in cardList" :key="d.id" :nft-data="d"></hero-nft>
       </div>
       <div class="modal-footer">
-        <button class="general-btn" @click="hideModal">OK</button>
+        <button class="general-btn" @click="hide">OK</button>
       </div>
     </div>
   </div>
@@ -27,14 +27,19 @@ import { INftData } from '@/types/Nft'
 })
 export default class RewardModal extends Vue {
   @Prop() private title: string
-  @Prop() private modalShow: boolean
+  private modalShow = false
   @Prop() private cardList: INftData[]
 
   cancelSelect() {
-    this.hideModal()
+    this.hide()
   }
 
-  hideModal() {
+  show() {
+    this.modalShow = true
+  }
+
+  hide() {
+    this.modalShow = false
     this.$emit('reward-modal-hide')
   }
 }

src/configs/config_chain.ts

@@ -35,7 +35,9 @@ export const CONTRACT_ADDRESS:{[key: number]: any} = {
     cec: '0x4446Fc4eb47f2f6586f9fAAb68B3498F86C07521',
     ceg: '0x4446Fc4eb47f2f6586f9fAAb68B3498F86C07521',
     eth: '0x4446Fc4eb47f2f6586f9fAAb68B3498F86C07521',
-    mall: '0x4446Fc4eb47f2f6586f9fAAb68B3498F86C07521'
+    mall: '0x4446Fc4eb47f2f6586f9fAAb68B3498F86C07521',
+    mystery: '0x8444404bD78089A5a6d5Cc57f7Df8924f2DdACB4',
+    mysteryProxy: '0xAA9C6e00bBeE2b41128EF46aB669D564d02F75E0'
   },
   32: {
     cec: '0xfeFc3aab779863c1624eE008aba485c53805dCeb',

src/utils/modal.util.ts

@@ -0,0 +1,26 @@
+import Vue, { CreateElement } from 'vue'
+
+declare module 'vue/types/vue' {
+  interface Vue {
+    destroy?: () => void
+    show(): void
+    hide(): void
+  }
+}
+
+export const createModal = (Component: any, props: any) => {
+  const vm = new Vue({
+    render: (h: CreateElement) =>
+      h(Component, {
+        props
+      })
+  }).$mount()
+  document.body.appendChild(vm.$el)
+  const ele = vm.$children[0]
+  ele.destroy = function() {
+    vm.$el.remove()
+    ele.$destroy()
+    vm.$destroy()
+  }
+  return ele
+}

src/views/desktop/Mystery.vue

@@ -47,12 +47,6 @@
       </div>
     </section>
     <base-footer :auto-size="true">></base-footer>
-    <reward-modal
-      :card-list="rewardList"
-      title="Open Mystery Box Success"
-      :modal-show="rewardShow"
-      @reward-modal-hide="onRewardHide"
-    ></reward-modal>
   </div>
 </template>
 
@@ -74,6 +68,7 @@ import OneLuckyBox from '@/components/market/mystery/OneLuckyBox.vue'
 import { preOpenBox, queryBoxOpenState } from '@/api/Market'
 import RewardModal from '@/components/core/RewardModal.vue'
 import { INftData, parseNftData } from '@/types/Nft'
+import { createModal } from '@/utils/modal.util'
 
 const PAGE_SIZE = 8
 const MYSTERY_BOX_CACHE = 'mystery_box_cache'
@@ -97,13 +92,12 @@ export default class Official extends Vue {
     '1. You need to have at least one box to open<br/>' +
     '2. After opening, you will get a hero and have a chance to get additional weapons and chips<br/>' +
     '3. The quality of the heroes obtained in this mystery box are all Genesis<br/>' +
-    '4. Only 12,000 Mystery Boxes will be sold during this event<br/>' 
+    '4. Only 12,000 Mystery Boxes will be sold during this event<br/>';
 
   presaleTitle = 'Welcome to Crypto Elite\'s: BATTLEGROUNDS'
   presaleStatus = 0
   timeStr = 'UNLIMITED'
   countdown = 0
-  timer: any = null
   orderTimer: any = null
   loadingInstance: ElLoadingComponent
   showOrderStatus = false
@@ -113,9 +107,8 @@ export default class Official extends Vue {
   private totalPage = 1
   private currentPage = 1
   private nftList: string[] = []
-  private rewardShow = false
-  private rewardList: INftData[] = []
   private isProcess = false
+  private rewardModal: Vue
 
   created() {
     if (!process.env.VUE_APP_PART_CLOSE) {
@@ -126,6 +119,11 @@ export default class Official extends Vue {
 
   mounted() {
     this.checkOrderHistory()
+    window.showModal = this.showTestModal
+  }
+
+  unmounted() {
+    this.rewardModal?.destroy?.()
   }
 
   @Watch('isLogin')
@@ -232,7 +230,7 @@ export default class Official extends Vue {
         type: 'warning',
         duration: 5 * 1000
       })
-      return 
+      return
     }
     if (this.isProcess) {
       this.$message({
@@ -283,7 +281,7 @@ export default class Official extends Vue {
       if (res.state === 1) {
         // success
         this.onOpenSuccess(res.nfts)
-      } 
+      }
     } catch (err) {
       console.log('query order status error', err)
     }
@@ -293,36 +291,122 @@ export default class Official extends Vue {
     console.log('open success')
     this.resetTmpOrderId()
     this.showOrderStatus = false
-    this.rewardList.length = 0
+    const cardList: INftData[] = []
     for (const data of nfts) {
       const nftData = parseNftData(data)
-      this.rewardList.push(nftData)
+      cardList.push(nftData)
     }
-    this.rewardShow = true
+    this.showModal({
+      title: 'Open Mystery Box Success',
+      cardList
+    })
     this.getNftList()
     this.updateTotalNum()
-    //this.$alert('Congratulations', 'Open Success', { type: 'success', confirmButtonText: 'OK' })
+    // this.$alert('Congratulations', 'Open Success', { type: 'success', confirmButtonText: 'OK' })
   }
 
-  onRewardHide() {
-    this.rewardShow = false
-    this.rewardList.length = 0
+  showModal(data: any) {
+    if (!this.rewardModal) {
+      this.rewardModal = createModal(RewardModal, data)
+    }
+    this.rewardModal.show?.()
   }
 
-  beginCountdown() {
-    this.clearTimer()
-    this.timer = setInterval(() => {
-      if (this.countdown <= 0) {
-        this.clearTimer()
-      } else {
-        this.countdown--
-      }
-    }, 1000)
-  }
-
-  clearTimer() {
-    clearInterval(this.timer)
-    this.timer = null
+  showTestModal() {
+    const nftList = [{
+      token_id: '501007316659010037',
+      owner_address: '0x42448c6a38c08637218d8327b748f213fc2c0231',
+      owner_name: '',
+      item_id: '30600',
+      type: '1',
+      state: '0',
+      hide_attr: 1,
+      is_genesis: false,
+      image: 'https://www.cebg.games/res/avatars/30600.png',
+      currency_list: [],
+      transaction_recrod: [],
+      info:
+        {
+          name: 'Canoe',
+          attr: [],
+          job: 1,
+          level: 1,
+          quality: 1,
+          hp: 200,
+          speed: 6,
+          atk: 32,
+          def: 7,
+          advanced_count: 0,
+          lucky: 0,
+          success_rate: 0
+        },
+      mint_time: '1650529475'
+    },
+    {
+      token_id: '501007316776010040',
+      owner_address: '0x42448c6a38c08637218d8327b748f213fc2c0231',
+      owner_name: '',
+      item_id: '30100',
+      type: '1',
+      state: '0',
+      hide_attr: 1,
+      is_genesis: false,
+      image: 'https://www.cebg.games/res/avatars/30100.png',
+      currency_list: [],
+      transaction_recrod: [],
+      info:
+          {
+            name: 'Hill',
+            attr: [],
+            job: 1,
+            level: 1,
+            quality: 1,
+            hp: 195,
+            speed: 6,
+            atk: 35,
+            def: 6,
+            advanced_count: 0,
+            lucky: 0,
+            success_rate: 0
+          },
+      mint_time: '1650529592'
+    },
+    {
+      token_id: '501007319181010046',
+      owner_address: '0x42448c6a38c08637218d8327b748f213fc2c0231',
+      owner_name: '',
+      item_id: '30300',
+      type: '1',
+      state: '0',
+      hide_attr: 1,
+      is_genesis: true,
+      image: 'https://www.cebg.games/res/avatars/30300_1.png',
+      currency_list: [],
+      transaction_recrod: [],
+      info:
+          {
+            name: 'Aoi',
+            attr: [],
+            job: 3,
+            level: 1,
+            quality: 1,
+            hp: 120,
+            speed: 5,
+            atk: 20,
+            def: 10,
+            advanced_count: 0,
+            lucky: 0,
+            success_rate: 0
+          },
+      mint_time: '1650531993'
+    }]
+    const cardList: INftData[] = []
+    nftList.forEach(o => cardList.push(parseNftData(o)))
+    const data = {
+      title: 'Test data',
+      cardList
+    }
+    this.showModal(data)
   }
 
   toPage(pageNo: number) {