静态页面

project.config.json

@@ -27,7 +27,7 @@
 			"outputPath": ""
 		},
 		"useIsolateContext": true,
-		"useCompilerModule": true,
+		"useCompilerModule": false,
 		"userConfirmedUseCompilerModuleSwitch": false
 	},
 	"compileType": "miniprogram",

src/app.config.js

@@ -1,8 +1,8 @@
 
 export default {
   pages: [
-    'pages/ShouYe/index', // 首页
     'pages/WuYe/index', // 物业
+    'pages/ShouYe/index', // 首页
     'pages/HuoDong/index', // 活动
     'pages/FuLi/index', // 福利
     'pages/WoDe/index', // 我的

src/components/ActivityListItem/index.vue

@@ -1,14 +1,14 @@
 <template>
   <view class="ActivityListItem">
     <view class="Img">
-
+      <image mode="aspectFill" :src="TestImg" class="centerLabel"></image>
     </view>
     <view class="Info flex-h">
       <view class="flex-item">
         <text>核销拼团</text>
         <text>参与截止时间：2019年10月20日 10:00:00</text>
       </view>
-      <text>未开始</text>
+      <text class="active">未开始</text>
     </view>
   </view>
 </template>

src/components/ActivityListItem/page.scss

@@ -2,11 +2,57 @@
   width: 100%;
   position: relative;
   overflow: hidden;
+  background: #fff;
+  border-radius: 12px;
   > .Img {
     width: 100%;
     padding-bottom: 56.25%;
     position: relative;
     overflow: hidden;
     background: #ccc;
+    > image {
+      width: 100%;
+      height: 100%;
+      z-index: 1;
+    }
+  }
+  > .Info {
+    padding: 0 20px;
+    position: relative;
+    overflow: hidden;
+    align-items: center;
+    > .flex-item {
+      position: relative;
+      overflow: hidden;
+      margin-right: 20px;
+      padding: 24px 0;
+      > text {
+        display: block;
+        font-size: 24px;
+        color: #999;
+        line-height: 40px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        &:first-child {
+          color: #333;
+          font-size: 32px;
+          font-weight: bold;
+          margin-bottom: 10px;
+        }
+      }
+    }
+    > text {
+      font-size: 30px;
+      color: #333;
+      line-height: 60px;
+      padding: 0 30px;
+      border-radius: 60px;
+      background: #ccc;
+      &.active {
+        color: #f35844;
+        background: rgba(243, 88, 68, 0.3);
+      }
+    }
   }
 }

src/components/NewsListItem/index.vue

@@ -0,0 +1,47 @@
+<template>
+  <view class="NewsListItem flex-h">
+    <view class="Img">
+      <image mode="aspectFill" :src="TestImg"></image>
+      <text v-if="ShowTips">置顶</text>
+    </view>
+    <view class="Info flex-item">
+      <text>破晓·内容生态下半场的版权之道—2019企业版权</text>
+      <text>于2019-12-12 14:20:30发布</text>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'NewsListItem',
+  props: {
+    Data: {
+      default: null,
+      type: Object
+    },
+    ShowTips: {
+      default: false,
+      type: Boolean
+    }
+  },
+  data () {
+    return {
+      TestImg: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1606120989360&di=8610f1678b51e26de6d4c6af39d1cf63&imgtype=0&src=http%3A%2F%2Fattachments.gfan.com%2Fforum%2F201503%2F19%2F211608ztcq7higicydxhsy.jpg'
+    }
+  },
+  computed: {
+  },
+  components: {
+  },
+  created () {
+  },
+  methods: {
+    Init () {
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+@import "page.scss";
+</style>

src/components/NewsListItem/page.scss

@@ -0,0 +1,53 @@
+.NewsListItem {
+  width: 100%;
+  position: relative;
+  overflow: hidden;
+  background: #fff;
+  border-radius: 0 12px 12px 0;
+  align-items: center;
+  > .Img {
+    width: 220px;
+    height: 176px;
+    position: relative;
+    overflow: hidden;
+    background: #ccc;
+    margin-right: 20px;
+    > image {
+      display: block;
+      position: relative;
+      z-index: 1;
+      width: 100%;
+      height: 100%;
+    }
+    > text {
+      font-size: 24px;
+      color: #971c21;
+      display: inline-block;
+      position: absolute;
+      z-index: 2;
+      left: 0;
+      top: 0;
+      line-height: 40px;
+      width: 80px;
+      text-align: center;
+      background: rgba(255, 255, 255, 0.8);
+    }
+  }
+  > .Info {
+    margin-right: 20px;
+    position: relative;
+    overflow: hidden;
+    > text {
+      display: block;
+      font-size: 24px;
+      color: #666;
+      line-height: 40px;
+      &:first-child {
+        font-size: 28px;
+        color: #333;
+        font-weight: bold;
+        margin-bottom: 10px;
+      }
+    }
+  }
+}

src/components/TabPageCutNav/index.vue

@@ -0,0 +1,62 @@
+<template>
+  <view class="TabPageCutNav flex-v">
+    <view class="TopNav">
+      <view class="flex-h">
+        <view class="flex-item" v-for="(item, index) in List" :key="index">
+          <text :class="{'active': item.id - 0 === CurrentNavId - 0}" @tap="CutNav(item)">{{item.name}}</text>
+        </view>
+      </view>
+    </view>
+    <view class="flex-item">
+      <scroll-view scroll-y="true" style="height: 100%;" :refresher-enabled="true" @refresherrefresh="OnRefresh" :refresher-triggered="IsPull" refresher-background="none">
+        <slot></slot>
+      </scroll-view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'TabPageCutNav',
+  props: {
+    List: {
+      default: () => {
+        return []
+      },
+      type: Array
+    },
+    CurrentNavId: {
+      default: 1,
+      type: Number
+    },
+    IsPull: {
+      default: false,
+      type: Boolean
+    }
+  },
+  data () {
+    return {
+    }
+  },
+  computed: {
+  },
+  components: {
+  },
+  created () {
+  },
+  methods: {
+    Init () {
+    },
+    CutNav (target) { // 切换nav
+      this.$emit('Change', target.id)
+    },
+    OnRefresh (e) { // 下拉刷新
+      this.$emit('OnRefresh')
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+@import "page.scss";
+</style>

src/components/TabPageCutNav/page.scss

@@ -0,0 +1,70 @@
+.TabPageCutNav {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+  > .TopNav {
+    width: 100%;
+    padding-bottom: 35%;
+    background-image: linear-gradient(#f35844, #ff8d61);
+    position: relative;
+    z-index: 1;
+    > view {
+      width: 100%;
+      font-size: 0;
+      white-space: nowrap;
+      text-align: center;
+      position: absolute;
+      left: 0;
+      bottom: 0;
+      > view {
+        font-size: 0;
+        white-space: nowrap;
+        text-align: center;
+        > text {
+          display: inline-block;
+          vertical-align: middle;
+          font-size: 32px;
+          color: #fff;
+          position: relative;
+          padding: 0 30px;
+          padding-bottom: 20px;
+          line-height: 60px;
+          &.active {
+            color: #333;
+            font-weight: bold;
+            &::after {
+              content: "";
+              display: block;
+              position: absolute;
+              left: 0;
+              bottom: 0;
+              height: 2px;
+              background: #000;
+              width: 100%;
+            }
+          }
+        }
+      }
+    }
+  }
+  > .flex-item {
+    position: relative;
+    overflow: hidden;
+    .Content {
+      position: relative;
+      overflow: hidden;
+      &.Activity {
+        padding: 0 30px;
+        > .ListItem {
+          width: 100%;
+          position: relative;
+          overflow: hidden;
+          background: #fff;
+          border-radius: 12px;
+          margin-top: 30px;
+        }
+      }
+    }
+  }
+}

src/components/WuYeBaoXiu/index.vue

@@ -0,0 +1,30 @@
+<template>
+  <view class="WuYeBaoXiu">
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'WuYeBaoXiu',
+  props: {
+  },
+  data () {
+    return {
+    }
+  },
+  computed: {
+  },
+  components: {
+  },
+  created () {
+  },
+  methods: {
+    Init () {
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+@import "page.scss";
+</style>

src/components/WuYeBaoXiu/page.scss

@@ -0,0 +1,5 @@
+.WuYeBaoXiu {
+  width: 100%;
+  position: relative;
+  overflow: hidden;
+}

src/components/WuYeFuWu/index.vue

@@ -0,0 +1,30 @@
+<template>
+  <view class="WuYeFuWu">
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'WuYeFuWu',
+  props: {
+  },
+  data () {
+    return {
+    }
+  },
+  computed: {
+  },
+  components: {
+  },
+  created () {
+  },
+  methods: {
+    Init () {
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+@import "page.scss";
+</style>

src/components/WuYeFuWu/page.scss

@@ -0,0 +1,5 @@
+.WuYeFuWu {
+  width: 100%;
+  position: relative;
+  overflow: hidden;
+}

src/components/WuYeGongGao/index.vue

@@ -0,0 +1,30 @@
+<template>
+  <view class="WuYeGongGao">
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'WuYeGongGao',
+  props: {
+  },
+  data () {
+    return {
+    }
+  },
+  computed: {
+  },
+  components: {
+  },
+  created () {
+  },
+  methods: {
+    Init () {
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+@import "page.scss";
+</style>

src/components/WuYeGongGao/page.scss

@@ -0,0 +1,5 @@
+.WuYeGongGao {
+  width: 100%;
+  position: relative;
+  overflow: hidden;
+}

src/components/WuYeJiaoFei/index.vue

@@ -0,0 +1,30 @@
+<template>
+  <view class="WuYeJiaoFei">
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'WuYeJiaoFei',
+  props: {
+  },
+  data () {
+    return {
+    }
+  },
+  computed: {
+  },
+  components: {
+  },
+  created () {
+  },
+  methods: {
+    Init () {
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+@import "page.scss";
+</style>

src/components/WuYeJiaoFei/page.scss

@@ -0,0 +1,5 @@
+.WuYeJiaoFei {
+  width: 100%;
+  position: relative;
+  overflow: hidden;
+}

src/pages/HuoDong/index.vue

@@ -1,34 +1,36 @@
 <template>
-  <view class="page HuoDong flex-v">
-    <view class="TopNav">
-      <view>
-        <text v-for="(item, index) in NavList" :key="index" :class="{'active': item.id - 0 === CurrentNavId - 0}">{{item.name}}</text>
-      </view>
-    </view>
+  <view class="page HuoDong">
     <NavHeader Title="活动" BgColor="none" :Fixed="true"></NavHeader>
-    <view class="flex-item">
-      <scroll-view scroll-y="true" style="height: 100%;" :refresher-enabled="true" @refresherrefresh="OnRefresh" :refresher-triggered="IsPull" refresher-background="none">
+    <TabPageCutNav :List="NavList" :IsPull="IsPull" :CurrentNavId="CurrentNavId" @Change="NavChange" @OnRefresh="OnRefresh">
 
-        <!-- 活动 -->
-        <view class="Content Activity" v-if="CurrentNavId === 1">
-          <view v-for="(item, index) in 10" :key="index" class="ListItem">
-            <ActivityListItem :Data="null"></ActivityListItem>
-          </view>
+      <!-- 活动 -->
+      <view class="NavContent Activity" v-if="CurrentNavId - 0 === 1">
+        <view v-for="(item, index) in 10" :key="index">
+          <ActivityListItem></ActivityListItem>
         </view>
+      </view>
 
-        <!-- 资讯 -->
-        <view class="Content News" v-if="CurrentNavId === 2">
-
+      <!-- 资讯 -->
+      <view class="NavContent News" v-if="CurrentNavId - 0 === 2">
+        <view class="BigImg">
+          <image mode="aspectFill" :src="TestImg" class="centerLabel"></image>
         </view>
+        <view class="NewsList">
+          <view v-for="(item, index) in 10" :key="index">
+            <NewsListItem :ShowTips="index === 0"></NewsListItem>
+          </view>
+        </view>
+      </view>
 
-      </scroll-view>
-    </view>
+    </TabPageCutNav>
   </view>
 </template>
 
 <script>
 import NavHeader from '../../components/NavHeader'
 import ActivityListItem from '../../components/ActivityListItem'
+import NewsListItem from '../../components/NewsListItem'
+import TabPageCutNav from '../../components/TabPageCutNav'
 import { createNamespacedHelpers } from 'vuex'
 const { mapState: mapUserState, mapActions: mapUserActions, mapMutations: mapUserMutations } = createNamespacedHelpers('user')
 export default {
@@ -47,7 +49,8 @@ export default {
         pageNum: 1,
         pageSize: 10
       },
-      HasNextPage: true
+      HasNextPage: true,
+      TestImg: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1606120989360&di=8610f1678b51e26de6d4c6af39d1cf63&imgtype=0&src=http%3A%2F%2Fattachments.gfan.com%2Fforum%2F201503%2F19%2F211608ztcq7higicydxhsy.jpg',
     }
   },
   computed: {
@@ -57,7 +60,9 @@ export default {
   },
   components: {
     NavHeader,
-    ActivityListItem
+    ActivityListItem,
+    NewsListItem,
+    TabPageCutNav
   },
   created () {
   },
@@ -68,6 +73,9 @@ export default {
     ]),
     Init () {
     },
+    NavChange (e) {
+      this.CurrentNavId = e
+    },
     OnRefresh (e) {
       this.IsPull = true
       window.setTimeout(() => {

src/pages/HuoDong/page.scss

@@ -3,65 +3,43 @@
   height: 100%;
   overflow: hidden;
   background: #f8f8f8;
-  > .TopNav {
-    width: 100%;
-    padding-bottom: 35%;
-    background-image: linear-gradient(#f35844, #ff8d61);
-    position: relative;
-    z-index: 1;
-    > view {
-      width: 100%;
-      font-size: 0;
-      white-space: nowrap;
-      text-align: center;
-      position: absolute;
-      left: 0;
-      bottom: 0;
-      > text {
-        display: inline-block;
-        vertical-align: middle;
-        font-size: 32px;
-        color: #fff;
-        margin-left: 160px;
+  .NavContent {
+    &.Activity {
+      padding: 0 30px;
+      position: relative;
+      overflow: hidden;
+      > view {
         position: relative;
-        padding: 0 30px;
-        padding-bottom: 20px;
+        overflow: hidden;
+        margin-bottom: 30px;
         &:first-child {
-          margin-left: 0;
-        }
-        &.active {
-          color: #333;
-          line-height: 60px;
-          font-weight: bold;
-          &::after {
-            content: "";
-            display: block;
-            position: absolute;
-            left: 0;
-            bottom: 0;
-            height: 2px;
-            background: #000;
-            width: 100%;
-          }
+          margin-top: 30px;
         }
       }
     }
-  }
-  > .flex-item {
-    position: relative;
-    overflow: hidden;
-    .Content {
-      position: relative;
-      overflow: hidden;
-      &.Activity {
-        padding: 0 30px;
-        > .ListItem {
+    &.News {
+      > .BigImg {
+        width: 100%;
+        position: relative;
+        overflow: hidden;
+        padding-bottom: 50%;
+        background: #ccc;
+        > image {
           width: 100%;
+          height: 100%;
+        }
+      }
+      > .NewsList {
+        padding: 0 30px;
+        position: relative;
+        overflow: hidden;
+        > view {
           position: relative;
           overflow: hidden;
-          background: #fff;
-          border-radius: 12px;
-          margin-top: 30px;
+          margin-bottom: 30px;
+          &:first-child {
+            margin-top: 30px;
+          }
         }
       }
     }

src/pages/WuYe/index.config.js

@@ -1,3 +1,4 @@
 export default {
-  navigationBarTitleText: '香颂蔚澜'
+  navigationStyle: 'custom',
+  navigationBarTextStyle: 'white'
 }

src/pages/WuYe/index.vue

@@ -1,17 +1,61 @@
 <template>
   <view class="page WuYe">
-    物业
+    <NavHeader Title="物业" BgColor="none" :Fixed="true"></NavHeader>
+    <TabPageCutNav :List="NavList" :IsPull="IsPull" :CurrentNavId="CurrentNavId" @Change="NavChange" @OnRefresh="OnRefresh">
+
+      <!-- 公告 -->
+      <view class="NavContent Activity" v-if="CurrentNavId - 0 === 1">
+        <WuYeGongGao></WuYeGongGao>
+      </view>
+
+      <!-- 服务 -->
+      <view class="NavContent News" v-if="CurrentNavId - 0 === 2">
+        <WuYeFuWu></WuYeFuWu>
+      </view>
+
+      <!-- 报修 -->
+      <view class="NavContent News" v-if="CurrentNavId - 0 === 3">
+        <WuYeBaoXiu></WuYeBaoXiu>
+      </view>
+
+      <!-- 缴费 -->
+      <view class="NavContent News" v-if="CurrentNavId - 0 === 4">
+        <WuYeJiaoFei></WuYeJiaoFei>
+      </view>
+
+    </TabPageCutNav>
   </view>
 </template>
 
 <script>
+import NavHeader from '../../components/NavHeader'
+import TabPageCutNav from '../../components/TabPageCutNav'
+import WuYeGongGao from '../../components/WuYeGongGao'
+import WuYeFuWu from '../../components/WuYeFuWu'
+import WuYeBaoXiu from '../../components/WuYeBaoXiu'
+import WuYeJiaoFei from '../../components/WuYeJiaoFei'
 import { createNamespacedHelpers } from 'vuex'
 const { mapState: mapUserState, mapActions: mapUserActions, mapMutations: mapUserMutations } = createNamespacedHelpers('user')
 export default {
   name: 'WuYe',
   data () {
     return {
-      DataLock: false
+      NavList: [
+        { name: '公告', id: 1 },
+        { name: '服务', id: 2 },
+        { name: '报修', id: 3 },
+        { name: '缴费', id: 4 }
+      ],
+      CurrentNavId: 1,
+      IsPull: false,
+      DataLock: false,
+      PageList: [],
+      PageData: {
+        pageNum: 1,
+        pageSize: 10
+      },
+      HasNextPage: true,
+      TestImg: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1606120989360&di=8610f1678b51e26de6d4c6af39d1cf63&imgtype=0&src=http%3A%2F%2Fattachments.gfan.com%2Fforum%2F201503%2F19%2F211608ztcq7higicydxhsy.jpg',
     }
   },
   computed: {
@@ -20,6 +64,12 @@ export default {
     })
   },
   components: {
+    NavHeader,
+    TabPageCutNav,
+    WuYeGongGao,
+    WuYeFuWu,
+    WuYeBaoXiu,
+    WuYeJiaoFei
   },
   created () {
   },
@@ -29,6 +79,15 @@ export default {
     ...mapUserMutations([
     ]),
     Init () {
+    },
+    NavChange (e) {
+      this.CurrentNavId = e
+    },
+    OnRefresh (e) {
+      this.IsPull = true
+      window.setTimeout(() => {
+        this.IsPull = false
+      }, 1000)
     }
   }
 }

src/pages/WuYe/page.scss

@@ -1,6 +1,7 @@
 .page.WuYe {
   width: 100%;
   height: 100%;
-  overflow-y: scroll;
-  background: #fff;
+  background: #f8f8f8;
+  position: relative;
+  overflow: hidden;
 }