miniapp/src/pages/WuYe/BaoXiuFeiYong/index.jsx

import React, { useState } from 'react'
import Taro, { Current } from '@tarojs/taro'
import SlidePopup from '@/components/SlidePopup/index'
import UploadImg from '@/components/UploadImg/index'
import '@/assets/css/reset.less'
import '@/assets/css/iconfont.less'
import './index.less'

export default function BaoXiuFeiYong () {

  const [ShowPopup, setShowPopup] = useState(false)
  const [PopupType, setPopupType] = useState(0)
  const CurrnetBaoXiuId = Current.router.params.id

  const SlidePopupClose = () => {
    setShowPopup(false)
  }

  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' onClick={() => { setPopupType(1); setShowPopup(true) }}>我要缴费</text>
        <text onClick={() => { setPopupType(2); setShowPopup(true) }}>线下缴费</text>
      </view>

      {/* 弹窗 */}
      <SlidePopup Close={SlidePopupClose} Show={ShowPopup}>

        {/* 线上缴费 */}
        {
          PopupType - 0 === 1 &&
          <view className='JiaoFeiPopup XianShang'>
            <view className='Price'>立即支付<text>150</text>元</view>
            <view className='flex-h'>
              <text className='iconfont iconweixinzhifu'></text>
              <text className='flex-item'>微信支付</text>
              <text className='iconfont icongou'></text>
            </view>
            <view className='Btn'>
              <text>去付款</text>
            </view>
          </view>
        }

        {/* 线下缴费 */}
        {
          PopupType - 0 === 2 &&
          <view className='JiaoFeiPopup XianXia'>
            <text>上传线下支付凭证</text>
            <view className='UploadContainer'>
              <UploadImg></UploadImg>
            </view>
          </view>
        }

      </SlidePopup>

    </view>
  )
}