weigou/weapp/wg-ui/components/SearchBar/index.jsx

weigou components

import Taro, { Component } from '@tarojs/taro';
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 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: () => { },
};