静态页面

src/components/ActivityListItem/index.jsx

@@ -8,17 +8,15 @@ export default function ActivityListItem (props) {
 
   const { Data } = props
 
-  const [TestImg, setTestImg] = useState('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')
-
   return (
-    <view className='ActivityListItem' onClick={() => { Taro.navigateTo({ url: `/pages/HuoDong/HuoDongDetail/index?id=` }) }}>
+    <view className='ActivityListItem' onClick={() => { Taro.navigateTo({ url: `/pages/HuoDong/HuoDongDetail/index?id=${Data.dynamicId}` }) }}>
       <view className='Img'>
-        <image mode='aspectFill' src={TestImg} className='centerLabel'></image>
+        <image mode='aspectFill' src={Data.imgUrl} className='centerLabel'></image>
       </view>
       <view className='Info flex-h'>
         <view className='flex-item'>
-          <text>核销拼团</text>
-          <text>参与截止时间：2019年10月20日 10:00:00</text>
+          <text>{Data.title}</text>
+          <text>参与截止时间：{Data.enlistEnd}</text>
         </view>
         <text className='active'>未开始</text>
       </view>

src/components/NewsListItem/index.jsx

@@ -6,21 +6,20 @@ import './index.less'
 
 export default function NewsListItem (props) {
 
-  const [TestImg, setTestImg] = useState('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')
-  const { ShowTips } = props
+  const { ShowTips, Data } = props
 
   return (
-    <view className='NewsListItem flex-h' onClick={() => { Taro.navigateTo({ url: `/pages/HuoDong/ZiXunDetail/index?id=` }) }}>
+    <view className='NewsListItem flex-h' onClick={() => { Taro.navigateTo({ url: `/pages/HuoDong/ZiXunDetail/index?id=${Data.newsId}` }) }}>
       <view className='Img'>
-        <image mode='aspectFill' src={TestImg}></image>
+        <image mode='aspectFill' src={Data.newsImg}></image>
         {
           ShowTips &&
           <text>置顶</text>
         }
       </view>
       <view className='Info flex-item'>
-        <text>破晓·内容生态下半场的版权之道—2019企业版权</text>
-        <text>于2019-12-12 14:20:30发布</text>
+        <text>{Data.newsName}</text>
+        <text>于{Data.createDate}发布</text>
       </view>
     </view >
   )

src/components/ScrollPage/index.css

@@ -1,29 +0,0 @@
-.ScrollPage {
-  width: 100%;
-  height: 100%;
-  position: relative;
-  overflow: hidden;
-}
-.ScrollPage .ScrollPageContent {
-  width: 100%;
-  position: relative;
-  overflow: hidden;
-  min-height: 100%;
-  z-index: 2;
-}
-.ScrollPage .ScrollPageContent > .ScrollPageBottom {
-  width: 100%;
-  height: 80px;
-}
-.ScrollPage .LoadMoreText {
-  width: 100%;
-  display: block;
-  position: relative;
-  overflow: hidden;
-  text-align: center;
-  z-index: 1;
-  font-size: 28px;
-  color: #999;
-  line-height: 80px;
-  margin-top: -80px;
-}

src/layouts/index.jsx

@@ -4,7 +4,6 @@ import Spin from '@/components/Spin'
 
 export default function(props) {
   const { user } = useModel('user')
-  console.log(user, `layout`)
 
   const loading = !user || !user.personId
 

src/pages/HuoDong/HuoDongDetail/index.css

@@ -0,0 +1,107 @@
+.HuoDongDetail {
+  width: 100%;
+  min-height: 100vh;
+  position: relative;
+}
+.HuoDongDetail > .BannerLayer {
+  width: 100%;
+  padding-bottom: 75.2%;
+  position: relative;
+  z-index: 2;
+}
+.HuoDongDetail > .Banner {
+  width: 100%;
+  padding-bottom: 75.2%;
+  background: #ccc;
+  position: fixed;
+  z-index: 1;
+  left: 0;
+  top: 0;
+  overflow: hidden;
+}
+.HuoDongDetail > .Banner > image {
+  width: 100%;
+  height: 100%;
+}
+.HuoDongDetail > .Info {
+  padding: 30px;
+  position: relative;
+  overflow: hidden;
+  z-index: 3;
+  border-radius: 40px 40px 0 0;
+  margin-top: -30px;
+  background: #fff;
+}
+.HuoDongDetail > .Info > .MainInfo {
+  position: relative;
+  overflow: visible;
+  padding-bottom: 40px;
+  border-bottom: 2px solid rgba(0, 0, 0, 0.08);
+}
+.HuoDongDetail > .Info > .MainInfo > .Name {
+  font-size: 30px;
+  font-weight: bold;
+  color: #333;
+  line-height: 40px;
+  width: 100%;
+  display: block;
+  margin-top: 10px;
+  position: relative;
+  z-index: 1;
+}
+.HuoDongDetail > .Info > .MainInfo > .Tips {
+  display: inline-block;
+  font-size: 28px;
+  color: #F35844;
+  position: absolute;
+  z-index: 2;
+  right: -30px;
+  top: -40px;
+  background: rgba(243, 88, 68, 0.2);
+  padding: 0 20px;
+  line-height: 58px;
+  border-radius: 0 0 0 40px;
+}
+.HuoDongDetail > .Info > .MainInfo > .flex-h {
+  align-items: center;
+  margin-top: 20px;
+}
+.HuoDongDetail > .Info > .MainInfo > .flex-h > text {
+  font-size: 28px;
+  color: #333;
+  line-height: 40px;
+  margin-right: 10px;
+}
+.HuoDongDetail > .Info > .MainInfo > .flex-h > view {
+  font-size: 28px;
+  color: #333;
+  line-height: 40px;
+}
+.HuoDongDetail > .Info > .MainInfo > .flex-h > view > text {
+  font-size: 28px;
+  color: #F35844;
+  line-height: 40px;
+}
+.HuoDongDetail > .Info > .Desc {
+  position: relative;
+  overflow: hidden;
+  margin-top: 140px;
+}
+.HuoDongDetail > .Info > .Desc > text {
+  font-size: 34px;
+  width: 100%;
+  display: block;
+  text-align: center;
+  color: #333;
+  line-height: 40px;
+}
+.HuoDongDetail > .Info > .BottomBtn {
+  width: 100%;
+  display: block;
+  text-align: center;
+  color: #fff;
+  line-height: 98px;
+  border-radius: 98px;
+  background: #F35844;
+  margin-top: 60px;
+}

src/pages/HuoDong/HuoDongDetail/index.jsx

@@ -1,46 +1,64 @@
-import React, { useState } from 'react'
+import React, { useState, useEffect } from 'react'
 import Taro, { Current } from '@tarojs/taro'
 import { RichText } from '@tarojs/components'
+import request, { apis } from '@/utils/request'
 import '@/assets/css/reset.less'
 import '@/assets/css/iconfont.less'
 import './index.less'
 
 export default function HuoDongDetail (props) {
 
-  const CurrnetHuoDongId = Current.router.params.id
+  const [CurrnetHuoDongId] = useState(Current.router.params.id) // 当前活动id
+  const [ActivityDetail, setActivityDetail] = useState(null) // 活动详情
+
+  useEffect(() => {
+    GetActivityDetail()
+  }, [CurrnetHuoDongId])
+
+  const GetActivityDetail = () => { // 获取活动详情
+    request({ ...apis.getActivityDetail, args: { id: CurrnetHuoDongId } }).then((res) => {
+      setActivityDetail(res)
+    })
+  }
 
   return (
     <view className='HuoDongDetail'>
       <view className='BannerLayer'></view>
-      <view className='Banner'>
-        <image mode='aspectFill' src={null} className='centerLabel'></image>
-      </view>
-      <view className='Info'>
-        <view className='MainInfo'>
-          <text className='Name'>业主拔河比赛正式开始了~</text>
-          <text className='Tips'>17人已报名</text>
-          <view className='flex-h'>
-            <text>活动时间：</text>
-            <view className='flex-item'>2019-08 08 12:00:00 <text>限100人</text></view>
-          </view>
-          <view className='flex-h'>
-            <text>活动地址：</text>
-            <view className='flex-item'>江苏省南京市秦淮区</view>
-          </view>
-          <view className='flex-h'>
-            <text>报名截止：</text>
-            <view className='flex-item'>2020-09-09 08:00:00</view>
-          </view>
+      {
+        ActivityDetail !== null &&
+        <view className='Banner'>
+          <image mode='aspectFill' src={ActivityDetail.bannerListImg} className='centerLabel'></image>
         </view>
+      }
+      {
+        ActivityDetail !== null &&
+        <view className='Info'>
+          <view className='MainInfo'>
+            <text className='Name'>{ActivityDetail.title}</text>
+            <text className='Tips'>{ActivityDetail.enlistNum}人已报名</text>
+            <view className='flex-h'>
+              <text>活动时间：</text>
+              <view className='flex-item'>{ActivityDetail.startDate}<text>限{ActivityDetail.enlistNum}人</text></view>
+            </view>
+            <view className='flex-h'>
+              <text>活动地址：</text>
+              <view className='flex-item'>{ActivityDetail.address}</view>
+            </view>
+            <view className='flex-h'>
+              <text>报名截止：</text>
+              <view className='flex-item'>{ActivityDetail.enlistEnd}</view>
+            </view>
+          </view>
 
-        <view className='Desc'>
-          <text>活动介绍</text>
-          <RichText nodes={null}></RichText>
-        </view>
+          <view className='Desc'>
+            <text>活动介绍</text>
+            <RichText nodes={null}></RichText>
+          </view>
 
-        <text className='BottomBtn'>立即参加</text>
+          <text className='BottomBtn'>立即参加</text>
 
-      </view>
+        </view>
+      }
     </view>
   )
 }

src/pages/HuoDong/HuoDongDetail/index.less

@@ -6,7 +6,6 @@
   >.BannerLayer {
     width: 100%;
     padding-bottom: 75.2%;
-    background: #ccc;
     position: relative;
     z-index: 2;
   }

src/pages/HuoDong/ZiXunDetail/index.css

@@ -0,0 +1,40 @@
+.ZiXunDetail {
+  width: 100%;
+  min-height: 100vh;
+  position: relative;
+}
+.ZiXunDetail > view {
+  position: relative;
+  overflow: hidden;
+  padding: 0 30px;
+}
+.ZiXunDetail > view > .Title {
+  position: relative;
+  overflow: hidden;
+}
+.ZiXunDetail > view > .Title > text {
+  width: 100%;
+  display: block;
+  font-size: 34px;
+  color: #333;
+  line-height: 40px;
+  text-align: center;
+  margin-top: 40px;
+}
+.ZiXunDetail > view > .flex-h {
+  align-items: center;
+  margin-top: 20px;
+}
+.ZiXunDetail > view > .flex-h > text {
+  font-size: 24px;
+  color: #999;
+  line-height: 48px;
+  margin-left: 10px;
+}
+.ZiXunDetail > view > .flex-h > text:first-child {
+  margin-left: 0;
+}
+.ZiXunDetail > view > .flex-h > text.iconfont {
+  color: #F35844;
+  font-size: 40px;
+}

src/pages/HuoDong/ZiXunDetail/index.jsx

@@ -1,16 +1,47 @@
-import React, { useState } from 'react'
+import React, { useState, useEffect } from 'react'
 import Taro, { Current } from '@tarojs/taro'
+import request, { apis } from '@/utils/request'
+import { RichText } from '@tarojs/components'
 import '@/assets/css/reset.less'
 import '@/assets/css/iconfont.less'
 import './index.less'
 
 export default function ZiXunDetail (props) {
 
-  const CurrnetZiXunId = Current.router.params.id
+  const [CurrnetZiXunId] = useState(Current.router.params.id) // 当前查询资讯id
+  const [NewsDetail, setNewsDetail] = useState(null) // 资讯详情
+
+  useEffect(() => {
+    GetNewsDetail()
+  }, [CurrnetZiXunId])
+
+  const GetNewsDetail = () => { // 获取资讯详情
+    request({ ...apis.getNewsDetail, args: { id: CurrnetZiXunId } }).then((res) => {
+      setNewsDetail(res)
+      AddNewsViews()
+    })
+  }
+
+  const AddNewsViews = () => { // 资讯阅读量+1
+    request({ ...apis.addNewsViews, args: { id: CurrnetZiXunId } })
+  }
 
   return (
     <view className='ZiXunDetail'>
-      
+      {
+        NewsDetail !== null &&
+        <view>
+          <view className='Title'>
+            <text>{NewsDetail.newsName}</text>
+          </view>
+          <view className='flex-h'>
+            <text className='flex-item'>{NewsDetail.createDate}</text>
+            <text className='iconfont iconguankan'></text>
+            <text>{NewsDetail.pvNum || 0}</text>
+          </view>
+          <RichText nodes={NewsDetail.newsDetail}></RichText>
+        </view>
+      }
     </view>
   )
 }

src/pages/HuoDong/ZiXunDetail/index.less

@@ -2,4 +2,45 @@
   width: 100%;
   min-height: 100vh;
   position: relative;
+
+  >view {
+    position: relative;
+    overflow: hidden;
+    padding: 0 30px;
+    >.Title {
+      position: relative;
+      overflow: hidden;
+  
+      >text {
+        width: 100%;
+        display: block;
+        font-size: 34px;
+        color: #333;
+        line-height: 40px;
+        text-align: center;
+        margin-top: 40px;
+      }
+    }
+  
+    >.flex-h {
+      align-items: center;
+      margin-top: 20px;
+  
+      >text {
+        font-size: 24px;
+        color: #999;
+        line-height: 48px;
+        margin-left: 10px;
+  
+        &:first-child {
+          margin-left: 0;
+        }
+  
+        &.iconfont {
+          color: #F35844;
+          font-size: 40px;
+        }
+      }
+    }
+  }
 }

src/pages/HuoDong/index.jsx

@@ -1,32 +1,107 @@
-import React, { useState } from 'react'
+import React, { useState, useEffect } from 'react'
 import TabPageCutNav from '@/components/TabPageCutNav/index'
 import NavHeader from '@/components/NavHeader/index'
 import ActivityListItem from '@/components/ActivityListItem/index'
 import NewsListItem from '@/components/NewsListItem/index'
+import ScrollPage from '@/components/ScrollPage/index'
+import request, { apis } from '@/utils/request'
 import '@/assets/css/reset.less'
 import '@/assets/css/iconfont.less'
 import './index.less'
 
 export default function HuoDong (props) {
 
+  const [NavList] = useState([{ name: '活动', id: 1 }, { name: '资讯', id: 2 }])
   const [CurrentNavId, setCurrentNavId] = useState(1)
-  const [TestImg, setTestImg] = useState('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')
-  const [NavList, setNavList] = useState([{ name: '活动', id: 1 }, { name: '资讯', id: 2 }])
-  const [IsPull, setIsPull] = useState(false)
-  const [ActivityList, setActivityList] = useState(['', '', '', '', '', '', '', ''])
-  const [NewsList, setNewsList] = useState(['', '', '', '', '', '', '', ''])
+  const [IsPullDown, setIsPullDown] = useState(false)
+  const [IsPullUp, setIsPullUp] = useState(false)
+  const [HasNextPage, setHasNextPage] = useState(true)
+  const [PageNum, setPageNum] = useState(1)
+  const [ActivityList, setActivityList] = useState([])
+  const [ActivityTotal, setActivityTotal] = useState(1)
+  const [NewsList, setNewsList] = useState([])
 
-  const NavChange = (e) => {
+  useEffect(() => {
+    if (CurrentNavId === 1) { // 活动
+      GetActivityList(() => {
+        setIsPullUp(false)
+      })
+    } else if (CurrentNavId === 2) { // 资讯
+      GetNewsList(() => {
+        setIsPullUp(false)
+      })
+    }
+  }, [PageNum])
+
+  useEffect(() => {
+    setHasNextPage(ActivityTotal > ActivityList.length)
+  }, [ActivityList])
+
+  useEffect(() => {
+    OnRefresh()
+  }, [CurrentNavId])
+
+  const GetActivityList = (done = () => { }) => { // 获取活动列表
+    request({ ...apis.getActivityList, params: { pageNum: PageNum, pageSize: 6 } }).then((res) => {
+      setActivityTotal(res.total)
+      if (PageNum === 1) {
+        setActivityList([...res.list])
+      } else {
+        setActivityList(NewsList.concat([...res.list]))
+      }
+      done()
+    }).catch(() => {
+      done()
+    })
+  }
+
+  const GetNewsList = (done = () => { }) => { // 获取资讯列表
+    request({ ...apis.getNewsList, params: { pageNum: PageNum, pageSize: 6 } }).then((res) => {
+      if (PageNum === 1) {
+        setNewsList([...res.records])
+      } else {
+        setNewsList(NewsList.concat([...res.records]))
+      }
+      setHasNextPage(res.current - 0 < res.pages - 0)
+      done()
+    }).catch(() => {
+      done()
+    })
+  }
+
+  const NavChange = (e) => { // nav切换
     return () => {
       setCurrentNavId(e.id)
+      setHasNextPage(true)
+      setIsPullDown(false)
+      setIsPullUp(false)
+      setPageNum(1)
     }
   }
 
-  const OnRefresh = () => {
-    setIsPull(true)
-    window.setTimeout(() => {
-      setIsPull(false)
-    }, 1000)
+  const OnRefresh = () => { // 下拉刷新
+    setIsPullDown(true)
+    setHasNextPage(true)
+    if (PageNum === 1) {
+      if (CurrentNavId === 1) {
+        GetActivityList(() => {
+          setIsPullDown(false)
+        })
+      } else if (CurrentNavId === 2) {
+        GetNewsList(() => {
+          setIsPullDown(false)
+        })
+      }
+    } else {
+      setPageNum(1)
+    }
+  }
+
+  const OnPullUp = () => { // 上拉加载
+    if (HasNextPage) {
+      setIsPullUp(true)
+      setPageNum(PageNum + 1)
+    }
   }
 
   return (
@@ -35,8 +110,7 @@ export default function HuoDong (props) {
       <TabPageCutNav List={NavList} CurrentNavId={CurrentNavId} NavChange={NavChange}></TabPageCutNav>
       <view className='flex-item'>
         <view>
-          <scroll-view scroll-y='true' style='height: 100%;' refresher-enabled={true} onrefresherrefresh={OnRefresh} refresher-triggered={IsPull} refresher-background='none'>
-
+          <ScrollPage OnRefresh={OnRefresh} IsPullDown={IsPullDown} OnPullUp={OnPullUp} IsPullUp={IsPullUp} HasMore={HasNextPage}>
             {/* 活动 */}
             {
               CurrentNavId - 0 === 1 &&
@@ -56,7 +130,7 @@ export default function HuoDong (props) {
               CurrentNavId - 0 === 2 &&
               <view className='Content News'>
                 <view className='BigImg'>
-                  <image mode='aspectFill' src={TestImg} class='centerLabel'></image>
+                  <image mode='aspectFill' src={null} class='centerLabel'></image>
                 </view>
                 <view className='List'>
                   {
@@ -69,8 +143,7 @@ export default function HuoDong (props) {
                 </view>
               </view>
             }
-
-          </scroll-view>
+          </ScrollPage>
         </view>
       </view>
     </view>

src/pages/ShouYe/ZiXun/index.css

@@ -1,20 +0,0 @@
-.ShouYeZiXun {
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  background: #f8f8f8;
-}
-.ShouYeZiXun .ShouYeHuoDongContent {
-  position: relative;
-  overflow: hidden;
-  padding: 0 30px;
-}
-.ShouYeZiXun .ShouYeHuoDongContent > .ListItem {
-  width: 100%;
-  position: relative;
-  overflow: hidden;
-  margin-bottom: 30px;
-}
-.ShouYeZiXun .ShouYeHuoDongContent > .ListItem:first-child {
-  margin-top: 30px;
-}

src/pages/ShouYe/ZiXun/index.jsx

@@ -1,54 +1,72 @@
-import React, { Component } from 'react'
-import NewsListItem from '../../../components/NewsListItem/index'
-import '../../../assets/css/reset.less'
-import '../../../assets/css/iconfont.less'
+import React, { useState, useEffect } from 'react'
+import request, { apis } from '@/utils/request'
+import NewsListItem from '@/components/NewsListItem/index'
+import ScrollPage from '@/components/ScrollPage/index'
+import '@/assets/css/reset.less'
+import '@/assets/css/iconfont.less'
 import './index.less'
 
-export default class ShouYeZiXun extends Component {
+export default function ShouYeZiXun (props) {
 
-  state = {
-    ActivityList: ['', '', '', '', '', '', '', ''],
-    IsPull: false
-  }
-
-  componentWillMount () { }
-
-  componentDidMount () { }
-
-  componentWillUnmount () { }
-
-  componentDidShow () { }
+  const [IsPullUp, setIsPullUp] = useState(false)
+  const [IsPullDown, setIsPullDown] = useState(false)
+  const [HasNextPage, setHasNextPage] = useState(true)
+  const [PageNum, setPageNum] = useState(1)
+  const [NewsList, setNewsList] = useState([])
 
-  componentDidHide () { }
+  useEffect(() => {
+    GetNewsList(() => {
+      setIsPullUp(false)
+    })
+  }, [PageNum])
 
-  OnRefresh () { // 页面下拉刷新
-    this.setState({
-      IsPull: true
-    }, () => {
-      window.setTimeout(() => {
-        this.setState({
-          IsPull: false
-        })
-      }, 1000)
+  const GetNewsList = (done = () => { }) => { // 获取资讯列表
+    request({ ...apis.getNewsList, params: { pageNum: PageNum, pageSize: 6 } }).then((res) => {
+      if (PageNum === 1) {
+        setNewsList([...res.records])
+      } else {
+        setNewsList(NewsList.concat([...res.records]))
+      }
+      setHasNextPage(res.current - 0 < res.pages - 0)
+      done()
+    }).catch(() => {
+      done()
     })
   }
 
-  render () {
-    const { IsPull, ActivityList } = this.state
-    return (
-      <view className='ShouYeZiXun'>
-        <scroll-view scroll-y='true' style='height: 100%;' refresher-enabled={true} onrefresherrefresh={this.OnRefresh.bind(this)} refresher-triggered={IsPull} refresher-background='none'>
-          <view className='ShouYeHuoDongContent'>
-            {
-              ActivityList.map((item, index) => (
-                <view className='ListItem' key={`ActivityItem-${index}`}>
-                  <NewsListItem Data={item} ShowTips={index === 0}></NewsListItem>
-                </view>
-              ))
-            }
-          </view>
-        </scroll-view>
-      </view >
-    )
+  const OnRefresh = () => { // 页面下拉刷新
+    setIsPullDown(true)
+    setHasNextPage(true)
+    setPageNum(1)
+    if (PageNum === 1) {
+      GetNewsList(() => {
+        setIsPullDown(false)
+      })
+    } else {
+      setPageNum(1)
+    }
+  }
+
+  const OnPullUp = () => {
+    if (HasNextPage) {
+      setIsPullUp(true)
+      setPageNum(PageNum + 1)
+    }
   }
+
+  return (
+    <view className='ShouYeZiXun'>
+      <ScrollPage OnRefresh={OnRefresh} IsPullUp={IsPullUp} IsPullDown={IsPullDown} OnPullUp={OnPullUp} HasMore={HasNextPage}>
+        <view className='ShouYeHuoDongContent'>
+          {
+            NewsList.map((item, index) => (
+              <view className='ListItem' key={`ActivityItem-${index}`}>
+                <NewsListItem Data={item} ShowTips={index === 0}></NewsListItem>
+              </view>
+            ))
+          }
+        </view>
+      </ScrollPage>
+    </view >
+  )
 }

src/pages/ShouYe/index.jsx

@@ -31,17 +31,17 @@ export default function Index (props) {
   const [ActivityList, setActivityList] = useState([])
   const [NewsList, setNewsList] = useState([])
 
-  // useEffect(() => {
-  //   if (user) {
-  //     console.log(user, `user`)
-  //     OnRefresh()
-  //   }
-  // }, [user])
+  useEffect(() => {
+    if (user) {
+      console.log(user, `user`)
+      OnRefresh()
+    }
+  }, [user])
 
-  useUserMounted(() => {
-    console.log(user, `user`)
-    OnRefresh()
-  })
+  // useUserMounted(() => {
+  //   console.log(user, `user`)
+  //   OnRefresh()
+  // })
 
   const Init = (done = () => { }) => { // 初始化
     let DownCount = 0
@@ -116,7 +116,7 @@ export default function Index (props) {
     })
   }
 
-  const OnPullUp = () => {
+  const OnPullUp = () => { // 上拉加载
     // console.log(111)
   }
 
@@ -191,7 +191,7 @@ export default function Index (props) {
                           <Text onClick={() => { Taro.navigateTo({ url: '/pages/ShouYe/HuoDong/index' }) }}>热门活动</Text>
                           <Text className='iconfont icongengduo' onClick={() => { Taro.navigateTo({ url: '/pages/ShouYe/HuoDong/index' }) }}></Text>
                         </view>
-                        <view className='Activity'>
+                        <view className='Activity' onClick={() => { Taro.navigateTo({ url: `/pages/HuoDong/HuoDongDetail/index?id=${ActivityList[0].dynamicId}` }) }}>
                           <image className='centerLabel' mode='aspectFill' src={ActivityList[0].imgUrl}></image>
                         </view>
                       </view>
@@ -228,7 +228,7 @@ export default function Index (props) {
                       <view className='List'>
                         {
                           NewsList.map((item, index) => (
-                            <view key={`News-${index}`} className='flex-h'>
+                            <view key={`News-${index}`} className='flex-h' onClick={() => { Taro.navigateTo({ url: `/pages/HuoDong/ZiXunDetail/index?id=${item.newsId}` }) }}>
                               <view className='Img'>
                                 <image mode='aspectFill' src={item.newsImg} className='centerLabel'></image>
                               </view>

src/pages/WuYe/index.jsx

@@ -1,4 +1,4 @@
-import React, { Component } from 'react'
+import React, { useState } from 'react'
 import TabPageCutNav from '@/components/TabPageCutNav/index'
 import NavHeader from '@/components/NavHeader/index'
 import WuYeGongGao from '@/components/WuYeGongGao/index'
@@ -9,96 +9,68 @@ import '@/assets/css/reset.less'
 import '@/assets/css/iconfont.less'
 import './index.less'
 
-export default class WuYe extends Component {
+export default function WuYe (props) {
 
-  state = {
-    NavList: [
-      { name: '公告', id: 1 },
-      { name: '服务', id: 2 },
-      { name: '报修', id: 3 },
-      { name: '缴费', id: 4 }
-    ],
-    CurrentNavId: 1,
-    IsPull: false
-  }
-
-  componentWillMount () {
-  }
-
-  componentDidMount () { }
+  const [NavList] = useState([{ name: '公告', id: 1 }, { name: '服务', id: 2 }, { name: '报修', id: 3 }, { name: '缴费', id: 4 }])
+  const [CurrentNavId, setCurrentNavId] = useState(1)
+  const [IsPull, setIsPull] = useState(false)
 
-  componentWillUnmount () { }
-
-  componentDidShow () { }
-
-  componentDidHide () { }
-
-  NavChange (e) {
+  const NavChange = (e) => {
     return () => {
-      this.setState({
-        CurrentNavId: e.id
-      })
+      setCurrentNavId(e.id)
     }
   }
 
-  OnRefresh () {
-    this.setState({
-      IsPull: true
-    }, () => {
-      window.setTimeout(() => {
-        this.setState({
-          IsPull: false
-        })
-      }, 1000)
-    })
+  const OnRefresh = () => {
+    setIsPull(true)
+    window.setTimeout(() => {
+      setIsPull(false)
+    }, 1000)
   }
 
-  render () {
-    const { NavList, CurrentNavId, IsPull } = this.state
-    return (
-      <view className='WuYe flex-v'>
-        <NavHeader Title='物业' BgColor='none' IsFixed={true}></NavHeader>
-        <TabPageCutNav List={NavList} CurrentNavId={CurrentNavId} NavChange={this.NavChange.bind(this)}></TabPageCutNav>
-        <view className='flex-item'>
-          <view>
-            <scroll-view scroll-y='true' style='height: 100%;' refresher-enabled={true} onrefresherrefresh={this.OnRefresh.bind(this)} refresher-triggered={IsPull} refresher-background='none'>
+  return (
+    <view className='WuYe flex-v'>
+      <NavHeader Title='物业' BgColor='none' IsFixed={true}></NavHeader>
+      <TabPageCutNav List={NavList} CurrentNavId={CurrentNavId} NavChange={NavChange}></TabPageCutNav>
+      <view className='flex-item'>
+        <view>
+          <scroll-view scroll-y='true' style='height: 100%;' refresher-enabled={true} onrefresherrefresh={OnRefresh} refresher-triggered={IsPull} refresher-background='none'>
 
-              {/* 公告 */}
-              {
-                CurrentNavId - 0 === 1 &&
-                <view className='Content GongGao'>
-                  <WuYeGongGao></WuYeGongGao>
-                </view>
-              }
+            {/* 公告 */}
+            {
+              CurrentNavId - 0 === 1 &&
+              <view className='Content GongGao'>
+                <WuYeGongGao></WuYeGongGao>
+              </view>
+            }
 
-              {/* 服务 */}
-              {
-                CurrentNavId - 0 === 2 &&
-                <view className='Content FuWu'>
-                  <WuYeFuWu></WuYeFuWu>
-                </view>
-              }
+            {/* 服务 */}
+            {
+              CurrentNavId - 0 === 2 &&
+              <view className='Content FuWu'>
+                <WuYeFuWu></WuYeFuWu>
+              </view>
+            }
 
-              {/* 报修 */}
-              {
-                CurrentNavId - 0 === 3 &&
-                <view className='Content BaoXiu'>
-                  <WuYeBaoXiu></WuYeBaoXiu>
-                </view>
-              }
+            {/* 报修 */}
+            {
+              CurrentNavId - 0 === 3 &&
+              <view className='Content BaoXiu'>
+                <WuYeBaoXiu></WuYeBaoXiu>
+              </view>
+            }
 
-              {/* 缴费 */}
-              {
-                CurrentNavId - 0 === 4 &&
-                <view className='Content JiaoFei'>
-                  <WuYeJiaoFei></WuYeJiaoFei>
-                </view>
-              }
+            {/* 缴费 */}
+            {
+              CurrentNavId - 0 === 4 &&
+              <view className='Content JiaoFei'>
+                <WuYeJiaoFei></WuYeJiaoFei>
+              </view>
+            }
 
-            </scroll-view>
-          </view>
+          </scroll-view>
         </view>
       </view>
-    )
-  }
+    </view>
+  )
 }

src/utils/api.js

@@ -5,10 +5,22 @@ const $api = {
     method: 'get',
     url: `${prefix}/buildingDynamiceList`
   },
+  getActivityDetail: { // 获取活动详情
+    method: 'get',
+    url: `${prefix}/buildingDynamiceInfo/:id`
+  },
   getNewsList: { // 获取资讯列表
     method: 'get',
     url: `${prefix}/taNews`
   },
+  getNewsDetail: { // 获取资讯详情
+    method: 'get',
+    url: `${prefix}/taNews/:id`
+  },
+  addNewsViews: { // 资讯阅读量+1
+    method: 'put',
+    url: `${prefix}/taNews/pvNum/:id`
+  },
   getBanner: { // 获取轮播图
     method: 'get',
     url: `${prefix}/extendContent/banner`