首页

src/project/oms/AppHome/AppHome.vue

@@ -1,5 +1,19 @@
 <template>
   <div class="page">
+    <div class="header" :class="[isFixed ? 'header-active' : '']">
+      <div class="status-bar" :style="{height: statusBarHeight + 'px'}"></div>
+      <div class="nav-bar">
+        <AiAreaPicker ref="area" class="ai-area" v-model="areaId" :name.sync="areaName" :areaId="$areaId" @input="areaSelect" >
+        <div class="ai-area__wrapper">
+          <span class="label" v-if="areaName">{{ areaName }}</span>
+          <span class="label" v-else>请选择</span>
+          <u-icon name="arrow-down" color="#fff" size="24" style="margin-left: 4px"></u-icon>
+        </div>
+      </AiAreaPicker>
+        <h2>数字平昌</h2>
+      </div>
+    </div>
+
     <div class="search-wrap">
       <div class="search fill" @click="$linkTo('/mods/AppContent/contentManager?moduleId=' + search.moduleId)">
         <u-icon name="search" color="#ffffff" size="40"></u-icon>
@@ -12,13 +26,17 @@
       <u-swiper :list="swiperList" mode="none" height="240" bg-color="none" @click="handleBannerClick"/>
     </div>
     <div class="grid-content">
-      <u-grid :col="4" hover-class="text-hover" :border="false">
+      <!-- <u-grid :col="4" hover-class="text-hover" :border="false">
-        <u-grid-item v-for="(item, index) in grids" :key="index" :custom-style="{padding:'8px 0'}" bg-color="none"
+        <u-grid-item v-for="(item, index) in grids" :key="index" :custom-style="{padding:'8px 0'}"
                      class="grid-item" @click="handleClick(item)">
           <img :src="item.pictureUrl" alt=""/>
           <div class="grid-text">{{ item.name }}</div>
         </u-grid-item>
-      </u-grid>
+      </u-grid> -->
+      <div class="item" v-for="(item, index) in grids" :key="index">
+        <img :src="item.pictureUrl" alt=""/>
+        <div class="grid-text">{{ item.name }}</div>
+      </div>
     </div>
     <div class="notice">
       <img :src="`${cdn}/notice-new.png`" alt="">
@@ -75,6 +93,7 @@ import {mapActions, mapState} from 'vuex'
 export default {
   name: 'AppHome',
   appName: "首页",
+  customNavigation: true,
   data() {
     return {
       cdn: "https://cdn.cunwuyun.cn/wxmp",
@@ -86,6 +105,11 @@ export default {
       categorys: [],
       categoryList: [],
       search: {areaId: ''},
+
+      isFixed: true,
+      statusBarHeight: 20,
+      areaId: '',
+      areaName: ''
     }
   },
   computed: {
@@ -105,6 +129,9 @@ export default {
     uni.setNavigationBarTitle({title: "数字乡村"})
   },
   onLoad() {
+    this.areaId = this.user.areaId
+    this.areaName = this.user.areaName
+    this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight
     this.autoLogin().then(() => {
       this.getSwiperList();
       this.getName();
@@ -115,6 +142,10 @@ export default {
   },
   methods: {
     ...mapActions(['autoLogin', 'authCheck']),
+    areaSelect(e) {
+      this.areaId = e
+      // this.getList()
+    },
     getName() {
       this.$instance.post("/app/appcontentmoduleinfo/listByName", null, {
         params: {names: "新闻发布"},
@@ -243,6 +274,9 @@ export default {
       path: `/pages/AppHome/AppHome`
     }
   },
+  onPageScroll(params) {
+    // this.isFixed = params.scrollTop > 60;
+  }
 }
 </script>
 
@@ -254,6 +288,43 @@ export default {
   min-height: 100%;
   background-color: #F3F6F9;
   position: relative;
+  .header {
+    position: fixed;
+    left: 0;
+    top: 0;
+    z-index: 0;
+    width: 100%;
+    opacity: 0;
+    transition: all 0.2s ease;
+    &.header-active {
+      z-index: 1111;
+      opacity: 1;
+      background: linear-gradient(180deg, #4670F5 0%, #4772F5 100%);
+    }
+
+    .nav-bar {
+      position: relative;
+      height: 88px;
+      line-height: 88px;
+      color: #fff;
+      ai-area-picker {
+        display: inline-block;
+        width: 320px;
+        padding-left: 28px;
+        box-sizing: border-box;
+      }
+      .ai-area__wrapper {
+        .label {
+          font-size: 28px;
+        }
+      }
+      h2 {
+        display: inline-block;
+        font-size: 32px;
+        color: #FFF;
+      }
+    }
+  }
 
   .search-wrap {
     width: 750px;
@@ -319,10 +390,18 @@ export default {
   }
 
   .grid-content {
+    width: calc(100% - 60px);
+    margin: 0 30px;
+    border-radius: 12px;
+    padding: 20px 30px 36px 30px;
     box-sizing: border-box;
-
+    background-color: #fff;
-    .grid-item {
+    .item {
+      display: inline-block;
+      width: 25%;
+      text-align: center;
       img {
+        margin-top: 32px;
         width: 108px;
         height: 108px;
         object-fit: fill;
@@ -331,7 +410,7 @@ export default {
       .grid-text {
         font-size: 26px;
         font-weight: 400;
-        color: #333333;
+        color: #333;
         line-height: 36px;
       }
     }