sourcecode/front/project/www/routes/sentence/read/page.js

import React from 'react';
import { Tooltip } from 'antd';
import './index.less';
import Page from '@src/containers/Page';
import Icon from '../../../components/Icon';
import Progress from '../../../components/Progress';
import Assets from '../../../../../src/components/Assets';
import { Sentence } from '../../../stores/sentence';

export default class extends Page {
  constructor(props) {
    super(props);
    this.page = 0;
    this.inited = false;
    this.timeout = null;
    this.articleMap = {};
    this.pageLine = 100;
  }

  init() {
    this.lastTime = new Date();
  }

  initState() {
    return { showJump: false, showMenu: false, currentPage: 0, totalPage: 0 };
  }

  initData() {
    const { chapter = 0, part = 0 } = this.state.search;
    let { page = 0 } = this.state.search;

    const handler = this.refreshSentence();
    handler.then(() => {
      if (chapter > 0) {
        if (!part) {
          ({ page } = this.searchArticle(chapter, 1));
        } else {
          ({ page } = this.searchArticle(chapter, part));
        }
      }
      this.jumpPage(page);
    });
  }

  refreshSentence() {
    if (this.inited) return Promise.resolve();
    return Sentence.listArticle()
      .then(result => {
        const articleMap = {};
        let totalPage = 0;
        let maxChapter = 0;
        let introduction = null;
        result.forEach(article => {
          if (article.chapter === 0) introduction = article;
          if (!articleMap[article.chapter]) {
            articleMap[article.chapter] = [];
            if (article.chapter > maxChapter) maxChapter = article.chapter;
          }
          article.startPage = totalPage + 1;
          article.endPage = totalPage + article.pages;
          totalPage += article.pages;
          articleMap[article.chapter].push(article);
        });
        this.setState({ articleMap, totalPage, maxChapter });
        return introduction;
      })
      .then(introduction => {
        return Sentence.getInfo().then(result => {
          const map = {};
          // 添加前言
          if (introduction) {
            result.chapters.unshift({
              title: introduction.title,
              value: 0,
            });
          }

          result.chapters.forEach(row => {
            map[row.value] = row;
          });
          this.setState({ sentence: result, chapterMap: map });
        });
      })
      .then(() => {
        this.inited = true;
      });
  }

  refreshArticle(articleId) {
    if (this.articleMap[articleId]) return Promise.resolve(this.articleMap[articleId]);
    return Sentence.detailArticle(articleId).then(result => {
      this.articleMap[articleId] = result;
      return result;
    });
  }

  prevPage() {
    const { currentPage } = this.state;
    if (currentPage > 1) {
      this.jumpPage(currentPage - 1);
    }
  }

  nextPage() {
    const { currentPage, totalPage } = this.state;
    if (currentPage < totalPage) {
      this.jumpPage(currentPage + 1);
    }
  }

  jumpPage(targetPage) {
    // 计算哪篇文章
    const { target, index, allow } = this.computeArticle(targetPage);
    if (!allow) {
      // todo 无法访问：非试用
      return;
    }
    this.page = targetPage;
    this.setState({ inputPage: targetPage });
    const { article = {} } = this.state;
    this.updateProgress(target, index, article);
    this.refreshArticle(target.id).then(row => {
      this.setState({ article: row, index, currentPage: targetPage });
    });
  }

  computeArticle(page) {
    const { articleMap, maxChapter, sentence } = this.state;
    let target = null;
    let index = 0;
    const allow = true || sentence.code || page <= sentence.trailPages;
    for (let i = 0; i <= maxChapter; i += 1) {
      const list = articleMap[i];
      if (!list || list.length === 0) continue;
      for (let j = 0; j < list.length; j += 1) {
        const article = list[j];
        if (article.endPage >= page) {
          target = article;
          index = page - article.startPage;
          // if (!sentence.code) {
          //   if (!article.isTrail) {
          //     allow = false;
          //   } else if (index < article.trailStart - 1) {
          //     allow = false;
          //   } else if (index > article.trailEnd - 1) {
          //     allow = false;
          //   }
          // }
          return { target, index, allow };
        }
      }
    }
    return { allow };
  }

  searchArticle(chapter, part) {
    const { articleMap } = this.state;
    let target = null;
    let page = 0;
    if (!part) part = 1;
    const list = articleMap[chapter];
    for (let j = 0; j < list.length; j += 1) {
      const article = list[j];
      if (article.part === Number(part)) {
        target = article;
        page = article.startPage;
        // if (sentence.code) {
        //   page = article.startPage;
        // } else {
        //   // 试用章节页码
        //   page = article.startPage + article.trailPage - 1;
        // }
        break;
      }
    }
    return { target, page };
  }

  updateProgress(target, index, current) {
    if (this.timeout) {
      clearTimeout(this.timeout);
      this.timeout = null;
    }
    const now = new Date();
    const time = (now.getTime() - this.lastTime.getTime()) / 1000;
    this.lastTime = now;
    const progress = ((index + 1) * 100) / target.pages;
    Sentence.updateProgress(target.chapter, target.part, progress, time, current.chapter, current.page);
    this.timeout = setTimeout(() => {
      // 最长5分钟阅读时间
      Sentence.updateProgress(0, 0, 0, 5 * 60, target.chapter, target.part);
    }, 5 * 60 * 1000);
  }

  renderView() {
    return (
      <div className="layout">
        {this.renderBody()}
        {this.renderRight()}
        {this.renderBottom()}
        {this.renderProgress()}
      </div>
    );
  }

  renderBody() {
    const { showMenu, article, index, chapterMap = {} } = this.state;
    return article ? (
      <div className="layout-body">
        <div className="crumb">千行长难句解析 >> {(chapterMap[article.chapter] || {}).title}</div>
        {article.chapter > 0 && <div className="title">{article.title}</div>}
        <div className="overload" style={{ top: index * -20 * this.pageLine }}>
          <div className="text" dangerouslySetInnerHTML={{ __html: article.content }} />
        </div>
        {showMenu && this.renderMenu()}
      </div>
    ) : (
      <div className="layout-body">
        <div className="free-over">
          <div className="free-over-title">试读已结束，购买后可继续阅读。</div>
          <div className="free-over-btn">¥ 20.00 | 立即购买</div>
          <div className="free-over-desc">
            <div className="free-over-desc-title">张小爱笑笑笑 2019-07-13</div>
            <div className="free-over-desc-content">
              韩瑞祥/文 移民文学（Migrations
              literatur）成为当今德国文坛上一个备受关注的文学现象，一批又一批脱颖而出的移民文学作家为当今德国文学的发展不断地
            </div>
          </div>
        </div>
      </div>
    );
  }

  renderMenu() {
    const { sentence = {}, articleMap } = this.state;
    const { chapters = [] } = sentence;
    let page = 1;
    const code = !!sentence.code;
    const message = '购买后访问';
    return (
      <div className="layout-menu">
        <div className="title">目录</div>
        <div
          className="close"
          onClick={() => {
            this.setState({ showMenu: false });
          }}
        >
          x
        </div>
        <div className="chapter">
          {chapters.map(chapter => {
            if (chapter.exercise) {
              return [<div className={'chapter-item trail'}>{chapter.title}</div>];
            }
            chapter.startPage = page;
            const _item = code ? (
              <div
                className={'chapter-item'}
                onClick={() => {
                  this.jumpPage(chapter.startPage);
                }}
              >
                {chapter.title}
                <div className="page">{chapter.startPage}</div>
              </div>
            ) : (
              <Tooltip title={message}>
                <div className={'chapter-item trail'}>
                  {chapter.title}
                  <div className="page">{chapter.startPage}</div>
                </div>
              </Tooltip>
            );
            const list = [_item];
            if (chapter.value) {
              (articleMap[chapter.value] || []).forEach(article => {
                // 得到下一章节page
                page += article.pages;
                const item = code ? (
                  <div
                    className={'part-item'}
                    onClick={() => {
                      if (code) this.jumpPage(article.startPage);
                    }}
                  >
                    {article.title}
                    <div className="page">{article.startPage}</div>
                  </div>
                ) : (
                  <Tooltip title={message}>
                    <div className={'part-item trail'}>
                      {article.title}
                      <div className="page">{article.startPage}</div>
                    </div>
                  </Tooltip>
                );
                list.push(item);
              });
            }
            return list;
          })}
        </div>
      </div>
    );
  }

  renderRight() {
    return (
      <div className="layout-right">
        <div
          className="m-b-1"
          onClick={() => {
            this.setState({ showMenu: true });
          }}
        >
          <Icon name="menu" />
        </div>
        <div
          className="m-b-1"
          onClick={() => {
            this.prevPage();
          }}
        >
          <Icon name="down_turn" />
        </div>
        <div
          className="m-b-1"
          onClick={() => {
            this.nextPage();
          }}
        >
          <Icon name="up_turn" />
        </div>
      </div>
    );
  }

  renderBottom() {
    const { showJump, currentPage, totalPage } = this.state;
    return (
      <div className="layout-bottom">
        <span className="per">{totalPage ? parseInt((currentPage * 100) / totalPage, 10) : 0}%</span>
        <span className="num">
          {currentPage}/{totalPage}
        </span>
        <span className="btn">
          <Assets
            name={showJump ? 'unfold_icon_down' : 'unfold_icon_up'}
            onClick={() => {
              this.setState({ showJump: !showJump });
            }}
          />
          <div hidden={!showJump} className="jump">
            <span className="text">当前页</span>
            <input
              className="input"
              value={this.state.inputPage}
              onChange={e => {
                this.page = Number(e.target.value);
                this.setState({ inputPage: e.target.value });
              }}
            />
            <Assets
              name="yes_icon"
              onClick={() => {
                if (this.page < 1 || this.page > totalPage) return;
                this.jumpPage(this.page);
              }}
            />
          </div>
        </span>
      </div>
    );
  }

  renderProgress() {
    const { currentPage, totalPage } = this.state;
    return (
      <div className="layout-progress">
        <Progress
          size="small"
          theme="theme"
          radius={false}
          progress={totalPage ? parseInt((currentPage * 100) / totalPage, 10) : 0}
        />
      </div>
    );
  }
}