移动端错误的网络

src/components/EDialogEmpty.vue

@@ -52,14 +52,9 @@ export default {
     z-index: 100;
     .dialog {
         position: absolute;
-        left: 0;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        margin: auto;
-        width: 10rem;
-        height: 6rem;
-       
+        left: 50%;
+        top: 40%;
+        transform: translate(-50%, -50%);
     }
 }
 </style>

src/components/Navigation.vue

@@ -27,13 +27,7 @@
                 </div>
             </div>
         </div>
-        <EDialogEmpty :title="$t('chooseToken')" :visible="showConnetChain">
-            <div class="choose-chain-content">
-                <img src="@/assets/images/public/closeGrayCircle.png" alt="" class="close pointer" @click="showConnetChain = false">
-                <div class="_title">{{$t('errChain')}}</div>
-                <div class="text">{{$t('errChainText')}}</div>
-            </div>
-        </EDialogEmpty>
+        <NetworkErrorModal @close="showConnetChain = false" :visible="showConnetChain"/>
     </div>
 </template>
 
@@ -41,7 +35,7 @@
 import i18n, { setLanguage, getCurrentLanguage } from '../i18n';
 import { createNamespacedHelpers } from 'vuex';
 import { validChainIds } from '@/networkConfig';
-import EDialogEmpty from './EDialogEmpty';
+import NetworkErrorModal from './NetworkErrorModal';
 
 const { mapMutations: mapMutationsWallet, mapState: mapStateWallet } = createNamespacedHelpers('wallet');
 
@@ -50,7 +44,7 @@ export default {
     props: {
 
     },
-    components: { EDialogEmpty },
+    components: { NetworkErrorModal },
     data() {
         return {
             isPro: false,
@@ -246,32 +240,6 @@ export default {
             white-space: nowrap;
         }
     }
-    .choose-chain-content {
-        width: 6rem;
-        height: 2rem;
-        border-radius: .2rem;
-        background: #FFF;
-        margin: 0 auto;
-        position: relative;
-        text-align: center;
-        color: #333;
-        padding-top: .32rem;
-        .close {
-            width: .3rem;
-            height: .3rem;
-            position: absolute;
-            top: .18rem;
-            right: .18rem;
-        }
-        ._title {
-            font-size: .32rem;
-            color: #333;
-        }
-        .text {
-            font-size: .26rem;
-            color: #333;
-            margin-top: .76rem;
-        }
-    }
+    
 }
 </style>

src/components/NetworkErrorModal.vue

+<template>
+    <EDialogEmpty :title="$t('chooseToken')" :visible="visible">
+        <div class="choose-chain-content">
+            <img src="@/assets/images/public/closeGrayCircle.png" alt="" class="close pointer" @click="handleClose">
+            <div class="_title">{{$t('errChain')}}</div>
+            <div class="text">{{$t('errChainText')}}</div>
+        </div>
+    </EDialogEmpty>
+</template>
+
+<script>
+import EDialogEmpty from './EDialogEmpty';
+export default {
+    name: 'NetworkErrorModal',
+    props: {
+        visible: {
+            type: Boolean,
+            default: false
+        }
+    },
+    components: {
+        EDialogEmpty
+    },
+    data() {
+        return {
+
+        }
+    },
+    methods: {
+        handleClose() {
+            this.$emit('close')
+        },
+
+    }
+}
+</script>
+
+<style scoped lang="scss">
+.choose-chain-content {
+    width: 6rem;
+    height: 2rem;
+    border-radius: .2rem;
+    background: #FFF;
+    margin: 0 auto;
+    position: relative;
+    text-align: center;
+    color: #333;
+    padding-top: .32rem;
+    .close {
+        width: .3rem;
+        height: .3rem;
+        position: absolute;
+        top: .18rem;
+        right: .18rem;
+    }
+    ._title {
+        font-size: .32rem;
+        color: #333;
+    }
+    .text {
+        font-size: .26rem;
+        color: #333;
+        margin-top: .76rem;
+    }
+}
+</style>

src/views/thinkiumBridge/thinkiumBridge.vue

@@ -2,8 +2,10 @@
     <div class="container">
         <div class="banner-top" />
         <div class="main">
-            <div class="cannect-wallet" v-if="walletConnected">{{$hideMoreText(currentWalletAddress, 7, 0)}}</div>
-            <div class="cannect-wallet pointer" v-else @click="toCannectWallet">{{$t('connectWallet')}}</div>
+            <div class="cannect-wallet pointer" v-if="!walletConnected" @click="toCannectWallet">{{$t('connectWallet')}}</div>
+            <div class="cannect-wallet wrong-network" v-else-if="!isValidChaindId" @click="showConnetChain = true">{{$t('errChain')}}</div>
+            <div class="cannect-wallet" v-else>{{$hideMoreText(currentWalletAddress, 7, 0)}}</div>
+            
             <div class="redemption-wrap">
                 <div class="redemption-name">{{holdItem.name}}</div>
                 <div class="redemption-window hold" style="margin-bottom: .85rem">
@@ -51,6 +53,7 @@
         </EDialog>
         <MConnectWallet/>
         <van-loading class="loading-bg" type="spinner" color="#303030" size="24px" v-show="pageLoading" />
+        <NetworkErrorModal @close="showConnetChain = false" :visible="showConnetChain"/>
     
     </div>
 </template>
@@ -71,6 +74,8 @@ import { createNamespacedHelpers } from 'vuex';
 import { getTokenList } from '@/utils/data/tokenList'
 import { connectWallet } from '@/service/loginService'
 import MConnectWallet from '@/components/MConnectWallet.vue'
+import NetworkErrorModal from '@/components/NetworkErrorModal.vue'
+import { validChainIds } from '@/networkConfig';
 
 const { mapState: mapStateWallet, mapMutations: mapMutationsWallet } = createNamespacedHelpers('wallet');
 const { mapState: mapStateNetwork } = createNamespacedHelpers('network');
@@ -103,6 +108,7 @@ export default {
             changeItem: '',
             inputValue: '',
             rbalance: 1,
+            showConnetChain: false,
         }
     },
     computed: {
@@ -117,6 +123,10 @@ export default {
         currentWalletAddressAndChainId() {
             return this.currentWalletAddress && this.chainId
         },
+        isValidChaindId() {
+            let chainId = this.$store.getters.chainId;
+            return validChainIds.includes(chainId - 0);
+        },
     },
     asyncComputed: {
         balance: {
@@ -142,7 +152,8 @@ export default {
     },
     components: {
         EDialog,
-        MConnectWallet
+        MConnectWallet,
+        NetworkErrorModal
     },
     methods: {
         ...mapMutationsWallet(['CHANGE_CONNECT_WALLET_MODAL_STATUS']),
@@ -439,6 +450,10 @@ export default {
         text-align: center;
         display: flex;
         align-items: center;
+        &.wrong-network{
+            background:rgba(228, 32, 57, 0.2);
+            color: #E42039;
+        }
     }
     .redemption-wrap {
         position: relative; // flex: 1;