From 58e8eaff6d288eeb75c8b27da273ec887ab12a1d Mon Sep 17 00:00:00 2001
From: cebgcontract <99630598+cebgcontract@users.noreply.github.com>
Date: Sat, 23 Apr 2022 19:51:25 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E5=96=84modal=E7=9A=84=E6=98=BE?=
 =?UTF-8?q?=E7=A4=BA=E5=92=8C=E9=9A=90=E8=97=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/core/RewardModal.vue |   9 +-
 src/utils/modal.util.ts             |  12 +-
 src/views/desktop/Mystery.vue       | 227 ++++++++++++++--------------
 3 files changed, 126 insertions(+), 122 deletions(-)

diff --git a/src/components/core/RewardModal.vue b/src/components/core/RewardModal.vue
index 9122d16..c1c5768 100644
--- a/src/components/core/RewardModal.vue
+++ b/src/components/core/RewardModal.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="reward-modal" v-if="modalShow">
-    <div class="modal-bg" @click="hideView"></div>
+    <div class="modal-bg" @click="hide"></div>
     <transition name="fade">
     <div class="modal-content" v-if="modalShow" key="reward_modal_content">
       <div class="modal-title">
@@ -10,7 +10,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="hideView">OK</button>
+        <button class="general-btn" @click="hide">OK</button>
       </div>
     </div>
     </transition>
@@ -32,15 +32,14 @@ export default class RewardModal extends Vue {
   private modalShow = false
   @Prop() private cardList: INftData[]
 
-  showView() {
+  show() {
     console.log('reward modal show view')
     this.modalShow = true
   }
 
-  hideView() {
+  hide() {
     this.modalShow = false
     this.$emit('reward-modal-hide')
-    const self = this
   }
 }
 </script>
diff --git a/src/utils/modal.util.ts b/src/utils/modal.util.ts
index b323e81..1b962c3 100644
--- a/src/utils/modal.util.ts
+++ b/src/utils/modal.util.ts
@@ -1,11 +1,9 @@
 import Vue, { CreateElement } from 'vue'
 
-declare module 'vue/types/vue' {
-  interface Vue {
-    destroy?: () => void
-    showView(): void
-    hideView(): void
-  }
+export declare class ZModal extends Vue {
+  destroy: () => void
+  show(): void
+  hide(): void
 }
 
 export const createModal = (Component: any, props: any) => {
@@ -16,7 +14,7 @@ export const createModal = (Component: any, props: any) => {
       })
   }).$mount()
   document.body.appendChild(vm.$el)
-  const ele = vm.$children[0]
+  const ele = vm.$children[0] as ZModal
   ele.destroy = function() {
     vm.$el.remove()
     ele.$destroy()
diff --git a/src/views/desktop/Mystery.vue b/src/views/desktop/Mystery.vue
index 7f5561e..54e8881 100644
--- a/src/views/desktop/Mystery.vue
+++ b/src/views/desktop/Mystery.vue
@@ -68,7 +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'
+import { createModal, ZModal } from '@/utils/modal.util'
 
 const PAGE_SIZE = 8
 const MYSTERY_BOX_CACHE = 'mystery_box_cache'
@@ -106,7 +106,7 @@ export default class Official extends Vue {
   private currentPage = 1
   private nftList: string[] = []
   private isProcess = false
-  private rewardModal: Vue
+  private rewardModal: ZModal
 
   created() {
     if (!process.env.VUE_APP_PART_CLOSE) {
@@ -118,12 +118,12 @@ export default class Official extends Vue {
   mounted() {
     this.checkOrderHistory()
     // if (process.env.NODE_ENV === 'development') {
-    //   window.showModal = this.showTestModal
+    window.showModal = this.showTestModal
     // }
   }
 
   unmounted() {
-    this.rewardModal?.destroy?.()
+    this.rewardModal?.destroy()
   }
 
   @Watch('isLogin')
@@ -176,19 +176,28 @@ export default class Official extends Vue {
   }
 
   async updateTotalNum() {
-    const eth = await this.chainManager.getNftBalance(this.boxAddress, AppModule.chainId)
-    this.totalCount = eth
-    this.totalPage = Math.ceil(eth / PAGE_SIZE)
+    try {
+      const eth = await this.chainManager.getNftBalance(this.boxAddress, AppModule.chainId)
+      this.totalCount = eth
+      this.totalPage = Math.ceil(eth / PAGE_SIZE)
+    } catch (err) {
+      console.log(err)
+    }
   }
 
   async getNftList() {
     this.showLoading()
     const start = (this.currentPage - 1) * PAGE_SIZE
-    const records: string[] = await this.chainManager.getNftList(this.boxAddress, AppModule.chainId, start, PAGE_SIZE)
     this.nftList.length = 0
-    if (records.length > 0) {
-      records.forEach(o => { if (o !== '0') this.nftList.push(o) })
+    try {
+      const records: string[] = await this.chainManager.getNftList(this.boxAddress, AppModule.chainId, start, PAGE_SIZE)
+      if (records.length > 0) {
+        records.forEach(o => { if (o !== '0') this.nftList.push(o) })
+      }
+    } catch (err) {
+      console.log(err)
     }
+
     this.hideLoading()
   }
 
@@ -307,108 +316,106 @@ export default class Official extends Vue {
 
   showRewardModal(data: any) {
     console.log('show reward modal with data: ', data)
-    if (!this.rewardModal) {
-      this.rewardModal = createModal(RewardModal, data)
-    }
-    this.rewardModal.showView?.()
+    this.rewardModal = createModal(RewardModal, data)
+    this.rewardModal.show()
   }
 
-  // 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.showRewardModal(data)
-  // }
+  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.showRewardModal(data)
+  }
 
   toPage(pageNo: number) {
     console.log('to page: ', pageNo)