网格

src/apps/AppGridManagement/AppGridManagement.vue

@@ -1,15 +1,19 @@
 <template>
   <div class="AppGridManagement">
-    <component
+    <component v-if="refresh" :is="component" @change="onChange" :params="params"> </component>
-        :is="component"
+    <div class="tabs" v-if="isTab">
-        @change="onChange"
+      <div class="item" @click="tabClick(index, item.component)" v-for="(item, index) in tabs" :key="index">
-        :params="params">
+        <img :src="tabIndex == index ? item.activeImg : item.img" alt="" />
-    </component>
+        <p :class="tabIndex == index ? 'color-3267F0' : ''">{{ item.text }}</p>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
-import Detail from './components/detail'
+import Statistics from './Statistics.vue'
+import Organization from './Organization.vue'
+import Map from './Map.vue'
 
 export default {
   name: 'AppGridManagement',
@@ -17,30 +21,102 @@ export default {
 
   data() {
     return {
-      component: 'Detail',
+      component: 'Map',
-      params: {}
+      params: {},
+      refresh: true,
+      tabIndex: 0,
+      tabs: [
+        {
+          img: require('./components/img/handle-icon.png'),
+          activeImg: require('./components/img/handle-icon-active.png'),
+          text: '统计',
+          component: 'Statistics',
+        },
+        {
+          img: require('./components/img/statistics-icon.png'),
+          activeImg: require('./components/img/statistics-icon-active.png'),
+          text: '组织',
+          component: 'Organization',
+        },
+        {
+          img: require('./components/img/set-icon.png'),
+          activeImg: require('./components/img/set-icon-active.png'),
+          text: '地图',
+          component: 'Map'
+        }
+      ],
+      isTab: true,
     }
   },
 
-  components: { Detail },
+  components: {
+    Organization,
+    Statistics,
+    Map,
+  },
 
   methods: {
     onChange(e) {
       this.params = e.params
       this.component = e.type
-    }
+    },
+    tabClick(index, component) {
+      this.tabIndex = index
+      this.component = component
+      this.refresh = false
+      this.$nextTick(() => {
+        this.refresh = true
+      })
+    },
   },
   onShow() {
-    document.title = "网格管理"
+    document.title = '网格管理'
+    uni.$on('hideTab', () => {
+      this.isTab = false
+    })
+    uni.$on('showTab', () => {
+      this.isTab = true
+    })
+  },
+  onReachBottom() {
+    if(!this.tabIndex) {
+      uni.$emit('nextList')
     }
+  },
 }
 </script>
 
 <style lang="scss" scoped>
-::v-deep uni-page-body{
+.AppGridManagement {
   height: 100%;
 }
-.AppGridManagement{
+.tabs {
-  height: 100%;
+  width: 100%;
+  height: 98px;
+  background: #fff;
+  border-top: 1px solid #ddd;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  display: flex;
+  .item {
+    flex: 1;
+    text-align: center;
+    img {
+      width: 56px;
+      height: 56px;
+      margin-top: 8px;
+    }
+    p {
+      font-size: 22px;
+      font-family: PingFangSC-Medium, PingFang SC;
+      font-weight: 500;
+      color: #c4cad4;
+      line-height: 8px;
+    }
+    .color-3267F0 {
+      color: #3267f0;
+    }
+  }
 }
 </style>

src/apps/AppGridManagement/Map.vue

@@ -188,7 +188,7 @@ ai-tree-picker {
 
   .map-content {
     width: 100%;
-    height: calc(100% - 112px);
+    height: calc(100% - 210px);
   }
 
   .popup {