sourcecode/front/project/www/routes/question/search/page.js

import React, { Component } from 'react';
import './index.less';
import { Icon } from 'antd';
import Page from '@src/containers/Page';
import Button from '../../../components/Button';
import Tabs from '../../../components/Tabs';
import UserAction from '../../../components/UserAction';
import UserPagination from '../../../components/UserPagination';

export default class extends Page {
  initState() {
    return {
      list: [{}, {}, {}],
      searchList: [123, 123, 123],
      historyList: [321, 321, 321],
      searchValue: '',
      search: false,
      tab: '1',
      filterMap: {},
      sortMap: {},
      focus: false,
    };
  }

  onTabChange(tab) {
    this.setState({ tab });
  }

  onChangeSearch(value) {
    this.setState({ searchValue: value });
  }

  renderView() {
    const { search } = this.state;
    return (
      <div>
        {this.renderSearch()}
        {search ? this.renderResult() : this.renderFilter()}
      </div>
    );
  }

  renderSearch() {
    const { searchList, searchValue, historyList, focus } = this.state;
    return (
      <div className="search-layout">
        <div className="search-wrapper">
          <input
            value={searchValue}
            onChange={e => this.onChangeSearch(e.target.value)}
            onFocus={() => this.setState({ focus: true })}
            onBlur={() => this.setState({ focus: false })}
          />
          <Button width={150}>
            <Icon className="m-r-5" type="search" />
            搜索题目
          </Button>
          {focus && (
            <div hidden={!searchValue} className="search-tip-wrapper">
              {searchList.map(item => {
                return <div className="t-2 t-s-16">{item}</div>;
              })}
            </div>
          )}
          {focus && (
            <div hidden={searchValue} className="search-tip-wrapper">
              {historyList.map(item => {
                return (
                  <div className="t-2 t-s-16">
                    {item}
                    <div className="f-r t-4 t-s-12 c-p">删除</div>
                  </div>
                );
              })}
              <div className="all-del t-r">
                <span className="t-4 t-s-12 c-p">删除历史</span>
              </div>
            </div>
          )}
        </div>
      </div>
    );
  }

  renderFilter() {
    const { tab, filterMap, sortMap } = this.state;
    return (
      <div className="filter-layout">
        <div className="content">
          <Tabs
            border
            type="division"
            theme="theme"
            size="small"
            space={5}
            width={220}
            active={tab}
            tabs={[{ key: '1', title: 'Verval' }, { key: '2', title: 'Quant' }, { key: '3', title: 'IR' }]}
            onChange={key => this.onTabChange(key)}
          />
          <UserAction
            selectList={[
              {
                key: 'questionType',
                placeholder: '题型',
                select: [],
              },
              {
                label: '范围',
                children: [
                  {
                    key: 'rang1',
                    placeholder: '全部',
                    select: [],
                  },
                  {
                    placeholder: '全部',
                    key: 'rang2',
                    be: 'rang1',
                    selectMap: {},
                  },
                ],
              },
              {
                right: true,
                placeholder: '难度',
                key: 'level',
                select: [],
              },
            ]}
            sortList={[
              { key: '1', label: '全站用时', fixed: true, right: true },
              { key: '2', label: '平均正确率', fixed: true, right: true },
              { key: '3', label: '收藏人数', fixed: true, right: true },
            ]}
            filterMap={filterMap}
            sortMap={sortMap}
            onFilter={value => this.onFilter(value)}
          />
          {this.renderList()}
          <UserPagination />
        </div>
      </div>
    );
  }

  renderResult() {
    return (
      <div className="result-layout">
        <div className="content">
          <div className="m-b-1">
            <span className="t-1 t-s-24">搜索结果:</span>
            <span className="t-2 t-s-18">共12条</span>
          </div>
          {this.renderList()}
          <UserPagination jump />
        </div>
      </div>
    );
  }

  renderList() {
    const { list } = this.state;
    return list.map(item => {
      return <SearchItem data={item} />;
    });
  }
}

class SearchItem extends Component {
  render() {
    return (
      <div className="search-item">
        <div className="search-item-head">
          <span className="t-15 t-s-16 m-r-1">阅读RC</span>
          <span className="t-1 t-s-16">PREP07#124、PREP08#332、PREP07#124、PREP08#332、PREP07#124</span>
          <div className="f-r t-15 t-s-14">
            <span className="m-r-1">Medium</span>
            <span className="m-r-1">用时: 1m 39s</span>
            <span className="m-r-1">80% </span>
            <span>收藏 20313</span>
          </div>
        </div>
        <div className="t-1 p-20">
          Margaret Mead, the best-known anthropologist of the twentieth century, helped shape public opinion on
          fundamentally important areas like attitudes toward children and families, along with the relative merits of
          competition and cooperation. A. shape public opinion on fundamentally important areas like attitudes toward
          children and families, along with
        </div>
      </div>
    );
  }
}