yky-wx-components1/src/components/approveList.js

Taro实现微信小程序红包雨效果

import Taro, { Component } from '@tarojs/taro'
import { View, Button, Text , Swiper, SwiperItem} from '@tarojs/components'
import {AtButton,AtCard,AtTabs, AtTabsPane,AtList, AtListItem,AtTabBar,AtIcon,AtFloatLayout,AtTextarea,AtInput} from 'taro-ui'

import moment from 'moment'
import { get,set} from '../../global_data'
import './index.less'

class approveList extends Component {
  static options = {
    addGlobalClass: true
  }
  SectionCustom = {}
  config = {
    navigationBarTitleText: '审批',
    navigationBarBackgroundColor:'#F7F7F7',
    navigationBarTextStyle:'white',
    navigationStyle: "custom",


  }


  // 索引tab栏
  constructor () {
    super(...arguments)
    this.state = {
      current: 0,
      fixedTab:false,
      value: '',
      fuKuanReason:false,
      Beizhuvalue:'',
      EyeFlag:false,
      costInformationCurent:0,
    
      // sectionCustom: {}
    } 
  }
  refSectionCustom = (ref) => {
    this.SectionCustom = ref
  }
  componentWillReceiveProps (nextProps) {

  }

  componentWillUnmount () {
    
   }
   onLoad(options) {
    console.log(options,'ppp')
    // let item = JSON.parse(options.item)
    // this.setState({
    //   item
    // })
  }
  componentDidShow () { }

  componentDidHide () { }
  // nav-bar高度
  componentDidMount () {

  } 




     //关闭审批进程弹窗
     handleCloseApproveProcess(){
        this.props.onClose()
      }

         //处理审批进程节点的图标
          handleDealApproveProcessIcon(type,imgUrl){
       
            switch(type){
              case 'submit':
                return `${imgUrl}approvel/start.png`;
              case 'completed':
                return `${imgUrl}approvel/dot.png`;
              case 'turnback':
                return `${imgUrl}approvel/back.png`;
              case 'finished':
                return `${imgUrl}approvel/finish.png`;
              default:
                return '';        
            }
          }
      
  render () {
   console.log(this.props,this)
let {lengdingHistoryList,isShowApproveProcess ,imgUrl}=this.props
// 这是容错处理，以防乱传数据
if(!Array.isArray(lengdingHistoryList)){
    lengdingHistoryList=[]
}
    return (
      <View className='model-course'>
      <AtFloatLayout isOpened = {isShowApproveProcess} onClose={this.handleCloseApproveProcess.bind(this)} className='model-course'>
          <View className='course-title'>审批进程</View>
          <View className='course-con'>
            {
              lengdingHistoryList&&lengdingHistoryList.map(item =>{
                return (
                  <View className='course-list' key={item.id}>
                    <View>
                      <View className='l1'><Image src={this.handleDealApproveProcessIcon(item.type,imgUrl)} style="width:32rpx;height:32rpx;margin-right:16rpx" /><View>{item.assigneeName}</View><View>{item.activityName}</View></View>
                      <View className='l2'>意见:{item.memo}</View>
                    </View> 
                    
                    <View>
                      <View style={{ color: '#34C158' }}>{item.typeDesc}</View>
                      <View>{moment(item.endTime).format('YYYY-MM-DD HH:mm:ss')}</View>
                    </View>
                  </View>  
                )
              })
            }
         
          </View>
          <View className='approvelprocessBtn' onClick={this.handleCloseApproveProcess.bind(this)}><AtButton type='primary' full='true'>关闭</AtButton></View>
        </AtFloatLayout>
      </View>
      
    )
  }
}


export default approveList