转账成功提示

src/main.js

@@ -18,8 +18,6 @@ import 'swiper/swiper-bundle.css'
 
 
 
-
-
 Vue.config.productionTip = false
 Vue.use(animated)
 Vue.use(AsyncComputed)

src/plugin/vant.js

 import Vue from 'vue'
-import { Dialog } from 'vant';
+import { Dialog, Loading,Notify } from 'vant';
 
 // 全局注册
-Vue.use(Dialog);
\ No newline at end of file
+Vue.use(Dialog);
+Vue.use(Loading);
+Vue.use(Notify);
\ No newline at end of file

src/views/thinkiumBridge/thinkiumBridge.vue

@@ -48,6 +48,7 @@
                 </li>
             </ul>
         </EDialog>
+        <van-loading class="loading-bg" type="spinner" color="#303030" size="24px" v-show="pageLoading"/>
     </div>
 </template>
 
@@ -77,6 +78,7 @@ export default {
     data() {
         return {
             dialogVisible: false,
+            pageLoading: false,
             tokenList: [],
             tokenListOrigin: [{
                     name: 'TKM',
@@ -234,13 +236,11 @@ export default {
                 chainName: 'tkm',
                 coinData: {},
             }
-
             let bsc = {
                 name: 'BSC',
                 chainName: 'bsc',
                 coinData: {},
             }
-
             if (this.tokenListBSC.map(item => item.chainId).includes(this.chainId)) {
                 this.holdItem = bsc;
                 this.exchangeItem = tkm;
@@ -248,10 +248,9 @@ export default {
                 this.holdItem = tkm;
                 this.exchangeItem = bsc;
             }
-
             this.changeItem = 'holdItem';
             let token = this.tokenListOrigin.find(item => item.chainId == this.chainId && item.chainName == this.holdItem.chainName);
-            if(!token){
+            if (!token) {
                 token = this.getTokensByChainName(this.holdItem.chainName)[0]
             }
             this.changeSelect(0, token)
@@ -259,12 +258,12 @@ export default {
         formateChainName(chainId) {
             let tkmChainIds = this.tokenListTKM.map(item => item.chainId);
             let bscChainIds = this.tokenListBSC.map(item => item.chainId);
-           
+
             if (tkmChainIds.includes(chainId - 0)) {
                 return `Thinkium ${chainId}#链`
-            } else if(bscChainIds.includes(chainId - 0)) {
+            } else if (bscChainIds.includes(chainId - 0)) {
                 return `BSC`
-            }else{
+            } else {
                 return chainId
             }
         },
@@ -323,7 +322,7 @@ export default {
             this.dialogVisible = true
             this.changeItem = type;
         },
-        transfer() {
+        async transfer() {
             const { inputValue, holdItem, exchangeItem } = this;
             const value = (inputValue + '').trim() - 0;
             if (!value) {
@@ -335,21 +334,29 @@ export default {
                 });
                 return;
             }
-            if (holdItem.coinData.type == 'main') {
-                this.depositNative({
-                    chain: exchangeItem.coinData.chainId + '',
-                    value: this.$toBig(value)
-                });
-            } else {
-                this.depositToken({
-                    chain: exchangeItem.coinData.chainId + '',
-                    value: this.$toBig(value),
-                    tokenAddress: holdItem.coinData.contractAddress,
-                });
-            }
+            this.pageLoading = true;
+            try {
+                if (holdItem.coinData.type == 'main') {
+                    await this.depositNative({
+                        chain: exchangeItem.coinData.chainId + '',
+                        value: this.$toBig(value)
+                    });
+                } else {
+                    await this.depositToken({
+                        chain: exchangeItem.coinData.chainId + '',
+                        value: this.$toBig(value),
+                        tokenAddress: holdItem.coinData.contractAddress,
+                    });
+                }
+                this.$notify({ type: 'success', message: '转账成功' });
 
+            } catch (err) {
+                this.$notify({ type: 'warning', message: '转账失败' });
+
+            }
+            this.pageLoading = false;
         },
-        depositNative({ address = window.defaultAccount, chain, value }) {
+        async depositNative({ address = window.defaultAccount, chain, value }) {
             let params = [
                 address,
                 chain,
@@ -357,7 +364,7 @@ export default {
             let overrides = {
                 value,
             }
-            bridge.methods.depositNative(...params).send(overrides)
+            await bridge.methods.depositNative(...params).send(overrides)
         },
         async depositToken({ value, tokenAddress, address = window.defaultAccount, chain }) {
             let token = '';
@@ -372,7 +379,7 @@ export default {
                 address,
                 chain
             ]
-            bridge.methods.depositToken(...params).send();
+            await bridge.methods.depositToken(...params).send();
         },
         async approve({ value, contractAddress, owner = window.defaultAccount, spender }) {
             console.log({ value, contractAddress, owner, spender });
@@ -572,5 +579,14 @@ export default {
             background-color: rgba($color: #FCBF19, $alpha: 0.1);
         }
     }
+    .loading-bg{
+        position: fixed;
+        width: 100%;
+        height: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        background: rgba(0,0,0,0.3);
+    }
 }
 </style>