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, getMap } 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';
import { QuestionType } from '../../../../Constant';

const QuestionTypeMap = getMap(QuestionType, 'value', 'label');

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 { data = {} } = this.props;
    const { detail = [] } = data;
    const { open } = this.state;
    return <div hidden={!open} className="table">
      <UserTable size="small" columns={this.columns} data={detail} />
      <div className="t-r">
        <Link to="/exercise">继续练习></Link>
      </div>
    </div>;
  }

  renderExamination() {

  }

  renderCourse() {

  }
}

export default class extends Page {
  constructor(props) {
    super(props);
    this.colors = ['#3C39CC', '#9E9CFF', '#4292F0', '#4374EC', '#6865FD', '#8D65FD', '#6BABF6', '#7BBEFF', '#6BABF6'];
  }

  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, index) => {
      total.categorys = total.categorys.map(row => {
        row.ratio = row.time * 100 / total.time;
        row.time = formatSeconds(row.time);
        row.color = this.colors[index];
        return row;
      });
      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 : '-' },
        ],
      });

      study.push({
        type: 'examination',
        total: [
          { title: '<span>模考和订正</span>', width: 130 },
          { title: result.examinationTime ? formatSeconds(result.examinationTime).replace(/([0-9]+)(m|min|h|hour|s)/g, '<b>$1</b>$2') : '<b>-</b>', width: 90 },
          { title: `<b>${result.examinationPaper || '-'}</b>套卷`, width: 80 },
          { title: `超过了<b>${result.examinationExceed ? formatPercent(result.examinationExceed.rank, result.examinationExceed.total) : '-%'}</b>的用户` },
        ],
        detail: result.examinationList.map(row => {
          return {
            title: row.title,
            time: formatDate(row.report.createTime, 'YYYY-MM-DD HH:mm:ss'),
            score: row.report.score,
          };
        }),
      });

      study.push({
        type: 'course',
        total: [
          { title: '<span>课程学习</span>', width: 130 },
          { title: result.courseTime ? formatSeconds(result.courseTime).replace(/([0-9]+)(m|min|h|hour|s)/g, '<b>$1</b>$2') : '<b>-</b>', width: 90 },
          { title: `<b>${result.courseNumber || '-'}</b>课时`, width: 80 },
          { title: `超过了<b>${result.courseExceed ? formatPercent(result.courseExceed.rank, result.courseExceed.total) : '-%'}</b>的用户` },
        ],
        detail: result.courseList.map(row => {
          return {
            type: QuestionTypeMap[row.extend],
            title: `课时${row.no}: ${row.title}`,
            time: formatDate(row.createTime, 'YYYY-MM-DD HH:mm:ss'),
          };
        }),
      });
      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 = [] } = 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 { 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">
            {(total.categorys || []).map(item => {
              return (
                <Tooltip overlayClassName="gray" title={`${item.title} ${item.time}`}>
                  <i style={{ background: item.color, width: `${item.ratio}%` }} />
                </Tooltip>
              );
            })}
          </div>
          <div className="list">
            {(total.categorys || []).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>
    );
  }
}