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

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

import Taro, { Component } from '@tarojs/taro'
import { View, Button, Text , Swiper, SwiperItem,ScrollView} from '@tarojs/components'
import {AtButton,AtCard,AtTabs, AtTabsPane,AtList,AtActionSheet, AtListItem,AtSearchBar,AtTabBar,AtIcon,AtFloatLayout,AtTextarea,AtInput} from 'taro-ui'
import request from  'yky-wx-request';
import moment from 'moment'
import { get,set} from 'yky-wx-components1/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: '',
      showSearch: true,
      showhtlx: false,
      htlxtc: false,
      img: '0',
    typeText: '',
    searchValue: '',
    stTypeCode: '',
      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 () {
    this.setNavSize()
   }

  componentDidHide () { }
  // nav-bar高度
  componentDidMount () {
    this.props.onsecondRef(this);
  } 

  //点击搜索
  onActionClick(searchValue) {
    console.log('sds')
    this.setState({
        showSearch: true,
        showhtlx: false
      })
    // console.log(searchValue)
    // if (searchValue != '') {
    //   let params = {
    //     token: Taro.getStorageSync('token') ? Taro.getStorageSync('token') : '',
    //     userFlag: Taro.getStorageSync('userFlag') ? Taro.getStorageSync('userFlag') : '',
    //     factorId: Taro.getStorageSync('factorId') ? Taro.getStorageSync('factorId') : '',
    //     type: this.state.stTypeCode,
    //     contractOrFinancingNo: searchValue,//保理合同号或融资编号
    //     page: 1,
    //     rows: 3
    //   }
    //   try {
    //     api.getContractList(params).then((res) => {
    //       if (res) {
    //         if (res.total == 0) {
    //           this.setState({
    //             class1: 'display:block',
    //             class2: 'display:none'
    //           })
    //         } else {
    //           this.setState({
    //             tableList: res.rows,
    //             class1: 'display:none',
    //             class2: 'display:block'
    //           })
    //         }
    //       } else {
    //         wx.showToast({
    //           title: res.msg,
    //           icon: 'none',
    //           duration: 1000
    //         })
    //         return false;
    //       }
    //     })
    //   } catch (error) {
    //     console.log(error);
    //   }
    // } else {
    //   this.getTableList();
    //   this.setState({
    //     showSearch: true,
    //     showhtlx: false
    //   })
    // }
  }
  //搜索栏输入时
  onChangeSearchValue(value) {
    this.setState({
      searchValue: value
    })
    const {inforObj,type}=this.props
    let obj={}
    if(inforObj&&inforObj.obj){
      obj=inforObj.obj
    }
    let searchValue=value
    console.log(searchValue)
    if (searchValue != '') {
      obj[type]=searchValue
     
      let params = {
        token: Taro.getStorageSync('token') ? Taro.getStorageSync('token') : '',
        userFlag: Taro.getStorageSync('userFlag') ? Taro.getStorageSync('userFlag') : '',
        factorId: Taro.getStorageSync('factorId') ? Taro.getStorageSync('factorId') : '',
        type: this.state.stTypeCode,
        contractOrFinancingNo: searchValue,//保理合同号或
        page: 1,
        rows: 3
      }
      try {
        // this.props.fn1([])
        // request.post(inforObj.baseUrl,inforObj.url,obj)
        // api.getContractList(params).then((res) => {

        // })
          // if (res) {
          //   if (res.total == 0) {
          //     this.setState({
          //       class1: 'display:block',
          //       class2: 'display:none'
          //     })
          //   } else {
          //     this.setState({
          //       tableList: res.rows,
          //       class1: 'display:none',
          //       class2: 'display:block'
          //     })
          //   }
          // } else {
          //   wx.showToast({
          //     title: res.msg,
          //     icon: 'none',
          //     duration: 1000
          //   })
          //   return false;
          // }
        // })
      } catch (error) {
        console.log(error);
      }
    } else {
      // this.getTableList();
      this.setState({
        showSearch: true,
        showhtlx: false
      })
    }
  }

  setNavSize() {
      console.log('hahha')
    let sysinfo = Taro.getSystemInfoSync()
    let statusHeight = sysinfo.statusBarHeight
    let isiOS = sysinfo.system.indexOf('iOS') > -1
    let navHeight
    if (!isiOS) {
      navHeight = 48;
    } else {
      navHeight = 44;
    }
    console.log(statusHeight,navHeight)
    this.setState({
      status: statusHeight,
      navHeight: navHeight
    })
  }
   
  
  handleCancel() {
    this.setState({
      htlxtc: false
    })
  }
  handleClose() {
    this.setState({
      htlxtc: false
    })
  }
    //打开搜索框
  contractSearchPage() {
    this.setState({
      showSearch: false,
      showhtlx: true,
      htlxtc: false
    })
  }
  openContractView=()=>{
    this.setState({
      htlxtc:true
    })
  }
  chongzhi=()=>{
   
      this.setState({
        showSearch: false,
        showhtlx: true
      })
      const {inforObj,type}=this.props
      let obj={}
      if(inforObj&&inforObj.obj){
        obj=inforObj.obj
      }
      let searchValue=this.state.searchValue
      console.log(searchValue)
        obj[type]=searchValue
       
    
          
          request.get(inforObj.baseUrl,inforObj.url,obj).then((res)=>{
            if(res.success&&res.data){
              this.props.fn1(res.data.records)
            }
          })
          // api.getContractList(params).then((res) => {
  
          // })
   
    
  
 
    // this.props.fn1(this.state.searchValue)
  }
  handleCancel() {
    this.setState({
      htlxtc: false
    })
  }
  showConcartType() {
    this.setState({
      htlxtc: true
    })
  }
   //确定合同类型
   selectType(stTypeCode, stTypeName) {
     console.log(stTypeCode, stTypeName)
    //点击全部类型
    if (stTypeCode == '0') {
      this.setState({
        htlxtc: false,
        img: stTypeCode,
        typeText: '',
        class2: 'display:none'
      })
      let params = {
        token: Taro.getStorageSync('token') ? Taro.getStorageSync('token') : '',
        userFlag: Taro.getStorageSync('userFlag') ? Taro.getStorageSync('userFlag') : '',
        factorId: Taro.getStorageSync('factorId') ? Taro.getStorageSync('factorId') : '',
        type: '',
        page: 1,
        rows: 3
      }
      try {
        api.getContractList(params).then((res) => {
          if (res) {
            if (res.total == 0) {
              this.setState({
                class1: 'display:block',
                class2: 'display:none',
                stTypeCode: ''
              })
            } else {
              this.setState({
                tableList: res.rows,
                class1: 'display:none',
                class2: 'display:block',
                stTypeCode: ''
              })
            }
          } else {
            wx.showToast({
              title: res.msg,
              icon: 'none',
              duration: 1000
            })
            return false;
          }
        })
      } catch (error) {
        console.log(error);
      }
    } else {
      this.setState({
        htlxtc: false,
        img: stTypeCode,
        typeText: stTypeName,
        stTypeCode: stTypeCode,
        class2: 'display:none'
      })
      let params = {
        token: Taro.getStorageSync('token') ? Taro.getStorageSync('token') : '',
        userFlag: Taro.getStorageSync('userFlag') ? Taro.getStorageSync('userFlag') : '',
        factorId: Taro.getStorageSync('factorId') ? Taro.getStorageSync('factorId') : '',
        type: stTypeCode,
        page: 1,
        rows: 3
      }
      try {
        api.getContractList(params).then((res) => {
          if (res) {
            if (res.total == 0) {
              this.setState({
                class1: 'display:block',
                class2: 'display:none'
              })
            } else {
              this.setState({
                tableList: res.rows,
                class1: 'display:none',
                class2: 'display:block'
              })
            }
          } else {
            wx.showToast({
              title: res.msg,
              icon: 'none',
              duration: 1000
            })
            return false;
          }
        })
      } catch (error) {
        console.log(error);
      }
    }
  }
  render () {
   console.log(this.props,this)
let {baseObj,baseInfo,typeTableList,imgUrl,isSelect }=this.props
console.log(this.props)
// 这是容错处理，以防乱传数据
if(!Array.isArray(baseObj)){
    baseObj=[]
}
if(Object.prototype.toString.call(baseInfo) !== '[object Object]'){
  baseInfo={}
}    
const topStyle={
    marginTop: `${this.state.status+this.state.navHeight}px`,
    marginBottom:"20rpx"
  }
  console.log(this.state.status,this.state.navHeigh)
  const hetongStyle={
    marginTop: `${this.state.status+this.state.navHeight}px`,
  }
    return (
      <View >
   <View className='searchnjh' style={topStyle} hidden={isSelect?this.state.showSearch:false}>
   {/* <AtSearchBar
            showActionButton
            value={this.state.searchValue}
            onChange={this.onChangeSearchValue.bind(this)}
            onActionClick={this.chongzhi.bind(this) }
            placeholder={this.props.place}
            actionName={this.state.searchValue != '' ? '搜索' : '重置'}
            className='search-bar' 
          /> */}
            <View>
            <Image src={this.props.inforObj&&this.props.inforObj.picUrl?`${imgUrl}${this.props.inforObj.picUrl}`:`${imgUrl}electronicContract/search.svg`} onClick={this.contractSearchPage.bind(this)}/>
          
          </View>
     <View className='searchnjh_wrap'>
   
     <AtInput 
     className='searchinput' 
     border={false}
     clear={true}
      placeholder={'请输入'}
      onChange={this.onChangeSearchValue.bind(this)}
      />
     
     </View>
     <View
       onClick={this.chongzhi.bind(this) }
      className='chongzhi1' >{ '搜索' }</View>
  
        </View>
        {
          isSelect&&<View style={hetongStyle} className='header-operation' hidden={this.state.showhtlx}>
          <View onClick={this.showConcartType.bind(this)}><Text>{this.state.typeText != '' ? this.state.typeText : '合同类型'}</Text>
          <Image src={`${imgUrl}electronicContract/lit-down.svg`} />
          </View>
          <View>
            <Image src={`${imgUrl}electronicContract/search.svg`} onClick={this.contractSearchPage.bind(this)}/>
          
          </View>
        </View>
        }
        
         {/* 合同类型抽屉框 */}
         <AtActionSheet isOpened={this.state.htlxtc} onCancel={this.handleCancel.bind(this)} onClose={this.handleClose.bind(this)} className='top-sheet pact-type'>
          <scroll-view scroll-y style='height:500rpx'>
          <View className='list' onClick={this.selectType.bind(this, 0)}>全部类型
                  <Image hidden={this.state.img == '0' ? false : true} src={`${imgUrl}lending/check.svg`} />
          </View>
          {
            this.state.typeTableList.map((item) => {
              return (
                <View className='list' key={item.stTypeCode} onClick={this.selectType.bind(this, item.stTypeCode, item.stTypeName)}>{item.stTypeName}
                  <Image hidden={this.state.img == item.stTypeCode ? false : true} src={`${imgUrl}lending/check.svg`} />
                </View>
              )
            })
          }
          </scroll-view>
        </AtActionSheet>

    
     
   
      </View>
      
    )
  }
}


export default approveList