静态页面

src/components/ActivityListItem/index.jsx

-import React, { useState } from 'react'
+import React, { } from 'react'
 import Taro from '@tarojs/taro'
 import toolclass from '@/utils/toolclass.js'
 import '@/assets/css/reset.less'

src/components/PrizeListItem/index.css

 }
 .PrizeListItem > .Info > .flex-h {
   align-items: center;
+  position: relative;
+  overflow: hidden;
 }
-.PrizeListItem > .Info > .flex-h > text {
+.PrizeListItem > .Info > .flex-h > view text {
   font-size: 24px;
   color: #333;
   line-height: 40px;
 }
-.PrizeListItem > .Info > .flex-h > text.Count {
+.PrizeListItem > .Info > .flex-h > view.Count text {
   color: #971C21;
 }
-.PrizeListItem > .Info > .flex-h > text.Num {
+.PrizeListItem > .Info > .flex-h > view.Num text {
   color: #FF2C28;
 }
-.PrizeListItem > .Info > .flex-h > text:last-child {
+.PrizeListItem > .Info > .flex-h > view:last-child text {
   color: #999;
 }

src/components/PrizeListItem/index.jsx

 
 export default function PrizeListItem (props) {
 
-  const [TestImg] = 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 { Data } = props
 
   return (
-    <view className='PrizeListItem' onClick={() => { Taro.navigateTo({ url: `/pages/FuLi/ShangPinXiangQing/index?id=` }) }}>
+    <view className='PrizeListItem' onClick={() => { Taro.navigateTo({ url: `/pages/FuLi/ShangPinXiangQing/index?id=${Data.goodsId}` }) }}>
       <view className='Img'>
-        <image mode='aspectFill' src={TestImg} className='centerLabel'></image>
+        <image mode='aspectFill' src={Data.imgUrl} className='centerLabel'></image>
       </view>
       <view className='Info'>
-        <text>沙发垫欧式轻奢</text>
+        <text>{Data.goodsName}</text>
         <view className='flex-h'>
-          <text className='Count'>70</text>
-          <text className='flex-item'>人已兑换</text>
-          <text className='Num'>30000</text>
-          <text>积分</text>
+          <view className='Count'><text>{Data.totalNum}</text></view>
+          <view className='flex-item'><text>人已兑换</text></view>
+          <view className='Num'><text>{Data.pointPrice}</text></view>
+          <view><text>积分</text></view>
         </view>
       </view>
     </view >

src/components/PrizeListItem/index.less

 
     >.flex-h {
       align-items: center;
+      position: relative;
+      overflow: hidden;
+
+      >view {
+
+        text {
+          font-size: 24px;
+          color: #333;
+          line-height: 40px;
+        }
 
-      >text {
-        font-size: 24px;
-        color: #333;
-        line-height: 40px;
 
         &.Count {
-          color: #971C21;
+          text {
+            color: #971C21;
+          }
         }
 
         &.Num {
-          color: #FF2C28;
+          text {
+            color: #FF2C28;
+          }
         }
 
         &:last-child {
-          color: #999;
+          text {
+            color: #999;
+          }
         }
+
       }
     }
   }

src/components/ScrollPageRefresh/index.jsx

       } else {
         Push([...res[ListName]])
       }
-      setHasNextPage(res.current - 0 < res.pages - 0)
+      if (res[ListName].length) {
+        setHasNextPage(res.current - 0 < res.pages - 0)
+      } else if (res.total === 0) {
+        setHasNextPage(false)
+      }
       done()
     }).catch(() => {
       done()

src/components/TabPageCutNav/index.jsx

-import React, { Component } from 'react'
-// import { View, Text } from '@tarojs/components'
-import '../../assets/css/reset.less'
-import '../../assets/css/iconfont.less'
+import React, { } from 'react'
+import '@/assets/css/reset.less'
+import '@/assets/css/iconfont.less'
 import './index.less'
 
-export default class TabPageCutNav extends Component {
+export default function (props) {
 
-  componentWillMount () { }
-
-  componentDidMount () { }
-
-  componentWillUnmount () { }
-
-  componentDidShow () { }
-
-  componentDidHide () { }
-
-  render () {
-    const { List = [], CurrentNavId = null, NavChange = () => { } } = this.props
-    return (
-      <view className='TabPageCutNav'>
-        <view>
-          <view className='flex-h'>
-            {
-              List.map((item, index) => (
-                <view className='flex-item' key={`TabPageNav-${index}`}>
-                  <text class={item.id - 0 === CurrentNavId - 0 ? 'active' : ''} onClick={NavChange(item)}>{item.name}</text>
-                </view>
-              ))
-            }
-          </view>
+  const { List = [], CurrentNavId = null, NavChange = () => { } } = props
+  return (
+    <view className='TabPageCutNav'>
+      <view>
+        <view className='flex-h'>
+          {
+            List.map((item, index) => (
+              <view className='flex-item' key={`TabPageNav-${index}`}>
+                <text class={item.id - 0 === CurrentNavId - 0 ? 'active' : ''} onClick={NavChange(item)}>{item.name}</text>
+              </view>
+            ))
+          }
         </view>
-      </view >
-    )
-  }
+      </view>
+    </view >
+  )
 }

src/components/WuYeBaoXiu/index.css

 .WuYeBaoXiu {
   width: 100%;
+  height: 100%;
   position: relative;
   overflow: hidden;
 }

src/components/WuYeBaoXiu/index.jsx

-import React, { useState, useEffect } from 'react'
-import request, { apis } from '@/utils/request'
+import React, { useState } from 'react'
 import { useModel } from '@/store'
 import Taro from '@tarojs/taro'
 import WuYeBaoXiuItem from '@/components/WuYeBaoXiuItem/index'
-import ScrollPage from '@/components/ScrollPage/index'
+import ScrollPageRefresh from '@/components/ScrollPageRefresh/index'
 import '@/assets/css/reset.less'
 import '@/assets/css/iconfont.less'
 import './index.less'
 
-export default function WuYeBaoXiu (props) {
+export default function WuYeBaoXiu () {
 
   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.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 Refresh = (e) => { // 下拉刷新
+    setPageList(e)
   }
 
-  const OnPullUp = () => {
-    if (HasNextPage) {
-      setIsPullUp(true)
-      setPageNum(PageNum + 1)
-    }
+  const Push = (e) => { // 上拉加载
+    setPageList(PageList.concat(e))
   }
 
   return (
     <view className='WuYeBaoXiu'>
-      <ScrollPage IsPullDown={IsPullDown} IsPullUp={IsPullUp} HasMore={HasNextPage} OnRefresh={OnRefresh} OnPullUp={OnPullUp}>
+      <ScrollPageRefresh ApiName={`getGongDanList`} ListName={`pagelist`} RequestUrlData={{ orgId: user.orgId }} RequestParams={{ type: 2 }} Refresh={Refresh} Push={Push}>
 
         {/* 大图 */}
         <view className='BigImg'>
           }
         </view>
 
-      </ScrollPage>
+      </ScrollPageRefresh>
     </view>
   )
 }

src/components/WuYeBaoXiu/index.less

 .WuYeBaoXiu {
   width: 100%;
+  height: 100%;
   position: relative;
   overflow: hidden;
 

src/components/WuYeGongGaoItem/index.css

+.WuYeGongGaoItem {
+  position: relative;
+  background: #fff;
+  padding: 40px 30px;
+}
+.WuYeGongGaoItem > .Title {
+  align-items: center;
+}
+.WuYeGongGaoItem > .Title > text {
+  font-size: 24px;
+  color: #999;
+  line-height: 40px;
+  white-space: nowrap;
+}
+.WuYeGongGaoItem > .Title > text:first-child {
+  font-size: 30px;
+  color: #333;
+  font-weight: bold;
+  margin-right: 20px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.WuYeGongGaoItem > .GaoItemContent {
+  position: relative;
+  overflow: hidden;
+  background: rgba(243, 88, 68, 0.08);
+  padding: 20px;
+  margin-top: 40px;
+}
+.WuYeGongGaoItem > .GaoItemContent > text {
+  font-size: 24px;
+  line-height: 38px;
+  color: #333;
+  display: block;
+}
+.WuYeGongGaoItem > .GaoItemContent > .flex-h {
+  align-items: center;
+  margin-top: 20px;
+  position: relative;
+  overflow: hidden;
+}
+.WuYeGongGaoItem > .GaoItemContent > .flex-h > view {
+  margin-left: 10px;
+  font-size: 0;
+  white-space: nowrap;
+}
+.WuYeGongGaoItem > .GaoItemContent > .flex-h > view:first-child {
+  margin-left: 0;
+}
+.WuYeGongGaoItem > .GaoItemContent > .flex-h > view text {
+  font-size: 24px;
+  line-height: 40px;
+  color: #999;
+  display: inline-block;
+  vertical-align: middle;
+}
+.WuYeGongGaoItem > .GaoItemContent > .flex-h > view text.iconfont {
+  color: #F35844;
+  font-size: 40px;
+}

src/components/WuYeGongGaoItem/index.jsx

-import React, { useState } from 'react'
+import React, { } from 'react'
 import Taro from '@tarojs/taro'
 import toolclass from '@/utils/toolclass.js'
 import { RichText } from '@tarojs/components'
       <view className='GaoItemContent'>
         <RichText nodes={Data.announcementContent}></RichText>
         <view className='flex-h'>
-          <text>{Data.createUser}</text>
-          <text>物业</text>
+          <view><text>{Data.createUser}</text></view>
+          <view><text>物业</text></view>
           <view className='flex-item'></view>
-          <text className='iconfont iconguankan'></text>
-          <text>{Data.viewCount}人观看</text>
+          <view><text className='iconfont iconguankan'></text></view>
+          <view><text>{Data.viewCount}人观看</text></view>
         </view>
       </view>
     </view>

src/components/WuYeGongGaoItem/index.less

       position: relative;
       overflow: hidden;
 
-      >text {
-        font-size: 24px;
-        line-height: 40px;
-        color: #999;
+      >view {
         margin-left: 10px;
+        font-size: 0;
+        white-space: nowrap;
 
         &:first-child {
           margin-left: 0;
         }
 
-        &.iconfont {
-          color: #F35844;
-          font-size: 40px;
+        text {
+          font-size: 24px;
+          line-height: 40px;
+          color: #999;
+          display: inline-block;
+          vertical-align: middle;
+
+          &.iconfont {
+            color: #F35844;
+            font-size: 40px;
+          }
         }
       }
     }

src/components/WuYeJiaoFei/index.css

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

src/components/WuYeJiaoFei/index.jsx

-import React, { useState, useEffect } from 'react'
-import request, { apis } from '@/utils/request'
-import { useModel } from '@/store'
+import React, { useState } from 'react'
 import WuYeJiaoFeiItem from '@/components/WuYeJiaoFeiItem/index'
-import ScrollPage from '@/components/ScrollPage/index'
+import ScrollPageRefresh from '@/components/ScrollPageRefresh/index'
 import '@/assets/css/reset.less'
 import '@/assets/css/iconfont.less'
 import './index.less'
 
 export default function WuYeJiaoFei () {
-
-  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 Refresh = (e) => { // 下拉刷新
+    setPageList(e)
   }
 
-  const OnPullUp = () => {
-    if (HasNextPage) {
-      setIsPullUp(true)
-      setPageNum(PageNum + 1)
-    }
+  const Push = (e) => { // 上拉加载
+    setPageList(PageList.concat(e))
   }
 
   return (
     <view className='WuYeJiaoFei'>
-      <ScrollPage IsPullDown={IsPullDown} IsPullUp={IsPullUp} HasMore={HasNextPage} OnRefresh={OnRefresh} OnPullUp={OnPullUp}>
+      <ScrollPageRefresh ApiName={`getJiaoFeiList`} ListName={`list`} RequestUrlData={{ type: 0 }} Refresh={Refresh} Push={Push}>
 
         {/* 大图 */}
         <view className='BigImg'>
           }
         </view>
 
-      </ScrollPage>
+      </ScrollPageRefresh>
     </view>
   )
 }

src/components/WuYeJiaoFei/index.less

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

src/pages/FuLi/JiFenGuiZe/index.css

   text-align: center;
   margin-top: 30px;
 }
+.JiFenGuiZe > .JiFenContent > view > .RuleList {
+  position: relative;
+  overflow: hidden;
+}
+.JiFenGuiZe > .JiFenContent > view > .RuleList > view {
+  align-items: flex-start;
+}
+.JiFenGuiZe > .JiFenContent > view > .RuleList > view > .flex-item {
+  position: relative;
+  overflow: hidden;
+}
+.JiFenGuiZe > .JiFenContent > view > .RuleList > view > .flex-item > text {
+  font-size: 28px;
+  color: #fff;
+  line-height: 40px;
+  display: block;
+}
+.JiFenGuiZe > .JiFenContent > view > .RuleList > view > view:last-child {
+  font-size: 28px;
+  color: #fff;
+  line-height: 40px;
+  text-align: right;
+  width: 100px;
+}

src/pages/FuLi/JiFenGuiZe/index.jsx

-import React, { useState } from 'react'
+import React, { useState, useEffect } from 'react'
 import CustomHeader from '@/components/CustomHeader/index'
+import request, { apis } from '@/utils/request'
 import '@/assets/css/reset.less'
 import '@/assets/css/iconfont.less'
 import './index.less'
 
-export default function JiFenGuiZe (props) {
+export default function JiFenGuiZe () {
+
+  const [RuleList, setRuleList] = useState([])
+
+  useEffect(() => {
+    Init()
+  }, [])
+
+  const Init = () => {
+    request({ ...apis.getJiFenRule, params: { pageNum: 1, pageSize: 1000 } }).then((res) => {
+      setRuleList(res.records || [])
+    })
+  }
 
   return (
     <view className='JiFenGuiZe'>
       <CustomHeader IsFixed={true} BgColor='none' Title='积分规则'></CustomHeader>
 
-      <view className='centerLabel JiFenContent'>
+      <view className='JiFenContent'>
         <view>
           <view className='Img'>
             <image mode='widthFix' src={null}></image>
           <text>1）积分仅兑换积分商城中的商品，不能折算现金；</text>
           <text>2）兑换商品中所要求的积分需达到要求方可兑换；</text>
           <text>3）兑换商品图片仅供参考，商品以实际领取为准。</text>
+          {
+            RuleList.length > 0 &&
+            <view className='RuleList'>
+              <view className='flex-h'>
+                <view className='flex-item'>
+                  <text>途径</text>
+                </view>
+                <view>分数</view>
+              </view>
+              {
+                RuleList.map((item, index) => (
+                  <view className='flex-h' key={`RuleList-${index}`}>
+                    <view className='flex-item'>
+                      <text>{item.remark}</text>
+                    </view>
+                    <view>{item.pointsAmount}</view>
+                  </view>
+                ))
+              }
+            </view>
+          }
         </view>
       </view>
     </view>

src/pages/FuLi/JiFenGuiZe/index.less

         text-align: center;
         margin-top: 30px;
       }
+
+      >.RuleList {
+        position: relative;
+        overflow: hidden;
+
+        >view {
+          align-items: flex-start;
+
+          >.flex-item {
+            position: relative;
+            overflow: hidden;
+
+            >text {
+              font-size: 28px;
+              color: #fff;
+              line-height: 40px;
+              display: block;
+            }
+          }
+
+          >view:last-child {
+            font-size: 28px;
+            color: #fff;
+            line-height: 40px;
+            text-align: right;
+            width: 100px;
+          }
+        }
+      }
     }
   }
 }

src/pages/FuLi/index.jsx

 import Taro from '@tarojs/taro'
 import NavHeader from '@/components/NavHeader/index'
 import PrizeListItem from '@/components/PrizeListItem/index'
+import ScrollPageRefresh from '@/components/ScrollPageRefresh/index'
+import { useModel } from '@/store'
 import '@/assets/css/reset.less'
 import '@/assets/css/iconfont.less'
 import './index.less'
 
-export default function FuLi (props) {
+export default function FuLi () {
 
-  const [PirzeList, setPirzeList] = useState(['', '', '', '', '', '', '', '', ''])
-  const [IsPull, setIsPull] = useState(false)
-  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 [PageList, setPageList] = useState([])
 
-  const OnRefresh = () => {
-    setIsPull(true)
-    window.setTimeout(() => {
-      setIsPull(false)
-    }, 1000)
+  const Refresh = (e) => { // 下拉刷新
+    setPageList(e)
+  }
+
+  const Push = (e) => { // 上拉加载
+    setPageList(PageList.concat(e))
   }
 
   return (
       {/* 正文 */}
       <view className='flex-item'>
         <view>
-          <scroll-view scroll-y='true' style='height: 100%;' refresher-enabled={true} onrefresherrefresh={OnRefresh} refresher-triggered={IsPull} refresher-background='none'>
+          <ScrollPageRefresh ApiName={`getGoodsList`} Refresh={Refresh} Push={Push}>
             <view className='FuLiContent'>
 
               {/* 用户面板 */}
                 <view>
                   <view className='Info flex-h'>
                     <view className='Icon'>
-                      <image mode='aspectFill' src={TestImg} class='centerLabel'></image>
+                      {
+                        user !== null &&
+                        <image mode='aspectFill' src={user.avatarurl} class='centerLabel'></image>
+                      }
                     </view>
                     <view className='flex-item'>
-                      <text>三十而已</text>
-                      <text>积分10</text>
+                      <text>{user === null ? '未登录' : user.nickname || '未授权用户信息'}</text>
+                      <text>积分{user === null ? '-' : user.points || 0}</text>
                     </view>
                     <text className='active'>签到</text>
                   </view>
               {/* 积分礼品列表 */}
               <view className='PirzeList'>
                 {
-                  PirzeList.map((item, index) => (
+                  PageList.map((item, index) => (
                     <view key={`PirzeListItem-${index}`}>
                       <view>
-                        <PrizeListItem></PrizeListItem>
+                        <PrizeListItem Data={item}></PrizeListItem>
                       </view>
                     </view>
                   ))
               </view>
 
             </view>
-          </scroll-view>
+          </ScrollPageRefresh>
         </view>
       </view>
 

src/pages/HuoDong/HuoDongDetail/index.jsx

 import React, { useState, useEffect } from 'react'
 import Taro, { Current } from '@tarojs/taro'
-import { RichText, Button } from '@tarojs/components'
+import { RichText } from '@tarojs/components'
 import request, { apis } from '@/utils/request'
 import { useModel } from '@/store'
 import GetUserPhone from '@/components/GetUserPhone/index'
 import '@/assets/css/iconfont.less'
 import './index.less'
 
-export default function HuoDongDetail (props) {
+export default function HuoDongDetail () {
 
   const { user } = useModel('user')
   const [DataLock, setDataLock] = useState(false)

src/pages/WuYe/BaoXiuQuYu/index.jsx

-import React, { Component } from 'react'
+import React, { useState } from 'react'
 import Taro from '@tarojs/taro'
-import '../../../assets/css/reset.less'
-import '../../../assets/css/iconfont.less'
+import '@/assets/css/reset.less'
+import '@/assets/css/iconfont.less'
 import './index.less'
 
-export default class WuYeBaoXiuQuYu extends Component {
-
-  state = {
-    TypeList: [
-      { icon: 'icongonggongquyu', name: '公共区域问题', desc: '如绿植被破坏、楼道灯不亮等问题', id: 1 },
-      { icon: 'iconfangwuzhiliang', name: '房屋质量问题', desc: '如家中墙体开裂、墙皮脱落等问题', id: 2 },
-      { icon: 'iconhuneisheshi', name: '户内设施问题', desc: '如通浴室下水道、保洁等可能需要收费的项目', id: 3 }
-    ]
-  }
-
-  componentWillMount () {
-  }
-
-  componentDidMount () { }
-
-  componentWillUnmount () { }
-
-  componentDidShow () { }
-
-  componentDidHide () { }
-
-  render () {
-    const { TypeList } = this.state
-    return (
-      <view className='WuYeBaoXiuQuYu'>
-        {
-          TypeList.map((item, index) => (
-            <view key={`WuYeBaoXiuQuYu-${index}`}>
-              <view onClick={() => { Taro.navigateTo({ url: `/pages/WuYe/TianJiaBaoXiu/index?type=${item.id}` }) }}>
-                <view>
-                  <text className={`iconfont ${item.icon}`}></text>
-                  <text>{item.name}</text>
-                </view>
-                <text>{item.desc}</text>
+export default function WuYeBaoXiuQuYu () {
+
+  const [TypeList] = useState([
+    { icon: 'icongonggongquyu', name: '公共区域问题', desc: '如绿植被破坏、楼道灯不亮等问题', id: 1 },
+    { icon: 'iconfangwuzhiliang', name: '房屋质量问题', desc: '如家中墙体开裂、墙皮脱落等问题', id: 2 },
+    { icon: 'iconhuneisheshi', name: '户内设施问题', desc: '如通浴室下水道、保洁等可能需要收费的项目', id: 3 }
+  ])
+
+  return (
+    <view className='WuYeBaoXiuQuYu'>
+      {
+        TypeList.map((item, index) => (
+          <view key={`WuYeBaoXiuQuYu-${index}`}>
+            <view onClick={() => { Taro.navigateTo({ url: `/pages/WuYe/TianJiaBaoXiu/index?type=${item.id}` }) }}>
+              <view>
+                <text className={`iconfont ${item.icon}`}></text>
+                <text>{item.name}</text>
               </view>
+              <text>{item.desc}</text>
             </view>
-          ))
-        }
-      </view>
-    )
-  }
+          </view>
+        ))
+      }
+    </view>
+  )
 }

src/pages/WuYe/TianJiaBaoXiu/index.jsx

 import React, { useState } from 'react'
 import Taro, { Current } from '@tarojs/taro'
 import { Input, Textarea } 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 WuYeTianJiaBaoXiu () {
 
+  const [Title, setTitle] = useState('')
+  const [Desc, setDesc] = useState('')
+  const [DataLock, setDataLock] = useState(false)
   const CurrnetBaoXiuType = Current.router.params.type
 
+  const TitleChange = (e) => {
+    setTitle(e.detail.value)
+  }
+
+  const DescChange = (e) => {
+    setDesc(e.detail.value)
+  }
+
+  const Send = () => {
+    if (DataLock) return
+    setDataLock(true)
+    request({
+      ...apis.AddGongDan,
+      data: {
+        ticketTitle: Title,
+        ticketContent: Desc,
+        type: 2,
+        repairType: CurrnetBaoXiuType - 0
+      }
+    }).then(() => {
+      setDataLock(false)
+    }).catch((res) => {
+      Taro.showToast({ title: res, icon: 'none' })
+      setDataLock(false)
+    })
+  }
+
   return (
     <view className='WuYeTianJiaBaoXiu'>
       <view className='Form'>
-        <Input placeholder='简述你的想法'></Input>
-        <Textarea placeholder='描述问题详情，以便我们更好的相处'></Textarea>
+        <Input placeholder='简述你的想法' onInput={TitleChange} value={Title}></Input>
+        <Textarea placeholder='描述问题详情，以便我们更好的相处' onInput={DescChange} value={Desc}></Textarea>
       </view>
       <view className='Photo'>
         <view className='Add'>
         </view>
       </view>
       <view className='Btn'>
-        <text>确认发送</text>
+        <text onClick={Send}>确认发送</text>
       </view>
     </view>
   )

src/utils/api.js

     method: 'get',
     url: `${prefix}/tickets/list/:orgId`
   },
+  AddGongDan: { // 添加工单
+    method: 'post',
+    url: `${prefix}/addtpTicket`
+  },
   getGongGaoList: { // 获取小区公告列表
     method: 'get',
     url: `${prefix}/announcements/:orgId`
     method: 'post',
     url: `${prefix}/activityDynamicEnlistAdd`
   },
+  getJiFenRule: { // 获取积分规则
+    method: 'get',
+    url: `${prefix}/tdPointsRules`
+  },
+  getGoodsList: { // 获取商品列表
+    method: 'get',
+    url: `${prefix}/goods`
+  },
   getNewsList: { // 获取资讯列表
     method: 'get',
     url: `${prefix}/taNews`