主框架

project.config.json

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

src/app.config.js

@@ -23,25 +23,33 @@ export default {
     'pages/WoDe/index', // 我的
     'pages/WoDe/MyActivityList/index', // 我的-活动列表
     'pages/WoDe/Feedback/index', // 我的-反馈
-    
+
     'pages/SignIn/index' // 登录页
-    
+
   ],
   tabBar: {
     list: [
       {
+        iconPath: 'https://cjgw.oss-cn-hangzhou.aliyuncs.com/ygcxxfb/image/iconhuishenghuo-.png',
+        selectedIconPath: 'https://cjgw.oss-cn-hangzhou.aliyuncs.com/ygcxxfb/image/iconhuishenghuo.png',
         pagePath: 'pages/HuiShengHuo/index',
-        text: '荟生活'
+        text: '荟 · 生活'
       },
       {
+        iconPath: 'https://cjgw.oss-cn-hangzhou.aliyuncs.com/ygcxxfb/image/iconhuiquanyi-.png',
+        selectedIconPath: 'https://cjgw.oss-cn-hangzhou.aliyuncs.com/ygcxxfb/image/iconhuiquanyi.png',
         pagePath: 'pages/HuiQuanYi/index',
-        text: '荟权益'
+        text: '荟 · 权益'
       },
       {
+        iconPath: 'https://cjgw.oss-cn-hangzhou.aliyuncs.com/ygcxxfb/image/iconhuiaixin-.png',
+        selectedIconPath: 'https://cjgw.oss-cn-hangzhou.aliyuncs.com/ygcxxfb/image/iconhuiaixin.png',
         pagePath: 'pages/HuiAiXin/index',
-        text: '荟爱心'
+        text: '荟 · 爱心'
       },
       {
+        iconPath: 'https://cjgw.oss-cn-hangzhou.aliyuncs.com/ygcxxfb/image/iconwode-.png',
+        selectedIconPath: 'https://cjgw.oss-cn-hangzhou.aliyuncs.com/ygcxxfb/image/iconwode.png',
         pagePath: 'pages/WoDe/index',
         text: '我的'
       }

src/app.js

@@ -2,6 +2,7 @@ import Vue from 'vue'
 import store from './store/index'
 
 import './app.scss'
+import './iconfont.scss'
 
 // Vue.config.productionTip = false
 

src/app.scss

@@ -1,5 +1,41 @@
 page {
   width: 100%;
   height: 100%;
-  overflow-y: scroll;
-}
+  background: #eee;
+
+  .centerLabel {
+    display: block;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    -webkit-transform: translate(-50%, -50%);
+  }
+
+  .flex-h {
+    display: flex;
+    display: -webkit-flex;
+  }
+
+  .flex-v {
+    display: flex;
+    display: -webkit-flex;
+    flex-direction: column;
+    -webkit-flex-direction: column;
+  }
+
+  .flex-item {
+    flex: 1;
+    -webkit-flex: 1;
+    position: relative;
+    overflow: hidden;
+  }
+
+  .text-overflow-line2 {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+  }
+}

src/components/BannerSwiper/index.vue

@@ -0,0 +1,38 @@
+<template>
+  <view class="BannerSwiper">
+    <swiper style="width: 100%; height: 100%;" indicator-color="rgba(255,255,255,0.3)" indicator-active-color="rgba(255,255,255,1)" :indicator-dots="true" :autoplay="true" :interval="2000" :duration="300">
+      <block v-for="(item, index) in List" :key="index">
+        <swiper-item>
+          <view class="swiper-item">{{item}}</view>
+        </swiper-item>
+      </block>
+    </swiper>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'BannerSwiper',
+  props: {
+    List: {
+      default: () => {
+        return ['1', '2', '3', '4', '5']
+      },
+      type: Array
+    }
+  },
+  data () {
+    return {
+    }
+  },
+  methods: {
+  }
+}
+</script>
+
+<style>
+.BannerSwiper {
+  width: 100%;
+  height: 100%;
+}
+</style>

src/components/NumberDisplay.vue

@@ -1,22 +0,0 @@
-<template>
-  <view>
-    <text class="title">{{ getNumbers }}</text>
-  </view>
-</template>
-
-<script>
-export default {
-  name: 'NumberDisplay',
-  computed: {
-    getNumbers() {
-      return this.$store.getters.getNumbers;
-    }
-  }
-}
-</script>
-
-<style>
-.title {
-  font-size: 40px;
-}
-</style>

src/components/NumberSubmit.vue

@@ -1,31 +0,0 @@
-<template>
-  <view>
-    <input v-model="number" type="number" class="input" />
-    <button @tap="addNumber">
-      Add new number
-    </button>
-  </view>
-</template>
-
-<script>
-export default {
-  name: 'NumberSubmit',
-  data() {
-    return {
-      number: 0
-    }
-  },
-  methods: {
-    addNumber() {
-      this.$store.dispatch('addNumber', Number(this.number))
-    }
-  }
-}
-</script>
-
-<style>
-.input {
-  border: 1px solid lightgray;
-  margin: 10px;
-}
-</style>

src/components/ScrollY/index.vue

@@ -0,0 +1,32 @@
+<template>
+  <view class="ScrollY">
+    <scroll-view style="width: 100%; height: 100%;" :scroll-y="true" :refresher-enabled="true" :refresher-threshold="120" refresher-background="#f8f8f8" :refresher-triggered="IsRefreshing" @refresherpulling="$emit('Refresh')">
+      <slot></slot>
+    </scroll-view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'ScrollY',
+  props: {
+    IsRefreshing: {
+      default: false,
+      type: Boolean
+    }
+  },
+  data () {
+    return {
+    }
+  },
+  methods: {
+  }
+}
+</script>
+
+<style>
+.ScrollY {
+  width: 100%;
+  height: 100%;
+}
+</style>

src/iconfont.scss

@@ -0,0 +1,24 @@
+@font-face {font-family: "iconfont";
+  src: url('//at.alicdn.com/t/font_1998922_g8nkn1klezi.eot?t=1597115213858'); /* IE9 */
+  src: url('//at.alicdn.com/t/font_1998922_g8nkn1klezi.eot?t=1597115213858#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAALsAAsAAAAABtwAAAKfAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDBgqBPIEvATYCJAMMCwgABCAFhG0HPxv+BSMR9mLuCZD95QE9RLoneIYmThm2YfE2B8GHbdBGDqNFTVOubfnRPGyk/otisEzH9zmCpzV+83b37qskSSrQzTwRuiZIjRAJRaqIhHwBMHSurbFSIHUgN5H+DlpR0UcCLTa37Gw3IyIUn+Q8+H2+T1rCl14IexzjFhgQlkHkfLD5zMHaawOTITU+z+X0JtCB3FXfspzmGH7UCzAOKMC9MIqsQAIOQDuW1zUpT7xBr+4TaDdmXmwedh/WqmDLAnGbrl3Q2ksril9rFeqZvUU8VmlND9MzHpWfj7+r0UpSZWzt/qtbLlv/Q89Zo9OakCHA4QoZ8yjE2dnycVn4XNZuLuuttSKkq3JNU6oza/3RP14iaqy7E0xDJfGDlBP8+IAEMqj71WWso+zgDwgxEsnD5JP3NR+P33WbCaP4mXWNNBm9miEXDxObPpL0yfUCgJ9maz/AvJ1aEf+E2gKXO74anPGHXt6qupQZqbxcdturhFyUJEw/U0qQj+bZKOlWk76gkxb6nRc6LjzKGVHrtYC3ze+BZJOCi9L6u0hgfRrkQMl0zJNLopbqIpqNIIIJUAYxDVi834fj1iF0P6HV0IFoi9EWWatxsrDzqHRYi1qrdWg3Z9vhDgPuyKK0YdZdgtDrCZJuT5H1ek4W9j0qw/6j1hsZ7Y4Gd2aH3wbZBJ1iBP8HCrwn4VNb9d4xn6uTrq7k3ygH5aCtmmFtxB3lig3HJ3eqCZLwBgN5DNeVoQjPGLSaVEtf12nuRVXgzViToFOMwP8BBd6THq129P475nN1siKaKr5RDpoctCoNghzNO0r0K88cn9xRTSAJb2AgQVx5mUGZnzVj0Mp0oFh6NR2WsObqeetmv2PQbtgZ+ZIiR0E+3e7pNpkpyqdQntQYAA==') format('woff2'),
+  url('//at.alicdn.com/t/font_1998922_g8nkn1klezi.woff?t=1597115213858') format('woff'),
+  url('//at.alicdn.com/t/font_1998922_g8nkn1klezi.ttf?t=1597115213858') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
+  url('//at.alicdn.com/t/font_1998922_g8nkn1klezi.svg?t=1597115213858#iconfont') format('svg'); /* iOS 4.1- */
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.iconguanbi:before {
+  content: "\e639";
+}
+
+.iconjiantouright:before {
+  content: "\e67b";
+}

src/index.html

@@ -8,6 +8,7 @@
   <meta name="format-detection" content="telephone=no,address=no">
   <meta name="apple-mobile-web-app-status-bar-style" content="white">
   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" >
+  <link rel="stylesheet" href="//at.alicdn.com/t/font_1998922_g8nkn1klezi.css">
   <title></title>
   <script>
     !function(x){function w(){var v,u,t,tes,s=x.document,r=s.documentElement,a=r.getBoundingClientRect().width;if(!v&&!u){var n=!!x.navigator.appVersion.match(/AppleWebKit.*Mobile.*/);v=x.devicePixelRatio;tes=x.devicePixelRatio;v=n?v:1,u=1/v}if(a>=640){r.style.fontSize="40px"}else{if(a<=320){r.style.fontSize="20px"}else{r.style.fontSize=a/320*20+"px"}}}x.addEventListener("resize",function(){w()});w()}(window);

src/pages/HuiQuanYi/index.vue

@@ -1,30 +1,52 @@
 <template>
-  <view class="page">
-    荟权益
+  <view class="page HuiQuanYi">
+    <!-- <ScrollY :IsRefreshing="IsRefreshing" @Refresh="Refresh"> -->
+
+      <!-- banner -->
+      <!-- <view class="Banner">
+        <view>
+          <BannerSwiper></BannerSwiper>
+        </view>
+      </view> -->
+
+    <!-- </ScrollY> -->
   </view>
 </template>
 
 <script>
-
+// import ScrollY from '../../components/ScrollY/index'
+// import BannerSwiper from '../../components/BannerSwiper/index'
 export default {
   name: 'HuiQuanYi',
   data () {
     return {
-
+      IsRefreshing: false,
+      DataLock: false
     }
   },
   components: {
+    // ScrollY,
+    // BannerSwiper
   },
   created () {
     this.Init()
   },
   methods: {
     Init () {
+    },
+    Refresh (e) {
+      if (this.DataLock) return
+      this.DataLock = true
+      this.IsRefreshing = true
+      setTimeout(() => {
+        this.IsRefreshing = false
+        this.DataLock = false
+      }, 1000)
     }
   }
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 @import "page.scss";
 </style>

src/pages/HuiQuanYi/page.scss

@@ -1,3 +1,19 @@
-.page {
+.page.HuiQuanYi {
   width: 100%;
-}
+  height: 100%;
+  .Banner {
+    width: 100%;
+    padding-bottom: 38%;
+    position: relative;
+    overflow: hidden;
+    > view {
+      width: 100%;
+      position: absolute;
+      left: 0;
+      top: 0;
+      bottom: 0;
+      overflow: hidden;
+      background: #ccc;
+    }
+  }
+}

src/pages/HuiShengHuo/index.vue

@@ -1,20 +1,72 @@
 <template>
-  <view class="page">
-    荟生活
-    <view @tap="LinkTo">button</view>
-    <button open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo">授权登录</button>
+  <view class="page HuiShengHuo">
+    <ScrollY :IsRefreshing="IsRefreshing" @Refresh="Refresh">
+
+      <!-- banner -->
+      <view class="Banner">
+        <view>
+          <BannerSwiper></BannerSwiper>
+        </view>
+      </view>
+
+      <!-- 活动照片墙 -->
+      <view class="PhotoList">
+        <view class="flex-h">
+          <view class="flex-item">
+            <image mode="heightFix" src="https://cjgw.oss-cn-hangzhou.aliyuncs.com/ygcxxfb/image/huodongzhaopianqiang.png"></image>
+          </view>
+          <navigator url="./PhotoList/index" hover-class="other-navigator-hover" class="More">更多 <text class="iconfont iconjiantouright"></text></navigator>
+        </view>
+        <view class="ListContainer">
+          <scroll-view scroll-x="true">
+            <view class="List">
+              <view v-for="(item, index) in 10" :key="index">
+                <view></view>
+              </view>
+            </view>
+          </scroll-view>
+        </view>
+      </view>
+
+      <!-- 精彩活动 -->
+      <view class="ActivityList">
+        <view class="flex-h">
+          <view class="flex-item">
+            <image mode="heightFix" src="https://cjgw.oss-cn-hangzhou.aliyuncs.com/ygcxxfb/image/jingcaihuodong.png"></image>
+          </view>
+          <navigator url="./ActivityList/index" hover-class="other-navigator-hover" class="More">更多 <text class="iconfont iconjiantouright"></text></navigator>
+        </view>
+        <view class="List">
+          <view class="Item" v-for="(item, index) in 20" :key="index">
+            <view class="Img"></view>
+            <view class="Info">
+              <text>活动名称</text>
+              <view class="flex-h">
+                <text class="flex-item">参与截止时间：2020-08-20 16:00</text>
+                <navigator url="./ActivityList/ActivityDetail/index" hover-class="other-navigator-hover" class="Btn">立即报名</navigator>
+                <navigator url="./ActivityList/ActivityDetail/index" hover-class="other-navigator-hover" class="Btn">立即投票</navigator>
+                <view>已结束</view>
+              </view>
+            </view>
+          </view>
+        </view>
+      </view>
+
+    </ScrollY>
   </view>
 </template>
 
 <script>
-
+import ScrollY from '../../components/ScrollY/index'
+import BannerSwiper from '../../components/BannerSwiper/index'
 import { createNamespacedHelpers } from 'vuex'
 const { mapState: mapUserState, mapActions: mapUserActions } = createNamespacedHelpers('user')
 export default {
   name: 'HuiShengHuo',
   data () {
     return {
-
+      IsRefreshing: false,
+      DataLock: false
     }
   },
   computed: {
@@ -23,6 +75,8 @@ export default {
     })
   },
   components: {
+    ScrollY,
+    BannerSwiper
   },
   created () {
     this.Init()
@@ -32,32 +86,26 @@ export default {
       'GetUserPlaylist'
     ]),
     Init () {
-      wx.getSetting({
-        success (res) {
-          if (res.authSetting['scope.userInfo']) {
-            // 已经授权，可以直接调用 getUserInfo 获取头像昵称
-            wx.getUserInfo({
-              success: function (res) {
-                window.alert(JSON.stringify(res.userInfo))
-              }
-            })
-          }
-        }
-      })
       // this.GetUserPlaylist({ queryData: { accountId: 5, pageNum: 1, pageSize: 1000 } }).then((res) => {
       //   console.log(this.UserPlaylist)
       // })
     },
-    LinkTo () {
-      wx.navigateTo({ url: 'ActivityList/index' })
+    LinkTo (url) {
+      wx.navigateTo({ url })
     },
-    bindGetUserInfo (e) {
-      console.log(e.detail.userInfo)
+    Refresh (e) {
+      if (this.DataLock) return
+      this.DataLock = true
+      this.IsRefreshing = true
+      setTimeout(() => {
+        this.IsRefreshing = false
+        this.DataLock = false
+      }, 1000)
     }
   }
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 @import "page.scss";
 </style>

src/pages/HuiShengHuo/page.scss

@@ -1,3 +1,161 @@
-.page {
+.page.HuiShengHuo {
   width: 100%;
-}
+  height: 100%;
+  .Banner {
+    width: 100%;
+    padding-bottom: 38%;
+    position: relative;
+    overflow: hidden;
+    > view {
+      width: 100%;
+      position: absolute;
+      left: 0;
+      top: 0;
+      bottom: 0;
+      overflow: hidden;
+      background: #ccc;
+    }
+  }
+  .PhotoList {
+    padding: 20px 0;
+    background: #fff;
+    margin-top: 20px;
+    > .flex-h {
+      padding: 0 20px;
+      align-items: center;
+      margin-top: 10px;
+      > .flex-item {
+        > image {
+          height: 48px;
+        }
+      }
+      > .More {
+        font-size: 26px;
+        color: #999;
+        > text {
+          font-size: 26px;
+        }
+      }
+    }
+    > .ListContainer {
+      width: 100%;
+      position: relative;
+      overflow: hidden;
+      margin-top: 40px;
+      margin-bottom: 30px;
+      > scroll-view {
+        .List {
+          font-size: 0;
+          white-space: nowrap;
+          > view {
+            width: 36%;
+            position: relative;
+            overflow: visible;
+            display: inline-block;
+            vertical-align: middle;
+            margin-left: 25px;
+            &:last-child {
+              margin-right: 25px;
+            }
+            > view {
+              width: 100%;
+              padding-bottom: 85%;
+              background: #ccc;
+              border-radius: 20px;
+              position: relative;
+              overflow: hidden;
+            }
+          }
+        }
+      }
+    }
+  }
+  .ActivityList {
+    padding: 20px 0;
+    background: #fff;
+    margin-top: 20px;
+    > .flex-h {
+      padding: 0 20px;
+      align-items: center;
+      margin-top: 10px;
+      > .flex-item {
+        > image {
+          height: 48px;
+        }
+      }
+      > .More {
+        font-size: 26px;
+        color: #999;
+        > text {
+          font-size: 26px;
+        }
+      }
+    }
+    > .List {
+      position: relative;
+      overflow: hidden;
+      margin-top: 40px;
+      margin-bottom: 30px;
+      padding: 0 20px;
+      > .Item {
+        position: relative;
+        overflow: hidden;
+        background: #fff;
+        border-radius: 20px;
+        box-shadow: 0 5px 10px 5px rgba(0, 0, 0, 0.08);
+        margin-top: 20px;
+        &:first-child {
+          margin-top: 0;
+        }
+        > .Img {
+          width: 100%;
+          padding-bottom: 55%;
+          background: #ccc;
+          position: relative;
+          overflow: hidden;
+        }
+        > .Info {
+          padding: 20px 34px;
+          > text {
+            display: block;
+            font-size: 32px;
+            line-height: 1.5;
+          }
+          > .flex-h {
+            align-items: center;
+            margin-top: 20px;
+            margin-bottom: 20px;
+            overflow: visible;
+            > text {
+              margin-right: 10px;
+              white-space: nowrap;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              font-size: 24px;
+              color: #999;
+              line-height: 1.5;
+            }
+            > .Btn {
+              font-size: 26px;
+              color: #fff;
+              background: #fe4e45;
+              line-height: 54px;
+              border-radius: 54px;
+              padding: 0 20px;
+              box-shadow: 0 10px 20px 5px rgba(254, 78, 69, 0.3);
+            }
+            > view {
+              font-size: 26px;
+              color: #000;
+              background: #e5e3e3;
+              line-height: 54px;
+              border-radius: 54px;
+              padding: 0 20px;
+              box-shadow: 0 10px 20px 5px rgba(0, 0, 0, 0.1);
+            }
+          }
+        }
+      }
+    }
+  }
+}