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

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

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

  init() {
    Main.dataStruct().then((list) => {
      list = list.map(row => {
        row.title = `${row.titleZh} ${row.titleEn}`;
        row.label = row.title;
        row.key = row.id;
        return row;
      });
      const structMap = getMap(list, 'id');
      const videoTree = formatTreeData(list, 'id', 'title', 'parentId');
      const packageTree = formatTreeData(list.filter(row => row.level === 1), 'id', 'title', 'parentId');
      this.setState({ videoTree, packageTree, structMap });
    });

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

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

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

  getList(key, page) {
    this.setState({ tab: key });
    let handler;
    switch (key) {
      case 'video':
        handler = Course.listVideo(Object.assign({ page }, this.state.search));
        break;
      case 'package':
        handler = Course.listPackage(Object.assign({ page }, this.state.search))
          .then(result => {
            const { structMap } = this.state;
            result.list = result.list.map(row => {
              row.tag = (structMap[row.structId] || {}).title;
              return row;
            });
            return result;
          });
        break;
      default:
        return;
    }
    handler.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, tab: key });
    });
  }

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

  renderView() {
    const { filter } = 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">
          <Tabs onChange={(value) => {
            this.changeStruct(null);
            this.getList(value.key, 1);
          }} tabs={[{ title: '单次', key: 'video' }, { title: '套餐', key: 'package' }]} />
          <div className="right" onClick={() => this.setState({ filter: true })}>
            筛选
            <Assets name="screen" />
          </div>
        </div>
        {this.renderList()}
      </Drawer>
    );
  }

  renderRow(rowData) {
    const { tab } = this.state;
    switch (tab) {
      case 'video':
        return <CourseBlock data={rowData} />;
      case 'package':
        return <CoursePackageBlock data={rowData} />;
      default:
        return <div />;
    }
  }

  renderList() {
    const { listMap, tab } = this.state;
    const data = listMap[tab];
    if (!data) return <div />;
    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(tab, maxSectionId + 1);
      }}
      onEndReachedThreshold={10}
    />;
  }

  renderEmpty() {
    return <div />;
  }

  renderFilter() {
    const { search, videoTree = [], packageTree = [], tab } = this.state;
    return (
      <div className="filter">
        <div className="body">
          <div className="sub">
            <div className="title">筛选学科</div>
            {(tab === 'package' ? packageTree : videoTree).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(tab, 1);
          }}>
            确定
          </Button>
        </div>
      </div>
    );
  }
}