静态页面

src/app.config.js

@@ -1,6 +1,6 @@
 export default {
   pages: [
-    'pages/WuYe/TianJiaBaoXiu/index', // 物业-添加报修
+    'pages/WuYe/BaoXiuFeiYong/index', // 物业-报修费用
     'pages/ShouYe/index', // tab-首页
     'pages/ShouYe/HuoDong/index', // 首页-活动
     'pages/ShouYe/ZiXun/index', // 首页-资讯
@@ -9,6 +9,8 @@ export default {
     'pages/WuYe/FuWuDetail/index', // 物业-服务详情
     'pages/WuYe/GongGaoDetail/index', // 物业-公告详情
     'pages/WuYe/BaoXiuQuYu/index', // 物业-报修区域
+    'pages/WuYe/TianJiaBaoXiu/index', // 物业-添加报修
+    'pages/WuYe/BaoXiuDetail/index', // 物业-报修详情
 
     'pages/HuoDong/index', // tab-活动
 

src/components/WuYeBaoXiu/index.jsx

@@ -1,56 +1,43 @@
-import React, { Component } from 'react'
+import React, { useState } from 'react'
+import Taro from '@tarojs/taro'
 import WuYeBaoXiuItem from '../WuYeBaoXiuItem/index'
-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 WuYeBaoXiu extends Component {
+export default function WuYeBaoXiu (props) {
 
-  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'
-  }
+  const [PageList, setPageList] = useState(['', '', '', '', '', '', ''])
 
-  componentWillMount () { }
+  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')
 
-  componentDidMount () { }
+  return (
+    <view className='WuYeBaoXiu'>
 
-  componentWillUnmount () { }
-
-  componentDidShow () { }
-
-  componentDidHide () { }
-
-  render () {
-    const { TestImg, PageList } = this.state
-    return (
-      <view className='WuYeBaoXiu'>
-
-        {/* 大图 */}
-        <view className='BigImg'>
-          <image mode='aspectFill' src={TestImg} className='centerLabel'></image>
-        </view>
-
-        {/* 我要报修 */}
-        <view className='WoYaoBaoXiu'>
-          <view>
-            <text className='iconfont iconjia'></text>
-            <text>我要报修</text>
-          </view>
-        </view>
+      {/* 大图 */}
+      <view className='BigImg'>
+        <image mode='aspectFill' src={TestImg} className='centerLabel'></image>
+      </view>
 
-        {/* 报修列表 */}
-        <view className='List'>
-          {
-            PageList.map((item, index) => (
-              <view key={`WuYeBaoXiuItem-${index}`}>
-                <WuYeBaoXiuItem Data={item}></WuYeBaoXiuItem>
-              </view>
-            ))
-          }
+      {/* 我要报修 */}
+      <view className='WoYaoBaoXiu'>
+        <view onClick={() => { Taro.navigateTo({ url: `/pages/WuYe/BaoXiuQuYu/index` }) }}>
+          <text className='iconfont iconjia'></text>
+          <text>我要报修</text>
         </view>
+      </view>
 
+      {/* 报修列表 */}
+      <view className='List'>
+        {
+          PageList.map((item, index) => (
+            <view key={`WuYeBaoXiuItem-${index}`}>
+              <WuYeBaoXiuItem Data={{ ...item, id: index }}></WuYeBaoXiuItem>
+            </view>
+          ))
+        }
       </view>
-    )
-  }
+
+    </view>
+  )
 }

src/components/WuYeBaoXiuItem/index.jsx

@@ -1,48 +1,38 @@
-import React, { Component } from 'react'
-import '../../assets/css/reset.less'
-import '../../assets/css/iconfont.less'
+import React, { useState } from 'react'
+import Taro from '@tarojs/taro'
+import '@/assets/css/reset.less'
+import '@/assets/css/iconfont.less'
 import './index.less'
 
-export default class WuYeBaoXiuItem extends Component {
+export default function WuYeBaoXiuItem (props) {
 
-  state = {
+  const { Data } = props
 
+  const ItemClick = () => {
+    Taro.navigateTo({ url: `/pages/WuYe/BaoXiuDetail/index?id=${Data.id}` })
   }
 
-  componentWillMount () { }
-
-  componentDidMount () { }
-
-  componentWillUnmount () { }
-
-  componentDidShow () { }
-
-  componentDidHide () { }
-
-  render () {
-    const { } = this.state
-    return (
-      <view className='WuYeBaoXiuItem'>
-        <view className='Title flex-h'>
-          <text className='iconfont icongonggongquyu'></text>
-          <text className='flex-item'>公共区域问题</text>
-          <text className='Time'>2020/06/08 13:00</text>
-        </view>
-        <view className='Name flex-h'>
-          <text className='flex-item'>1栋3单元2楼-3楼走廊声控灯出现故障</text>
-          <text className='iconfont iconbianji'></text>
-        </view>
-        <view className='Detail flex-h'>
-          <view className='Line'><view></view></view>
-          <view className='flex-item'>
-            <view className='flex-h'>
-              <text className='flex-item'>正在处理</text>
-              <text className='Time'>2020/06/08 12:58</text>
-            </view>
-            <view className='Desc'>您的报修已经分配给物业处理人员<text className='Name'>郭培军</text>处理，联系方式<text className='Phone'>18266666666</text></view>
+  return (
+    <view className='WuYeBaoXiuItem' onClick={ItemClick}>
+      <view className='Title flex-h'>
+        <text className='iconfont icongonggongquyu'></text>
+        <text className='flex-item'>公共区域问题</text>
+        <text className='Time'>2020/06/08 13:00</text>
+      </view>
+      <view className='Name flex-h'>
+        <text className='flex-item'>1栋3单元2楼-3楼走廊声控灯出现故障</text>
+        <text className='iconfont iconbianji'></text>
+      </view>
+      <view className='Detail flex-h'>
+        <view className='Line'><view></view></view>
+        <view className='flex-item'>
+          <view className='flex-h'>
+            <text className='flex-item'>正在处理</text>
+            <text className='Time'>2020/06/08 12:58</text>
           </view>
+          <view className='Desc'>您的报修已经分配给物业处理人员<text className='Name'>郭培军</text>处理，联系方式<text className='Phone'>18266666666</text></view>
         </view>
       </view>
-    )
-  }
+    </view>
+  )
 }

src/pages/WoDe/index.jsx

@@ -1,101 +1,85 @@
-import React, { Component } from 'react'
+import React, { useState } from 'react'
 import NavHeader from '../../components/NavHeader/index'
 import '../../assets/css/reset.less'
 import '../../assets/css/iconfont.less'
 import './index.less'
 
-export default class WoDe extends Component {
+export default function WoDe (props) {
 
-  state = {
-    IsPull: false,
-    UserTab: [
-      { icon: 'iconrenzheng1', name: '业主认证', id: 1 },
-      { icon: 'iconjifenguize', name: '积分明细', id: 2 },
-      { icon: 'iconjiaofei', name: '物业缴费', id: 3 },
-      { icon: 'iconfuwu1', name: '物业服务', id: 4 }
-    ],
-    MoreUserTab: [
-      { icon: 'iconerweima', name: '推荐二维码', id: 5 },
-      { icon: 'iconfenxiang', name: '推荐分享', id: 6 },
-      { icon: 'iconhuodong', name: '参与活动', id: 7 }
-    ]
-  }
-
-  componentWillMount () { }
-
-  componentDidMount () { }
-
-  componentWillUnmount () { }
+  const [IsPull, setIsPull] = useState(false)
 
-  componentDidShow () { }
+  const [UserTab, setUserTab] = useState([
+    { icon: 'iconrenzheng1', name: '业主认证', id: 1 },
+    { icon: 'iconjifenguize', name: '积分明细', id: 2 },
+    { icon: 'iconjiaofei', name: '物业缴费', id: 3 },
+    { icon: 'iconfuwu1', name: '物业服务', id: 4 }
+  ])
 
-  componentDidHide () { }
+  const [MoreUserTab, setMoreUserTab] = useState([
+    { icon: 'iconerweima', name: '推荐二维码', id: 5 },
+    { icon: 'iconfenxiang', name: '推荐分享', id: 6 },
+    { icon: 'iconhuodong', name: '参与活动', id: 7 }
+  ])
 
-  OnRefresh () { // 页面下拉刷新
-    this.setState({
-      IsPull: true
-    }, () => {
-      window.setTimeout(() => {
-        this.setState({
-          IsPull: false
-        })
-      }, 1000)
-    })
+  const OnRefresh = () => { // 页面下拉刷新
+    setIsPull(true)
+    
+    const t = setTimeout(() => {
+      setIsPull(false)
+      clearTimeout(t)
+    }, 1000)
   }
 
-  render () {
-    const { IsPull, UserTab, MoreUserTab } = this.state
-    return (
-      <view className='WoDe'>
-        <NavHeader BgColor='none' Title='我的' IsFixed={true}></NavHeader>
-        <scroll-view scroll-y='true' style='height: 100%;' refresher-enabled={true} onrefresherrefresh={this.OnRefresh.bind(this)} refresher-triggered={IsPull} refresher-background='#F35844'>
-          <view className='WoDeContent'>
+  return (
+    <view className='WoDe'>
+      <NavHeader BgColor='none' Title='我的' IsFixed={true}></NavHeader>
+      <scroll-view scroll-y='true' style='height: 100%;' refresher-enabled={true} onrefresherrefresh={OnRefresh} refresher-triggered={IsPull} refresher-background='#F35844'>
+        <view className='WoDeContent'>
 
-            {/* 顶部背景图 */}
-            <view className='TopBg'>
-              <view className='ColorBg'></view>
-              <view className='UserInfo flex-h'>
-                <view className='Icon'>
-                  <image mode='aspectFill' src={null} class='centerLabel'></image>
-                </view>
-                <view className='flex-item'>
-                  <text>徐慧慧</text>
-                  <text>13613949434</text>
-                </view>
-                <text>签到</text>
+          {/* 顶部背景图 */}
+          <view className='TopBg'>
+            <view className='ColorBg'></view>
+            <view className='UserInfo flex-h'>
+              <view className='Icon'>
+                <image mode='aspectFill' src={null} class='centerLabel'></image>
+              </view>
+              <view className='flex-item'>
+                <text>徐慧慧</text>
+                <text>13613949434</text>
               </view>
+              <text>签到</text>
             </view>
+          </view>
 
-            {/* 用户选项 */}
-            <view className='UserTab'>
-              {
-                UserTab.map((item, index) => (
-                  <view key={`UserTab-${index}`} className='flex-h'>
-                    <text className={`iconfont ${item.icon}`}></text>
-                    <view className='flex-h flex-item'>
-                      <text className='flex-item'>{item.name}</text>
-                      <text className='iconfont iconjiantouright'></text>
-                    </view>
+          {/* 用户选项 */}
+          <view className='UserTab'>
+            {
+              UserTab.map((item, index) => (
+                <view key={`UserTab-${index}`} className='flex-h'>
+                  <text className={`iconfont ${item.icon}`}></text>
+                  <view className='flex-h flex-item'>
+                    <text className='flex-item'>{item.name}</text>
+                    <text className='iconfont iconjiantouright'></text>
                   </view>
-                ))
-              }
-              <view className='Line'></view>
-              {
-                MoreUserTab.map((item, index) => (
-                  <view key={`UserTab-${index}`} className='flex-h'>
-                    <text className={`iconfont ${item.icon}`}></text>
-                    <view className='flex-h flex-item'>
-                      <text className='flex-item'>{item.name}</text>
-                      <text className='iconfont iconjiantouright'></text>
-                    </view>
+                </view>
+              ))
+            }
+            <view className='Line'></view>
+            {
+              MoreUserTab.map((item, index) => (
+                <view key={`UserTab-${index}`} className='flex-h'>
+                  <text className={`iconfont ${item.icon}`}></text>
+                  <view className='flex-h flex-item'>
+                    <text className='flex-item'>{item.name}</text>
+                    <text className='iconfont iconjiantouright'></text>
                   </view>
-                ))
-              }
-            </view>
-
+                </view>
+              ))
+            }
           </view>
-        </scroll-view>
-      </view>
-    )
-  }
+
+        </view>
+      </scroll-view>
+    </view>
+  )
 }

src/pages/WuYe/BaoXiuDetail/index.config.js

@@ -0,0 +1,3 @@
+export default {
+  navigationBarTitleText: '报修详情'
+}

src/pages/WuYe/BaoXiuDetail/index.css

@@ -0,0 +1,173 @@
+.BaoXiuDetail {
+  width: 100%;
+  min-height: 100%;
+  position: relative;
+  background: #f8f8f8;
+}
+.BaoXiuDetail > .TopLine {
+  width: 100%;
+  height: 20px;
+  background-color: #f8f8f8;
+  background: #f8f8f8;
+}
+.BaoXiuDetail > .TopInfo {
+  padding: 0 30px;
+  background: #fff;
+  position: relative;
+  overflow: hidden;
+}
+.BaoXiuDetail > .TopInfo > .flex-h {
+  align-items: center;
+  border-top: 2px solid rgba(0, 0, 0, 0.08);
+}
+.BaoXiuDetail > .TopInfo > .flex-h:first-child {
+  border-top: none;
+}
+.BaoXiuDetail > .TopInfo > .flex-h:first-child > text:first-child {
+  color: #333;
+  font-weight: bold;
+  font-size: 32px;
+}
+.BaoXiuDetail > .TopInfo > .flex-h > text {
+  font-size: 28px;
+  color: #999;
+  line-height: 98px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.BaoXiuDetail > .TopInfo > .flex-h > text:first-child {
+  margin-right: 20px;
+}
+.BaoXiuDetail > .Detail {
+  padding: 0 30px;
+  background: #fff;
+  position: relative;
+  overflow: hidden;
+  margin-top: 20px;
+  padding-bottom: 40px;
+}
+.BaoXiuDetail > .Detail > text {
+  display: block;
+  width: 100%;
+  font-size: 30px;
+  color: #333;
+  font-weight: bold;
+  line-height: 98px;
+  border-bottom: 2px solid rgba(0, 0, 0, 0.08);
+}
+.BaoXiuDetail > .Detail > .flex-h {
+  margin-top: 40px;
+  margin-bottom: 40px;
+}
+.BaoXiuDetail > .Detail > .flex-h > .Line {
+  width: 50px;
+  position: relative;
+  overflow: visible;
+  border-left: 2px dashed #F35844;
+}
+.BaoXiuDetail > .Detail > .flex-h > .Line > view {
+  width: 14px;
+  height: 14px;
+  background: #F35844;
+  border-radius: 100%;
+  position: absolute;
+  left: -8px;
+  top: 30px;
+}
+.BaoXiuDetail > .Detail > .flex-h > .flex-item {
+  position: relative;
+  overflow: visible;
+  background: rgba(243, 88, 68, 0.08);
+  padding: 20px;
+}
+.BaoXiuDetail > .Detail > .flex-h > .flex-item::after {
+  content: '';
+  width: 0;
+  height: 0;
+  display: block;
+  position: absolute;
+  left: -40px;
+  top: 16px;
+  border-color: transparent rgba(243, 88, 68, 0.08) transparent transparent;
+  border-style: solid dashed solid solid;
+  border-width: 20px;
+}
+.BaoXiuDetail > .Detail > .flex-h > .flex-item > view {
+  width: 100%;
+  position: relative;
+  overflow: hidden;
+}
+.BaoXiuDetail > .Detail > .flex-h > .flex-item > view > .StepList {
+  position: relative;
+  overflow: hidden;
+  margin-bottom: 40px;
+}
+.BaoXiuDetail > .Detail > .flex-h > .flex-item > view > .StepList > .Title {
+  align-items: center;
+}
+.BaoXiuDetail > .Detail > .flex-h > .flex-item > view > .StepList > .Title > text {
+  font-size: 24px;
+  color: #999;
+  line-height: 40px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.BaoXiuDetail > .Detail > .flex-h > .flex-item > view > .StepList > .Title > text.Red {
+  color: #F35844;
+}
+.BaoXiuDetail > .Detail > .flex-h > .flex-item > view > .StepList > .Title > text.Green {
+  color: #14DC05;
+}
+.BaoXiuDetail > .Detail > .flex-h > .flex-item > view > .StepList > .Title > text.Blue {
+  color: #77A5F0;
+}
+.BaoXiuDetail > .Detail > .flex-h > .flex-item > view > .StepList > .Text {
+  font-size: 24px;
+  color: #333;
+  line-height: 40px;
+  margin-top: 10px;
+}
+.BaoXiuDetail > .Detail > .flex-h > .flex-item > view > .StepList > .Text > text.Blue {
+  color: #77A5F0;
+}
+.BaoXiuDetail > .Detail > .flex-h > .flex-item > view > .StepList > .Text > text.Red {
+  color: #F35844;
+  font-size: 34px;
+}
+.BaoXiuDetail > .Detail > .flex-h > .flex-item > view > .StepList > .ImgList {
+  font-size: 0;
+}
+.BaoXiuDetail > .Detail > .flex-h > .flex-item > view > .StepList > .ImgList > view {
+  display: inline-block;
+  vertical-align: middle;
+  width: 136px;
+  height: 136px;
+  position: relative;
+  overflow: hidden;
+  margin-top: 12px;
+  margin-right: 12px;
+  background: #f8f8f8;
+}
+.BaoXiuDetail > .Detail > .BottomBtn {
+  position: relative;
+  overflow: hidden;
+  margin-top: 30px;
+}
+.BaoXiuDetail > .Detail > .BottomBtn.active > text {
+  color: #fff;
+  background: #F35844;
+}
+.BaoXiuDetail > .Detail > .BottomBtn > text {
+  width: 100%;
+  display: block;
+  text-align: center;
+  font-size: 34px;
+  line-height: 98px;
+  border-radius: 98px;
+  color: #F35844;
+  background: #fff;
+  border: 2px solid #F35844;
+  box-sizing: border-box;
+}

src/pages/WuYe/BaoXiuDetail/index.jsx

@@ -0,0 +1,78 @@
+import React, { useState } from 'react'
+import Taro, { Current } from '@tarojs/taro'
+import '@/assets/css/reset.less'
+import '@/assets/css/iconfont.less'
+import './index.less'
+
+export default function BaoXiuDetail () {
+
+  const CurrnetBaoXiuId = Current.router.params.id
+
+  return (
+    <view className='BaoXiuDetail'>
+
+      <view className='TopLine'></view>
+
+      {/* 概况 */}
+      <view className='TopInfo'>
+        <view className='flex-h'>
+          <text className='flex-item'>1栋3单元2楼-3楼走廊声控灯已坏</text>
+          <text className='iconfont iconjiantouright'></text>
+        </view>
+        <view className='flex-h'>
+          <text className='flex-item'>报修单号</text>
+          <text>201810120010</text>
+        </view>
+        <view className='flex-h'>
+          <text className='flex-item'>报修时间</text>
+          <text>2018-10-12  18:00</text>
+        </view>
+      </view>
+
+      {/* 详情 */}
+      <view className='Detail'>
+        <text>处理进度</text>
+        <view className='flex-h'>
+          <view className='Line'><view></view></view>
+          <view className='flex-item'>
+            <view>
+              <view className='StepList'>
+                <view className='Title flex-h'>
+                  <text className='flex-item Red'>待分配</text>
+                  <text>12:58</text>
+                </view>
+                <view className='Text'>您的报修正在分配物业处理人员，若长时间无人处理，请联系物业。<text className='Blue'>物业电话薄</text><text className='Blue iconfont iconjiantouright'></text></view>
+                <view className='ImgList'>
+                  <view></view>
+                  <view></view>
+                  <view></view>
+                  <view></view>
+                  <view></view>
+                  <view></view>
+                </view>
+              </view>
+              <view className='StepList'>
+                <view className='Title flex-h'>
+                  <text className='flex-item'>待分配</text>
+                  <text>12:58</text>
+                </view>
+                <view className='Text'>经评估，您本次报修产生费用<text className='Red'>150</text>元</view>
+              </view>
+            </view>
+          </view>
+        </view>
+
+        {/* 更多操作 */}
+        <view className='BottomBtn active'>
+          <text onClick={() => { Taro.navigateTo({ url: `/pages/WuYe/BaoXiuFeiYong/index?id=${CurrnetBaoXiuId}` }) }}>费用详情</text>
+        </view>
+
+        {/* 更多操作 */}
+        <view className='BottomBtn'>
+          <text>与物业沟通</text>
+        </view>
+      </view>
+
+    </view>
+  )
+}

src/pages/WuYe/BaoXiuDetail/index.less

@@ -0,0 +1,209 @@
+.BaoXiuDetail {
+  width: 100%;
+  min-height: 100%;
+  position: relative;
+  background: #f8f8f8;
+
+  >.TopLine {
+    width: 100%;
+    height: 20px;
+    background-color: #f8f8f8;
+    background: #f8f8f8;
+  }
+
+  >.TopInfo {
+    padding: 0 30px;
+    background: #fff;
+    position: relative;
+    overflow: hidden;
+
+    >.flex-h {
+      align-items: center;
+      border-top: 2px solid rgba(0, 0, 0, 0.08);
+
+      &:first-child {
+        border-top: none;
+
+        >text {
+          &:first-child {
+            color: #333;
+            font-weight: bold;
+            font-size: 32px;
+          }
+        }
+      }
+
+      >text {
+        font-size: 28px;
+        color: #999;
+        line-height: 98px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+
+        &:first-child {
+          margin-right: 20px;
+        }
+      }
+    }
+  }
+
+  >.Detail {
+    padding: 0 30px;
+    background: #fff;
+    position: relative;
+    overflow: hidden;
+    margin-top: 20px;
+    padding-bottom: 40px;
+
+    >text {
+      display: block;
+      width: 100%;
+      font-size: 30px;
+      color: #333;
+      font-weight: bold;
+      line-height: 98px;
+      border-bottom: 2px solid rgba(0, 0, 0, 0.08);
+    }
+
+    >.flex-h {
+      margin-top: 40px;
+      margin-bottom: 40px;
+
+      >.Line {
+        width: 50px;
+        position: relative;
+        overflow: visible;
+        border-left: 2px dashed #F35844;
+
+        >view {
+          width: 14px;
+          height: 14px;
+          background: #F35844;
+          border-radius: 100%;
+          position: absolute;
+          left: -8px;
+          top: 30px;
+        }
+      }
+
+      >.flex-item {
+        position: relative;
+        overflow: visible;
+        background: rgba(243, 88, 68, 0.08);
+        padding: 20px;
+
+        &::after {
+          content: '';
+          width: 0;
+          height: 0;
+          display: block;
+          position: absolute;
+          left: -40px;
+          top: 16px;
+          border-color: transparent rgba(243, 88, 68, 0.08) transparent transparent;
+          border-style: solid dashed solid solid;
+          border-width: 20px;
+        }
+
+        >view {
+          width: 100%;
+          position: relative;
+          overflow: hidden;
+
+          >.StepList {
+            position: relative;
+            overflow: hidden;
+            margin-bottom: 40px;
+
+            >.Title {
+              align-items: center;
+
+              >text {
+                font-size: 24px;
+                color: #999;
+                line-height: 40px;
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+
+                &.Red {
+                  color: #F35844;
+                }
+
+                &.Green {
+                  color: #14DC05;
+                }
+
+                &.Blue {
+                  color: #77A5F0;
+                }
+              }
+            }
+
+            >.Text {
+              font-size: 24px;
+              color: #333;
+              line-height: 40px;
+              margin-top: 10px;
+
+              >text {
+                &.Blue {
+                  color: #77A5F0;
+                }
+
+                &.Red {
+                  color: #F35844;
+                  font-size: 34px;
+                }
+              }
+            }
+
+            >.ImgList {
+              font-size: 0;
+
+              >view {
+                display: inline-block;
+                vertical-align: middle;
+                width: 136px;
+                height: 136px;
+                position: relative;
+                overflow: hidden;
+                margin-top: 12px;
+                margin-right: 12px;
+                background: #f8f8f8;
+              }
+            }
+          }
+        }
+
+      }
+    }
+
+    >.BottomBtn {
+      position: relative;
+      overflow: hidden;
+      margin-top: 30px;
+
+      &.active {
+        >text {
+          color: #fff;
+          background: #F35844;
+        }
+      }
+
+      >text {
+        width: 100%;
+        display: block;
+        text-align: center;
+        font-size: 34px;
+        line-height: 98px;
+        border-radius: 98px;
+        color: #F35844;
+        background: #fff;
+        border: 2px solid #F35844;
+        box-sizing: border-box;
+      }
+    }
+  }
+}

src/pages/WuYe/BaoXiuFeiYong/index.config.js

@@ -0,0 +1,3 @@
+export default {
+  navigationBarTitleText: '报修费用'
+}

src/pages/WuYe/BaoXiuFeiYong/index.css

@@ -0,0 +1,73 @@
+.BaoXiuFeiYong {
+  width: 100%;
+  min-height: 100%;
+  position: relative;
+  background: #f8f8f8;
+}
+.BaoXiuFeiYong > .Info {
+  width: 100%;
+  min-height: 100vh;
+  position: relative;
+  overflow: hidden;
+  z-index: 1;
+}
+.BaoXiuFeiYong > .Info > .InfoBottom {
+  height: 264px;
+  position: relative;
+}
+.BaoXiuFeiYong > .Info > view {
+  position: relative;
+  overflow: hidden;
+  padding: 0 30px;
+  background: #fff;
+}
+.BaoXiuFeiYong > .Info > view > text {
+  display: block;
+  width: 100%;
+  border-bottom: 2px solid rgba(0, 0, 0, 0.08);
+  font-size: 30px;
+  font-weight: bold;
+  line-height: 40px;
+  padding: 30px 0;
+}
+.BaoXiuFeiYong > .Info > view > view {
+  align-items: center;
+  border-bottom: 2px solid rgba(0, 0, 0, 0.08);
+}
+.BaoXiuFeiYong > .Info > view > view:last-child {
+  border-bottom: none;
+}
+.BaoXiuFeiYong > .Info > view > view > text {
+  font-size: 24px;
+  color: #333;
+  line-height: 98px;
+}
+.BaoXiuFeiYong > .Info > view > view > text.Red {
+  color: #F35844;
+  font-size: 34px;
+  font-weight: bold;
+}
+.BaoXiuFeiYong > .BottomBtn {
+  position: relative;
+  overflow: hidden;
+  padding: 0 30px;
+  margin-top: -264px;
+  z-index: 2;
+}
+.BaoXiuFeiYong > .BottomBtn > text {
+  width: 100%;
+  display: block;
+  text-align: center;
+  font-size: 34px;
+  line-height: 98px;
+  border-radius: 98px;
+  color: #F35844;
+  background: #fff;
+  border: 2px solid #F35844;
+  box-sizing: border-box;
+  margin-bottom: 30px;
+}
+.BaoXiuFeiYong > .BottomBtn > text.active {
+  color: #fff;
+  background: #F35844;
+}

src/pages/WuYe/BaoXiuFeiYong/index.jsx

@@ -0,0 +1,49 @@
+import React, { useState } from 'react'
+import Taro, { Current } from '@tarojs/taro'
+import '@/assets/css/reset.less'
+import '@/assets/css/iconfont.less'
+import './index.less'
+
+export default function BaoXiuFeiYong () {
+
+  const CurrnetBaoXiuId = Current.router.params.id
+
+  return (
+    <view className='BaoXiuFeiYong'>
+      <view className='Info'>
+        <view>
+          <text>1栋3单元2楼-3楼走廊声控灯出现故障</text>
+          <view className='flex-h'>
+            <text className='flex-item'>报修类型</text>
+            <text>公共区域问题</text>
+          </view>
+          <view className='flex-h'>
+            <text className='flex-item'>报修单号</text>
+            <text>201810120020</text>
+          </view>
+          <view className='flex-h'>
+            <text className='flex-item'>报修时间</text>
+            <text>2018-10-12 18:00</text>
+          </view>
+          <view className='flex-h'>
+            <text className='flex-item'>报修进度</text>
+            <text>已修缮</text>
+          </view>
+          <view className='flex-h'>
+            <text className='flex-item'>处理人</text>
+            <text>郭培军</text>
+          </view>
+          <view className='flex-h'>
+            <text className='flex-item'>报修费用</text>
+            <text className='Red'>￥150</text>
+          </view>
+        </view>
+        <view className='InfoBottom'></view>
+      </view>
+      <view className='BottomBtn'>
+        <text className='active'>我要缴费</text>
+        <text>线下缴费</text>
+      </view>
+    </view>
+  )
+}

src/pages/WuYe/BaoXiuFeiYong/index.less

@@ -0,0 +1,84 @@
+.BaoXiuFeiYong {
+  width: 100%;
+  min-height: 100%;
+  position: relative;
+  background: #f8f8f8;
+
+  >.Info {
+    width: 100%;
+    min-height: 100vh;
+    position: relative;
+    overflow: hidden;
+    z-index: 1;
+
+    >.InfoBottom {
+      height: 264px;
+      position: relative;
+    }
+
+    >view {
+      position: relative;
+      overflow: hidden;
+      padding: 0 30px;
+      background: #fff;
+
+      >text {
+        display: block;
+        width: 100%;
+        border-bottom: 2px solid rgba(0, 0, 0, 0.08);
+        font-size: 30px;
+        font-weight: bold;
+        line-height: 40px;
+        padding: 30px 0;
+      }
+
+      >view {
+        align-items: center;
+        border-bottom: 2px solid rgba(0, 0, 0, 0.08);
+
+        &:last-child {
+          border-bottom: none;
+        }
+
+        >text {
+          font-size: 24px;
+          color: #333;
+          line-height: 98px;
+
+          &.Red {
+            color: #F35844;
+            font-size: 34px;
+            font-weight: bold;
+          }
+        }
+      }
+    }
+  }
+
+  >.BottomBtn {
+    position: relative;
+    overflow: hidden;
+    padding: 0 30px;
+    margin-top: -264px;
+    z-index: 2;
+
+    >text {
+      width: 100%;
+      display: block;
+      text-align: center;
+      font-size: 34px;
+      line-height: 98px;
+      border-radius: 98px;
+      color: #F35844;
+      background: #fff;
+      border: 2px solid #F35844;
+      box-sizing: border-box;
+      margin-bottom: 30px;
+
+      &.active {
+        color: #fff;
+        background: #F35844;
+      }
+    }
+  }
+}

src/pages/WuYe/TianJiaBaoXiu/index.css

@@ -4,4 +4,99 @@
   background: #f8f8f8;
   overflow: hidden;
   min-height: 100%;
+  padding-bottom: 160px;
+}
+.WuYeTianJiaBaoXiu > .Form {
+  position: relative;
+  overflow: hidden;
+  padding: 0 30px;
+  background-color: #fff;
+  padding-bottom: 30px;
+}
+.WuYeTianJiaBaoXiu > .Form > input {
+  width: 100%;
+  display: block;
+  font-size: 32px;
+  color: #333;
+  line-height: 98px;
+  height: 98px;
+  border-bottom: 2px solid rgba(0, 0, 0, 0.08);
+}
+.WuYeTianJiaBaoXiu > .Form > textarea {
+  display: block;
+  font-size: 28px;
+  color: #999;
+  line-height: 40px;
+  margin-top: 20px;
+  width: 100%;
+}
+.WuYeTianJiaBaoXiu > .Photo {
+  padding: 30px;
+  padding-bottom: 10px;
+  position: relative;
+  overflow: hidden;
+  margin-top: 30px;
+  background-color: #fff;
+  font-size: 0;
+}
+.WuYeTianJiaBaoXiu > .Photo > view {
+  display: inline-block;
+  vertical-align: middle;
+  width: 150px;
+  height: 150px;
+  position: relative;
+  overflow: hidden;
+  margin-right: 20px;
+  margin-bottom: 20px;
+}
+.WuYeTianJiaBaoXiu > .Photo > view.Add > view {
+  width: 100%;
+}
+.WuYeTianJiaBaoXiu > .Photo > view.Add > view > text {
+  display: block;
+  text-align: center;
+  width: 100%;
+  font-size: 28px;
+  color: #999;
+  line-height: 40px;
+}
+.WuYeTianJiaBaoXiu > .Photo > view.Add > view > text:first-child {
+  font-size: 60px;
+  line-height: 80px;
+}
+.WuYeTianJiaBaoXiu > .Photo > view.PhotoItem {
+  background-color: #f8f8f8;
+}
+.WuYeTianJiaBaoXiu > .Photo > view.PhotoItem > image {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  z-index: 1;
+}
+.WuYeTianJiaBaoXiu > .Photo > view.PhotoItem > text {
+  display: inline-block;
+  position: absolute;
+  z-index: 2;
+  right: 0px;
+  top: 0px;
+  font-size: 40px;
+  color: red;
+}
+.WuYeTianJiaBaoXiu > .Btn {
+  position: fixed;
+  left: 30px;
+  right: 30px;
+  z-index: 10;
+  overflow: hidden;
+  bottom: 30px;
+}
+.WuYeTianJiaBaoXiu > .Btn > text {
+  width: 100%;
+  display: block;
+  font-size: 34px;
+  color: #fff;
+  line-height: 98px;
+  text-align: center;
+  border-radius: 98px;
+  background-color: #F35844;
 }

src/pages/WuYe/TianJiaBaoXiu/index.jsx

@@ -1,30 +1,34 @@
-import React, { Component } from 'react'
-// import Taro from '@tarojs/taro'
-import '../../../assets/css/reset.less'
-import '../../../assets/css/iconfont.less'
+import React, { useState } from 'react'
+import Taro, { Current } from '@tarojs/taro'
+import { Input, Textarea } from '@tarojs/components'
+import '@/assets/css/reset.less'
+import '@/assets/css/iconfont.less'
 import './index.less'
 
-export default class WuYeTianJiaBaoXiu extends Component {
+export default function WuYeTianJiaBaoXiu () {
 
-  state = {
-  }
-
-  componentWillMount () {
-  }
-
-  componentDidMount () { }
-
-  componentWillUnmount () { }
-
-  componentDidShow () { }
-
-  componentDidHide () { }
-
-  render () {
-    return (
-      <view className='WuYeTianJiaBaoXiu'>
+  const CurrnetBaoXiuType = Current.router.params.type
 
+  return (
+    <view className='WuYeTianJiaBaoXiu'>
+      <view className='Form'>
+        <Input placeholder='简述你的想法'></Input>
+        <Textarea placeholder='描述问题详情，以便我们更好的相处'></Textarea>
+      </view>
+      <view className='Photo'>
+        <view className='Add'>
+          <view className='centerLabel'>
+            <text className='iconfont iconxiangji'></text>
+            <text>添加图片</text>
+          </view>
+        </view>
+        <view className='PhotoItem'>
+          <text className='iconfont iconshanchu'></text>
+        </view>
+      </view>
+      <view className='Btn'>
+        <text>确认发送</text>
       </view>
-    )
-  }
+    </view>
+  )
 }

src/pages/WuYe/TianJiaBaoXiu/index.less

@@ -4,4 +4,115 @@
   background: #f8f8f8;
   overflow: hidden;
   min-height: 100%;
+  padding-bottom: 160px;
+
+  >.Form {
+    position: relative;
+    overflow: hidden;
+    padding: 0 30px;
+    background-color: #fff;
+    padding-bottom: 30px;
+
+    >input {
+      width: 100%;
+      display: block;
+      font-size: 32px;
+      color: #333;
+      line-height: 98px;
+      height: 98px;
+      border-bottom: 2px solid rgba(0, 0, 0, 0.08);
+    }
+
+    >textarea {
+      display: block;
+      font-size: 28px;
+      color: #999;
+      line-height: 40px;
+      margin-top: 20px;
+      width: 100%;
+    }
+  }
+
+  >.Photo {
+    padding: 30px;
+    padding-bottom: 10px;
+    position: relative;
+    overflow: hidden;
+    margin-top: 30px;
+    background-color: #fff;
+    font-size: 0;
+
+    >view {
+      display: inline-block;
+      vertical-align: middle;
+      width: 150px;
+      height: 150px;
+      position: relative;
+      overflow: hidden;
+      margin-right: 20px;
+      margin-bottom: 20px;
+
+      &.Add {
+
+        >view {
+          width: 100%;
+
+          >text {
+            display: block;
+            text-align: center;
+            width: 100%;
+            font-size: 28px;
+            color: #999;
+            line-height: 40px;
+
+            &:first-child {
+              font-size: 60px;
+              line-height: 80px;
+            }
+          }
+        }
+      }
+
+      &.PhotoItem {
+        background-color: #f8f8f8;
+
+        >image {
+          width: 100%;
+          height: 100%;
+          position: relative;
+          z-index: 1;
+        }
+
+        >text {
+          display: inline-block;
+          position: absolute;
+          z-index: 2;
+          right: 0px;
+          top: 0px;
+          font-size: 40px;
+          color: red;
+        }
+      }
+    }
+  }
+
+  >.Btn {
+    position: fixed;
+    left: 30px;
+    right: 30px;
+    z-index: 10;
+    overflow: hidden;
+    bottom: 30px;
+
+    >text {
+      width: 100%;
+      display: block;
+      font-size: 34px;
+      color: #fff;
+      line-height: 98px;
+      text-align: center;
+      border-radius: 98px;
+      background-color: #F35844;
+    }
+  }
 }

src/pages/WuYe/index.jsx

@@ -1,12 +1,12 @@
 import React, { Component } from 'react'
-import TabPageCutNav from '../../components/TabPageCutNav/index'
-import NavHeader from '../../components/NavHeader/index'
-import WuYeGongGao from '../../components/WuYeGongGao/index'
-import WuYeFuWu from '../../components/WuYeFuWu/index'
-import WuYeBaoXiu from '../../components/WuYeBaoXiu/index'
-import WuYeJiaoFei from '../../components/WuYeJiaoFei/index'
-import '../../assets/css/reset.less'
-import '../../assets/css/iconfont.less'
+import TabPageCutNav from '@/components/TabPageCutNav/index'
+import NavHeader from '@/components/NavHeader/index'
+import WuYeGongGao from '@/components/WuYeGongGao/index'
+import WuYeFuWu from '@/components/WuYeFuWu/index'
+import WuYeBaoXiu from '@/components/WuYeBaoXiu/index'
+import WuYeJiaoFei from '@/components/WuYeJiaoFei/index'
+import '@/assets/css/reset.less'
+import '@/assets/css/iconfont.less'
 import './index.less'
 
 export default class WuYe extends Component {