Explorar el Código

首页 蜂鸟底图未加载完成时,显示loading

yunxing hace 4 años
padre
commit
037e467ed8
Se han modificado 1 ficheros con 22 adiciones y 7 borrados
  1. 22 7
      src/App.vue

+ 22 - 7
src/App.vue

@@ -1,5 +1,4 @@
 <template>
-    <!-- ios头部padding适配 -->
     <div id='app'>
         <div id='fengMap' class='fengMap'></div>
         <!-- 顶部navbar -->
@@ -43,6 +42,10 @@
                 </template>
             </van-tabbar-item>
         </van-tabbar>
+        <!-- 蜂鸟底图未加载完成时,显示loading -->
+        <div class='app-loading' v-show='!loadComplete'>
+            <van-loading color='#1989fa' size='40' type='spinner' vertical>加载中...</van-loading>
+        </div>
     </div>
 </template>
 <script>
@@ -50,8 +53,8 @@ import Vue from 'vue'
 import { mapGetters, mapActions, mapMutations } from 'vuex'
 import { SFengParser } from '@saga-web/feng-map'
 import { setFloor } from '@/api/public.js'
-import { Tabbar, TabbarItem } from 'vant'
-Vue.use(Tabbar).use(TabbarItem)
+import { Tabbar, TabbarItem, Loading } from 'vant'
+Vue.use(Tabbar).use(TabbarItem).use(Loading)
 import store from './store/index'
 import NarBar from './components/Navbar'
 import { osInfo } from './utils/util'
@@ -62,6 +65,7 @@ export default {
     components: { NarBar },
     data() {
         return {
+            loadComplete: false, //蜂鸟加载,解析完成标志
             active: 0,
             // 路由字典
             routeDict: {
@@ -107,7 +111,9 @@ export default {
             this.getFengMap()
             store.dispatch('getBrand')
         } else {
+            console.log(111111)
             window.fengmapData = null
+            this.loadComplete = true
         }
     },
     computed: {
@@ -134,6 +140,7 @@ export default {
             )
             if (this.fmapID.includes('null')) {
                 this.SETHAVEFENGMAP(0)
+                this.loadComplete = true
             }
             window.fengmapData.loadMap(this.fmapID, (a, b) => {
                 const dataArr = b.map((item) => {
@@ -144,6 +151,7 @@ export default {
                     this.SETHAVEFENGMAP(1)
                 })
                 console.timeEnd('蜂鸟下载,解析')
+                this.loadComplete = true
                 // 缓存楼层数据
                 if (dataArr.length) {
                     setFloor({ plazaId: this.plazaId }, dataArr)
@@ -213,16 +221,23 @@ export default {
             }
         },
         $route(to, from) {
-            console.log(to, from)
+            // console.log(to, from)
         },
     },
 }
 </script>
 <style lang="less">
 @import './style/common.less';
-.ios-padding {
-    // padding-top: 15px;
-    box-sizing: border-box;
+.app-loading {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: fixed;
+    top: 0;
+    background: #fff;
+    z-index: 9999;
 }
 // navbar高度
 .nav-bar {