静态页面

src/pages/FuLi/ShangPinDuiHuan/index.jsx

-import React, { useState } from 'react'
-import { Current } from '@tarojs/taro'
+import React, { useState, useEffect } from 'react'
+import Taro, { Current } from '@tarojs/taro'
+import request, { apis } from '@/utils/request'
+import { useModel } from '@/store'
 import { Input } from '@tarojs/components'
 import '@/assets/css/reset.less'
 import '@/assets/css/iconfont.less'
 import './index.less'
 
-export default function ShangPinDuiHuan (props) {
+export default function ShangPinDuiHuan () {
 
-  const CurrnetId = Current.router.params.id
+  const { user } = useModel('user')
+  const [CurrnetId] = useState(Current.router.params.id) // 当前id
+  const [GoodsDetail, setGoodsDetail] = useState(null) // 商品详情
+  const [DataLock, setDataLock] = useState(false) // 数据锁
+  const [Count, setCount] = useState(1) // 商品兑换数量
+
+  useEffect(() => {
+    Init()
+  }, [])
+
+  const Init = () => {
+    request({ ...apis.getGoodsDetail, args: { id: CurrnetId } }).then((res) => {
+      setGoodsDetail(res)
+    })
+  }
+
+  const CountChange = (e) => {
+    setCount(e.detail.value)
+  }
+
+  const Submit = () => { // 兑换商品
+    if (DataLock) return
+    setDataLock(true)
+    request({ ...apis.exchangeGoods, args: { id: CurrnetId } }).then(() => {
+      Taro.showToast({ title: `兑换成功`, icon: 'none' })
+      setDataLock(false)
+    }).catch((res) => {
+      Taro.showToast({ title: res, icon: 'none' })
+      setDataLock(false)
+    })
+  }
 
   return (
     <view className='ShangPinDuiHuan'>
       <view className='Info'>
         <view className='Item flex-h'>
           <view className='Img'>
-            <image mode='aspectFill' src={null} className='centerLabel'></image>
+            <image mode='aspectFill' src={GoodsDetail === null ? null : GoodsDetail.imgUrl} className='centerLabel'></image>
           </view>
           <view className='flex-item'>
-            <text>沙发垫欧式轻奢</text>
+            <text>{GoodsDetail === null ? '' : GoodsDetail.goodsName}</text>
             <view className='Num'>
-              <text>78</text>
+              <text>{GoodsDetail === null ? '' : GoodsDetail.totalNum}</text>
               <text>人已兑换</text>
             </view>
             <view className='flex-h'>
-              <text>80000</text>
+              <text>{GoodsDetail === null ? '' : GoodsDetail.pointPrice}</text>
               <text>积分</text>
               <view className='flex-item'></view>
               <view className='EditNum flex-h'>
-                <text className='iconfont iconjian'></text>
-                <Input></Input>
-                <text className='iconfont iconjia1'></text>
+                <text className='iconfont iconjian' onClick={() => { setCount(Count > 1 ? Count - 1 : 1) }}></text>
+                <Input type='number' value={Count} onInput={CountChange}></Input>
+                <text className='iconfont iconjia1' onClick={() => { setCount(Count - 0 + 1) }}></text>
               </view>
             </view>
           </view>
         <view className='InfoBottom'></view>
       </view>
       <view className='BottomBtn'>
-        <text className='active'>确认兑换</text>
+        <text className={DataLock ? '' : 'active'} onClick={Submit}>{DataLock ? '正在提交...' : '确认兑换'}</text>
       </view>
     </view>
   )

src/pages/FuLi/ShangPinXiangQing/index.jsx

-import React, { useState } from 'react'
+import React, { useState, useEffect } from 'react'
 import Taro, { Current } from '@tarojs/taro'
+import request, { apis } from '@/utils/request'
+import { useModel } from '@/store'
 import '@/assets/css/reset.less'
 import '@/assets/css/iconfont.less'
 import './index.less'
 
-export default function ShangPinXiangQing (props) {
+export default function ShangPinXiangQing () {
 
-  const CurrnetId = Current.router.params.id
+  const { user } = useModel('user')
+  const [CurrnetId] = useState(Current.router.params.id) // 当前id
+  const [GoodsDetail, setGoodsDetail] = useState(null) // 商品详情
+
+  useEffect(() => {
+    Init()
+  }, [])
+
+  const Init = () => {
+    request({ ...apis.getGoodsDetail, args: { id: CurrnetId } }).then((res) => {
+      setGoodsDetail(res)
+    })
+  }
 
   return (
     <view className='ShangPinXiangQing'>
       <view className='Info'>
         <view className='Img'>
-          <image mode='aspectFill' src={null} className='centerLabel'></image>
+          <image mode='aspectFill' src={GoodsDetail === null ? null : GoodsDetail.imgUrl} className='centerLabel'></image>
         </view>
         <view className='Title'>
-          <text>筷子置物架收纳盒</text>
+          <text>{GoodsDetail === null ? '' : GoodsDetail.goodsName}</text>
         </view>
         <view className='flex-h'>
-          <text>3000</text>
+          <text>{GoodsDetail === null ? '' : GoodsDetail.pointPrice}</text>
           <text className='flex-item'>积分</text>
           <text>剩余数量</text>
-          <text>22</text>
+          <text>{GoodsDetail === null ? '' : GoodsDetail.inventory}</text>
         </view>
       </view>
       <view className='Detail'>
         <view className='Title'>
           <view className='Line'></view>
           <text>产品详情</text>
+          <image mode='widthFix' src={GoodsDetail === null ? null : GoodsDetail.detailImgUrl} style={{width: `100%`}}></image>
         </view>
         <view className='BottomBtn'>
-          <text className='active' onClick={() => { Taro.navigateTo({ url: `/pages/FuLi/ShangPinDuiHuan/index` }) }}>立即兑换</text>
+          <text className='active' onClick={() => { Taro.navigateTo({ url: `/pages/FuLi/ShangPinDuiHuan/index?id=${CurrnetId}` }) }}>立即兑换</text>
         </view>
       </view>
     </view>

src/pages/ShouYe/index.jsx

   const [ShowAdvLayer, setShowAdvLayer] = useState(false)
   const [IsPull, setIsPull] = useState(false)
   const [OwnerList] = useState([
-    { icon: 'iconjiaofei', name: '物业缴费', id: 1 },
-    { icon: 'icontongzhi', name: '物业通知', id: 2 },
-    { icon: 'iconbaoxiu', name: '物业报修', id: 3 },
-    { icon: 'iconrenzheng', name: '业主认证', id: 4 }
+    { icon: 'iconjiaofei', name: '物业缴费', id: 1, router: '/pages/WuYe/index', isTab: true },
+    { icon: 'icontongzhi', name: '物业通知', id: 2, router: '/pages/WuYe/index', isTab: true },
+    { icon: 'iconbaoxiu', name: '物业报修', id: 3, router: '/pages/WuYe/index', isTab: true },
+    { icon: 'iconrenzheng', name: '业主认证', id: 4, router: '/pages/WoDe/YeZhuRenZheng/index', isTab: false }
   ])
   const [NavList] = useState([
     { icon: 'iconhuodong1', name: '活动', id: 1, router: '/pages/ShouYe/HuoDong/index', isTab: false },
     // console.log(111)
   }
 
+  const OwnerClick = (item) => {
+    return () => {
+      if (item.isTab) {
+        Taro.switchTab({ url: item.router })
+      } else {
+        Taro.navigateTo({ url: item.router })
+      }
+    }
+  }
+
   return (
     <Page>
       <view className='ShouYe flex-v'>
                       <view className='OwnerList flex-h'>
                         {
                           OwnerList.map((item, index) => (
-                            <view className='flex-item' key={`Owners-${index}`}>
+                            <view className='flex-item' key={`Owners-${index}`} onClick={OwnerClick(item)}>
                               <Text className={`iconfont ${item.icon}`}></Text>
                               <Text>{item.name}</Text>
                             </view>

src/pages/WoDe/YeZhuRenZheng/index.css

 .YeZhuRenZheng > .Form > .flex-h > input {
   font-size: 28px;
   color: #333;
+  line-height: 100px;
+  height: 100px;
 }
 .YeZhuRenZheng > .BottomBtn {
   padding: 0 30px;

src/pages/WoDe/YeZhuRenZheng/index.jsx

-import React, { useState } from 'react'
-import { Input } from '@tarojs/components'
+import React, { useState, useEffect } from 'react'
+import { Picker } from '@tarojs/components'
+import request, { apis } from '@/utils/request'
+import { useModel } from '@/store'
 import '@/assets/css/reset.less'
 import '@/assets/css/iconfont.less'
 import './index.less'
 
-export default function YeZhuRenZheng (props) {
+export default function YeZhuRenZheng () {
+
+  const { user } = useModel('user')
+  const [Level1Value] = useState(user.orgId)
+  const [Level2Value, setLevel2Value] = useState(null)
+  const [Level2List, setLevel2List] = useState([])
+  const [Level3Value, setLevel3Value] = useState(null)
+  const [Level3List, setLevel3List] = useState([])
+  const [Level4Value, setLevel4Value] = useState(null)
+  const [Level4List, setLevel4List] = useState([])
+  const [Level5Value, setLevel5Value] = useState(null)
+  const [Level5List, setLevel5List] = useState([])
+
+  useEffect(() => {
+    GetLevel2List()
+  }, [Level1Value])
+
+  useEffect(() => {
+    GetLevel3List()
+  }, [Level2Value])
+
+  const GetLevel2List = () => {
+    request({ ...apis.getRenZhengAddressList, params: { orgId: user.orgId } }).then((res) => {
+      setLevel2List(res || [])
+      if (res !== null && res.length > 0) {
+        setLevel2Value(0)
+      }
+    })
+  }
+
+  const GetLevel3List = () => {
+    if (Level2Value !== null) {
+      request({ ...apis.getRenZhengAddressList, params: { phaseId: Level2List[Level2Value].id } }).then((res) => {
+        setLevel3List(res || [])
+        if (res !== null && res.length > 0) {
+          setLevel3Value(0)
+        }
+      })
+    }
+  }
 
   return (
     <view className='YeZhuRenZheng'>
       <view className='Form'>
-        <view className='flex-h'>
+        <Picker mode='selector' value={Level1Value}></Picker>
+        {/* <view className='flex-h'>
           <text className='iconfont iconxingming'></text>
-          <Input className='flex-item' placeholder='请输入您的姓名'></Input>
+          <Input className='flex-item' placeholder='请输入您的姓名' value={FormData.RealName} onInput={(e) => { setFormData({ ...FormData, RealName: e.detail.value }) }}></Input>
         </view>
         <view className='flex-h'>
           <text className='iconfont iconshenfenzheng'></text>
-          <Input type='idcard' className='flex-item' placeholder='请输入您的身份证号码'></Input>
+          <Input type='idcard' className='flex-item' placeholder='请输入您的身份证号码' value={FormData.IdCard} onInput={(e) => { setFormData({ ...FormData, IdCard: e.detail.value }) }}></Input>
         </view>
         <view className='flex-h'>
           <text className='iconfont iconshouji'></text>
-          <Input type='idcard' className='flex-item' placeholder='请输入您的手机号码'></Input>
+          <Input type='idcard' className='flex-item' placeholder='请输入您的手机号码' value={FormData.Phone} onInput={(e) => { setFormData({ ...FormData, Phone: e.detail.value }) }}></Input>
         </view>
         <view className='flex-h'>
           <text className='iconfont iconyanzhengma'></text>
           <text className='active'>获取验证码</text>
         </view>
         <view className='flex-h'>
-          <text className='iconfont iconmenpaihao'></text>
-          <Input className='flex-item' placeholder='请输入小区楼栋单元门牌号'></Input>
+          <Input className='flex-item' placeholder='请输入小区名称' value={FormData.OrgName} onInput={(e) => { setFormData({ ...FormData, OrgName: e.detail.value }) }}></Input>
         </view>
+        <view className='flex-h'>
+          <Input className='flex-item' placeholder='请输入期号' value={FormData.Stages} onInput={(e) => { setFormData({ ...FormData, Stages: e.detail.value }) }}></Input>
+        </view>
+        <view className='flex-h'>
+          <Input className='flex-item' placeholder='请输入楼栋号' value={FormData.BuildingNum} onInput={(e) => { setFormData({ ...FormData, BuildingNum: e.detail.value }) }}></Input>
+        </view>
+        <view className='flex-h'>
+          <Input className='flex-item' placeholder='请输入单元号' value={FormData.UnitNum} onInput={(e) => { setFormData({ ...FormData, UnitNum: e.detail.value }) }}></Input>
+        </view>
+        <view className='flex-h'>
+          <Input className='flex-item' placeholder='请输入户号' value={FormData.RoomNum} onInput={(e) => { setFormData({ ...FormData, RoomNum: e.detail.value }) }}></Input>
+        </view> */}
       </view>
       <view className='BottomBtn'>
         <text>提交</text>

src/pages/WoDe/YeZhuRenZheng/index.less

       >input {
         font-size: 28px;
         color: #333;
+        line-height: 100px;
+        height: 100px;
       }
     }
   }

src/pages/WuYe/BaoXiuDetail/index.jsx

-import React, { useState } from 'react'
+import React, { useState, useEffect } from 'react'
 import Taro, { Current } from '@tarojs/taro'
+import request, { apis } from '@/utils/request'
+import { useModel } from '@/store'
 import '@/assets/css/reset.less'
 import '@/assets/css/iconfont.less'
 import './index.less'
 
 export default function BaoXiuDetail () {
 
+  const { user } = useModel('user')
   const CurrnetBaoXiuId = Current.router.params.id
+  const [DetailInfo, setDetailInfo] = useState(null)
+
+  useEffect(() => {
+    Init()
+  }, [])
+
+  const Init = () => {
+    request({ ...apis.getGongDanDetail, args: { orgId: user.orgId }, params: { ticketId: CurrnetBaoXiuId } }).then((res) => {
+      console.log(JSON.stringify(res))
+      setDetailInfo(res)
+    })
+  }
 
   return (
     <view className='BaoXiuDetail'>

src/pages/WuYe/BaoXiuQuYu/index.jsx

       {
         TypeList.map((item, index) => (
           <view key={`WuYeBaoXiuQuYu-${index}`}>
-            <view onClick={() => { Taro.navigateTo({ url: `/pages/WuYe/TianJiaBaoXiu/index?type=${item.id}` }) }}>
+            <view onClick={() => { Taro.redirectTo({ url: `/pages/WuYe/TianJiaBaoXiu/index?type=${item.id}` }) }}>
               <view>
                 <text className={`iconfont ${item.icon}`}></text>
                 <text>{item.name}</text>

src/pages/WuYe/GongGaoDetail/index.jsx

-import React, { Component } from 'react'
-import '../../../assets/css/reset.less'
-import '../../../assets/css/iconfont.less'
+import React, { useState, useEffect } from 'react'
+import Taro, { Current } from '@tarojs/taro'
+import request, { apis } from '@/utils/request'
+import { useModel } from '@/store'
+import '@/assets/css/reset.less'
+import '@/assets/css/iconfont.less'
 import './index.less'
 
-export default class WuYeGongGaoDetail extends Component {
+export default function WuYeGongGaoDetail () {
 
-  state = {
-  }
-
-  componentWillMount () {
-  }
+  const { user } = useModel('user')
+  const CurrnetId = Current.router.params.id
+  const [DetailInfo, setDetailInfo] = useState(null)
 
-  componentDidMount () { }
+  useEffect(() => {
+    Init()
+  }, [])
 
-  componentWillUnmount () { }
-  
-  onLoad (opt) {
-    console.log(opt.id)
+  const Init = () => {
+    request({ ...apis.getGongGaoDetail, args: { orgId: user.orgId }, params: { id: CurrnetId } }).then((res) => {
+      console.log(JSON.stringify(res))
+      setDetailInfo(res)
+    })
   }
 
-  componentDidShow () { }
+  return (
+    <view className='WuYeGongGaoDetail'>
 
-  componentDidHide () { }
-
-  render () {
-    return (
-      <view className='WuYeGongGaoDetail'>
-
-      </view>
-    )
-  }
+    </view>
+  )
 }

src/pages/WuYe/TianJiaBaoXiu/index.jsx

     setDesc(e.detail.value)
   }
 
-  const Send = () => {
-    if (DataLock) return
+  const CheckForm = () => { // 校验报修单
+    if (Title === '') {
+      Taro.showToast({ title: `报修标题不能为空`, icon: 'none' })
+      return false
+    }
+    if (Desc === '') {
+      Taro.showToast({ title: `报修描述不能为空`, icon: 'none' })
+      return false
+    }
+    return true
+  }
+
+  const Send = () => { // 提交报修
+    if (DataLock || !CheckForm()) return
     setDataLock(true)
     request({
       ...apis.AddGongDan,
         type: 2,
         repairType: CurrnetBaoXiuType - 0
       }
-    }).then(() => {
+    }).then((res) => {
+      Taro.showToast({ title: '报修提交成功', icon: 'none' })
+      Taro.redirectTo({ url: `/pages/WuYe/BaoXiuDetail/index?id=${res.id}` })
       setDataLock(false)
     }).catch((res) => {
       Taro.showToast({ title: res, icon: 'none' })

src/utils/api.js

 const prefix = `${HOST}/api/wx`
 
 const $api = {
+  getRenZhengAddressList: { // 获取认证业主房产选择联动列表
+    method: 'get',
+    url: `${prefix}/building/select/address`
+  },
   getJiaoFeiList: { // 获取缴费列表
     method: 'get',
     url: `${prefix}/bills/current_user/:type`
     method: 'post',
     url: `${prefix}/addtpTicket`
   },
+  getGongDanDetail: { // 获取工单详情
+    method: 'get',
+    url: `${prefix}/ticket/schedule/:orgId`
+  },
   getGongGaoList: { // 获取小区公告列表
     method: 'get',
     url: `${prefix}/announcements/:orgId`
   },
+  getGongGaoDetail: { // 获取小区公告详情
+    method: 'get',
+    url: `${prefix}/announcement/:orgId`
+  },
   getUserPhone: { // 获取用户手机号
     method: 'post',
     url: `${prefix}/userPhone`
     method: 'get',
     url: `${prefix}/goods`
   },
+  getGoodsDetail: { // 获取商品详情
+    method: 'get',
+    url: `${prefix}/goods/:id`
+  },
+  exchangeGoods: { // 兑换商品
+    method: 'post',
+    url: `${prefix}/goods/exchange/:id`
+  },
   getNewsList: { // 获取资讯列表
     method: 'get',
     url: `${prefix}/taNews`