导航栏

src/project/wuxi/AppCircle/AppCircle.vue

@@ -1,30 +1,32 @@
 <template>
   <div class="AppCircle">
-  <!-- <u-navbar :is-back="true" title="邻里互助" title-color="#fff" title-width="300" title-size="28" :background="background" back-icon-color="#fff"></u-navbar> -->
-   <div class="header">
-      <div class="top">
-        <div class="left">
-          <span @click="changeTab(0)" :class="{active:currIndex === 0}">广场</span>
-          <span @click="changeTab(1)" :class="{active:currIndex === 1}">社区</span>
-        </div>
-        <div class="right" @click="$linkTo('./MyPostList')" hover-class="text-hover">
-          <span>我的贴子<img src="https://cdn.cunwuyun.cn/wechat/wuxi/circle-top-icon.png" alt=""></span>
-          <i></i>
+    <u-navbar :is-back="false" title="邻里互助" title-color="#000" title-width="300" title-size="32" :title-bold="true" :background="backgroundNavbar"></u-navbar>
+    <div class="header-bg">
+      <div class="header">
+        <div class="top">
+          <div class="left">
+            <span @click="changeTab(0)" :class="{active:currIndex === 0}">广场</span>
+            <span @click="changeTab(1)" :class="{active:currIndex === 1}">社区</span>
+          </div>
+          <div class="right" @click="$linkTo('./MyPostList')" hover-class="text-hover">
+            <span>我的贴子<img src="https://cdn.cunwuyun.cn/wechat/wuxi/circle-top-icon.png" alt=""></span>
+            <i></i>
+          </div>
         </div>
       </div>
-    </div>
-    <div class="nav-content" v-if="topic.length">
-      <div class="nav">
-        <div
-          class="nav-item"
-          hover-class="text-hover"
-          v-for="(item, index) in topic" :key="index" @click="$linkTo('./TopicDetail?themeId=' + item.id + '&name=' + item.title)">
-          <image :src="item.picUrl" mode="aspectFill"/>
-          <h2>{{ item.title }}</h2>
-        </div>
-        <div class="nav-item" hover-class="text-hover" @click="$linkTo('./Topic')" v-if="topicList.length > 6">
-          <image src="https://cdn.cunwuyun.cn/wxmp/fengdu/ic-more.png"/>
-          <h2>更多</h2>
+      <div class="nav-content" v-if="topic.length">
+        <div class="nav">
+          <div
+            class="nav-item"
+            hover-class="text-hover"
+            v-for="(item, index) in topic" :key="index" @click="$linkTo('./TopicDetail?themeId=' + item.id + '&name=' + item.title)">
+            <image :src="item.picUrl" mode="aspectFill"/>
+            <h2>{{ item.title }}</h2>
+          </div>
+          <div class="nav-item" hover-class="text-hover" @click="$linkTo('./Topic')" v-if="topicList.length > 6">
+            <image src="https://cdn.cunwuyun.cn/wxmp/fengdu/ic-more.png"/>
+            <h2>更多</h2>
+          </div>
         </div>
       </div>
     </div>
@@ -78,6 +80,7 @@
   import {mapActions, mapState} from 'vuex'
 
   export default {
+    customNavigation: true,
     name: 'AppCircle',
     appName: '邻里互助',
     data() {
@@ -90,7 +93,10 @@
         isFixed: false,
         statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
         total: 0,
-        background: {backgroundColor: '#4181FF'}
+        backgroundNavbar: {
+          background: 'url(https://cdn.cunwuyun.cn/wechat/wuxi/wuxi-nav-bg.png) no-repeat',
+          backgroundSize: 'cover',
+        }
       }
     },
 
@@ -275,27 +281,14 @@
   .AppCircle {
     // padding-top: 100px;
     padding-bottom: 40px;
-
+    .header-bg {
+      background: url('https://cdn.cunwuyun.cn/wechat/wuxi/wuxi-header-bg.png') center;
+      background-size: 100% 100%;
+    }
     .header {
-      // position: fixed;
-      // left: 0;
-      // top: 0;
-      // z-index: 111;
       width: 100%;
       opacity: 1;
       transition: all 0.2s ease;
-      .status-bar {
-        background: #4181FF;
-      }
-
-      .nav-bar {
-        position: relative;
-        color: #fff;
-        font-size: 32px;
-        font-weight: 600;
-        background: #4181FF;
-        text-align: center;
-      }
     }
 
     div {
@@ -318,7 +311,6 @@
       padding-top: 16px;
       width: 100%;
       height: 192px;
-      background-image: linear-gradient(0deg, #F3F6F9 0%, #4181FF 100%);
       margin-bottom: 230px;
     }
     .nav {
@@ -472,7 +464,6 @@
       width: 100%;
       height: 100px;
       padding: 0 32px;
-      background: #4181FF;
 
       .left {
         display: flex;

src/project/wuxi/AppHome/AppHome.vue

@@ -1,18 +1,20 @@
 <template>
   <div class="page">
     <div class="header-content">
-      <u-navbar :is-back="false" :is-fixed="false" title="数智巫溪" title-color="#000" title-width="300" title-size="32" :title-bold="true" :background="backgroundNavbar"></u-navbar>
-      <p class="weather-info">
-        <img :src="`${cdn}/border.png`" alt="">
-        今天：多云 26℃ ~ 34℃ 无持续风向＜4级
-      </p>
-      <div class="swiper-content">
-        <u-swiper :list="swiperList" mode="none" height="364" bg-color="none" @click="handleBannerClick"/>
-      </div>
-      <div class="notice">
-        <img :src="`${cdn}/notice-new.png`" alt="">
-        <u-notice-bar mode="vertical" color="#4181FF" style="flex: 1;" :volume-icon="false" :is-circular="false"
-          duration="5000" speed="5000" :list="noticeList" @click="clickNotice"/>
+      <u-navbar :is-back="false" title="数智巫溪" title-color="#000" title-width="300" title-size="32" :title-bold="true" :background="backgroundNavbar"></u-navbar>
+      <div class="header-bg">
+        <p class="weather-info">
+          <img :src="`${cdn}/border.png`" alt="">
+          今天：多云 26℃ ~ 34℃ 无持续风向＜4级
+        </p>
+        <div class="swiper-content">
+          <u-swiper :list="swiperList" mode="none" height="364" bg-color="none" @click="handleBannerClick"/>
+        </div>
+        <div class="notice">
+          <img :src="`${cdn}/notice-new.png`" alt="">
+          <u-notice-bar mode="vertical" color="#4181FF" style="flex: 1;" :volume-icon="false" :is-circular="false"
+            duration="5000" speed="5000" :list="noticeList" @click="clickNotice"/>
+        </div>
       </div>
     </div>
     <div class="title-content">
@@ -196,6 +198,10 @@ export default {
       categorys: [],
       categoryList: [],
       search: {areaId: ''},
+      backgroundNavbar: {
+        background: 'url(https://cdn.cunwuyun.cn/wechat/wuxi/wuxi-nav-bg.png) no-repeat',
+        backgroundSize: 'cover',
+      }
     }
   },
   computed: {
@@ -366,13 +372,10 @@ export default {
   position: relative;
 
   .header-content {
-    background: url('https://cdn.cunwuyun.cn/wechat/wuxi/home-weather1.png') center;
-    background-size: 100% 100%;
-    // position: fixed;
-    // top: 0;
-    // left: 0;
-    // z-index: 99;
-    // width: 100%;
+    .header-bg {
+      background: url('https://cdn.cunwuyun.cn/wechat/wuxi/wuxi-header-bg.png') center;
+      background-size: 100% 100%;
+    }
     .weather-info {
       font-family: PingFangSC-Regular;
       font-weight: 400;

src/project/wuxi/AppMine/AppMine.vue

@@ -198,7 +198,7 @@ export default {
     .header-info {
       width: 100%;
       height: 100%;
-      background: url("https://cdn.cunwuyun.cn/wxmp/sanjianxi/mineBg.png") no-repeat no-repeat;
+      background: url("https://cdn.cunwuyun.cn/wechat/wuxi/wuxi-my-nav-bg.png") no-repeat no-repeat;
       background-size: 100% 100%;
       box-sizing: border-box;
       padding: 240px 0 0 48px;
@@ -271,7 +271,7 @@ export default {
   .approve {
     position: absolute;
     left: 50%;
-    top: 400px;
+    top: 384px;
     transform: translateX(-50%);
     width: 686px;
     height: 112px;

src/project/wuxi/AppModules/AppModules.vue

@@ -0,0 +1,176 @@
+<template>
+  <div class="wrapper">
+    <!-- <div class="header" :class="[isFixed ? 'header-active' : '']">
+      <div class="status-bar" :style="{height: statusBarHeight + 'px'}"></div>
+      <div class="nav-bar">
+        <h2>服务</h2>
+      </div>
+    </div> -->
+    <u-navbar :is-back="false" title="便民服务" title-color="#000" title-width="300" title-size="32" :title-bold="true" :background="backgroundNavbar"></u-navbar>
+    <div class="header-bg"></div>
+    <div class="body" v-if="list">
+      <div class="card" v-for="(obj,key) in list" :key="key">
+        <div class="title">{{ $dict.getLabel('homeConfigMenuType', key) }}</div>
+        <u-grid :col="4" hover-class="text-hover">
+          <u-grid-item
+              v-for="(item, index) in obj" :key="index" class="grid-item" :custom-style="{padding:'9px 0'}"
+              @click="handleClick(item)">
+            <img :src="item.pictureUrl" alt=""/>
+            <div class="grid-text">{{ item.name }}</div>
+          </u-grid-item>
+        </u-grid>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import {mapActions, mapState} from "vuex";
+
+export default {
+  name: "AppModules",
+  appName: "服务",
+  customNavigation: true,
+  computed: {
+    ...mapState(['user', 'token']),
+  },
+  data() {
+    return {
+      list: null,
+      isFixed: false,
+      statusBarHeight: 20,
+      backgroundNavbar: {
+        background: 'url(https://cdn.cunwuyun.cn/wechat/wuxi/wuxi-nav-bg.png) no-repeat',
+        backgroundSize: 'cover',
+      }
+    }
+  },
+  onLoad() {
+    this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
+    this.$dict.load("homeConfigMenuType").then(() => {
+      this.getList()
+    });
+  },
+  methods: {
+    ...mapActions(['authCheck']),
+    handleClick({type, appId, modulePath, url, checkType, corpId}) {
+      if (checkType == 3 && this.user.partyStatusForWX != 2) { //张硕让改的
+        return this.$u.toast('您还不是党员，暂时无法使用该功能')
+      }
+      //先判读是不是系统应用
+      if (type != "0") {
+        if (type == "1") {
+          uni.navigateToMiniProgram({appId});
+        } else if (type == "2") {
+          uni.navigateTo({url: "/subPages/h5/webview?link=" + url});
+        } else if (type == "3") {
+          this.$linkTo(url);
+        } else if (type == "4") {
+          uni.openCustomerServiceChat({
+            extInfo: {url: url},
+            corpId: corpId,
+            fail: () => {
+              this.$u.toast('请使用普通微信打开小程序进行咨询');
+            }
+          });
+        }
+      } else if (type && type == "0") {
+        uni.showLoading({title: '正在进入应用...'})
+        this.authCheck({checkType, modulePath}).finally(() => uni.hideLoading())
+      }
+    },
+    getList() {
+      this.$instance.post("/app/appminihomeconfig/listAll", null, {withoutToken: true}).then(res => {
+        if (res?.data) {
+          this.list = res.data.all;
+        }
+      })
+    },
+
+  },
+  onPageScroll(params) {
+    this.isFixed = params.scrollTop > 60;
+  },
+  onShareAppMessage() {
+    return {
+      title: '欢迎使用数字乡村治理服务一体化平台~',
+      path: `/pages/AppModules/AppModules`
+    }
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.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: #4181FF;
+  }
+
+  .nav-bar {
+    position: relative;
+    height: 88px;
+    line-height: 88px;
+    color: #fff;
+    font-size: 32px;
+    text-align: center;
+  }
+}
+
+.header-bg {
+  height: 592px;
+  background: url('https://cdn.cunwuyun.cn/wechat/wuxi/wuxi-header-bg.png') center;
+  background-size: 100% 100%;
+}
+
+.liner {
+  height: 192px;
+  background: linear-gradient(360deg, #F3F6F9 0%, #4181FF 100%);
+}
+
+.body {
+  margin-top: -568px;
+
+  .card {
+    width: 686px;
+    min-height: 304px;
+    background: #FFFFFF;
+    box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.02);
+    border-radius: 16px;
+    margin: 0 auto 24px;
+    box-sizing: border-box;
+    padding: 32px;
+
+    .title {
+      font-size: 34px;
+      font-weight: 600;
+      color: #333333;
+      line-height: 48px;
+      margin-bottom: 36px;
+    }
+
+    .grid-item {
+      img {
+        width: 108px;
+        height: 108px;
+        object-fit: fill;
+      }
+
+      .grid-text {
+        font-size: 26px;
+        font-weight: 400;
+        color: #333333;
+      }
+    }
+  }
+}
+</style>