静态页面

src/app.js

           request({ ...apis.login, params: { code: res.code, from, recommender, scene } }).then(x => {
             setUser(x.person)
             Taro.setStorage({ key: 'token', data: x.token })
+            Taro.setStorage({ key: 'sessionKey', data: x.sessionKey })
 
             // 埋点
             if (recommender || x.scene) {

src/components/GetUserIcon/index.jsx

+import React, { useState } from 'react'
+import { Button } from '@tarojs/components'
+import request, { apis } from '@/utils/request'
+import Taro from '@tarojs/taro'
+import { store, useModel } from '@/store'
+import '@/assets/css/reset.less'
+import '@/assets/css/iconfont.less'
+import './index.less'
+
+export default function GetUserIcon (props) {
+
+  const { setUser } = store.getModel('user').getState()
+  const { user } = useModel('user')
+  const { Show = false, Close = () => { } } = props
+
+  const ToGetUserIcon = (e) => { // 授权用户头像
+    if (e.detail.userInfo !== undefined) {
+      setUser({ ...user, avatarurl: e.detail.userInfo.avatarUrl, nickname: e.detail.userInfo.nickName })
+      Taro.showToast({ title: '头像授权成功', icon: 'none' })
+    } else {
+      Taro.showToast({ title: '头像授权失败', icon: 'none' })
+    }
+    Close()
+  }
+
+  return (
+    <view className='GetUserIcon' style={{ display: Show ? 'block' : 'none' }}>
+      <view className='centerLabel'>
+        <text>您暂未授权头像</text>
+        <view className='flex-h'>
+          <text className='flex-item' onClick={Close}>取消</text>
+          <Button className='flex-item' open-type='getUserInfo' lang='zh_CN' ongetuserinfo={ToGetUserIcon}>去授权</Button>
+        </view>
+      </view>
+    </view>
+  )
+}

src/components/GetUserIcon/index.less

+.GetUserIcon {
+  width: 100%;
+  position: fixed !important;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  z-index: 1000;
+  background: rgba(0, 0, 0, 0.7);
+
+  >view {
+    width: 60%;
+    background: #fff;
+    border-radius: 10px;
+
+    >text {
+      display: block;
+      text-align: center;
+      font-size: 28px;
+      line-height: 40px;
+      padding: 40px 0;
+    }
+
+    >.flex-h {
+      position: relative;
+      overflow: hidden;
+      border-top: 2px solid rgba(0, 0, 0, 0.08);
+
+      >text {
+        font-size: 28px;
+        line-height: 80px;
+        text-align: center;
+        border-right: 2px solid rgba(0, 0, 0, 0.08);
+        color: #999;
+      }
+      >button {
+        font-size: 28px;
+        line-height: 80px;
+        background: none;
+        border: none;
+        padding: 0 !important;
+        &::after {
+          display: none;
+        }
+      }
+    }
+  }
+}

src/components/GetUserPhone/index.css

+.GetUserPhone {
+  width: 100%;
+  position: fixed !important;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  z-index: 1000;
+  background: rgba(0, 0, 0, 0.7);
+}
+.GetUserPhone > view {
+  width: 60%;
+  background: #fff;
+  border-radius: 10px;
+}
+.GetUserPhone > view > text {
+  display: block;
+  text-align: center;
+  font-size: 28px;
+  line-height: 40px;
+  padding: 40px 0;
+}
+.GetUserPhone > view > .flex-h {
+  position: relative;
+  overflow: hidden;
+  border-top: 2px solid rgba(0, 0, 0, 0.08);
+}
+.GetUserPhone > view > .flex-h > text {
+  font-size: 28px;
+  line-height: 80px;
+  text-align: center;
+  border-right: 2px solid rgba(0, 0, 0, 0.08);
+  color: #999;
+}
+.GetUserPhone > view > .flex-h > button {
+  font-size: 28px;
+  line-height: 80px;
+  background: none;
+  border: none;
+  padding: 0 !important;
+}
+.GetUserPhone > view > .flex-h > button::after {
+  display: none;
+}

src/components/GetUserPhone/index.jsx

 import React, { useState } from 'react'
 import { Button } from '@tarojs/components'
 import request, { apis } from '@/utils/request'
+import Taro from '@tarojs/taro'
+import { store, useModel } from '@/store'
 import '@/assets/css/reset.less'
 import '@/assets/css/iconfont.less'
 import './index.less'
 
 export default function GetUserPhone (props) {
 
+  const { setUser } = store.getModel('user').getState()
+  const { user } = useModel('user')
+  const { Show = false, Close = () => { } } = props
+
   const ToGetUserPhone = (e) => { // 授权手机号
+    Close()
     request({
       ...apis.getUserPhone,
-      params: {
-        sessionKey: e.detail.cloudId,
+      data: {
+        sessionKey: Taro.getStorageSync('sessionKey'),
         encryptedData: e.detail.encryptedData,
         iv: e.detail.iv
       }
     }).then((res) => {
-      console.log(res)
+      setUser({ ...user, phone: res.phoneNumber })
+      Taro.showToast({ title: '手机授权成功', icon: 'none' })
+    }).catch(() => {
+      Taro.showToast({ title: '手机授权失败', icon: 'none' })
     })
   }
 
   return (
-    <view className='GetUserPhone'>
+    <view className='GetUserPhone' style={{display: Show ? 'block' : 'none'}}>
       <view className='centerLabel'>
         <text>您暂未授权手机号</text>
         <view className='flex-h'>
-          <text className='flex-item'>取消</text>
-          <Button className='flex-item' open-type='getPhoneNumber' lang='zh_CN' onGetphonenumber={ToGetUserPhone}>授权手机</Button>
+          <text className='flex-item' onClick={Close}>取消</text>
+          <Button className='flex-item' open-type='getPhoneNumber' lang='zh_CN' onGetphonenumber={ToGetUserPhone}>去授权</Button>
         </view>
       </view>
     </view>

src/components/GetUserPhone/index.less

 
   >view {
     width: 60%;
-    padding: 20px;
     background: #fff;
     border-radius: 10px;
+
+    >text {
+      display: block;
+      text-align: center;
+      font-size: 28px;
+      line-height: 40px;
+      padding: 40px 0;
+    }
+
+    >.flex-h {
+      position: relative;
+      overflow: hidden;
+      border-top: 2px solid rgba(0, 0, 0, 0.08);
+
+      >text {
+        font-size: 28px;
+        line-height: 80px;
+        text-align: center;
+        border-right: 2px solid rgba(0, 0, 0, 0.08);
+        color: #999;
+      }
+      >button {
+        font-size: 28px;
+        line-height: 80px;
+        background: none;
+        border: none;
+        padding: 0 !important;
+        &::after {
+          display: none;
+        }
+      }
+    }
   }
 }

src/components/WuYeBaoXiu/index.css

   position: relative;
   overflow: hidden;
 }
-.WuYeBaoXiu > .BigImg {
+.WuYeBaoXiu .BigImg {
   width: 100%;
   padding-bottom: 50%;
   position: relative;
   overflow: hidden;
   background: #ccc;
 }
-.WuYeBaoXiu > .BigImg > image {
+.WuYeBaoXiu .BigImg > image {
   width: 100%;
   height: 100%;
 }
-.WuYeBaoXiu > .WoYaoBaoXiu {
+.WuYeBaoXiu .WoYaoBaoXiu {
   padding: 0 30px;
   margin-top: 30px;
   position: relative;
   overflow: hidden;
 }
-.WuYeBaoXiu > .WoYaoBaoXiu > view {
+.WuYeBaoXiu .WoYaoBaoXiu > view {
   font-size: 0;
   white-space: nowrap;
   background: #fff;
   border-radius: 98px;
   text-align: center;
 }
-.WuYeBaoXiu > .WoYaoBaoXiu > view > text {
+.WuYeBaoXiu .WoYaoBaoXiu > view > text {
   display: inline-block;
   vertical-align: middle;
   font-size: 32px;
   color: #971C21;
   line-height: 98px;
 }
-.WuYeBaoXiu > .WoYaoBaoXiu > view > text.iconfont {
+.WuYeBaoXiu .WoYaoBaoXiu > view > text.iconfont {
   margin-right: 10px;
 }
-.WuYeBaoXiu > .List {
+.WuYeBaoXiu .List {
   position: relative;
   overflow: hidden;
 }
-.WuYeBaoXiu > .List > view {
+.WuYeBaoXiu .List > view {
   width: 100%;
   position: relative;
   overflow: hidden;
   margin-bottom: 30px;
 }
-.WuYeBaoXiu > .List > view:first-child {
+.WuYeBaoXiu .List > view:first-child {
   margin-top: 30px;
 }

src/components/WuYeBaoXiu/index.jsx

-import React, { useState } from 'react'
+import React, { useState, useEffect } from 'react'
+import request, { apis } from '@/utils/request'
+import { useModel } from '@/store'
 import Taro from '@tarojs/taro'
-import WuYeBaoXiuItem from '../WuYeBaoXiuItem/index'
+import WuYeBaoXiuItem from '@/components/WuYeBaoXiuItem/index'
+import ScrollPage from '@/components/ScrollPage/index'
 import '@/assets/css/reset.less'
 import '@/assets/css/iconfont.less'
 import './index.less'
 
 export default function WuYeBaoXiu (props) {
 
-  const [PageList, setPageList] = useState(['', '', '', '', '', '', ''])
+  const { user } = useModel('user')
+  const [IsPullUp, setIsPullUp] = useState(false)
+  const [IsPullDown, setIsPullDown] = useState(false)
+  const [HasNextPage, setHasNextPage] = useState(true)
+  const [PageNum, setPageNum] = useState(1)
+  const [PageList, setPageList] = useState([])
 
-  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')
+  useEffect(() => {
+    GetPageList(() => {
+      setIsPullUp(false)
+    })
+  }, [PageNum])
+
+  const GetPageList = (done = () => { }) => { // 获取列表
+    request({ ...apis.getGongDanList, args: { orgId: user.orgId }, params: { pageNum: PageNum, pageSize: 10, type: 2 } }).then((res) => {
+      if (PageNum === 1) {
+        setPageList([...res.records])
+      } else {
+        setPageList(PageList.concat([...res.records]))
+      }
+      setHasNextPage(res.current - 0 < res.pages - 0)
+      done()
+    }).catch(() => {
+      done()
+    })
+  }
+
+  const OnRefresh = () => { // 页面下拉刷新
+    setIsPullDown(true)
+    setHasNextPage(true)
+    setPageNum(1)
+    if (PageNum === 1) {
+      GetPageList(() => {
+        setIsPullDown(false)
+      })
+    } else {
+      setPageNum(1)
+    }
+  }
+
+  const OnPullUp = () => {
+    if (HasNextPage) {
+      setIsPullUp(true)
+      setPageNum(PageNum + 1)
+    }
+  }
 
   return (
     <view className='WuYeBaoXiu'>
+      <ScrollPage IsPullDown={IsPullDown} IsPullUp={IsPullUp} HasMore={HasNextPage} OnRefresh={OnRefresh} OnPullUp={OnPullUp}>
 
-      {/* 大图 */}
-      <view className='BigImg'>
-        <image mode='aspectFill' src={TestImg} className='centerLabel'></image>
-      </view>
+        {/* 大图 */}
+        <view className='BigImg'>
+          <image mode='aspectFill' src={null} className='centerLabel'></image>
+        </view>
+
+        {/* 我要报修 */}
+        <view className='WoYaoBaoXiu'>
+          <view onClick={() => { Taro.navigateTo({ url: `/pages/WuYe/BaoXiuQuYu/index` }) }}>
+            <text className='iconfont iconjia'></text>
+            <text>我要报修</text>
+          </view>
+        </view>
 
-      {/* 我要报修 */}
-      <view className='WoYaoBaoXiu'>
-        <view onClick={() => { Taro.navigateTo({ url: `/pages/WuYe/BaoXiuQuYu/index` }) }}>
-          <text className='iconfont iconjia'></text>
-          <text>我要报修</text>
+        {/* 报修列表 */}
+        <view className='List'>
+          {
+            PageList.map((item, index) => (
+              <view key={`WuYeBaoXiuItem-${index}`}>
+                <WuYeBaoXiuItem Data={{ ...item, id: index }}></WuYeBaoXiuItem>
+              </view>
+            ))
+          }
         </view>
-      </view>
-
-      {/* 报修列表 */}
-      <view className='List'>
-        {
-          PageList.map((item, index) => (
-            <view key={`WuYeBaoXiuItem-${index}`}>
-              <WuYeBaoXiuItem Data={{ ...item, id: index }}></WuYeBaoXiuItem>
-            </view>
-          ))
-        }
-      </view>
 
+      </ScrollPage>
     </view>
   )
 }

src/components/WuYeBaoXiu/index.less

   position: relative;
   overflow: hidden;
 
-  >.BigImg {
+  .BigImg {
     width: 100%;
     padding-bottom: 50%;
     position: relative;
     }
   }
 
-  >.WoYaoBaoXiu {
+  .WoYaoBaoXiu {
     padding: 0 30px;
     margin-top: 30px;
     position: relative;
     }
   }
 
-  >.List {
+  .List {
     position: relative;
     overflow: hidden;
 

src/components/WuYeFuWu/index.css

   position: relative;
   overflow: hidden;
 }
-.WuYeFuWu > .BigImg {
+.WuYeFuWu .BigImg {
   width: 100%;
   padding-bottom: 50%;
   position: relative;
   overflow: hidden;
   background: #ccc;
 }
-.WuYeFuWu > .BigImg > image {
+.WuYeFuWu .BigImg > image {
   width: 100%;
   height: 100%;
 }
-.WuYeFuWu > .BanShiZhiNan {
+.WuYeFuWu .BanShiZhiNan {
   padding: 40px 30px;
   background: #fff;
   margin-top: 30px;
   overflow: hidden;
 }
-.WuYeFuWu > .BanShiZhiNan > text {
+.WuYeFuWu .BanShiZhiNan > text {
   font-size: 30px;
   color: #333;
   font-weight: bold;
   line-height: 40px;
   display: block;
 }
-.WuYeFuWu > .BanShiZhiNan > .flex-h {
+.WuYeFuWu .BanShiZhiNan > .flex-h {
   position: relative;
   margin-top: 60px;
 }
-.WuYeFuWu > .BanShiZhiNan > .flex-h > .Line {
+.WuYeFuWu .BanShiZhiNan > .flex-h > .Line {
   width: 50px;
   position: relative;
   overflow: visible;
   border-left: 2px dashed #586FF8;
 }
-.WuYeFuWu > .BanShiZhiNan > .flex-h > .Line > view {
+.WuYeFuWu .BanShiZhiNan > .flex-h > .Line > view {
   width: 14px;
   height: 14px;
   background: #586FF8;
   left: -8px;
   top: 30px;
 }
-.WuYeFuWu > .BanShiZhiNan > .flex-h > .flex-item {
+.WuYeFuWu .BanShiZhiNan > .flex-h > .flex-item {
   position: relative;
   overflow: visible;
   background: rgba(88, 111, 248, 0.08);
   padding: 20px;
 }
-.WuYeFuWu > .BanShiZhiNan > .flex-h > .flex-item::after {
+.WuYeFuWu .BanShiZhiNan > .flex-h > .flex-item::after {
   content: '';
   width: 0;
   height: 0;
   border-style: solid dashed solid solid;
   border-width: 20px;
 }
-.WuYeFuWu > .BanShiZhiNan > .flex-h > .flex-item > text {
+.WuYeFuWu .BanShiZhiNan > .flex-h > .flex-item > text {
   display: block;
   font-size: 24px;
   color: #333;
   line-height: 40px;
   margin-top: 10px;
 }
-.WuYeFuWu > .BanShiZhiNan > .flex-h > .flex-item > text:first-child {
+.WuYeFuWu .BanShiZhiNan > .flex-h > .flex-item > text:first-child {
   margin-top: 0;
 }
-.WuYeFuWu > .List {
+.WuYeFuWu .List {
   position: relative;
   overflow: hidden;
 }
-.WuYeFuWu > .List > view {
+.WuYeFuWu .List > view {
   width: 100%;
   position: relative;
   overflow: hidden;
   margin-bottom: 30px;
 }
-.WuYeFuWu > .List > view:first-child {
+.WuYeFuWu .List > view:first-child {
   margin-top: 30px;
 }

src/components/WuYeFuWu/index.jsx

-import React, { Component } from 'react'
-import WuYeFuWuItem from '../WuYeFuWuItem/index'
-import '../../assets/css/reset.less'
-import '../../assets/css/iconfont.less'
+import React, { useState, useEffect } from 'react'
+import request, { apis } from '@/utils/request'
+import { useModel } from '@/store'
+import WuYeFuWuItem from '@/components/WuYeFuWuItem/index'
+import ScrollPage from '@/components/ScrollPage/index'
+import '@/assets/css/reset.less'
+import '@/assets/css/iconfont.less'
 import './index.less'
 
-export default class WuYeFuWu extends Component {
+export default function WuYeFuWu () {
 
-  state = {
-    PageList: ['', '', '', '', '', '', ''],
-    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'
-  }
-
-  componentWillMount () { }
+  const { user } = useModel('user')
+  const [IsPullUp, setIsPullUp] = useState(false)
+  const [IsPullDown, setIsPullDown] = useState(false)
+  const [HasNextPage, setHasNextPage] = useState(true)
+  const [PageNum, setPageNum] = useState(1)
+  const [PageList, setPageList] = useState([])
 
-  componentDidMount () { }
+  useEffect(() => {
+    GetPageList(() => {
+      setIsPullUp(false)
+    })
+  }, [PageNum])
 
-  componentWillUnmount () { }
-
-  componentDidShow () { }
+  const GetPageList = (done = () => { }) => { // 获取列表
+    request({ ...apis.getGongGaoList, args: { orgId: user.orgId }, params: { pageNum: PageNum, pageSize: 10 } }).then((res) => {
+      if (PageNum === 1) {
+        setPageList([...res.records])
+      } else {
+        setPageList(PageList.concat([...res.records]))
+      }
+      setHasNextPage(res.current - 0 < res.pages - 0)
+      done()
+    }).catch(() => {
+      done()
+    })
+  }
 
-  componentDidHide () { }
+  const OnRefresh = () => { // 页面下拉刷新
+    setIsPullDown(true)
+    setHasNextPage(true)
+    setPageNum(1)
+    if (PageNum === 1) {
+      GetPageList(() => {
+        setIsPullDown(false)
+      })
+    } else {
+      setPageNum(1)
+    }
+  }
 
-  render () {
-    const { TestImg, PageList } = this.state
-    return (
-      <view className='WuYeFuWu'>
+  const OnPullUp = () => {
+    if (HasNextPage) {
+      setIsPullUp(true)
+      setPageNum(PageNum + 1)
+    }
+  }
 
+  return (
+    <view className='WuYeFuWu'>
+      <ScrollPage IsPullDown={IsPullDown} IsPullUp={IsPullUp} HasMore={HasNextPage} OnRefresh={OnRefresh} OnPullUp={OnPullUp}>
         {/* 大图 */}
         <view className='BigImg'>
-          <image mode='aspectFill' src={TestImg} className='centerLabel'></image>
+          <image mode='aspectFill' src={null} className='centerLabel'></image>
         </view>
 
         {/* 物业办事指南 */}
             ))
           }
         </view>
-
-      </view>
-    )
-  }
+      </ScrollPage>
+    </view>
+  )
 }

src/components/WuYeFuWu/index.less

   position: relative;
   overflow: hidden;
 
-  >.BigImg {
+  .BigImg {
     width: 100%;
     padding-bottom: 50%;
     position: relative;
     }
   }
 
-  >.BanShiZhiNan {
+  .BanShiZhiNan {
     padding: 40px 30px;
     background: #fff;
     margin-top: 30px;
 
   }
 
-  >.List {
+  .List {
     position: relative;
     overflow: hidden;
 

src/components/WuYeGongGao/index.css

+.WuYeGongGao {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+}
+.WuYeGongGao .BigImg {
+  width: 100%;
+  padding-bottom: 50%;
+  position: relative;
+  overflow: hidden;
+  background: #ccc;
+}
+.WuYeGongGao .BigImg > image {
+  width: 100%;
+  height: 100%;
+}
+.WuYeGongGao .List {
+  position: relative;
+  overflow: hidden;
+}
+.WuYeGongGao .List > view {
+  width: 100%;
+  position: relative;
+  overflow: hidden;
+  margin-bottom: 30px;
+}
+.WuYeGongGao .List > view:first-child {
+  margin-top: 30px;
+}

src/components/WuYeGongGao/index.jsx

-import React, { Component } from 'react'
-import WuYeGongGaoItem from '../../components/WuYeGongGaoItem/index'
-import '../../assets/css/reset.less'
-import '../../assets/css/iconfont.less'
+import React, { useState, useEffect } from 'react'
+import request, { apis } from '@/utils/request'
+import { useModel } from '@/store'
+import WuYeGongGaoItem from '@/components/WuYeGongGaoItem/index'
+import ScrollPage from '@/components/ScrollPage/index'
+import '@/assets/css/reset.less'
+import '@/assets/css/iconfont.less'
 import './index.less'
 
-export default class WuYeGongGao extends Component {
+export default function WuYeGongGao () {
 
-  state = {
-    PageList: ['', '', '', '', '', '', ''],
-    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'
-  }
-
-  componentWillMount () { }
+  const { user } = useModel('user')
+  const [IsPullUp, setIsPullUp] = useState(false)
+  const [IsPullDown, setIsPullDown] = useState(false)
+  const [HasNextPage, setHasNextPage] = useState(true)
+  const [PageNum, setPageNum] = useState(1)
+  const [PageList, setPageList] = useState([])
 
-  componentDidMount () { }
+  useEffect(() => {
+    GetPageList(() => {
+      setIsPullUp(false)
+    })
+  }, [PageNum])
 
-  componentWillUnmount () { }
+  const GetPageList = (done = () => { }) => { // 获取列表
+    request({ ...apis.getGongGaoList, args: { orgId: user.orgId }, params: { pageNum: PageNum, pageSize: 10 } }).then((res) => {
+      if (PageNum === 1) {
+        setPageList([...res.records])
+      } else {
+        setPageList(PageList.concat([...res.records]))
+      }
+      setHasNextPage(res.current - 0 < res.pages - 0)
+      done()
+    }).catch(() => {
+      done()
+    })
+  }
 
-  componentDidShow () { }
+  const OnRefresh = () => { // 页面下拉刷新
+    setIsPullDown(true)
+    setHasNextPage(true)
+    setPageNum(1)
+    if (PageNum === 1) {
+      GetPageList(() => {
+        setIsPullDown(false)
+      })
+    } else {
+      setPageNum(1)
+    }
+  }
 
-  componentDidHide () { }
+  const OnPullUp = () => {
+    if (HasNextPage) {
+      setIsPullUp(true)
+      setPageNum(PageNum + 1)
+    }
+  }
 
-  render () {
-    const { TestImg, PageList } = this.state
-    return (
-      <view className='WuYeGongGao'>
+  return (
+    <view className='WuYeGongGao'>
+      <ScrollPage IsPullDown={IsPullDown} IsPullUp={IsPullUp} HasMore={HasNextPage} OnRefresh={OnRefresh} OnPullUp={OnPullUp}>
 
         {/* 大图 */}
         <view className='BigImg'>
-          <image mode='aspectFill' src={TestImg} className='centerLabel'></image>
+          <image mode='aspectFill' src={null} className='centerLabel'></image>
         </view>
 
         {/* 列表 */}
           }
         </view>
 
-      </view>
-    )
-  }
+      </ScrollPage>
+    </view>
+  )
 }

src/components/WuYeGongGao/index.less

 .WuYeGongGao {
   width: 100%;
+  height: 100%;
   position: relative;
   overflow: hidden;
 
-  >.BigImg {
+  .BigImg {
     width: 100%;
     padding-bottom: 50%;
     position: relative;
     }
   }
 
-  >.List {
+  .List {
     position: relative;
     overflow: hidden;
 

src/components/WuYeJiaoFei/index.jsx

-import React, { useState } from 'react'
-import WuYeJiaoFeiItem from '../WuYeJiaoFeiItem/index'
+import React, { useState, useEffect } from 'react'
+import request, { apis } from '@/utils/request'
+import { useModel } from '@/store'
+import WuYeJiaoFeiItem from '@/components/WuYeJiaoFeiItem/index'
+import ScrollPage from '@/components/ScrollPage/index'
 import '@/assets/css/reset.less'
 import '@/assets/css/iconfont.less'
 import './index.less'
 
 export default function WuYeJiaoFei () {
 
-  const [PageList, setPageList] = useState(['', '', '', '', '', '', ''])
-  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 { user } = useModel('user')
+  const [IsPullUp, setIsPullUp] = useState(false)
+  const [IsPullDown, setIsPullDown] = useState(false)
+  const [HasNextPage, setHasNextPage] = useState(true)
+  const [PageNum, setPageNum] = useState(1)
+  const [PageList, setPageList] = useState([])
+
+  useEffect(() => {
+    GetPageList(() => {
+      setIsPullUp(false)
+    })
+  }, [PageNum])
+
+  const GetPageList = (done = () => { }) => { // 获取列表
+    request({ ...apis.getJiaoFeiList, args: { type: 0 }, params: { pageNum: PageNum, pageSize: 10 } }).then((res) => {
+      if (PageNum === 1) {
+        setPageList([...res.records])
+      } else {
+        setPageList(PageList.concat([...res.records]))
+      }
+      setHasNextPage(res.current - 0 < res.pages - 0)
+      done()
+    }).catch(() => {
+      done()
+    })
+  }
+
+  const OnRefresh = () => { // 页面下拉刷新
+    setIsPullDown(true)
+    setHasNextPage(true)
+    setPageNum(1)
+    if (PageNum === 1) {
+      GetPageList(() => {
+        setIsPullDown(false)
+      })
+    } else {
+      setPageNum(1)
+    }
+  }
+
+  const OnPullUp = () => {
+    if (HasNextPage) {
+      setIsPullUp(true)
+      setPageNum(PageNum + 1)
+    }
+  }
 
   return (
     <view className='WuYeJiaoFei'>
+      <ScrollPage IsPullDown={IsPullDown} IsPullUp={IsPullUp} HasMore={HasNextPage} OnRefresh={OnRefresh} OnPullUp={OnPullUp}>
+
+        {/* 大图 */}
+        <view className='BigImg'>
+          <image mode='aspectFill' src={null} className='centerLabel'></image>
+        </view>
 
-      {/* 大图 */}
-      <view className='BigImg'>
-        <image mode='aspectFill' src={TestImg} className='centerLabel'></image>
-      </view>
-
-      {/* 缴费列表 */}
-      <view className='List'>
-        {
-          PageList.map((item, index) => (
-            <view key={`WuYeJiaoFeiItem-${index}`}>
-              <WuYeJiaoFeiItem Data={item}></WuYeJiaoFeiItem>
-            </view>
-          ))
-        }
-      </view>
+        {/* 缴费列表 */}
+        <view className='List'>
+          {
+            PageList.map((item, index) => (
+              <view key={`WuYeJiaoFeiItem-${index}`}>
+                <WuYeJiaoFeiItem Data={item}></WuYeJiaoFeiItem>
+              </view>
+            ))
+          }
+        </view>
 
+      </ScrollPage>
     </view>
   )
 }

src/pages/HuoDong/HuoDongDetail/index.css

   color: #fff;
   line-height: 98px;
   border-radius: 98px;
-  background: #F35844;
+  background: #ccc;
   margin-top: 60px;
 }
+.HuoDongDetail > .Info > .BottomBtn.active {
+  background: #F35844;
+}

src/pages/HuoDong/HuoDongDetail/index.jsx

 export default function HuoDongDetail (props) {
 
   const { user } = useModel('user')
+  const [DataLock, setDataLock] = useState(false)
   const [ShowGetUserPhoneLayer, setShowGetUserPhoneLayer] = useState(false)
+  const [HasJoin, setHasJoin] = useState(null)
   const [CurrnetHuoDongId] = useState(Current.router.params.id) // 当前活动id
   const [ActivityDetail, setActivityDetail] = useState(null) // 活动详情
 
   const GetActivityDetail = () => { // 获取活动详情
     request({ ...apis.getActivityDetail, args: { id: CurrnetHuoDongId } }).then((res) => {
       setActivityDetail(res)
+      CheckActivityJoin()
+    })
+  }
+
+  const CheckActivityJoin = () => { // 查询活动参加详情
+    request({ ...apis.checkActivityJoin, args: { id: CurrnetHuoDongId } }).then((res) => {
+      setHasJoin(!!res.dynamic.isSign)
     })
   }
 
   const ToJoin = () => { // 去报名
-    const { personId, phone } = user
+    if (DataLock || ActivityDetail === null || HasJoin) return
+    setDataLock(true)
+    const { personId, phone, nickname, orgId } = user
     const { dynamicId } = ActivityDetail
-    console.log(personId, phone, dynamicId)
+    if (!phone) { // 未授权手机号，唤起授权手机号弹窗
+      setShowGetUserPhoneLayer(true)
+      setDataLock(false)
+      return false
+    }
+    let Data = {
+      phone,
+      personId,
+      dynamicId,
+      name: nickname,
+      orgId,
+      attendNum: 1,
+      sharePerson: null,
+      sharePersonName: null,
+      sharePersonType: null
+    }
+    request({ ...apis.JoinActivity, data: { ...Data } }).then(() => {
+      setHasJoin(true)
+      setDataLock(false)
+    }).catch((res) => {
+      Taro.showToast({ title: res, icon: 'none' })
+      setDataLock(false)
+    })
   }
 
   return (
     <view className='HuoDongDetail'>
-      {
-        ShowGetUserPhoneLayer &&
-        <GetUserPhone></GetUserPhone>
-      }
+
+      {/* 获取用户手机号授权 */}
+      <GetUserPhone Show={ShowGetUserPhoneLayer} Close={() => { setShowGetUserPhoneLayer(false) }}></GetUserPhone>
+
       <view className='BannerLayer'></view>
       {
         ActivityDetail !== null &&
             <RichText nodes={ActivityDetail.desc}></RichText>
           </view>
 
-          <text className='BottomBtn' onClick={ToJoin}>立即参加</text>
+          {
+            HasJoin !== null &&
+            <text className={HasJoin ? 'BottomBtn' : 'active BottomBtn'} onClick={ToJoin}>{HasJoin ? '已报名' : '立即参加'}</text>
+          }
 
         </view>
       }

src/pages/HuoDong/HuoDongDetail/index.less

       color: #fff;
       line-height: 98px;
       border-radius: 98px;
-      background: #F35844;
+      background: #ccc;
       margin-top: 60px;
+
+      &.active {
+        background: #F35844;
+      }
     }
   }
 }

src/pages/ShouYe/HuoDong/index.jsx

-import React, { useState } from 'react'
+import React, { useState, useEffect } from 'react'
+import request, { apis } from '@/utils/request'
 import ActivityListItem from '@/components/ActivityListItem/index'
 import ScrollPage from '@/components/ScrollPage/index'
 import '@/assets/css/reset.less'
 
 export default function ShouYeHuoDong (props) {
 
-  const [ActivityList, setActivityList] = useState(['', '', '', '', '', '', ''])
-  const [IsPullDown, setIsPullDown] = useState(false)
   const [IsPullUp, setIsPullUp] = useState(false)
-  const [HasMore, setHasMore] = useState(true)
+  const [IsPullDown, setIsPullDown] = useState(false)
+  const [HasNextPage, setHasNextPage] = useState(true)
+  const [PageNum, setPageNum] = useState(1)
+  const [PageList, setPageList] = useState([])
+
+  useEffect(() => {
+    GetPageList(() => {
+      setIsPullUp(false)
+    })
+  }, [PageNum])
+
+  const GetPageList = (done = () => { }) => { // 获取列表
+    request({ ...apis.getActivityList, params: { pageNum: PageNum, pageSize: 6 } }).then((res) => {
+      if (PageNum === 1) {
+        setPageList([...res.list])
+      } else {
+        setPageList(PageList.concat([...res.list]))
+      }
+      setHasNextPage(res.current - 0 < res.pages - 0)
+      done()
+    }).catch(() => {
+      done()
+    })
+  }
 
   const OnRefresh = () => { // 页面下拉刷新
     setIsPullDown(true)
-    window.setTimeout(() => {
-      setIsPullUp(false)
-      setHasMore(true)
-      setIsPullDown(false)
-    }, 1000)
+    setHasNextPage(true)
+    setPageNum(1)
+    if (PageNum === 1) {
+      GetPageList(() => {
+        setIsPullDown(false)
+      })
+    } else {
+      setPageNum(1)
+    }
   }
 
-  const OnPullUp = () => { // 页面上拉加载
-    if (HasMore && !IsPullUp) {
+  const OnPullUp = () => {
+    if (HasNextPage) {
       setIsPullUp(true)
-      window.setTimeout(() => {
-        setIsPullUp(false)
-        setHasMore(false)
-      }, 1000)
+      setPageNum(PageNum + 1)
     }
   }
 
   return (
     <view className='ShouYeHuoDong'>
-      <ScrollPage IsPullDown={IsPullDown} IsPullUp={IsPullUp} HasMore={HasMore} OnRefresh={OnRefresh} OnPullUp={OnPullUp}>
+      <ScrollPage IsPullDown={IsPullDown} IsPullUp={IsPullUp} HasMore={HasNextPage} OnRefresh={OnRefresh} OnPullUp={OnPullUp}>
         <view className='ShouYeHuoDongContent'>
           {
-            ActivityList.map((item, index) => (
+            PageList.map((item, index) => (
               <view className='ListItem' key={`ActivityItem-${index}`}>
                 <ActivityListItem Data={item}></ActivityListItem>
               </view>

src/pages/ShouYe/index.jsx

 import React, { useState, useEffect } from 'react'
 import NavHeader from '@/components/NavHeader/index'
 import GetUserPhone from '@/components/GetUserPhone/index'
+import GetUserIcon from '@/components/GetUserIcon/index'
 import { Swiper, SwiperItem, Text } from '@tarojs/components'
 import request, { apis } from '@/utils/request'
 import { useModel } from '@/store'
 export default function Index (props) {
 
   const { user } = useModel('user')
-  const [ShowGetUserPhoneLayer, setShowGetUserPhoneLayer] = useState(true)
+  const [ShowGetUserPhoneLayer, setShowGetUserPhoneLayer] = useState(false)
+  const [ShowGetUserIconLayer, setShowGetUserIconLayer] = useState(false)
   const [ShowAdvLayer, setShowAdvLayer] = useState(false)
   const [IsPull, setIsPull] = useState(false)
   const [OwnerList] = useState([
   return (
     <Page>
       <view className='ShouYe flex-v'>
-        {
-          ShowGetUserPhoneLayer &&
-          <GetUserPhone></GetUserPhone>
-        }
         <NavHeader BgColor='#f35844' Title='首页'></NavHeader>
         <view className='flex-item'>
 
           </view>
 
         </view>
+
+        {/* 获取用户手机号授权 */}
+        <GetUserPhone Show={ShowGetUserPhoneLayer} Close={() => { setShowGetUserPhoneLayer(false) }}></GetUserPhone>
+
+        {/* 获取用户头像 */}
+        <GetUserIcon Show={ShowGetUserIconLayer} Close={() => { setShowGetUserIconLayer(false) }}></GetUserIcon>
       </view >
     </Page>
   )

src/pages/WoDe/WoDeHuoDong/index.jsx

-import React, { useState } from 'react'
+import React, { useState, useEffect } from 'react'
+import request, { apis } from '@/utils/request'
 import ActivityListItem from '@/components/ActivityListItem/index'
+import ScrollPage from '@/components/ScrollPage/index'
 import '@/assets/css/reset.less'
 import '@/assets/css/iconfont.less'
 import './index.less'
 
 export default function WoDeHuoDong (props) {
+  
+  const [IsPullUp, setIsPullUp] = useState(false)
+  const [IsPullDown, setIsPullDown] = useState(false)
+  const [HasNextPage, setHasNextPage] = useState(true)
+  const [PageNum, setPageNum] = useState(1)
+  const [PageList, setPageList] = useState([])
 
-  const [IsPull, setIsPull] = useState(false)
-  const [ActivityList, setActivityList] = useState(['', '', '', '', '', '', ''])
+  useEffect(() => {
+    GetPageList(() => {
+      setIsPullUp(false)
+    })
+  }, [PageNum])
 
-  const OnRefresh = () => {
-    setIsPull(true)
-    window.setTimeout(() => {
-      setIsPull(false)
-    }, 1000)
+  const GetPageList = (done = () => { }) => { // 获取列表
+    request({ ...apis.getActivityList, params: { pageNum: PageNum, pageSize: 6, mine: '1' } }).then((res) => {
+      if (PageNum === 1) {
+        setPageList([...res.records])
+      } else {
+        setPageList(PageList.concat([...res.records]))
+      }
+      setHasNextPage(res.current - 0 < res.pages - 0)
+      done()
+    }).catch(() => {
+      done()
+    })
+  }
+
+  const OnRefresh = () => { // 页面下拉刷新
+    setIsPullDown(true)
+    setHasNextPage(true)
+    setPageNum(1)
+    if (PageNum === 1) {
+      GetPageList(() => {
+        setIsPullDown(false)
+      })
+    } else {
+      setPageNum(1)
+    }
+  }
+
+  const OnPullUp = () => {
+    if (HasNextPage) {
+      setIsPullUp(true)
+      setPageNum(PageNum + 1)
+    }
   }
 
   return (
     <view className='WoDeHuoDong'>
-      <scroll-view scroll-y='true' style='height: 100%;' refresher-enabled={true} onrefresherrefresh={OnRefresh} refresher-triggered={IsPull} refresher-background='none'>
-
+      <ScrollPage OnRefresh={OnRefresh} IsPullUp={IsPullUp} IsPullDown={IsPullDown} OnPullUp={OnPullUp} HasMore={HasNextPage}>
         <view className='Content Activity'>
           {
-            ActivityList.map((item, index) => (
+            PageList.map((item, index) => (
               <view className='ListItem' key={`ActivityItem-${index}`}>
                 <ActivityListItem Data={item}></ActivityListItem>
               </view>
             ))
           }
         </view>
-
-      </scroll-view>
+      </ScrollPage>
     </view>
   )
 }

src/pages/WuYe/index.jsx

       <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>
-            }
-
-          </scroll-view>
+          {/* 缴费 */}
+          {
+            CurrentNavId - 0 === 4 &&
+            <view className='Content JiaoFei'>
+              <WuYeJiaoFei></WuYeJiaoFei>
+            </view>
+          }
         </view>
       </view>
     </view>

src/utils/api.js

 const prefix = `${HOST}/api/wx`
 
 const $api = {
+  getJiaoFeiList: { // 获取缴费列表
+    method: 'get',
+    url: `${prefix}/bills/current_user/:type`
+  },
+  getGongDanList: { // 获取小区工单列表
+    method: 'get',
+    url: `${prefix}/tickets/list/:orgId`
+  },
+  getGongGaoList: { // 获取小区公告列表
+    method: 'get',
+    url: `${prefix}/announcements/:orgId`
+  },
   getUserPhone: { // 获取用户手机号
     method: 'post',
     url: `${prefix}/userPhone`
     method: 'get',
     url: `${prefix}/buildingDynamiceList`
   },
+  checkActivityJoin: { // 查询活动参加详情
+    method: 'get',
+    url: `${prefix}/buildingDynamiceEnlistInfo/:id`
+  },
   getActivityDetail: { // 获取活动详情
     method: 'get',
     url: `${prefix}/buildingDynamiceInfo/:id`
   },
+  JoinActivity: { // 参加活动
+    method: 'post',
+    url: `${prefix}/activityDynamicEnlistAdd`
+  },
   getNewsList: { // 获取资讯列表
     method: 'get',
     url: `${prefix}/taNews`

src/utils/request.js

   }
 
   const token = Taro.getStorageSync('token')
-  const authHeader = token ? { authorization: `Bearer ${token}` } : {}
+  const authHeader = token ? { authorization: `Bearer ${token}`, 'X-Auth-Token': token } : {}
   const appHeader = { appId, 'x-action': 'miniapp' }
 
   const config = {