静态页面

project.config.json

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

src/components/ActivityListItem/index.vue

@@ -0,0 +1,45 @@
+<template>
+  <view class="ActivityListItem">
+    <view class="Img">
+
+    </view>
+    <view class="Info flex-h">
+      <view class="flex-item">
+        <text>核销拼团</text>
+        <text>参与截止时间：2019年10月20日 10:00:00</text>
+      </view>
+      <text>未开始</text>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'ActivityListItem',
+  props: {
+    Data: {
+      default: null,
+      type: Object
+    }
+  },
+  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/ActivityListItem/page.scss

@@ -0,0 +1,12 @@
+.ActivityListItem {
+  width: 100%;
+  position: relative;
+  overflow: hidden;
+  > .Img {
+    width: 100%;
+    padding-bottom: 56.25%;
+    position: relative;
+    overflow: hidden;
+    background: #ccc;
+  }
+}

src/components/NavHeader/index.vue

@@ -1,6 +1,6 @@
 <template>
-  <view class="NavHeader" :style="{background: BgColor}">
-    <text>{{Title}}</text>
+  <view class="NavHeader" :style="{background: BgColor, position: Fixed ? 'absolute' : 'relative'}">
+    <text :style="{marginTop: `${MarginTop}px`, lineHeight: `${LineHeight}px`}">{{Title}}</text>
   </view>
 </template>
 
@@ -15,10 +15,16 @@ export default {
     BgColor: {
       default: '#fff',
       type: String
+    },
+    Fixed: {
+      default: false,
+      type: Boolean
     }
   },
   data () {
     return {
+      MarginTop: 0,
+      LineHeight: 0
     }
   },
   computed: {
@@ -26,6 +32,8 @@ export default {
   components: {
   },
   created () {
+    this.MarginTop = wx.getMenuButtonBoundingClientRect().top
+    this.LineHeight = wx.getMenuButtonBoundingClientRect().height
   },
   methods: {
     Init () {

src/components/NavHeader/page.scss

@@ -2,12 +2,12 @@
   width: 100%;
   position: relative;
   overflow: hidden;
+  z-index: 2;
   > text {
     display: block;
     font-size: 32px;
     color: #fff;
     text-indent: 30px;
-    margin-top: 60px;
     padding-bottom: 20px;
   }
 }

src/pages/HuoDong/index.config.js

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

src/pages/HuoDong/index.vue

@@ -1,17 +1,53 @@
 <template>
-  <view class="page HuoDong">
-    活动
+  <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>
+    <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">
+
+        <!-- 活动 -->
+        <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>
+
+        <!-- 资讯 -->
+        <view class="Content News" v-if="CurrentNavId === 2">
+
+        </view>
+
+      </scroll-view>
+    </view>
   </view>
 </template>
 
 <script>
+import NavHeader from '../../components/NavHeader'
+import ActivityListItem from '../../components/ActivityListItem'
 import { createNamespacedHelpers } from 'vuex'
 const { mapState: mapUserState, mapActions: mapUserActions, mapMutations: mapUserMutations } = createNamespacedHelpers('user')
 export default {
   name: 'HuoDong',
   data () {
     return {
-      DataLock: false
+      NavList: [
+        { name: '活动', id: 1 },
+        { name: '资讯', id: 2 }
+      ],
+      CurrentNavId: 1,
+      IsPull: false,
+      DataLock: false,
+      PageList: [],
+      PageData: {
+        pageNum: 1,
+        pageSize: 10
+      },
+      HasNextPage: true
     }
   },
   computed: {
@@ -20,6 +56,8 @@ export default {
     })
   },
   components: {
+    NavHeader,
+    ActivityListItem
   },
   created () {
   },
@@ -29,6 +67,12 @@ export default {
     ...mapUserMutations([
     ]),
     Init () {
+    },
+    OnRefresh (e) {
+      this.IsPull = true
+      window.setTimeout(() => {
+        this.IsPull = false
+      }, 1000)
     }
   }
 }

src/pages/HuoDong/page.scss

@@ -1,6 +1,69 @@
 .page.HuoDong {
   width: 100%;
   height: 100%;
-  overflow-y: scroll;
-  background: #fff;
+  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;
+        position: relative;
+        padding: 0 30px;
+        padding-bottom: 20px;
+        &: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%;
+          }
+        }
+      }
+    }
+  }
+  > .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/pages/ShouYe/index.config.js

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

src/pages/ShouYe/index.vue

@@ -2,8 +2,14 @@
   <view class="page ShouYe flex-v">
     <NavHeader Title="首页" BgColor="#f35844"></NavHeader>
     <view class="flex-item">
+      <view class="AdvLayer" v-show="ShowAdvLayer">
+        <view class="centerLabel">
+          <image mode="aspectFit" :src="TestImg"></image>
+          <text class="iconfont iconguanbi" @tap="ShowAdvLayer = false"></text>
+        </view>
+      </view>
       <view class="PageContainer">
-        <scroll-view scroll-y="true" style="height: 100%;" :refresher-enabled="true" @refresherrefresh="OnRefresh" :refresher-triggered="IsPull" refresher-background="none">
+        <scroll-view scroll-y="true" style="height: 100%;" :refresher-enabled="true" @refresherrefresh="OnRefresh" :refresher-triggered="IsPull" refresher-background="none" refresher-default-style="black">
           <view class="Content">
 
             <view class="TopBg"></view>
@@ -17,7 +23,7 @@
                 <view>
                   <view>
                     <swiper class="BannerSwiper" :autoplay="true" :circular="true" :indicator-dots="true" indicator-color="rgba(0,0,0,0.4)" indicator-active-color="rgba(255,255,255,0.8)">
-                      <swiper-item v-for="(item, index) in BannerList" :key="index">
+                      <swiper-item class="SwiperItem" v-for="(item, index) in BannerList" :key="index">
                         <view class="BannerItem">
                           <image mode="aspectFill" :src="item.img"></image>
                         </view>
@@ -107,6 +113,7 @@ export default {
   name: 'ShouYe',
   data () {
     return {
+      ShowAdvLayer: false,
       IsPull: false,
       NewsList: [
         { img: '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', title: '标题', desc: '描述' },
@@ -146,6 +153,10 @@ export default {
   },
   created () {
   },
+  mounted(){
+    this.$nextTick(() => {
+    })
+  },
   methods: {
     ...mapUserActions([
     ]),

src/pages/ShouYe/page.scss

@@ -6,12 +6,48 @@
   > view {
     position: relative;
     &.flex-item {
+      position: relative;
+      overflow: hidden;
+      > .AdvLayer {
+        width: 100%;
+        position: absolute;
+        left: 0;
+        top: 0;
+        bottom: 0;
+        z-index: 2;
+        background: rgba(0, 0, 0, 0.8);
+        > view {
+          width: 100%;
+          height: 100vw;
+          overflow: visible;
+          > image {
+            width: 60%;
+            height: 60%;
+            position: relative;
+            z-index: 1;
+            margin: 0 auto;
+            display: block;
+          }
+          >text {
+            display: inline-block;
+            color: #fff;
+            font-size: 60px;
+            position: absolute;
+            left: 50%;
+            bottom: -30px;
+            transform: translateX(-50%);
+            -webkit-transform: translateX(-50%);
+            z-index: 2;
+          }
+        }
+      }
       > .PageContainer {
         width: 100%;
         position: relative;
         z-index: 2;
         height: 100%;
         overflow: hidden;
+        z-index: 1;
         .Content {
           position: relative;
           overflow: hidden;
@@ -61,11 +97,13 @@
                     height: 100%;
                     position: relative;
                     overflow: hidden;
+                    border-radius: 24px;
                     .BannerItem {
                       width: 100%;
                       height: 100%;
                       position: relative;
                       overflow: hidden;
+                      border-radius: 24px;
                       > image {
                         width: 100%;
                         height: 100%;