sourcecode/front/project/h5/routes/product/data/page.js

import React from 'react';
import './index.less';
import { Drawer, ListView } from 'antd-mobile';
import Page from '@src/containers/Page';
import Assets from '@src/components/Assets';
import { formatTreeData } from '@src/services/Tools';
import ListData from '@src/services/ListData';
import { DataBlock } from '../../../components/Block';
import { SpecialRadioGroup } from '../../../components/Radio';
import Switch from '../../../components/Switch';
import Button from '../../../components/Button';
import Checkbox from '../../../components/CheckBox';
import { Course } from '../../../stores/course';
import { Main } from '../../../stores/main';
import { DataType } from '../../../../Constant';

export default class extends Page {
  initState() {
    return {
      listMap: {},
    };
  }

  init() {
    Main.dataStruct().then(list => {
      const structTree = formatTreeData(
        list.map(row => {
          row.title = `${row.titleZh} ${row.titleEn}`;
          row.label = row.title;
          row.key = row.id;
          return row;
        }),
        'id',
        'title',
        'parentId',
      );
      this.setState({ structTree });
    });

    const { search } = this.state;
    if (!search.order) search.order = 'saleNumber';
    this.setState({ search });
  }

  initData() {
    return this.initListKeys(['data']).then(() => {
      return this.getList('data', 1);
    });
  }

  initListKeys(keys) {
    const { listMap = {} } = this.state;
    keys.forEach(key => {
      listMap[key] = new ListData();
    });
    this.setState({ listMap });
    return Promise.resolve();
  }

  getList(key, page) {
    Course.listData(Object.assign({ page }, this.state.search)).then(result => {
      const { listMap = {} } = this.state;
      if (page === 1) {
        // todo 是否重新读取第一页为刷新所有数据
        listMap[key] = new ListData();
      }
      listMap[key].get(page, result, this.state.search.size);
      this.setState({ listMap });
    });
  }

  changeOrder(order, direction) {
    const { search = {} } = this.state;
    search.order = order;
    search.direction = direction;

    this.setState({ search });
    this.refresh();
  }

  changeNovice() {
    const { search = {} } = this.state;
    search.isNovice = !search.isNovice;

    this.setState({ search });
  }

  changeOriginal() {
    const { search = {} } = this.state;
    search.isOriginal = !search.isOriginal;

    this.setState({ search });
  }

  changeDataType(value) {
    const { search = {} } = this.state;
    search.dataType = value;

    this.setState({ search });
  }

  changeStruct(value) {
    const { search = {} } = this.state;
    search.structId = value;
    this.setState({ search });
  }

  renderView() {
    const { filter, search = {} } = this.state;
    return (
      <Drawer
        style={{ minHeight: document.documentElement.clientHeight }}
        position="right"
        open={filter}
        sidebar={this.renderFilter()}
        onOpenChange={isOpen => this.setState({ filter: isOpen })}
      >
        <div className="top">
          <div
            className={search.order === 'saleNumber' ? 'tab active' : 'tab'}
            onClick={() => {
              if (search.order !== 'saleNumber') this.changeOrder('saleNumber', 'desc');
            }}
          >
            销量
          </div>
          <div
            className={search.order === 'updateTime' ? 'tab active' : 'tab'}
            onClick={() => {
              if (search.order !== 'updateTime') this.changeOrder('updateTime', 'desc');
            }}
          >
            更新时间
          </div>
          <div className="right" onClick={() => this.setState({ filter: true })}>
            筛选
            <Assets name="screen" />
          </div>
        </div>
        {this.renderList()}
      </Drawer>
    );
  }

  renderRow(rowData) {
    return <DataBlock data={rowData} />;
  }

  renderList() {
    const { listMap } = this.state;
    const { data = {} } = listMap;
    const { dataSource = {}, bottom, loading, finish, maxSectionId = 1, total } = data;
    if (total === 0) return this.renderEmpty();
    return (
      <ListView
        className="list"
        ref={el => {
          this.lv = el;
        }}
        dataSource={dataSource}
        renderFooter={() => (
          <div style={{ padding: 30, textAlign: 'center' }}>{loading ? '加载中...' : bottom ? '没有更多了' : ''}</div>
        )}
        renderRow={(rowData, sectionID, rowID) => this.renderRow(rowData, sectionID, rowID)}
        style={{
          height: this.state.height,
          overflow: 'auto',
        }}
        pageSize={this.state.search.size}
        scrollRenderAheadDistance={500}
        onEndReached={() => {
          if (loading) return;
          if (bottom) {
            if (!finish) {
              data.finish = true;
              // this.setState({ time: new Date() })
            }
            return;
          }
          this.getList('data', maxSectionId + 1);
        }}
        onEndReachedThreshold={10}
      />
    );
  }

  renderEmpty() {
    return <div />;
  }

  renderFilter() {
    const { search, structTree = [] } = this.state;
    return (
      <div className="filter">
        <div className="body">
          <div className="item">
            <div className="label left">适合新手</div>
            <div className="value right">
              <Switch
                checked={search.isNovice}
                onClick={() => {
                  this.changeNovice();
                }}
              />
            </div>
          </div>
          <div className="item">
            <div className="label left">原创资料</div>
            <div className="value right">
              <Switch
                checked={search.isOriginal}
                onClick={() => {
                  this.changeOriginal();
                }}
              />
            </div>
          </div>
          <div className="item">
            <div className="label left">资料形式</div>
            <div className="value right">
              <SpecialRadioGroup
                list={DataType}
                value={search.dataType}
                onChange={value => {
                  this.changeDataType(value);
                }}
              />
            </div>
          </div>
          <div className="sub">
            <div className="title">筛选学科</div>
            {structTree.map(row => {
              return (
                <div className="item">
                  <div className={row.children.length > 0 ? 'label' : 'label left'}>{row.title}</div>
                  {row.children.length > 0 && (
                    <div className="value">
                      <SpecialRadioGroup
                        list={row.children}
                        value={search.structId}
                        onChange={value => {
                          this.changeStruct(value);
                        }}
                      />
                    </div>
                  )}
                  {row.children.length === 0 && (
                    <div className="value right">
                      <Checkbox
                        checked={search.structId === row.id}
                        onClick={() => {
                          this.changeStruct(row.id);
                        }}
                      />
                    </div>
                  )}
                </div>
              );
            })}
          </div>
        </div>
        <div className="footer">
          <Button
            radius
            width={90}
            onClick={() => {
              this.getList('data', 1);
            }}
          >
            确定
          </Button>
        </div>
      </div>
    );
  }
}