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

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

import Taro, { useState,Component ,useEffect} from '@tarojs/taro'
import { View, Button, Text , Swiper, SwiperItem} from '@tarojs/components'
import {AtButton,AtCard,AtTabs, AtTabsPane,AtList,AtSearchBar, AtListItem,AtTabBar,AtIcon,AtFloatLayout,AtTextarea,AtInput} from 'taro-ui'
import { imgUrl, judgeEmpty, exportBaseUrl, hidebankCard, encrypt,toThousands, CZBANK, openPDF } from '../utils/utils'
import './index.less'

 function HooksPage() {

  HooksPage.options = { addGlobalClass: true }

  let [searchValue, setSearchValue] = useState('');
  let [typeText, setTypeText] = useState('');
  let [showSearch, setshowSearch] = useState(true);
  let [showhtlx, setshowhtlx] = useState(false);
  let [htlxtc, sethtlxtc] = useState(false);
  let [status, setstatus] = useState('');
  let [navHeight, setnavHeight] = useState('');

// 切换卡片信息
const onChangeCostInformationByManage = () => {
  // this.setState({
  //   costInformationCurent: 0
  // })
  setCount(0)
}
const onChangeCostInformationByService = () => {
  // this.setState({
  //   costInformationCurent: 1
  // })
  setCount(1)
}
const setNavSize=()=> {
  let sysinfo = Taro.getSystemInfoSync()
  let statusHeight = sysinfo.statusBarHeight
  let isiOS = sysinfo.system.indexOf('iOS') > -1
  let navHeight
  if (!isiOS) {
    navHeight = 48;
  } else {
    navHeight = 44;
  }
  setnavHeight(navHeight)
  setstatus(statusHeight)

}
useEffect(()=>{
  setNavSize()
},[])
const onChangeInterestExpense = () => {
  // this.setState({
  //   costInformationCurent: 2
  // })
  setCount(2)
}
  //搜索栏输入时
  const  onChangeSearchValue=(value)=>{
    setSearchValue(value)
}
const topStyle={
  marginTop: `${status+navHeight}px`,
  marginBottom:"20rpx"
}
const hetongStyle={
  marginTop: `${status+navHeight}px`,
}
const {typeTableList}=this.props
  //打开搜索框
  const contractSearchPage=()=> {
    setshowSearch(false)
    setshowhtlx(true)
    sethtlxtc(false)

  }
  console.log(showSearch,showhtlx)
  return (
    <View>
     
      <View style={topStyle}   hidden={showSearch}>
          <AtSearchBar
            showActionButton
            value={searchValue}
            onChange={(e)=>{onChangeSearchValue(e)}}
            // onActionClick={this.onActionClick.bind(this)}
            placeholder='文件编号/融资编号'
            actionName={searchValue != '' ? '搜索' : '重置'}
            className='search-bar'
          />
        </View>
    
    
       
       <View style={hetongStyle} className='header-operation'  hidden={showhtlx}>
          {/* <View onClick={this.openContractView.bind(this)}><Text>{this.state.typeText != '' ? this.state.typeText : '合同类型'}</Text> */}
          <View ><Text>{typeText != '' ? typeText : '合同类型'}</Text>
          <Image src={`${imgUrl}electronicContract/lit-down.svg`} />
          </View>
          <View>
            <Image src={`${imgUrl}electronicContract/search.svg`} onClick={()=>{contractSearchPage()}}/>
            {/* <Image src={`${imgUrl}electronicContract/search.svg`} /> */}
            {/* <Image src={Filtrate} onClick={this.contractQs.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>
          {
            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 HooksPage