sourcecode/front/project/www/routes/page/ready/page.js

import React from 'react';
import './index.less';
import { Anchor, Icon } from 'antd';
import Assets from '@src/components/Assets';
import Page from '@src/containers/Page';
import Select from '../../../components/Select';
import Button from '../../../components/Button';
import { SuppleModal, SuppleFinishModal } from '../../../components/OtherModal';

export default class extends Page {
  initState() {
    return {
      load: false,
      list: [
        {
          key: '1',
          title: '了解GMAT',
          children: true,
        },
        { key: '2', title: '推荐阅读' },
        { key: '3', title: '考场查询' },
        { key: '4', title: '熟悉备考资料', children: true },
      ],
      current: '1',
      scrollCurrent: '1-1',
      result: [{}, {}, {}],
      data: [
        { key: '1', id: 'data1', title: '官方', children: [{}, {}, {}] },
        { key: '2', id: 'data2', title: '非官方', children: [{}, {}, {}] },
      ],
      page: [
        {
          key: '1-1',
          title: '考试功能',
          id: '#test1',
          content:
            '11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111',
        },
        {
          key: '1-2',
          title: '出题原理',
          id: '#test2',
          content:
            '11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111',
        },
        {
          key: '1-3',
          title: '出题原理',
          id: '#test3',
          content:
            '11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111',
        },
        {
          key: '1-4',
          title: '出题原理',
          id: '#test4',
          content:
            '11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111',
        },
        {
          key: '1-5',
          title: '出题原理',
          id: '#test5',
          content:
            '11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111',
        },
        {
          key: '1-6',
          title: '出题原理',
          id: '#test6',
          content:
            '11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111',
        },
        {
          key: '1-7',
          title: '出题原理',
          id: '#test7',
          content:
            '11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111',
        },
        {
          key: '1-8',
          title: '出题原理',
          id: '#test8',
          content:
            '11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111',
        },
        {
          key: '1-9',
          title: '出题原理',
          id: '#test9',
          content:
            '11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111',
        },
        {
          key: '1-10',
          title: '出题原理',
          id: '#test10',
          content:
            '11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111',
        },
        {
          key: '1-11',
          title: '出题原理',
          id: '#test11',
          content:
            '11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111',
        },
      ],
    };
  }

  initData() {
    this.initInfo();
  }

  initInfo() {
    this.load = false;
    try {
      const { page, current, data } = this.state;
      const _list = current === '4' ? data : page;
      _list.forEach(item => {
        item.top = document.getElementById(item.id).offsetTop - 100;
        return item;
      });
      this.load = true;
    } catch (e) {
      setTimeout(() => {
        this.initInfo();
      }, 500);
    }
  }

  inPage() {
    document.getElementById('root').addEventListener('scroll', e => {
      if (!this.load) return;
      this.onScroll(e);
    });
  }

  outPage() {
    document.getElementById('root').removeEventListener('scroll');
  }

  onScroll(e) {
    const t = e.target.scrollTop;
    const { page, data, current, scrollCurrent } = this.state;
    const _list = current === '4' ? data : page;
    let _current = null;
    for (let i = 0; i < _list.length; i += 1) {
      if (!_current) _current = _list[i].key;
      if (t < _list[i].top) break;
      _current = _list[i].key;
    }
    if (_current !== scrollCurrent) {
      this.setState({ scrollCurrent: _current });
    }
  }

  scrollTo(top) {
    document.getElementById('root').scrollTo({ top, behavior: 'smooth' });
  }

  changePage(key) {
    this.setState({ current: key });
    setTimeout(() => {
      this.initInfo();
    }, 1);
  }

  renderView() {
    const { list, current, scrollCurrent, page, data } = this.state;
    let detail = {};
    return (
      <div>
        <div className="content">
          <div className="left">
            <Anchor offsetTop={90} getContainer={() => document.getElementById('root')}>
              {list.map(item => {
                if (item.key === current) detail = item;
                const _list = item.key === '4' ? data : page;
                return (
                  <div
                    className={`page-item ${item.key === current ? 'active' : ''}`}
                    onClick={() => this.changePage(item.key)}
                  >
                    {item.children && <Assets name="dropdown_hover" className="up" />}
                    {item.children && <Assets name="dropdown_normal" className="down" />}
                    <div className="page-item-title">{item.title}</div>
                    {current === item.key &&
                      item.children &&
                      _list.map(child => {
                        return (
                          <div
                            style={{ margin: 3 }}
                            className={`t-s-12 t-2 c-p ${child.key === scrollCurrent ? 't-4' : ''}`}
                            onClick={() => this.scrollTo(child.top)}
                            title={child.title}
                          >
                            {child.title}
                          </div>
                        );
                      })}
                  </div>
                );
              })}
            </Anchor>
          </div>
          <div className="center">
            <div className="t-1 t-s-24 m-b-2">{detail.title}</div>
            {current !== '3' && current !== '4' && this.renderList()}
            {current === '3' && this.renderQuery()}
            {current === '4' && this.renderData()}
          </div>
        </div>
      </div>
    );
  }

  renderQuery() {
    const { result } = this.state;
    return (
      <div className="query-layout">
        <div className="search-wrapper">
          <Select theme="white" list={[{ title: '中国', key: '1' }, { title: '海外', key: '2' }]} />
          <input />
          <Button width={150}>
            <Icon className="m-r-5" type="search" />
            搜索题目
          </Button>
        </div>
        {result.map(() => {
          return (
            <div className="m-b-2">
              <div className="t-1 t-s-18">1.上海财经大学</div>
              <div className="t-1">上海市徐汇区天钥桥路333号腾飞大厦8层805室</div>
              <div className="t-1">
                温馨提示: 本考场提供听力耳机 <span className="t-4">我要补充</span>
              </div>
            </div>
          );
        })}
        <SuppleModal />
        <SuppleFinishModal />
      </div>
    );
  }

  renderData() {
    const { data } = this.state;
    return data.map(item => {
      return (
        <div className="p-t-1 m-b-2" id={item.id}>
          <div className="t-1 t-s-18 m-b-1">{item.title}</div>
          <div className="data-list">
            {item.children.map(child => {
              return <Assets width={240} height={310} src={child} className="data-item" />;
            })}
          </div>
        </div>
      );
    });
  }

  renderList() {
    const { page } = this.state;
    return page.map(item => {
      return (
        <div className="p-t-1 m-b-2" id={item.id}>
          <div className="t-1 t-s-18 m-b-1">{item.title}</div>
          <div className="t-2">{item.content}</div>
        </div>
      );
    });
  }
}