静态页面

src/app.js

@@ -43,7 +43,7 @@ class App extends Component {
       success: res => {
         if (res.errMsg === 'login:ok') {
           request({ ...apis.login, params: { code: res.code, from, recommender, scene } }).then(x => {
-            setUser(x.person)
+            setUser({...x.person, ShowIndexAdv: false, FirstComing: true})
             Taro.setStorage({ key: 'token', data: x.token })
             Taro.setStorage({ key: 'sessionKey', data: x.sessionKey })
 

src/components/ScrollPage/index.jsx

@@ -5,18 +5,21 @@ import './index.less'
 
 export default function ScrollPage (props) {
 
-  const { IsPullDown = false, IsPullUp = false, HasMore = true, OnRefresh = () => { }, OnPullUp = () => { } } = props
+  const { IsPullDown = false, ListRefresh = true, IsPullUp = false, HasMore = true, OnRefresh = () => { }, OnPullUp = () => { }, RefreshBg = 'none' } = props
 
   return (
     <view className='ScrollPage'>
-      <scroll-view scroll-y='true' style='height: 100%;' refresher-enabled={true} onrefresherrefresh={OnRefresh} onscrolltolower={OnPullUp} refresher-triggered={IsPullDown} refresher-background='none'>
+      <scroll-view scroll-y='true' style='height: 100%;' refresher-enabled={true} onrefresherrefresh={OnRefresh} onscrolltolower={OnPullUp} refresher-triggered={IsPullDown} refresher-background={RefreshBg}>
         <view className='ScrollPageContent'>
           {
             props.children
           }
           <view className='ScrollPageBottom'></view>
         </view>
-        <text className='LoadMoreText'>{IsPullUp ? '正在加载更多...' : HasMore ? '上拉加载更多' : '已经到底了~'}</text>
+        {
+          ListRefresh &&
+          <text className='LoadMoreText'>{IsPullUp ? '正在加载更多...' : HasMore ? '上拉加载更多' : '已经到底了~'}</text>
+        }
       </scroll-view>
     </view>
   )

src/components/ScrollPageRefresh/index.jsx

@@ -7,17 +7,19 @@ import './index.less'
 
 export default function ScrollPageRefresh (props) {
 
-  const { ApiName = '', ListName = 'records', RequestParams = {}, RequestData = null, RequestUrlData = null, PageSize = 10, Refresh = () => { }, Push = () => { } } = props
+  const { ApiName = '', ListRefresh = true, ListName = 'records', RequestParams = {}, RequestData = null, RequestUrlData = null, PageSize = 10, Refresh = () => { }, Push = () => { }, RefreshBg = 'none' } = props
   const [IsPullUp, setIsPullUp] = useState(false)
   const [IsPullDown, setIsPullDown] = useState(false)
   const [HasNextPage, setHasNextPage] = useState(true)
   const [PageNum, setPageNum] = useState(1)
 
   useEffect(() => {
-    GetPageList(() => {
-      setIsPullDown(false)
-      setIsPullUp(false)
-    })
+    if (ListRefresh) {
+      GetPageList(() => {
+        setIsPullDown(false)
+        setIsPullUp(false)
+      })
+    }
   }, [PageNum])
 
   const GetPageList = (done = () => { }) => { // 获取列表
@@ -62,13 +64,19 @@ export default function ScrollPageRefresh (props) {
 
   const OnRefresh = () => { // 页面下拉刷新
     setIsPullDown(true)
-    setPageNum(1)
-    if (PageNum === 1) {
-      GetPageList(() => {
+    if (ListRefresh) {
+      setPageNum(1)
+      if (PageNum === 1) {
+        GetPageList(() => {
+          setIsPullDown(false)
+        })
+      } else {
+        setPageNum(1)
+      }
+    } else {
+      Refresh(() => {
         setIsPullDown(false)
       })
-    } else {
-      setPageNum(1)
     }
   }
 
@@ -81,7 +89,7 @@ export default function ScrollPageRefresh (props) {
 
   return (
     <view className='ScrollPageRefresh'>
-      <ScrollPage OnRefresh={OnRefresh} IsPullUp={IsPullUp} IsPullDown={IsPullDown} OnPullUp={OnPullUp} HasMore={HasNextPage}>
+      <ScrollPage ListRefresh={ListRefresh} OnRefresh={OnRefresh} IsPullUp={IsPullUp} IsPullDown={IsPullDown} OnPullUp={OnPullUp} HasMore={HasNextPage} RefreshBg={RefreshBg}>
         {
           props.children
         }

src/layouts/index.jsx

@@ -1,11 +1,14 @@
 import React, { useState, useEffect } from 'react'
 import Taro from '@tarojs/taro'
 import { useModel } from '@/store'
+import { Text } from '@tarojs/components'
 import Spin from '@/components/Spin'
 import GetUserPhone from '@/components/GetUserPhone/index'
 import GetUserIcon from '@/components/GetUserIcon/index'
 import useMountTrack from '@/utils/hooks/useMountTrack'
+import request, { apis } from '@/utils/request'
 import { getPage } from '@/utils'
+import './index.less'
 
 const pages = require('../pages')
 
@@ -21,7 +24,9 @@ export default function (props) {
   const [showAuthBasic, setShowAuthBasic] = useState(false)
   const [showAuthYeZhu, setShowAuthYeZhu] = useState(false)
   const [showAuthPhone, setShowAuthPhone] = useState(false)
-  const { user } = useModel('user')
+  const [ShowAdvLayer, setShowAdvLayer] = useState(true)
+  const [AdvDetail, setShowAdvDetail] = useState(null)
+  const { user, setUser } = useModel('user')
 
   const loading = !user || !user.personId
   const isAuthedBasic = user && user.avatarurl && user.nickname
@@ -33,6 +38,17 @@ export default function (props) {
   const needAuthYeZhu = (page.auth || []).indexOf('yezhu') > -1
   const needAuthPhone = (page.auth || []).indexOf('phone') > -1
 
+  useEffect(() => {
+    if (user !== null && user.FirstComing !== undefined && user.FirstComing) {
+      request({ ...apis.getIndexAdv, params: { showType: `screen`, showPosition: `index` } }).then((res) => {
+        if (res !== null && res.length > 0) {
+          setShowAdvDetail(res[0])
+          setUser({...user, ShowIndexAdv: true, FirstComing: false})
+        }
+      })
+    }
+  }, [user])
+
   // 埋点
   useMountTrack()
 
@@ -78,8 +94,30 @@ export default function (props) {
     setShowAuthBasic(needShow)
   }, [isAuthedBasic, needAuthBasic, isAuthedPhone, isAuthedYeZhu, needAuthYeZhu])
 
+  const AdvClick = () => { // 首页弹窗点击事件
+    setShowAdvLayer(false)
+    if (AdvDetail.contentType === 'news') {
+      Taro.navigateTo({ url: `/pages/HuoDong/ZiXunDetail/index?id=${AdvDetail.contentId}` })
+    } else if (AdvDetail.contentType === 'tpNews') {
+      Taro.navigateTo({ url: `/pages/WuYe/FuWuDetail/index?id=${AdvDetail.contentId}` })
+    } else if (AdvDetail.contentType === 'notice') {
+      Taro.navigateTo({ url: `/pages/WuYe/GongGaoDetail/index?id=${AdvDetail.contentId}` })
+    } else if (AdvDetail.contentType === 'activity') {
+      Taro.navigateTo({ url: `/pages/HuoDong/HuoDongDetail/index?id=${AdvDetail.contentId}` })
+    }
+  }
+
   return (
     <Spin loading={loading}>
+
+      {/* 广告 */}
+      <view className='AdvLayer' style={{ display: user !== null && user.ShowIndexAdv !== undefined && user.ShowIndexAdv ? 'block' : 'none' }}>
+        <view className='centerLabel'>
+          <image mode='aspectFit' src={AdvDetail !== null ? AdvDetail.image : null} onClick={AdvClick}></image>
+          <Text className='iconfont iconguanbi' onClick={() => { setUser({...user, ShowIndexAdv: false}) }}></Text>
+        </view>
+      </view>
+
       <GetUserIcon visible={showAuthBasic} onError={err => showError(`授权头像失败: ${err}`)} />
       <GetUserPhone visible={showAuthPhone} onError={err => showError(`授权手机失败: ${err}`)} />
       {

src/layouts/index.less

@@ -0,0 +1,36 @@
+.AdvLayer {
+  width: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  z-index: 20000;
+  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;
+    }
+  }
+}

src/pages/ShouYe/index.jsx

@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react'
 import NavHeader from '@/components/NavHeader/index'
+import ScrollPageRefresh from '@/components/ScrollPageRefresh/index'
 import { Swiper, SwiperItem, Text } from '@tarojs/components'
 import request, { apis } from '@/utils/request'
 import { useModel } from '@/store'
@@ -13,8 +14,6 @@ import './index.less'
 export default function Index (props) {
 
   const { user } = useModel('user')
-  const [ShowAdvLayer, setShowAdvLayer] = useState(false)
-  const [IsPull, setIsPull] = useState(false)
   const [OwnerList] = useState([
     { icon: 'iconjiaofei', name: '物业缴费', id: 1, router: '/pages/WuYe/index', isTab: true },
     { icon: 'icontongzhi', name: '物业通知', id: 2, router: '/pages/WuYe/index', isTab: true },
@@ -31,15 +30,8 @@ export default function Index (props) {
   const [ActivityList, setActivityList] = useState([])
   const [NewsList, setNewsList] = useState([])
 
-  // useEffect(() => {
-  //   if (user) {
-  //     console.log(user, `user`)
-  //     OnRefresh()
-  //   }
-  // }, [user])
-
   useUserMounted(() => {
-    OnRefresh()
+    Refresh()
   })
 
   const Init = (done = () => { }) => { // 初始化
@@ -108,15 +100,8 @@ export default function Index (props) {
     }
   }
 
-  const OnRefresh = () => { // 页面下拉刷新
-    setIsPull(true)
-    Init(() => {
-      setIsPull(false)
-    })
-  }
-
-  const OnPullUp = () => { // 上拉加载
-    // console.log(111)
+  const Refresh = (e) => { // 页面下拉刷新
+    Init(e)
   }
 
   const OwnerClick = (item) => {
@@ -135,17 +120,9 @@ export default function Index (props) {
         <NavHeader BgColor='#f35844' Title='首页'></NavHeader>
         <view className='flex-item'>
 
-          {/* 广告 */}
-          <view className='AdvLayer' style={{ display: ShowAdvLayer ? 'block' : 'none' }}>
-            <view className='centerLabel'>
-              <image mode='aspectFit' src={null}></image>
-              <Text className='iconfont iconguanbi'></Text>
-            </view>
-          </view>
-
           {/* 正文 */}
           <view className='PageContainer'>
-            <scroll-view scroll-y='true' style='height: 100%;' refresher-enabled={true} onscrolltolower={OnPullUp} onrefresherrefresh={OnRefresh} refresher-triggered={IsPull} refresher-background='#f35844'>
+            <ScrollPageRefresh ListRefresh={false} Refresh={Refresh} RefreshBg='#f35844'>
               <view className='Content'>
 
                 {/* 背景图 */}
@@ -242,8 +219,8 @@ export default function Index (props) {
                                 <image mode='aspectFill' src={item.newsImg} className='centerLabel'></image>
                               </view>
                               <view className='flex-item'>
-                                <Text>{item.newsName}</Text>
-                                <Text>{item.desc || ''}</Text>
+                                <view><Text>{item.newsName}</Text></view>
+                                <view><Text>{item.desc || ''}</Text></view>
                               </view>
                             </view>
                           ))
@@ -257,7 +234,7 @@ export default function Index (props) {
                 </view>
 
               </view>
-            </scroll-view>
+            </ScrollPageRefresh>
           </view>
 
         </view>

src/pages/ShouYe/index.less

@@ -3,57 +3,30 @@
   height: 100%;
   overflow: hidden;
   background: #f8f8f8;
-  > view {
+
+  >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 {
+
+      >.PageContainer {
         width: 100%;
         position: relative;
         z-index: 2;
         height: 100%;
         overflow: hidden;
         z-index: 1;
+
         .Content {
           position: relative;
           overflow: hidden;
-          > view {
+
+          >view {
             position: relative;
             z-index: 2;
+
             &.TopBg {
               width: 100%;
               position: absolute;
@@ -65,19 +38,22 @@
               background-image: linear-gradient(#f35844, #ff8d61);
               z-index: 1;
             }
-            > .Welcome {
+
+            >.Welcome {
               display: block;
               font-size: 30px;
               color: #fff;
               margin-top: 20px;
               text-indent: 30px;
             }
-            > .BannerContainer {
+
+            >.BannerContainer {
               padding: 0 30px;
               position: relative;
               overflow: hidden;
               margin-top: 50px;
-              > view {
+
+              >view {
                 width: 100%;
                 position: relative;
                 overflow: hidden;
@@ -85,26 +61,30 @@
                 background: #f8f8f8;
                 border-radius: 24px;
                 height: 0;
-                > view {
+
+                >view {
                   width: 100%;
                   position: absolute;
                   left: 0;
                   top: 0;
                   bottom: 0;
                   overflow: hidden;
-                  > .BannerSwiper {
+
+                  >.BannerSwiper {
                     width: 100%;
                     height: 100%;
                     position: relative;
                     overflow: hidden;
                     border-radius: 24px;
+
                     .BannerItem {
                       width: 100%;
                       height: 100%;
                       position: relative;
                       overflow: hidden;
                       border-radius: 24px;
-                      > image {
+
+                      image {
                         width: 100%;
                         height: 100%;
                       }
@@ -113,23 +93,27 @@
                 }
               }
             }
-            > .NavContainer {
+
+            >.NavContainer {
               position: relative;
               overflow: hidden;
               align-items: center;
               padding: 0 30px;
               margin-top: 40px;
-              > view {
+
+              >view {
                 margin-left: 30px;
                 position: relative;
                 overflow: hidden;
+
                 &:first-child {
                   margin-left: 0;
                 }
+
                 &:nth-child(1) {
-                  > view {
-                    > view {
-                      > text {
+                  >view {
+                    >view {
+                      >text {
                         &:first-child {
                           color: #ffc412;
                         }
@@ -137,10 +121,11 @@
                     }
                   }
                 }
+
                 &:nth-child(2) {
-                  > view {
-                    > view {
-                      > text {
+                  >view {
+                    >view {
+                      >text {
                         &:first-child {
                           color: #fb3fc8;
                         }
@@ -148,10 +133,11 @@
                     }
                   }
                 }
+
                 &:nth-child(3) {
-                  > view {
-                    > view {
-                      > text {
+                  >view {
+                    >view {
+                      >text {
                         &:first-child {
                           color: #fb7820;
                         }
@@ -159,10 +145,11 @@
                     }
                   }
                 }
+
                 &:nth-child(4) {
-                  > view {
-                    > view {
-                      > text {
+                  >view {
+                    >view {
+                      >text {
                         &:first-child {
                           color: #586ff8;
                         }
@@ -170,21 +157,25 @@
                     }
                   }
                 }
-                > view {
+
+                >view {
                   width: 100%;
                   padding-bottom: 100%;
                   background: #fff;
                   position: relative;
                   overflow: hidden;
                   border-radius: 12px;
-                  > view {
+
+                  >view {
                     width: 100%;
-                    > text {
+
+                    >text {
                       display: block;
                       text-align: center;
                       line-height: 40px;
                       color: #333;
                       font-size: 26px;
+
                       &:first-child {
                         font-size: 50px;
                         line-height: 60px;
@@ -195,27 +186,32 @@
                 }
               }
             }
-            > .HotActivityContainer {
+
+            >.HotActivityContainer {
               padding: 0 30px;
               position: relative;
               overflow: hidden;
               margin-top: 30px;
-              > view {
+
+              >view {
                 width: 100%;
                 position: relative;
                 overflow: hidden;
                 border-radius: 40px;
                 background: #fff;
-                > .Title {
+
+                >.Title {
                   font-size: 0;
                   white-space: nowrap;
                   text-align: center;
                   padding: 30px 0;
-                  > text {
+
+                  >text {
                     display: inline-block;
                     vertical-align: middle;
                     font-size: 24px;
                     color: #999;
+
                     &:first-child {
                       font-size: 34px;
                       color: #333;
@@ -225,39 +221,46 @@
                     }
                   }
                 }
-                > .Activity {
+
+                >.Activity {
                   width: 100%;
                   padding-bottom: 33.33%;
                   position: relative;
                   overflow: hidden;
-                  > image {
+
+                  >image {
                     width: 100%;
                     height: 100%;
                   }
                 }
               }
             }
-            > .OwnerContainer {
+
+            >.OwnerContainer {
               padding: 0 30px;
               position: relative;
               overflow: hidden;
               margin-top: 30px;
-              > view {
+
+              >view {
                 width: 100%;
                 position: relative;
                 overflow: hidden;
                 border-radius: 40px;
                 background: #fff;
-                > .Title {
+
+                >.Title {
                   font-size: 0;
                   white-space: nowrap;
                   text-align: center;
                   padding: 30px 0;
-                  > text {
+
+                  >text {
                     display: inline-block;
                     vertical-align: middle;
                     font-size: 24px;
                     color: #999;
+
                     &:first-child {
                       font-size: 34px;
                       color: #333;
@@ -267,18 +270,21 @@
                     }
                   }
                 }
-                > .OwnerList {
+
+                >.OwnerList {
                   border-top: 2px solid #f8f8f8;
                   align-items: center;
                   padding: 30px 0;
-                  > view {
-                    > text {
+
+                  >view {
+                    >text {
                       display: block;
                       width: 100%;
                       text-align: center;
                       font-size: 26px;
                       color: #333;
                       line-height: 40px;
+
                       &:first-child {
                         color: #f35844;
                         font-size: 60px;
@@ -290,69 +296,89 @@
                 }
               }
             }
-            > .NewsContainer {
+
+            >.NewsContainer {
               padding: 0 30px;
               position: relative;
               overflow: hidden;
               margin-top: 30px;
-              > view {
+
+              >view {
                 position: relative;
                 overflow: hidden;
                 background: #fff;
                 border-radius: 40px;
-                > .Title {
+
+                >.Title {
                   align-items: center;
                   padding: 0 20px;
-                  > text {
+
+                  >text {
                     font-size: 24px;
                     color: #666;
                     line-height: 98px;
                     margin-left: 10px;
+
                     &:first-child {
                       font-size: 30px;
                       color: #333;
                     }
                   }
                 }
-                > .List {
-                  > view {
+
+                >.List {
+                  >view {
                     align-items: center;
                     border-top: 2px solid #f8f8f8;
                     padding: 30px 20px;
                     position: relative;
                     overflow: hidden;
+
                     &:first-child {
                       border-top: none;
                     }
-                    > .Img {
+
+                    >.Img {
                       width: 160px;
                       height: 128px;
                       position: relative;
                       overflow: hidden;
                       background: #f8f8f8;
                       margin-right: 20px;
-                      > image {
+
+                      >image {
                         width: 100%;
                         height: 100%;
                       }
                     }
-                    > .flex-item {
+
+                    >.flex-item {
                       position: relative;
                       overflow: hidden;
-                      > text {
-                        display: block;
-                        font-size: 26px;
-                        color: #666;
-                        line-height: 40px;
+
+                      >view {
+
+                        text {
+                          display: block;
+                          font-size: 26px;
+                          color: #666;
+                          line-height: 40px;
+                        }
+
                         &:first-child {
-                          font-size: 30px;
-                          color: #333;
-                          margin-bottom: 10px;
+                          text {
+                            font-size: 30px;
+                            color: #333;
+                            margin-bottom: 10px;
+                          }
                         }
+
                         &:last-child {
-                          white-space: nowrap;
-                          overflow: hidden;
-                          text-overflow: ellipsis;
+                          text {
+                            white-space: nowrap;
+                            overflow: hidden;
+                            text-overflow: ellipsis;
+                          }
                         }
                       }
                     }
@@ -360,7 +386,8 @@
                 }
               }
             }
-            > .PageBottom {
+
+            >.PageBottom {
               width: 100%;
               height: 30px;
             }
@@ -369,4 +396,4 @@
       }
     }
   }
-}
+}

src/utils/api.js

@@ -1,6 +1,10 @@
 const prefix = `${HOST}/api/wx`
 
 const $api = {
+  getIndexAdv: { // 获取首页广告
+    method: 'get',
+    url: `${prefix}/extendContent`
+  },
   getJiFenRecords: { // 获取积分明细
     method: 'get',
     url: `${prefix}/taPointsRecords`