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 { zeroFill, formatPercent, formatDate, formatSeconds, getMap } from '@src/services/Tools';
import { asyncSMessage } from '@src/services/AsyncTools';
import moment from 'moment';
import Date from '../../../components/Date';
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 } from '../../../components/OtherModal';
import VipRenew from '../../../components/VipRenew';
import { My } from '../../../stores/my';
import { Main } from '../../../stores/main';
import { QuestionType } from '../../../../Constant';
import { User } from '../../../stores/user';

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, showTop: true };
  }

  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() {
    const { data } = this.props;
    const { detail = [] } = data;
    const { open } = this.state;
    return (
      <div hidden={!open} className="table">
        {detail.map(row => {
          return [
            <div className="title p-l-5 m-b-1 t-1 t-s-18 f-w-b">
              {row.title}<div className="f-r t-3 t-s-12 f-w-d">{row.time}</div>
            </div>,
            <UserTable
              size="small"
              columns={[
                { key: '', title: '', render: () => '得分/排名' },
                { key: 'total', title: 'Total', render: (text, record) => `${record.totalScore || 0}/${record.totalRank || 0}th` },
                { key: 'ir', title: 'IR', render: (text, record) => `${record.irScore || 0}/${record.irRank || 0}th` },
                { key: '4', title: 'Verbal', render: (text, record) => `${record.verbalScore || 0}/${record.verbalRank || 0}th` },
                { key: '5', title: 'Quant', render: (text, record) => `${record.quantScore || 0}/${record.quantRank || 0}th` },
              ]}
              data={[row.score]}
            />];
        })}
        {detail.length === 0 &&
          <UserTable
            header={false}
            size="small"
            even="odd"
            columns={[
              { key: 'type', width: 100 },
              { key: 'title', width: 310 },
              { key: 'time', width: 120 },
            ]}
            data={[]}
          />}
        <div className="t-r">
          <Link to="/examination">继续练习></Link>
        </div>
      </div>
    );
  }

  renderCourse() {
    const { data } = this.props;
    const { detail = [] } = data;
    const { open } = this.state;
    return (
      <div hidden={!open} className="table">
        <UserTable
          header={false}
          size="small"
          even="odd"
          columns={[
            { key: 'type', width: 100 },
            { key: 'title', width: 310 },
            {
              key: 'time',
              width: 120,
              render: (text) => {
                return <div className="sub">
                  <div className="t-2 t-s-12">{text.split(' ')[0]}</div>
                  <div className="t-6 t-s-12">{text.split(' ')[1]}</div>
                </div>;
              },
            }]}
          data={detail}
        />
        <div className="t-r">
          {data.isCourse ? <Link to="/my/course">{'继续学习>'}</Link> : <Link to="/course">{'去购买'}</Link>}
        </div>
      </div>
    );
  }
}

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

  initState() {
    return {
      day: 'today',
      showExamination: false,
      showTop: true,
      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() {
    User.refreshToken();
    // 获取学习数据
    My.getStudyTotal().then((total) => {
      total.categorys = total.categorys.map((row, index) => {
        row.ratio = formatPercent(row.time, total.time, true);
        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 });
    });
    this.refreshDay(this.state.day);
    this.refreshMessage();
  }

  refreshMessage() {
    // 获取未读消息
    My.message({ page: 1, size: 2, read: 0 }).then(result => {
      this.setState({ messages: result.list });
    });
  }

  readAllMessage() {
    My.readAllMessage().then(() => {
      User.refreshToken();
      this.refreshMessage();
      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.key] = row;
      });
      study.push({
        type: 'exercise',
        total: [
          { title: '<span>练习和订正</span>', width: 130 },
          {
            title: result.exerciseTime
              ? formatSeconds(result.exerciseTime).replace(/([0-9]+)(min|m|hour|h|s)/g, '<b>$1</b>$2')
              : '<b>-</b>',
            width: 150,
          },
          { 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, false) : '-%',
            cr: exerciseMap.cr ? formatPercent(exerciseMap.cr.correct, exerciseMap.cr.number, false) : '-%',
            rc: exerciseMap.rc ? formatPercent(exerciseMap.rc.correct, exerciseMap.rc.number, false) : '-%',
          },
          {
            title: '平均用时',
            sc: exerciseMap.sc ? formatSeconds(exerciseMap.sc.time / exerciseMap.sc.number) : '-',
            cr: exerciseMap.cr ? formatSeconds(exerciseMap.cr.time / exerciseMap.cr.number) : '-',
            rc: exerciseMap.rc ? formatSeconds(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]+)(min|m|hour|h|s)/g, '<b>$1</b>$2')
              : '<b>-</b>',
            width: 150,
          },
          { 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]+)(min|m|hour|h|s)/g, '<b>$1</b>$2')
              : '<b>-</b>',
            width: 150,
          },
          { 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 });
    });
    time = moment(time);
    this.calMonth = time.month();
    this.calYear = time.year();
    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.renderVip(), this.renderMessage()]}
        ads={(this.state.ads || []).map(row => {
          return (
            <a href={row.link} target="_blank">
              <Assets src={row.image} />
            </a>
          );
        })}
        onClick={() => {
          if (this.state.showCal) this.setState({ showCal: false });
        }}
      />
    );
  }

  renderTop() {
    const { info } = this.props.user;
    const { showTop } = this.state;
    return !info.bindPrepare && showTop && <div className="top-layout">
      <Assets name='my_main_banner' onClick={() => this.setState({ showExamination: true })} />
      <div className='close' onClick={(e) => {
        e.stopPropagation();
        this.setState({ showTop: false });
      }} />
      <div className='go' onClick={() => this.setState({ showExamination: true })} />
    </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]+)(min|m|hour|h|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' && <span>{formatDate(time, 'YYYY-MM-DD')}</span>}
            <Assets
              name="calendar"
              onClick={(e) => {
                e.stopPropagation();
                this.setState({ showCal: true });
              }}
            />
            {showCal && (
              <Date
                show
                hideInput
                theme="filled"
                value={time}
                disabledDate={date => date.unix() <= moment.unix()}
                onClick={(event) => {
                  event.stopPropagation();
                }}
                onChange={date => {
                  this.refreshDay(date);
                  this.setState({ showCal: false });
                }}
              />
            )}
          </div>
        </div>
        {study.map((data, index) => {
          return <LogItem key={index} data={data} />;
        })}
      </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]+)(min|m|hour|h|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, showVip } = this.state;
    return (
      <div className="info-layout">
        <div className="body">
          <div className="info c-p">
            <div className='avatar'>
              <Assets
                src={info.avatar}
              />
              <div className='avatar-hover'
                onClick={() => {
                  this.setState({ showEdit: true });
                }}>
                <Icon type="edit" theme="filled" />编辑
              </div>
            </div>
            <div className="detail">
              <div
                className="name c-p"
                onClick={() => {
                  this.setState({ showEdit: true });
                }}
              >
                {(info.nickname || '') || `qx${info.mobile}`}{' '}
              </div>
              <div className="id">ID: {zeroFill(info.id, 4)} </div>
            </div>
          </div>
          <div className="auth">
            <span className="invite">
              <Button
                radius
                size="small"
                onClick={() => {
                  User.needInvite();
                }}
              >
                邀请
              </Button>
            </span>
            <GIcon name="user-wechat" noHover active={info.bindWechat} />
            <GIcon
              name="user-phone"
              active={info.bindMobile}
              onClick={() => {
                this.setState({ showPhone: true });
              }}
            />
            <GIcon
              name="user-realname"
              active={info.bindReal}
              onClick={() => {
                if (!info.bindReal) {
                  this.setState({ showReal: true });
                }
              }}
            />
            <GIcon
              name="user-email"
              active={!!info.email}
              onClick={() => {
                this.setState({ showEmail: true });
              }}
            />
            <GIcon
              name="user-info"
              active={info.bindPrepare}
              onClick={() => {
                this.setState({ showExamination: true });
              }}
            />
          </div>
          {!info.bindReal && <div className="t-3 t-s-12 m-t-1">完成实名认证送30天VIP <a onClick={() => this.setState({ showReal: true })}>去完成</a></div>}
        </div>
        {info.vip &&
          <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 })}
        />
        <VipRenew
          show={showVip}
          data={info}
          onReal={() => this.setState({ showVip: false, showReal: true })}
          onPrepare={() => this.setState({ showVip: false, showExamination: true })}
          onClose={(result) => {
            if (result) {
              this.refresh();
            } else {
              this.setState({ showVip: false });
            }
          }}
        />
      </div>
    );
  }

  renderVip() {
    const { info } = this.props.user;
    return !info.vip && <div className="vip-layout">
      <div className="body">
        <div className='m-b-1'>
          开通 <Assets className="m-r-5" name="VIP" />解锁海量权限
        </div>
        <div className='t d-i-b m-r-2 t-1 t-s-12'><Icon className='t-4' type='check' /> 自由组卷</div>
        <div className='t d-i-b m-r-2 t-1 t-s-12'><Icon className='t-4' type='check' /> 导出笔记</div>
        <div className='t d-i-b m-r-2 t-1 t-s-12'><Icon className='t-4' type='check' /> 专享解析</div>
        <div className='t d-i-b m-r-2 t-1 t-s-12'><Icon className='t-4' type='check' /> 换库提醒</div>
        <div className='t d-i-b m-r-2 t-1 t-s-12'><Icon className='t-4' type='check' /> 加强版报告</div>
      </div>
      <div className="footer">
        <Button
          radius
          size="small"
          onClick={() => {
            this.setState({ showVip: true });
          }}
        >
          去开通
            </Button>
      </div>
    </div>;
  }

  renderMessage() {
    const { messages = [] } = this.state;
    const number = (messages || []).length;
    return (
      number > 0 && (
        <div className="message-layout">
          <div className="header c-p"
            onClick={() => {
              this.readAllMessage();
            }}>
            <Assets
              name="all"
            />
            全部已读
          </div>
          <div className="body">
            {(messages || []).map(row => {
              return (
                <div className="item">
                  <div className="title dot">{row.title}</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>
      )
    );
  }
}