From 3a3ecd920f4b925248e8a7109f1f1c09528e4114 Mon Sep 17 00:00:00 2001
From: kuaifan <aipaw@live.cn>
Date: Fri, 2 Dec 2022 13:33:14 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96=E7=A7=BB=E5=8A=A8?=
 =?UTF-8?q?=E7=AB=AF=E7=BD=91=E7=BB=9C=E9=94=99=E8=AF=AF=E6=8F=90=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 resources/assets/js/App.vue                   |  2 +-
 .../assets/js/components/Mobile/Tabbar.vue    |  4 +-
 .../assets/js/components/NetworkException.vue | 48 ++++++++++++-------
 resources/assets/sass/components/mobile.scss  | 18 +++++++
 4 files changed, 53 insertions(+), 19 deletions(-)

diff --git a/resources/assets/js/App.vue b/resources/assets/js/App.vue
index 6d97018f7..7f60b8ac0 100755
--- a/resources/assets/js/App.vue
+++ b/resources/assets/js/App.vue
@@ -14,7 +14,7 @@
         <RightBottom/>
 
         <!--网络提示-->
-        <NetworkException/>
+        <NetworkException v-if="windowLarge"/>
 
         <!--图片预览-->
         <PreviewImageState/>
diff --git a/resources/assets/js/components/Mobile/Tabbar.vue b/resources/assets/js/components/Mobile/Tabbar.vue
index 15b1d2d04..6a9799462 100644
--- a/resources/assets/js/components/Mobile/Tabbar.vue
+++ b/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,
diff --git a/resources/assets/js/components/NetworkException.vue b/resources/assets/js/components/NetworkException.vue
index dfa17b82e..b2b5cda09 100644
--- a/resources/assets/js/components/NetworkException.vue
+++ b/resources/assets/js/components/NetworkException.vue
@@ -1,22 +1,26 @@
 <template>
-    <Modal
-        v-model="show"
-        :width="416"
-        :closable="false"
-        :footer-hide="true"
-        class-name="common-network-exception">
-        <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 class="common-network-exception">
+        <Alert v-if="type==='alert' && show" type="error" show-icon closable>{{$L('网络连接失败，请检查网络设置。')}}</Alert>
+        <Modal
+            v-else
+            v-model="show"
+            :width="416"
+            :closable="false"
+            :footer-hide="true"
+            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">
-                <div>{{$L('网络连接失败，请检查网络设置。')}}</div>
-            </div>
-            <div class="ivu-modal-confirm-footer">
-                <Button type="primary" @click="show = false">{{$L('确定')}}</Button>
-            </div>
-        </div>
-    </Modal>
+        </Modal>
+    </div>
 </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' ]),
     },
diff --git a/resources/assets/sass/components/mobile.scss b/resources/assets/sass/components/mobile.scss
index 13ca79ff4..a78e4ab92 100644
--- a/resources/assets/sass/components/mobile.scss
+++ b/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;