yky-wx-components1/src/components/account.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 { imgUrl, judgeEmpty, exportBaseUrl, hidebankCard, formatBankNumber,encrypt,toThousands, CZBANK, openPDF } from '../utils/utils'
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 () {

  } 




   
     // 选择显示或者隐藏银行卡号
     chooseEye=()=>{
      if(this.state.EyeFlag==false){
           this.setState({
        EyeFlag:true
      })
      }else if(this.state.EyeFlag==true){
        this.setState({
          EyeFlag:false
        })
      }
   
    }
      
  render () {
   console.log(this.props,this)
   const noInfo ='---'
let {imgUrl,accountObj,accountArr}=this.props
let shouObj=accountArr&&accountArr[0]?accountArr[0]:{}
let fuObj=accountArr&&accountArr[1]?accountArr[1]:{}

    return (
      <View >
                 <AtCard className='bank-card' id='bank-card'>  
            <View className='at-article__h3' onClick={this.chooseEye}>账户信息<Image src={this.state.EyeFlag==false?`${imgUrl}eye_open.svg`:`${imgUrl}eye_close.svg`} style="width:36rpx;height:32rpx" /></View>
            <Swiper
              className='test-h'
              vertical={false}
              circular={false}
              indicatorDots={false}
              autoplay={false}
              displayMultipleItems='1.1'
              >
      
              <SwiperItem>
                <View className='bank-list'>
                 <View className='bank-list-t1'>
                  <View><Image src={accountObj && accountObj[shouObj.bankCode] ? `${imgUrl}bankLogo/${accountObj && accountObj[shouObj.bankCode]}_bankIcon.svg` : `${imgUrl}bankLogo/default_bankIcon.svg`} style="width:42rpx;height:42rpx" />{accountObj && accountObj[shouObj.bankName]}</View><View>{accountObj && accountObj[shouObj.openBankName] ? accountObj[shouObj.openBankName] : noInfo}</View>
                 </View>
                 <View className='bank-list-t2'>{this.state.EyeFlag==false?accountObj && accountObj[shouObj.accNumber] ? formatBankNumber(accountObj[shouObj.accNumber]) : noInfo:accountObj && accountObj[shouObj.accNumber] ? accountObj[shouObj.accNumber] : noInfo}</View>
                 <View className='bank-list-t3'>{shouObj.title?shouObj.title:'账户名'}<View>{accountObj && accountObj[shouObj.accName] ? accountObj[shouObj.accName] : noInfo}</View></View>
                 <View className='bank-list-t4'>{shouObj.botTitle?shouObj.botTitle:'收款账户信息'}</View>
                 {/* <View className='edit'></View> */}
                </View>
              </SwiperItem>
              <SwiperItem>
              <View className='bank-list bank-list-notbg'>
                 <View className='bank-list-t1'>
                  <View><Image src={accountObj && accountObj[fuObj.bankCode] ? `${imgUrl}bankLogo/${accountObj && accountObj[fuObj.bankCode]}_bankIcon.svg` : `${imgUrl}bankLogo/default_bankIcon.svg`} style="width:42rpx;height:42rpx" />{accountObj && accountObj[fuObj.bankName] ? accountObj[fuObj.bankName] : noInfo}</View><View>{accountObj && accountObj[fuObj.openBankName] ? accountObj[fuObj.openBankName] : noInfo}</View>
                 </View>
                 <View className='bank-list-t2'>{this.state.EyeFlag==false?accountObj && accountObj[fuObj.accNumber] ? formatBankNumber(accountObj[fuObj.accNumber]) : noInfo:accountObj && accountObj[fuObj.accNumber] ? accountObj[fuObj.accNumber] : noInfo}</View>
                 <View className='bank-list-t3'>{fuObj.title?fuObj.title:'账户名'}<View>{accountObj && accountObj[fuObj.accName] ? accountObj[fuObj.accName] : noInfo}</View></View>
                 <View className='bank-list-t4'>{fuObj.botTitle?fuObj.botTitle:'放款账户信息'}</View> 
                
                </View>
              </SwiperItem>
            </Swiper>
          </AtCard>
        
            {/* <View className='more'>查看更多<AtIcon value='chevron-down' size='16' color='rgba(0,0,0,0.3)'></AtIcon></View> */}
          
      </View>
      
    )
  }
}


export default approveList