From df750fb43d54a33f2a18837760974b376a8d40f9 Mon Sep 17 00:00:00 2001
From: cebgcontract <99630598+cebgcontract@users.noreply.github.com>
Date: Wed, 30 Mar 2022 12:49:08 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8E=A5=E5=85=A5=E8=BD=AC=E8=B4=A6=E5=92=8C?=
 =?UTF-8?q?=E6=8F=90=E6=AC=BE=E7=9B=B8=E5=85=B3=E6=8E=A5=E5=8F=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/market/wallet/CoinCard.vue    |   3 +-
 src/components/market/wallet/WalletPanel.vue | 160 ++++++++++++++++---
 2 files changed, 136 insertions(+), 27 deletions(-)

diff --git a/src/components/market/wallet/CoinCard.vue b/src/components/market/wallet/CoinCard.vue
index a3d3eaf..f154bef 100644
--- a/src/components/market/wallet/CoinCard.vue
+++ b/src/components/market/wallet/CoinCard.vue
@@ -12,7 +12,7 @@
              alt="coin"
              class="topRight"></div>
       <div class="wrongNetwork hide"><span>Wrong network</span></div>
-      <button :disabled="coinData.btnDisable" class="general-btn btn" @click="onClick">
+      <button :disabled="coinData.btnDisable || process" class="general-btn btn" @click="onClick">
         <span class="title">{{coinData.btnName}}</span>
       </button>
     </div>
@@ -43,6 +43,7 @@ export interface ICoinData{
 })
 export default class CoinCard extends Vue {
   @Prop() private coinData: ICoinData
+  @Prop() private process = false
 
   get mobile() {
     return AppModule.device === DeviceType.Mobile
diff --git a/src/components/market/wallet/WalletPanel.vue b/src/components/market/wallet/WalletPanel.vue
index d50f509..84873a4 100644
--- a/src/components/market/wallet/WalletPanel.vue
+++ b/src/components/market/wallet/WalletPanel.vue
@@ -28,6 +28,7 @@
       <coin-card
         v-for="d in coinList"
         :coin-data="d"
+        :process = "showOrderStatus"
         @coin-card-clicked = "onCardClicked"
         :key="d.symbol"></coin-card>
     </div>
@@ -39,10 +40,16 @@
       <coin-card
         v-for="d in gameCoinList"
         :coin-data="d"
+        :process = "showOrderStatus"
         @coin-card-clicked = "onGameCardClicked"
         :key="d.symbol"></coin-card>
     </div>
     <price-picker-modal></price-picker-modal>
+    <div class="order-status" v-show="showOrderStatus">
+      <el-tooltip class="item" effect="light" content="Transaction in progress" placement="right">
+        <time-loader></time-loader>
+      </el-tooltip>
+    </div>
   </div>
 </template>
 <script lang="ts">
@@ -57,12 +64,16 @@ import { CONTRACT_ADDRESS } from '@/configs/config_chain'
 import { formatPrice } from '@/utils/chain.util'
 import { getUserInfo } from '@/api/User'
 import PricePickerModal, { SHOW_AMOUNT_MODAL } from '@/components/market/PricePickerModal.vue'
-import { EventBus, SHOW_CHAIN_MODAL } from '@/utils/event-bus'
-import { queryRechargeResult, queryWithdrawalResult } from '@/api/Market'
+import { EventBus } from '@/utils/event-bus'
+import { queryRechargeResult, queryWithdrawalResult, withdrawal } from '@/api/Market'
+import { ElLoadingComponent } from 'element-ui/types/loading'
+import TimeLoader from '@/components/main/TimeLoader.vue'
 
+const TMP_ORDER_ID = 'tmp_coin_order_id'
 @Component({
   name: 'WalletPanel',
   components: {
+    TimeLoader,
     PricePickerModal,
     PlaceholderPanel,
     GameCoinCard,
@@ -73,6 +84,10 @@ import { queryRechargeResult, queryWithdrawalResult } from '@/api/Market'
 export default class WalletPanel extends Vue {
   private currentNet: number = this.nets[0].id
   chainManager = new ChainManager()
+  orderTimer: any = null
+  showOrderStatus = false
+  historyOrderId: string | null = ''
+  loadingInstance: ElLoadingComponent
 
   get nets() {
     return [...new ChainManager().availableChains.values()]
@@ -85,8 +100,11 @@ export default class WalletPanel extends Vue {
   @Watch('logined')
   private accountChange() {
     this.changeNet(this.nets[0].id)
-    this.updateCurrencies()
-    this.updateGameCoins()
+    if (this.account) {
+      this.updateCurrencies()
+      this.updateGameCoins()
+      this.checkOrderHistory()
+    }
   }
 
   private currencies: ICurrentData[] = []
@@ -152,6 +170,10 @@ export default class WalletPanel extends Vue {
     }
   }
 
+  mounted() {
+    this.checkOrderHistory()
+  }
+
   updateDefaultData(data: ICoinData) {
     data.amount = '-'
     data.price = '-'
@@ -240,11 +262,13 @@ export default class WalletPanel extends Vue {
     if (!value) {
       return
     }
-
+    this.loadingInstance = this.$loading({})
     try {
       const res = await this.beginTransfer(data, value)
       console.log(res)
       const txHash = res.transactionHash
+      this.saveTmpOrderInfo(txHash, 0)
+      this.beginTraceOrderStatus(txHash, 0)
     } catch (err) {
       console.log(err)
       this.$message({
@@ -252,11 +276,12 @@ export default class WalletPanel extends Vue {
         message: 'error transfer'
       })
     }
+    this.loadingInstance?.close()
   }
 
   async beginTransfer(data: ICoinData, amount: number) {
     return this.chainManager.transferToAccount({
-      to: '0x42448C6a38c08637218D8327b748F213fC2c0231',
+      to: '0x50A8e60041A206AcaA5F844a1104896224be6F39',
       amount: amount,
       chainId: data.chain!,
       address: data.address!
@@ -281,29 +306,33 @@ export default class WalletPanel extends Vue {
     if (!value) {
       return
     }
+    const postData = {
+      account: AppModule.accountId,
+      type: data.id === 'gold' ? 1 : 2,
+      amount: value + '000000000000000000'
+    }
+    this.loadingInstance = this.$loading({})
+    try {
+      const res: any = await withdrawal(postData)
+      console.log('withdrawal result: ', res)
+      const seqId = res.seq_id
+      this.saveTmpOrderInfo(seqId, 1)
+      this.beginTraceOrderStatus(seqId, 1)
+      this.loadingInstance?.close()
+    } catch (err) {
+      this.loadingInstance?.close()
+    }
     console.log('begin claim')
   }
 
   async updateGameCoins() {
     const data = { account: AppModule.accountId }
-    const res: any = await getUserInfo(data)
-    // const res: any = {
-    //   errcode: 0, // 错误码
-    //   errmsg: '', // 错误描述
-    //   info: { // struct BcUserInfo, 用户信息
-    //     account: '', // 账号
-    //     gold: 1000, // 金币
-    //     diamond: 2000 // 钻石
-    //   }
-    // }
-    if (res.info) {
-      const info = res.info
-      for (let i = 0, l = this.gameCoinList.length; i < l; i++) {
-        const data = this.gameCoinList[i]
-        data.amount = info[data.id] || 0
-        data.btnDisable = data.amount === 0
-        this.$set(this.gameCoinList, i, data)
-      }
+    const info: any = await getUserInfo(data)
+    for (let i = 0, l = this.gameCoinList.length; i < l; i++) {
+      const data = this.gameCoinList[i]
+      data.amount = info[data.id] || 0
+      data.btnDisable = data.amount === 0
+      this.$set(this.gameCoinList, i, data)
     }
   }
 
@@ -337,7 +366,15 @@ export default class WalletPanel extends Vue {
       txhash
     }
     try {
-      const res = await queryRechargeResult(data)
+      const res: any = await queryRechargeResult(data)
+      console.log('queryRechargeResult: ', res)
+      if (res.state === 1) {
+        this.resetTmpOrderId()
+        this.showOrderStatus = false
+        this.updateGameCoins()
+        this.updateBalanceSet()
+        this.$alert('Congratulations', 'Deposit Success', { type: 'success', confirmButtonText: 'OK' })
+      }
     } catch (err) {
       console.log(err)
     }
@@ -354,11 +391,68 @@ export default class WalletPanel extends Vue {
       seq_id: seqId
     }
     try {
-      const res = await queryWithdrawalResult(data)
+      const res: any = await queryWithdrawalResult(data)
+      console.log('queryWithdrawalResult: ', res)
+      if (res.state === 1) {
+        this.resetTmpOrderId()
+        this.showOrderStatus = false
+        this.updateGameCoins()
+        this.updateBalanceSet()
+        this.$alert('Congratulations', 'Claim Success', { type: 'success', confirmButtonText: 'OK' })
+      }
     } catch (err) {
       console.log(err)
     }
   }
+
+  checkOrderHistory() {
+    const data = this.getTmpOrderInfo()
+    if (data && this.account) {
+      this.beginTraceOrderStatus(data.orderId, data.type)
+    }
+  }
+
+  resetTmpOrderId() {
+    if (this.orderTimer !== null) {
+      clearInterval(this.orderTimer)
+      this.orderTimer = null
+    }
+    this.removeTmpOrderInfo()
+    this.loadingInstance?.close()
+  }
+
+  saveTmpOrderInfo(orderId: string, type: number) {
+    const data = { orderId, type }
+    localStorage.setItem(TMP_ORDER_ID, JSON.stringify(data))
+  }
+
+  removeTmpOrderInfo() {
+    localStorage.removeItem(TMP_ORDER_ID)
+  }
+
+  getTmpOrderInfo() {
+    const dataStr = localStorage.getItem(TMP_ORDER_ID)
+    if (dataStr) {
+      try {
+        return JSON.parse(dataStr)
+      } catch (err) {
+        return null
+      }
+    }
+    return null
+  }
+
+  beginTraceOrderStatus(orderId: string, type: number) {
+    this.showOrderStatus = true
+    this.loadingInstance?.close()
+    this.orderTimer = setInterval(() => {
+      if (type === 0) {
+        this.queryRechargeOrder(orderId)
+      } else {
+        this.queryWithdrawOrder(orderId)
+      }
+    }, 1000)
+  }
 }
 </script>
 <style lang="scss" scoped>
@@ -463,6 +557,20 @@ export default class WalletPanel extends Vue {
     justify-content: space-between;
   }
 }
+.order-status {
+  transform: scale(0.3);
+  width: 220px;
+  height: 220px;
+  border-radius: 110px;
+  background: white;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transform-origin: top;
+  position: fixed;
+  left: 100px;
+  top: 100px;
+}
 @include media('<wide') {
   .wallet-container{
     width: 1024px;