weigou/h5/wg-ui/components/SearchBar/index.js

weigou components

import Nerv from "nervjs";
import Taro from "@tarojs/taro-h5";
import { View, Image, Input } from '@tarojs/components';
import './index.scss';

/** 引入图片  strat*/
import upImgUrl from "../../ui-images/upImg.png";
import searchImgUrl from "../../ui-images/search.png";
import friend_icon from "../../ui-images/friend-icon.png";
import filterImg from "../../ui-images/filer.png";
/** 引入图片  end*/

export default class SearchBar extends Taro.Component {
  constructor(props) {
    super(props);
    this.state = {
      /**储存定时器 */
      timer: null
    };
  }

  componentWillMount() {}
  search(e) {
    if (!e.detail.value) {
      return;
    }
    if (e.type === "input") {
      clearTimeout(this.state.timer);
      let timer = setTimeout(() => {
        this.props.searchData({ value: e.detail.value });
      }, 1000);
      this.setState({
        timer
      });
    } else {
      this.props.searchData({ value: e.detail.value });
    }
  }
  config = {
    component: true
  };
  render() {
    return <View className="wg-search-input-box wg-p32">
                {/* 左边input start */}
                <View className="wg-search-left wg-space-between ">
                    <View className="wg-search-input wg-justify-content-flex-start">
                        <Image className="search-img" src={searchImgUrl}></Image>
                        <Input className="wg-ft-28 wg-ml-8" placeholder="搜索" onInput={this.search.bind(this)} onConfirm={this.search.bind(this)}></Input>

                    </View>
                    {this.props.isSearchImg && <Image className="wg-up-img" src={upImgUrl} onClick={this.props.upImg}></Image>}
                </View>
                {/* 左边input end*/}

                {/*  右边筛选 start */}
                <View className="wg-search-right wg-justify-content-flex-start">

                    {this.props.isTemplate && <Image src={this.props.tempIconUrl} className="wg-ml-32 wg-mr-24 wg-right-icon" onClick={this.props.switchTemplate}></Image>}

                    {this.props.isTemplate && this.props.isFilterData && <View className="wg-line"></View>}

                    {this.props.isFilterData && <Image src={filterImg} className="wg-ml-24 wg-right-icon" onClick={this.props.filterData}></Image>}

                </View>
                {/*  右边筛选 end */}

            </View>;
  }
}

SearchBar.defaultProps = {
  /**
   * 是否展示通过图片查询的icon
   **/
  isSearchImg: false,

  /**
   * 是否显示模板的icon
   **/
  isTemplate: false,

  /**
   * 模板icon 的url
   * default friend_icon
   **/
  tempIconUrl: friend_icon,

  /**
   * 是否展示筛选条件的icon
   **/
  isFilterData: false,

  /**
   * 通过用户输入的值进行搜索
   * type: function
   */
  searchData: () => {},

  /**
   * 通过img更新搜索
   * type: function
   */
  upImg: () => {},

  /**
   * 切换模板的点击事件
   * type: function
   */
  switchTemplate: () => {},

  /**
   * 筛选栏的点击事件
   * type: function
   */
  filterData: () => {}
};