sourcecode/front/project/www/routes/my/main/page.js

import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import './index.less';
import { Tooltip, Icon } from 'antd';
import Page from '@src/containers/Page';
import Assets from '@src/components/Assets';
import UserLayout from '../../../layouts/User';
import Button from '../../../components/Button';
import { Icon as GIcon } from '../../../components/Icon';
import menu from '../index';
import UserTable from '../../../components/UserTable';

class LogItem extends Component {
  constructor(props) {
    super(props);
    this.columns = [
      { title: '', key: 'title' },
      { title: '语法SC', key: 'sc' },
      { title: '逻辑CR', key: 'cr' },
      { title: '阅读RC', key: 'rc' },
    ];
    this.state = { open: false };
  }

  render() {
    const { data = {} } = this.props;
    const { total = [], detail = [] } = data;
    const { open } = this.state;
    return (
      <div className="log-item">
        <div className="total">
          {total.map(item => {
            return (
              <div className="text" style={{ width: item.width }} dangerouslySetInnerHTML={{ __html: item.title }} />
            );
          })}
        </div>
        <div className="open">
          <GIcon name={open ? 'up' : 'down'} onClick={() => this.setState({ open: !open })} />
        </div>
        <div hidden={!open} className="table">
          <UserTable size="small" columns={this.columns} data={detail} />
          <div className="t-r">
            <Link to="">继续练习></Link>
          </div>
        </div>
      </div>
    );
  }
}

export default class extends Page {
  initState() {
    return {
      timeList: [
        { title: '长难句', time: '3h60min', ratio: 10, color: '#3C39CC' },
        { title: '综合推理IR', time: '3h60min', ratio: 10, color: '#9E9CFF' },
        { title: '语法SC', time: '3h60min', ratio: 10, color: '#4292F0' },
        { title: '作文AWA', time: '3h60min', ratio: 10, color: '#4374EC' },
        { title: '阅读RC', time: '3h60min', ratio: 10, color: '#6865FD' },
        { title: '模考', time: '3h60min', ratio: 10, color: '#8D65FD' },
        { title: '逻辑CR', time: '3h60min', ratio: 10, color: '#6BABF6' },
        { title: '自由组卷', time: '3h60min', ratio: 10, color: '#7BBEFF' },
        { title: '数学Quant', time: '3h60min', ratio: 10, color: '#6BABF6' },
      ],
      logList: [
        {
          total: [
            { title: '<span>练习和订正</span>', width: 130 },
            { title: '<b>60</b>min', width: 90 },
            { title: '<b>30</b>题', width: 80 },
            { title: '超过了<b>30%</b>的用户' },
          ],
          detail: [
            { title: '做题数', sc: '10', cr: '10', rc: '20' },
            { title: '平均正确率', sc: '86%', cr: '86%', rc: '86%' },
            { title: '平均用时', sc: '1min', cr: '1min20s', rc: '1min' },
          ],
        },
        {
          total: [
            { title: '<span>模考和订正</span>', width: 130 },
            { title: '<b>60</b>min', width: 90 },
            { title: '<b>30</b>套卷', width: 80 },
            { title: '超过了<b>30%</b>的用户' },
          ],
          detail: [
            { title: '做题数', sc: '10', cr: '10', rc: '20' },
            { title: '平均正确率', sc: '86%', cr: '86%', rc: '86%' },
            { title: '平均用时', sc: '1min', cr: '1min20s', rc: '1min' },
          ],
        },
        {
          total: [
            { title: '<span>课程学习</span>', width: 130 },
            { title: '<b>60</b>min', width: 90 },
            { title: '<b>30</b>课', width: 80 },
            { title: '超过了<b>30%</b>的用户' },
          ],
          detail: [
            { title: '做题数', sc: '10', cr: '10', rc: '20' },
            { title: '平均正确率', sc: '86%', cr: '86%', rc: '86%' },
            { title: '平均用时', sc: '1min', cr: '1min20s', rc: '1min' },
          ],
        },
      ],
    };
  }

  renderView() {
    const { config } = this.props;
    return (
      <UserLayout
        active={config.key}
        menu={menu}
        center={[this.renderTotal(), this.renderLog(), this.renderTime()]}
        right={[this.renderInfo(), this.renderMessage()]}
      />
    );
  }

  renderTotal() {
    return <div className="total-layout">1</div>;
  }

  renderLog() {
    const { logList = [] } = this.state;
    return (
      <div className="log-layout">
        <div className="header">
          <div className="title">学习记录</div>
          <div className="right">
            <span>
              本周学习时间<b>23</b>Hour
            </span>
            <span>
              同比上周<b>15</b>%
            </span>
            <span>
              同比全站<b>15</b>%
            </span>
          </div>
        </div>
        <div className="action">
          <Button size="small" radius>
            今天
          </Button>
          <Button size="small" radius>
            昨天
          </Button>
          <Button size="small" radius>
            前天
          </Button>
          <Assets className="right" name="calculator_icon" />
        </div>
        {logList.map((log, index) => {
          return <LogItem key={index} data={log} />;
        })}
      </div>
    );
  }

  renderTime() {
    const { timeList = [] } = this.state;
    return (
      <div className="time-layout">
        <div className="header">
          <div className="title">
            时间分配
            <Tooltip overlayClassName="gray" title="包括听课、练习与订正">
              <Icon type="question-circle" theme="filled" />
            </Tooltip>
          </div>
          <div className="right">
            自 2019-05-26 ，您已在千行学习<b>23</b>天，累计 <b>32h</b> 30min
          </div>
        </div>
        <div className="body">
          <div className="line">
            {timeList.map(item => {
              return (
                <Tooltip overlayClassName="gray" title={`${item.title} ${item.time}`}>
                  <i style={{ background: item.color, width: `${item.ratio}%` }} />
                </Tooltip>
              );
            })}
          </div>
          <div className="list">
            {timeList.map(item => {
              return (
                <div className="item">
                  <div className="color" style={{ background: item.color }} />
                  <div className="title">{item.title}</div>
                  <div className="date">{item.time}</div>
                </div>
              );
            })}
          </div>
        </div>
      </div>
    );
  }

  renderInfo() {
    return (
      <div className="info-layout">
        <div className="body">
          <div className="info">
            <Assets name="sun_blue" />
            <div className="detail">
              <div className="name">怕死的胡萝卜 </div>
              <div className="id">ID: 2392401 </div>
            </div>
          </div>
          <div className="auth">
            <span className="invite">
              <Button radius size="small">
                邀请
              </Button>
            </span>
          </div>
        </div>
        <div className="footer">
          <span className="tag">VIP</span>
          <span className="date">2019-10-15到期</span>
          <Link to="">续费</Link>
        </div>
      </div>
    );
  }

  renderMessage() {
    return (
      <div className="message-layout">
        <div className="header">
          <Assets name="dot2" />
          全部已读
        </div>
        <div className="body">
          <div className="item">
            <div className="title dot">老师回答了您的提问</div>
            <div className="date">2019-05-15 16:21:06</div>
            <Assets name="right_icon" onClick={() => {}} />
          </div>
          <div className="item">
            <div className="title dot">老师回答了您的提问</div>
            <div className="date">2019-05-15 16:21:06</div>
          </div>
        </div>
        <div className="footer">
          <Button radius size="small">
            全部消息
          </Button>
        </div>
      </div>
    );
  }
}