perf: 优化移动端网络错误提示

resources/assets/js/App.vue

@@ -14,7 +14,7 @@
         <RightBottom/>
 
         <!--网络提示-->
-        <NetworkException/>
+        <NetworkException v-if="windowLarge"/>
 
         <!--图片预览-->
         <PreviewImageState/>

resources/assets/js/components/Mobile/Tabbar.vue

@@ -16,6 +16,7 @@
                 </ul>
             </div>
         </transition>
+        <NetworkException v-if="windowSmall" type="alert"/>
         <ul class="tabbar-box">
             <li v-for="item in navList" @click="toggleRoute(item.name)" :class="{active: activeName === item.name}">
                 <i class="taskfont" v-html="item.icon"></i>
@@ -36,10 +37,11 @@
 <script>
 import {mapGetters, mapState} from "vuex";
 import {Store} from "le5le-store";
+import NetworkException from "../NetworkException";
 
 export default {
     name: "MobileTabbar",
-
+    components: {NetworkException},
     data() {
         return {
             isMore: false,

resources/assets/js/components/NetworkException.vue

@@ -1,22 +1,26 @@
 <template>
-    <Modal
+    <div class="common-network-exception">
-        v-model="show"
+        <Alert v-if="type==='alert' && show" type="error" show-icon closable>{{$L('网络连接失败，请检查网络设置。')}}</Alert>
-        :width="416"
+        <Modal
-        :closable="false"
+            v-else
-        :footer-hide="true"
+            v-model="show"
-        class-name="common-network-exception">
+            :width="416"
-        <div class="ivu-modal-confirm">
+            :closable="false"
-            <div class="ivu-modal-confirm-head">
+            :footer-hide="true"
-                <div class="ivu-modal-confirm-head-icon ivu-modal-confirm-head-icon-error"><Icon type="ios-close-circle"/></div><div class="ivu-modal-confirm-head-title">{{$L('温馨提示')}}</div>
+            class-name="common-network-exception-modal">
+            <div class="ivu-modal-confirm">
+                <div class="ivu-modal-confirm-head">
+                    <div class="ivu-modal-confirm-head-icon ivu-modal-confirm-head-icon-error"><Icon type="ios-close-circle"/></div><div class="ivu-modal-confirm-head-title">{{$L('温馨提示')}}</div>
+                </div>
+                <div class="ivu-modal-confirm-body">
+                    <div>{{$L('网络连接失败，请检查网络设置。')}}</div>
+                </div>
+                <div class="ivu-modal-confirm-footer">
+                    <Button type="primary" @click="show = false">{{$L('确定')}}</Button>
+                </div>
             </div>
-            <div class="ivu-modal-confirm-body">
+        </Modal>
-                <div>{{$L('网络连接失败，请检查网络设置。')}}</div>
+    </div>
-            </div>
-            <div class="ivu-modal-confirm-footer">
-                <Button type="primary" @click="show = false">{{$L('确定')}}</Button>
-            </div>
-        </div>
-    </Modal>
 </template>
 
 <script>
@@ -24,12 +28,22 @@ import {mapState} from "vuex";
 
 export default {
     name: 'NetworkException',
+    props: {
+        type: {
+            type: String,
+            default: 'modal'
+        },
+    },
     data() {
         return {
             show: false,
         }
     },
 
+    beforeDestroy() {
+        this.show = false
+    },
+
     computed: {
         ...mapState([ 'ajaxNetworkException' ]),
     },

resources/assets/sass/components/mobile.scss

@@ -9,6 +9,24 @@
     z-index: 99;
     user-select: none;
 
+    .common-network-exception {
+        position: fixed;
+        bottom: 72px;
+        width: 100%;
+        .ivu-alert {
+            margin: 0 12px;
+            &.ivu-alert-with-icon {
+                .ivu-alert-icon {
+                    top: 50%;
+                    transform: translateY(-50%);
+                }
+            }
+            &.ivu-alert-error {
+                background-color: rgba(255, 240, 231, 0.95);
+            }
+        }
+    }
+
     .tabbar-box {
         position: relative;
         z-index: 3;