sourcecode/front/project/www/routes/course/experience/page.js

import React, { Component } from 'react';
import './index.less';
import Page from '@src/containers/Page';
import { formatDate, formatMonth, getMap, formatPercent } from '@src/services/Tools';
import Ratio from '../../../components/Ratio';
import UserAction from '../../../components/UserAction';
import UserPagination from '../../../components/UserPagination';
import { ExperienceScore, ExperienceDay, PrepareStatus, ExperiencePercent } from '../../../../Constant';
import { Main } from '../../../stores/main';
import { My } from '../../../stores/my';
import { Course } from '../../../stores/course';

const PrepareStatusMap = getMap(PrepareStatus, 'value', 'label');
const ExperiencePercentMap = getMap(ExperiencePercent, 'value', 'label');
const colorList = ['#2754E0', '#3F86EA', '#41A6F3', '#9BD4FF'];
export default class extends Page {
  initState() {
    const prepareStatusSelect = PrepareStatus.map(row => {
      return {
        title: row.label,
        key: row.value,
      };
    });
    prepareStatusSelect.unshift({
      title: '全部',
      key: '',
    });
    const experienceDaySelect = ExperienceDay.map(row => {
      return {
        title: row.label,
        key: row.value,
      };
    });
    experienceDaySelect.unshift({
      title: '全部',
      key: '',
    });
    const experienceScoreSelect = ExperienceScore.map(row => {
      return {
        title: row.label,
        key: row.value,
      };
    });
    experienceScoreSelect.unshift({
      title: '全部',
      key: '',
    });
    const experiencePercentSelect = ExperiencePercent.map(row => {
      return {
        title: row.label,
        key: row.value,
      };
    });
    experiencePercentSelect.unshift({
      title: '全部',
      key: '',
    });
    return {
      prepareStatusSelect,
      experienceDaySelect,
      experienceScoreSelect,
      experiencePercentSelect,
    };
  }

  init() {
    Main.getExperience()
      .then(result => {
        const totalScoreNumber = result.score.reduce((x, y) => x + y, 0);
        const totalPercentNumber = result.percent.reduce((x, y) => x + y, 0);
        const scoreList = ExperienceScore.map((row, index) => {
          const percent = formatPercent(result.score[index] || 0, totalScoreNumber);
          return {
            color: colorList[index],
            label: `${row.label} ${percent} ${result.score[index] || 0}人`,
            value: percent,
          };
        });
        const percentList = ExperiencePercent.map((row, index) => {
          const percent = formatPercent(result.percent[index] || 0, totalPercentNumber);
          return {
            color: colorList[index],
            label: `${row.label} ${percent} ${result.percent[index] || 0}人`,
            value: percent,
          };
        });
        this.setState({ data: result, scoreList, percentList });
      });
  }

  initData() {
    const data = Object.assign(this.state, this.state.search);
    if (data.order) {
      data.sortMap = { [data.order]: data.direction };
    }
    data.filterMap = this.state.search;
    this.setState(data);

    Course.listExperience(Object.assign({}, this.state.search))
      .then(result => {
        this.setState({ list: result.list, total: result.total });
      });
  }

  onFilter(value) {
    this.search(value, false);
    this.initData();
  }

  onChangePage(page) {
    this.search({ page }, false);
    this.initData();
  }

  renderView() {
    return (
      <div>
        <div className="top content t-8">
          千行课堂 > <span className="t-1">学员表现</span>
        </div>
        {this.renderDetail()}
      </div>
    );
  }

  renderDetail() {
    const { filterMap, list, data = {}, scoreList, percentList, total, page } = this.state;
    const { prepareStatusSelect, experienceDaySelect, experienceScoreSelect, experiencePercentSelect } = this.state;
    return [
      <div className="center">
        <div className="content">
          <div className="total-list">
            <div className="total-item">
              <div className="title">学员人数</div>
              <div className="label">{data.number || 0}</div>
            </div>
            <div className="total-item">
              <div className="title">考分分布</div>
              <Ratio
                size="small"
                values={scoreList || []}
              />
            </div>
            <div className="total-item">
              <div className="title">出分周期</div>
              <div className="label">{data.period || 0}天</div>
            </div>
            <div className="total-item">
              <div className="title">提分比例</div>
              <Ratio
                size="small"
                values={percentList || []}
              />
            </div>
          </div>
          <UserAction
            selectList={[
              {
                key: 'prepareStatus',
                placeholder: '身份',
                select: prepareStatusSelect,
              },
              {
                key: 'experienceDay',
                placeholder: '备考周期',
                select: experienceDaySelect,
              },
              {
                key: 'experienceScore',
                placeholder: '分手成绩',
                select: experienceScoreSelect,
              },
              {
                key: 'experiencePercent',
                placeholder: '提分幅度',
                select: experiencePercentSelect,
              },
            ]}
            filterMap={filterMap}
            onFilter={value => this.onFilter(value)}
          />
          {list.map(item => {
            return <Article data={item} />;
          })}
          {total > 0 && list.length > 0 && (
            <UserPagination total={total} current={page} pageSize={this.state.search.size} onChange={p => this.onChangePage(p)} />
          )}
        </div>
      </div>,
    ];
  }
}

class Article extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  onCollect() {
    const { data } = this.props;
    const { collect } = this.state;
    let collectStatus = false;
    if (collect !== undefined) {
      collectStatus = collect;
    } else {
      collectStatus = data.collect;
    }
    if (!collectStatus) {
      My.addExperienceCollect(data.id)
        .then(() => {
          this.setState({ collect: true });
        });
    } else {
      My.delExperienceCollect(data.id)
        .then(() => {
          this.setState({ collect: false });
        });
    }
  }

  render() {
    const { data } = this.props;
    const { collect } = this.state;
    let collectStatus = false;
    if (collect !== undefined) {
      collectStatus = collect;
    } else {
      collectStatus = data.collect;
    }
    return (
      <div className="article-item p-t-2 b-b" onClick={() => linkTo(`/course/experience/detail/${data.id}`)}>
        <div className="t-1 t-s-14 f-w-b">
          {data.title}
          <div className="f-r t-3 t-s-12 f-w-d">
            <span>{data.updateTime && formatDate(data.updateTime, 'YYYY-MM-DD HH:mm:ss')}</span>
            <span className="m-l-2">阅读 {data.viewNumber}</span>
            <span className="m-l-2 c-p" onClick={(e) => {
              e.stopPropagation();
              this.onCollect();
            }}>
              {collectStatus ? '收藏' : '取消收藏'}
            </span>
          </div>
        </div>
        <div className="t-1 t-s-12 m-b-2">
          <span className="m-r-2">{data.user ? data.user.nickname : data.nickname}</span>
          <span className="m-r-2">{PrepareStatusMap[data.prepareStatus]}</span>
          <span className="m-r-2">备考:{!!data.experienceDay && formatMonth(data.experienceDay, false)}</span>
          <span className="m-r-2">
            {data.experienceScore}分 /提分 {ExperiencePercentMap[data.experiencePercent]}
          </span>
        </div>
        <div className="t-2 m-b-2 detail">{data.description}</div>
      </div>
    );
  }
}