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

import React, { Component } from 'react';
import './index.less';
import { Icon } from 'antd';
import Page from '@src/containers/Page';
import { formatDate } from '@src/services/Tools';
import Modal from '../../../components/Modal';

export default class extends Page {
  constructor(props) {
    props.size = 10;
    super(props);
  }

  initState() {
    return {
      tab: 'question',
      module: 'exercise',
      timerange: 'today',
      filterMap: {},
      sortMap: {},
      list: [],
      selectList: [],
      allChecked: false,
      showDetail: false,
    };
  }

  initData() {}

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

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

  renderView() {
    const { list = [] } = this.state;
    return (
      <div>
        <div className="top content t-8">
          千行课堂 > 全部课程 > OG20综合刷题 > 课时3 > <span className="t-1">我的笔记</span>
          <div className="f-r">返回课程</div>
        </div>
        <div className="center content">
          <div className="t-1 t-s-20 m-b-2">OG20综合刷题——第3课时:XXXXXXX</div>
          {list.map(item => {
            return (
              <Article
                data={item}
                onClick={() => this.setState({ showDetail: true, article: item })}
                onUnCollect={() => this.collectArticle(item, false)}
              />
            );
          })}
        </div>
        {this.renderModal()}
      </div>
    );
  }

  renderModal() {
    const { article = {} } = this.state;
    return [
      <ArticleDetail
        show={this.state.showDetail}
        data={article}
        onClose={() => this.setState({ showDetail: false })}
        onPrev={() => this.prevArticle()}
        onNext={() => this.nextArticle()}
      />,
    ];
  }
}

class ArticleDetail extends Component {
  render() {
    const { show, data, onClose, onPrev, onNext } = this.props;
    return (
      <Modal
        className="article-detail-modal"
        body={false}
        show={show}
        width={720}
        maskClosable
        close={false}
        onClose={onClose}
        center
      >
        <Icon type="left" className="prev" onClick={() => onPrev && onPrev()} />
        <Icon type="right" className="next" onClick={() => onNext && onNext()} />
        <div className="t-1 t-s-20 m-b-5">{data.title}</div>
        <div className="t-2 t-s-18 detail" dangerouslySetInnerHTML={{ __html: data.content }} />
      </Modal>
    );
  }
}

class Article extends Component {
  render() {
    const { data, onClick, onUnCollect } = this.props;
    return (
      <div className="article-item p-t-2 b-b" onClick={() => onClick && onClick()}>
        <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>{formatDate(data.updateTime, 'YYYY-MM-DD HH:mm:ss')}</span>
            <span className="m-l-2">阅读 {data.viewNumber}</span>
            <span className="m-l-2" onClick={() => onUnCollect()}>
              取消收藏
            </span>
          </div>
        </div>
        <div className="t-2 m-b-2 detail" dangerouslySetInnerHTML={{ __html: data.content }} />
      </div>
    );
  }
}