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, Calendar } from 'antd';
import Page from '@src/containers/Page';
import Assets from '@src/components/Assets';
import { formatPercent, formatDate, formatSeconds } from '@src/services/Tools';
import { asyncSMessage } from '@src/services/AsyncTools';
import moment from 'moment';
import UserLayout from '../../../layouts/User';
import Tabs from '../../../components/Tabs';
import Button from '../../../components/Button';
import { Icon as GIcon } from '../../../components/Icon';
import UserTable from '../../../components/UserTable';
import Examination from '../../../components/Examination';
import menu from '../index';
import { BindPhone, BindEmail, EditInfo, RealAuth, EditAvatar, InviteModal } from '../../../components/OtherModal';
import VipRenew from '../../../components/VipRenew';
import { My } from '../../../stores/my';
import { Main } from '../../../stores/main';

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 = [], type } = 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 ? 'small-up' : 'small-down'} onClick={() => this.setState({ open: !open })} />
        </div>
        {type === 'exercise' && this.renderExercise()}
        {type === 'examination' && this.renderExamination()}
        {type === 'course' && this.renderCourse()}
      </div>
    );
  }

  renderExercise() {
    const { open } = this.state;
    return (
      <div hidden={!open} className="table">
        <UserTable size="small" columns={this.columns} data={[{ title: '123' }]} />
        <div className="t-r">
          <Link to="/exercise">继续练习></Link>
        </div>
      </div>
    );
  }

  renderExamination() {
    const { open } = this.state;
    return (
      <div hidden={!open} className="table">
        <div className="title p-l-5 m-b-1 t-1 t-s-18 f-w-b">
          千行-CAT01<div className="f-r t-3 t-s-12 f-w-d">2019-05-16 16:21:06</div>
        </div>
        <UserTable
          size="small"
          columns={[
            { key: '1', title: '' },
            { key: '2', title: 'Tobal' },
            { key: '3', title: 'IR' },
            { key: '4', title: 'Verbal' },
            { key: '5', title: 'Quant' },
          ]}
          data={[{ title: '123' }]}
        />
        <div className="title p-l-5 m-b-1 t-1 t-s-18 f-w-b m-t-2">
          净化版GWD-CAT01 <div className="f-r t-3 t-s-12 f-w-d">2019-05-16 16:21:06</div>
        </div>
        <UserTable
          size="small"
          columns={[
            { key: '1', title: '' },
            { key: '2', title: 'Tobal' },
            { key: '3', title: 'IR' },
            { key: '4', title: 'Verbal' },
            { key: '5', title: 'Quant' },
          ]}
          data={[{ title: '123' }]}
        />
        <div className="t-r">
          <Link to="/exercise">继续练习></Link>
        </div>
      </div>
    );
  }

  renderCourse() {
    const { open } = this.state;
    return (
      <div hidden={!open} className="table">
        <UserTable
          header={false}
          size="small"
          even="odd"
          columns={[{ key: '1', width: 100 }, { key: '2', width: 310 }, { key: '3', width: 120 }]}
          data={[
            { 1: '语法SC', 2: '课时3：代词的指代', 3: '2019-04-27\n 15:14:29' },
            { 1: '逻辑 RC', 2: '课时3：代词的指代', 3: '2019-04-27\n 15:14:29' },
            { 1: '阅读CR', 2: '课时3：代词的指代', 3: '2019-04-27\n 15:14:29' },
            { 1: '逻辑 RC', 2: '课时3：代词的指代', 3: '2019-04-27\n 15:14:29' },
          ]}
        />
        <div className="t-r">
          <Link to="/exercise">继续练习></Link>
        </div>
      </div>
    );
  }
}

export default class extends Page {
  initState() {
    return {
      day: 'today',
      showExamination: false,
      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' },
          ],
        },
      ],
    };
  }

  initData() {
    // 获取学习数据
    My.getStudyTotal().then(total => {
      this.setState({ total });
    });
    My.getStudyWeek(0).then(latest => {
      const diff = latest.time - latest.avgTime;
      const diffPercent =
        diff > 0
          ? formatPercent(latest.time - latest.avgTime, latest.avgTime, true)
          : formatPercent(latest.avgTime - latest.time, latest.avgTime, true);
      this.setState({ latest, diff, diffPercent });
      My.getStudyWeek(1).then(last => {
        const diffLast = latest.time - last.time;
        const diffLastPercent =
          diffLast > 0
            ? formatPercent(latest.time - last.time, last.time, true)
            : formatPercent(last.time - latest.time, last.time, true);
        this.setState({ last, diffLast, diffLastPercent });
      });
    });
    // 获取广告
    Main.getAd('my-self').then(result => {
      this.setState({ ads: result });
    });
    // 获取未读消息
    My.message({ page: 1, size: 2, read: 0 }).then(result => {
      this.setState({ messages: result.list });
    });
    this.refreshDay(this.state.day);
  }

  readAllMessage() {
    My.readAllMessage().then(() => {
      asyncSMessage('操作成功');
    });
  }

  refreshDay(value) {
    let time = '';
    switch (value) {
      case 'today':
        time = moment().format('YYYY-MM-DD');
        break;
      case 'yesterday':
        time = moment()
          .add(-1, 'days')
          .format('YYYY-MM-DD');
        break;
      case 'before':
        time = moment()
          .add(-2, 'days')
          .format('YYYY-MM-DD');
        break;
      default:
        time = value.format('YYYY-MM-DD');
        value = 'other';
    }
    My.getStudy(time).then(result => {
      const study = [];
      const exerciseMap = {};
      result.exerciseList.forEach(row => {
        exerciseMap[row.title] = row;
      });
      study.push({
        type: 'exercise',
        total: [
          { title: '<span>练习和订正</span>', width: 130 },
          {
            title: result.exerciseTime
              ? formatSeconds(result.exerciseTime).replace(/([0-9]+)(m|min|h|hour|s)/g, '<b>$1</b>$2')
              : '<b>-</b>',
            width: 90,
          },
          { title: `<b>${result.exerciseQuestion || '-'}</b>题`, width: 80 },
          {
            title: `超过了<b>${
              result.exerciseExceed ? formatPercent(result.exerciseExceed.rank, result.exerciseExceed.total) : '-%'
            }</b>的用户`,
          },
        ],
        detail: [
          {
            title: '做题数',
            sc: exerciseMap.sc ? exerciseMap.sc.number : '-',
            cr: exerciseMap.cr ? exerciseMap.cr.number : '-',
            rc: exerciseMap.rc ? exerciseMap.rc.number : '-',
          },
          {
            title: '平均正确率',
            sc: exerciseMap.sc ? formatPercent(exerciseMap.sc.correct, exerciseMap.sc.number) : '-%',
            cr: exerciseMap.cr ? formatPercent(exerciseMap.cr.correct, exerciseMap.cr.number) : '-%',
            rc: exerciseMap.rc ? formatPercent(exerciseMap.rc.correct, exerciseMap.rc.number) : '-%',
          },
          {
            title: '平均用时',
            sc: exerciseMap.sc ? exerciseMap.sc.time / exerciseMap.sc.number : '-',
            cr: exerciseMap.cr ? exerciseMap.cr.time / exerciseMap.cr.number : '-',
            rc: exerciseMap.rc ? exerciseMap.rc.time / exerciseMap.rc.number : '-',
          },
        ],
      });
      this.setState({ study });
    });
    this.setState({ day: value, time, showCal: false });
  }

  renderView() {
    const { config } = this.props;
    return (
      <UserLayout
        active={config.key}
        menu={menu}
        center={[this.renderTop(), this.renderLog(), this.renderTime()]}
        right={[this.renderInfo(), this.renderMessage()]}
        ads={(this.state.ads || []).map(row => {
          return (
            <a href={row.link} target="_blank">
              <Assets src={row.image} />
            </a>
          );
        })}
      />
    );
  }

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

  renderLog() {
    const { study = [{}, { type: 'examination' }, { type: 'course' }] } = this.state;
    const {
      latest = {},
      diff = 0,
      diffPercent = 0,
      diffLast = 0,
      diffLastPercent = 0,
      day,
      time,
      showCal,
    } = this.state;
    return (
      <div className="log-layout">
        <div className="header">
          <div className="title">学习记录</div>
          <div className="right">
            <span
              dangerouslySetInnerHTML={{
                __html: `本周学习时间${formatSeconds(latest.time).replace(/([0-9]+)(m|min|h|hour|s)/g, '<b>$1</b>$2')}`,
              }}
            />
            <span>
              同比上周<b>{diffLastPercent}</b>% <Assets name={diffLast > 0 ? 'up' : 'down'} />
            </span>
            <span>
              同比全站<b>{diffPercent}</b>% <Assets name={diff > 0 ? 'up' : 'down'} />
            </span>
          </div>
        </div>
        <div className="action">
          <Tabs
            className="d-i-b"
            type="tag"
            width={54}
            space={5}
            active={day}
            tabs={[
              { title: '今天', key: 'today' },
              { title: '昨天', key: 'yesterday' },
              { title: '前天', key: 'before' },
            ]}
            onChange={value => {
              this.refreshDay(value);
            }}
          />
          <div className="right">
            {day === 'other' && formatDate(time, 'YYYY-MM-DD')}
            <Assets
              className="right"
              name="calendar"
              onClick={() => {
                this.setState({ showCal: true });
              }}
            />
            {showCal && (
              <Calendar
                className="cal"
                fullscreen={false}
                disabledDate={date => date.unix() <= moment.unix()}
                onSelect={date => {
                  this.refreshDay(date);
                }}
              />
            )}
          </div>
        </div>
        {study.map((log, index) => {
          return <LogItem key={index} data={log} />;
        })}
      </div>
    );
  }

  renderTime() {
    const { timeList = [], total = {} } = 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">
            自 {total.createTIme && formatDate(total.createTime, 'YYYY-MM-DD')} ，您已在千行学习<b>{total.days}</b>
            天，累计
            <span
              dangerouslySetInnerHTML={{
                __html: formatSeconds(total.time).replace(/([0-9]+)(m|min|h|hour|s)/g, '<b>$1</b>$2'),
              }}
            />
          </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() {
    const { info = {} } = this.props.user;
    const { showExamination, showPhone, showEmail, showEdit, showReal, showAvatar, showInvite, showVip } = this.state;
    return (
      <div className="info-layout">
        <div className="body">
          <div className="info">
            <Assets
              name="sun_blue"
              src={info.avatar}
              onClick={() => {
                this.setState({ showEdit: true });
              }}
            />
            <div className="detail">
              <div
                className="name"
                onClick={() => {
                  this.setState({ showEdit: true });
                }}
              >
                {info.nickname}{' '}
              </div>
              <div className="id">ID: {info.id} </div>
            </div>
          </div>
          <div className="auth">
            <span className="invite">
              <Button
                radius
                size="small"
                onClick={() => {
                  this.setState({ showInvite: true });
                }}
              >
                邀请
              </Button>
            </span>
            <Assets name="wechat" active={info.bindWechat} />
            <Assets
              name="phone_1"
              active={info.bindMobile}
              onClick={() => {
                this.setState({ showPhone: true });
              }}
            />
            <Assets
              name="realname"
              active={info.bindReal}
              onClick={() => {
                this.setState({ showReal: true });
              }}
            />
            <Assets
              name="email"
              active={!!info.email}
              onClick={() => {
                this.setState({ showEmail: true });
              }}
            />
            <Assets
              name="information"
              active={info.bindPrepare}
              onClick={() => {
                this.setState({ showExamination: true });
              }}
            />
          </div>
        </div>
        {
          <div className="footer">
            <Assets className="m-r-5" name="VIP" />
            {info.vip && <span className="date">{formatDate(info.vip, 'YYYY-MM-DD')}到期</span>}
            <a
              onClick={() => {
                this.setState({ showVip: true });
              }}
            >
              续费
            </a>
          </div>
        }
        <Examination
          show={showExamination}
          data={info}
          onConfirm={() => this.setState({ showExamination: false })}
          onCancel={() => this.setState({ showExamination: false })}
          onClose={() => this.setState({ showExamination: false })}
        />
        <BindPhone
          show={showPhone}
          data={info}
          onConfirm={() => this.setState({ showPhone: false })}
          onCancel={() => this.setState({ showPhone: false })}
        />
        <BindEmail
          show={showEmail}
          data={info}
          onConfirm={() => this.setState({ showEmail: false })}
          onCancel={() => this.setState({ showEmail: false })}
        />
        <EditInfo
          show={showEdit}
          data={info}
          image={this.state.avatarFile}
          onSelectImage={file => this.setState({ showEdit: false, showAvatar: true, avatarImage: file })}
          onConfirm={() => this.setState({ showEdit: false, avatarFile: null })}
          onCancel={() => this.setState({ showEdit: false, avatarFile: null })}
        />
        <RealAuth show={showReal} data={info} onConfirm={() => this.setState({ showReal: false })} />
        <EditAvatar
          show={showAvatar}
          data={info}
          crop={{ width: 200, height: 200 }}
          image={this.state.avatarImage}
          onConfirm={file => this.setState({ showAvatar: false, showEdit: true, avatarFile: file, avatarImage: null })}
          onCancel={() => this.setState({ showAvatar: false, showEdit: true, avatarImage: null })}
        />
        <InviteModal show={showInvite} data={info} onClose={() => this.setState({ showInvite: false })} />
        <VipRenew
          show={showVip}
          data={info}
          onReal={() => this.setState({ showVip: false, showReal: true })}
          onPrepare={() => this.setState({ showVip: false, showExamination: true })}
          onClose={() => this.setState({ showVip: false })}
        />
      </div>
    );
  }

  renderMessage() {
    const { messages = [] } = this.state;
    const number = (messages || []).length;
    return (
      number > 0 && (
        <div className="message-layout">
          <div className="header">
            <Assets
              name="all"
              onCancel={() => {
                this.readAllMessage();
              }}
            />
            全部已读
          </div>
          <div className="body">
            {(messages || []).map(row => {
              return (
                <div className="item">
                  <div className="title dot">老师回答了您的提问</div>
                  <div className="date">{formatDate(row.createTime, 'YYYY-MM-DD HH:mm:ss')}</div>
                  {row.link && (
                    <GIcon
                      name="arrow-right-small"
                      onClick={() => {
                        openLink(row.link);
                      }}
                    />
                  )}
                </div>
              );
            })}
          </div>
          <div className="footer">
            <Button
              radius
              size="small"
              onClick={() => {
                linkTo('/my/message');
              }}
            >
              全部消息
            </Button>
          </div>
        </div>
      )
    );
  }
}