sourcecode/front/project/www/routes/my/tools/page.js

import React from 'react';
import './index.less';
import { Icon } from 'antd';
import Page from '@src/containers/Page';
import Assets from '@src/components/Assets';
import { asyncSMessage } from '@src/services/AsyncTools';
import { formatDate, getMap } from '@src/services/Tools';
import UserLayout from '../../../layouts/User';
import UserAction from '../../../components/UserAction';
import menu from '../index';
import Tabs from '../../../components/Tabs';
import More from '../../../components/More';
import Button from '../../../components/Button';
import Switch from '../../../components/Switch';
import TotalSort from '../../../components/TotalSort';
import Modal from '../../../components/Modal';
import UserTable from '../../../components/UserTable';
import UserPagination from '../../../components/UserPagination';
import { My } from '../../../stores/my';
import { User } from '../../../stores/user';
import { Order } from '../../../stores/order';
import { Textbook } from '../../../stores/textbook';
import { DataType, ServiceKey, RecordSource, TextbookFeedbackTarget } from '../../../../Constant';
import { Main } from '../../../stores/main';
import { Question } from '../../../stores/question';
import Select from '../../../components/Select';

const ServiceKeyMap = getMap(ServiceKey, 'value', 'label');
const RecordSourceMap = getMap(RecordSource, 'value', 'label');
const TextbookFeedbackTargetMap = getMap(TextbookFeedbackTarget, 'value', 'tips');

const dataHistoryColumns = [
  { title: '更新时间', key: 'time', width: 120 },
  { title: '位置', key: 'position', width: 120 },
  { title: '原内容', key: 'originContent', width: 120 },
  { title: '更改为', key: 'content', width: 120 },
  { title: '更新至', key: 'version', width: 90 },
];

const textbookHistoryColumns = [
  { title: '更新时间', key: 'createTime', width: 120 },
  { title: '版本', key: 'version', width: 120 },
  { title: '更新内容', key: 'content', width: 330 },
];

const openColumns = [
  { title: '商品名称', key: 'title', width: 240 },
  { title: '获取方式', key: 'source', width: 240 },
  { title: '开通期限', key: 'endTime', width: 240 },
  { title: '操作', key: 'handler', width: 90 },
];

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

  initState() {
    return {
      tab: 'data',
      sortMap: {},
      filterMap: {},
      feedbackError: { position: ['', '', ''] },
    };
  }

  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);

    const { tab } = this.state;
    switch (tab) {
      case 'textbook':
        this.refreshTextbook();
        break;
      case 'examination':
        this.refreshExamination();
        break;
      case 'vip':
        this.refreshVip();
        break;
      case 'cal':
        break;
      case 'data':
      default:
        this.refreshData();
        break;
    }
  }

  refreshTextbook() {
    Main.getService('textbook').then(result => {
      this.setState({ service: result });
    });
    Textbook.getInfo().then(result => {
      const { latest } = result;
      result.day = parseInt((new Date().getTime() - new Date(result.latest.startDate).getTime()) / 86400000, 10);

      result.expireDay =
        result.expireTime && parseInt((new Date().getTime() - new Date(result.expireTime).getTime()) / 86400000, 10);

      const list = [];

      list.push({ subject: 'quant', number: latest.quantNumber, time: latest.quantTime, version: latest.quantVersion });
      list.push({ subject: 'rc', number: latest.rcNumber, time: latest.rcTime, version: latest.rcVersion });
      list.push({ subject: 'ir', number: latest.irNumber, time: latest.irTime, version: latest.irVersion });
      this.setState({ data: result, list });
    });
  }

  textbookHistory({ page, size, subject }) {
    Textbook.listHistory({ subject }).then(result => {
      this.setState({
        updateList: result.map(row => {
          row.version = row[`${subject}Version`];
          row.content = row[`${subject}Content`];
          row.createTime = formatDate(row.createTime, 'YYYY-MM-DD\nHH:mm:ss');
          return row;
        }),
        // 不显示分页
        updateTotal: 0,
        maxHeight: 730,
        updatePage: page,
        updateData: { page, size, subject, columns: textbookHistoryColumns, type: 'textbook' },
      });
    });
  }

  refreshExamination() {
    Main.getService('qx_cat').then(result => {
      this.setState({ service: result });
    });
    Question.getExaminationInfo(result => {
      result.expireDay =
        result.expireTime && parseInt((new Date().getTime() - new Date(result.expireTime).getTime()) / 86400000, 10);
      this.setState({ data: result });
    });
  }

  refreshVip() {
    Main.getService('vip').then(result => {
      this.setState({ service: result });
    });
  }

  recordList({ page, size, service, isUse, isExpire }) {
    Order.listRecord({ page, size, productType: 'service', service, isUse, isExpire }).then(result => {
      this.setState({
        updateList: result.map(row => {
          row.title = ServiceKeyMap[service];
          row.source = RecordSourceMap[row.source];
          row.handler = (
            <a
              onClick={() => {
                this.open(row.id);
              }}
            >
              立即开通
            </a>
          );
          row.endTime = `${formatDate(row.endTime, 'YYYY-MM-DD')} 前`;
          return row;
        }),
        updateTotal: result.length,
        updatePage: page,
        updateData: { page, size, service, isUse, columns: isUse ? [] : openColumns, type: 'record' },
      });
    });
  }

  refreshData() {
    const dataTypeSelect = DataType.map(row => {
      row.title = row.label;
      row.key = row.value;
      return row;
    });
    dataTypeSelect.unshift({
      title: '全部',
      key: '',
    });
    this.setState({ dataTypeSelect });
    Main.dataStruct().then(result => {
      const structs = result
        .filter(row => row.level === 1)
        .map(row => {
          row.title = `${row.titleZh}${row.titleEn}`;
          row.key = `${row.id}`;
          return row;
        });
      structs.unshift({
        title: '全部',
        key: '',
      });
      this.setState({
        structs,
      });
    });
    My.listData(Object.assign({}, this.state.search)).then(result => {
      // result = {
      //   list: [
      //     {
      //       title: '123123',
      //       latestTime: '',
      //       id: 1,
      //       number: 10,
      //       version: '1231',
      //     },
      //   ],
      // };
      this.setState({
        list: result.list.map(row => {
          row.time = formatDate(row.time, 'YYYY-MM-DD HH:mm:ss');
          return row;
        }),
        total: result.total,
        page: this.state.search.page,
      });
    });
  }

  dataHistory({ dataId, page, size }) {
    My.listDataHistory({ page, size: 10000, dataId }).then(result => {
      result.list = result.list.map(row => {
        row.time = formatDate(row.time, 'YYYY-MM-DD\nHH:mm:ss');
        return row;
      });
      this.setState({
        // 不显示分页
        updateTotal: 0,
        maxHeight: 730,
        updateList: result.list,
        updatePage: page,
        updateData: { page, size, dataId, columns: dataHistoryColumns, type: 'data' },
      });
    });
  }

  onFilter(value) {
    this.search(value);
  }

  onSort(value) {
    const { sortMap } = this.state;
    const keys = Object.keys(value);
    const index = keys.length > 1 && sortMap[keys[0]] ? 1 : 0;
    this.search({ order: keys.length ? keys[index] : null, direction: keys.length ? value[keys[index]] : null });
  }

  onTabChange(tab) {
    const data = { tab };
    this.refreshQuery(data);
  }

  submitComment() {
    const { comment } = this.state;
    if (!comment.content) return;
    My.addComment(comment.channel, comment.position, comment.content).then(() => {
      this.setState({ showComment: false, showFinish: true, comment: {} });
    });
  }

  submitFeedbackError() {
    const { feedbackError } = this.state;
    if (!feedbackError.content || !feedbackError.originContent) return;
    My.addFeedbackErrorData(
      feedbackError.dataId,
      feedbackError.title,
      feedbackError.position.join(','),
      feedbackError.originContent,
      feedbackError.content,
    ).then(() => {
      this.setState({ showFinish: true, showFeedbackError: false, feedbackError: { position: ['', '', ''] } });
    });
  }

  submitFeedback() {
    const { feedback } = this.state;
    if (!feedback.content) return;
    if (feedback.target !== 'new' && !feedback.no) return;
    My.addTextbookFeedback(feedback.questionSubject, feedback.target, feedback.no, feedback.content).then(() => {
      this.setState({ showFinish: true, showFeedback: false, feedback: {} });
    });
  }

  subscribe(value) {
    My.subscribeData(value)
      .then(() => {
        const { info } = this.props.user;
        info.dataEmailSubscribe = value;
        User.infoHandle(info);
      })
      .catch(err => {
        asyncSMessage(err.message, 'warn');
      });
  }

  open(recordId) {
    Order.useRecord(recordId).then(() => {
      asyncSMessage('开通成功');
      this.refresh();
    });
  }

  renderView() {
    const { config } = this.props;
    return <UserLayout active={config.key} menu={menu} center={this.renderDetail()} />;
  }

  renderDetail() {
    const {
      tab,
      comment = {},
      feedback = {},
      feedbackError = {},
      showComment,
      showFinish,
      showUpdate,
      showFeedback,
      showFeedbackError,
      updateList,
      updateTotal,
      maxHeight,
      updateData = {},
    } = this.state;
    return (
      <div className="table-layout">
        <Tabs
          border
          type="division"
          theme="theme"
          size="small"
          space={2.5}
          width={100}
          active={tab}
          tabs={[
            { key: 'data', title: '资料' },
            { key: 'textbook', title: '机经' },
            { key: 'examination', title: '模考' },
            { key: 'vip', title: 'VIP' },
            { key: 'cal', title: '考分计算器' },
          ]}
          onChange={key => this.onTabChange(key)}
        />
        {this[`renderTab${tab}`]()}
        <Modal
          show={showUpdate}
          maskClosable
          close={false}
          body={false}
          width={630}
          onClose={() => this.setState({ showUpdate: false, updateList: [] })}
        >
          <UserTable
            size="small"
            theme="top"
            columns={updateData.columns}
            data={updateList}
            current={updateData.page}
            pageSize={updateData.size}
            onChange={page => {
              updateData.page = page;
              if (updateData.type === 'data') {
                this.dataHistory(updateData);
              } else if (updateData.type === 'textbook') {
                this.textbookHistory(updateData);
              } else if (updateData.type === 'record') {
                this.recordList(updateData);
              }
            }}
            total={updateTotal}
            maxHeight={maxHeight}
          />
        </Modal>
        <Modal
          show={showComment}
          title="评价"
          onConfirm={() => comment.content && this.submitComment()}
          onCancel={() => this.setState({ showComment: false, comment: {} })}
        >
          <textarea
            value={comment.content}
            className="b-c-1 w-10 p-10"
            rows={6}
            placeholder="您的看法对我们来说很重要！"
            onChange={e => {
              comment.content = e.target.value;
              this.setState({ comment });
            }}
          />
          <div className="b-b m-t-2" />
        </Modal>
        <Modal
          show={showFinish}
          title="提交成功"
          confirmText="好的，知道了"
          btnAlign="center"
          onConfirm={() => this.setState({ showFinish: false })}
        >
          <div className="t-2 t-s-18">
            <Icon type="check" className="t-5 m-r-5" />
            您的每一次反馈都是千行进步的动力。
          </div>
        </Modal>
        <Modal
          show={showFeedbackError}
          title="纠错"
          btnType="link"
          width={630}
          onConfirm={() => this.submitFeedbackError()}
          onCancel={() => this.setState({ showFeedbackError: false })}
        >
          <div className="t-2 m-b-1 t-s-16">
            定位:
            <input value={feedbackError.position[0]} className="t-c b-c-1 m-r-5" style={{ width: 56 }} onChange={e => {
              feedbackError.position[0] = e.target.value;
              this.setState({ feedbackError });
            }} />
            <span className="require">页</span>
            <input value={feedbackError.position[1]} className="t-c b-c-1 m-r-5" style={{ width: 56 }} onChange={e => {
              feedbackError.position[1] = e.target.value;
              this.setState({ feedbackError });
            }} />
            <span className="require">行</span> , 题号
            <input value={feedbackError.position[2]} className="t-c b-c-1" style={{ width: 56 }} onChange={e => {
              feedbackError.position[2] = e.target.value;
              this.setState({ feedbackError });
            }} />
          </div>
          <div className="t-2 t-s-16">错误内容是:</div>
          <textarea
            value={feedbackError.originContent}
            className="b-c-1 w-10 p-10"
            rows={10}
            placeholder={'可简单描述您发现的问题'}
            onChange={e => {
              feedbackError.originContent = e.target.value;
              this.setState({ feedbackError });
            }}
          />
          <div className="t-2 t-s-16">应该更改为:</div>
          <textarea
            value={feedbackError.content}
            className="b-c-1 w-10 p-10"
            rows={10}
            placeholder={'提供您认为正确的内容即可'}
            onChange={e => {
              feedbackError.content = e.target.value;
              this.setState({ feedbackError });
            }}
          />
          <div className="b-b m-t-2" />
        </Modal>
        <Modal
          show={showFeedback}
          title="反馈"
          width={630}
          onConfirm={() => this.submitFeedback()}
          onCancel={() => this.setState({ showFeedback: false })}
        >
          <div className="t-2 t-s-16 m-b-1">
            机经类别:
            <Select
              value={feedback.questionSubject}
              theme="white"
              list={[{ title: '数学机经', key: 'quant' }, { title: '逻辑机经', key: 'rc' }, { title: '阅读机经', key: 'ir' }]}
              onChange={(value) => {
                feedback.questionSubject = value;
                this.setState({ feedback });
              }}
            />
            反馈类型:
            <Select
              value={feedback.target}
              theme="white"
              list={TextbookFeedbackTarget}
              onChange={(value) => {
                feedback.target = value;
                this.setState({ feedback });
              }}
            />
            <span hidden={feedback.target === 'new'}>
              题号是
              <input value={feedback.no} style={{ width: 80 }} className="m-l-1 b-c-1 t-c" onChange={e => {
                feedback.no = e.target.value;
                this.setState({ feedback });
              }} />
            </span>
          </div>
          <div className="t-2 t-s-16">{TextbookFeedbackTargetMap[feedback.target]}:</div>
          <textarea
            value={feedback.content}
            className="b-c-1 w-10 p-10"
            rows={10}
            placeholder={TextbookFeedbackTargetMap[feedback.target]}
            onChange={e => {
              feedback.content = e.target.value;
              this.setState({ feedback });
            }}
          />
          <div className="b-b m-t-2" />
        </Modal>
      </div>
    );
  }

  renderTabdata() {
    const { list = [], filterMap = {}, sortMap = {}, structs, dataTypeSelect, total, page } = this.state;
    const { info } = this.props.user;
    return (
      <div className="tab-1-layout">
        <UserAction
          selectList={[
            {
              label: '学科',
              key: 'structId',
              select: structs,
            },
            {
              label: '资料形式',
              key: 'dataType',
              select: dataTypeSelect,
            },
          ]}
          sortList={[
            { right: true, label: '销量', key: 'sale_number' },
            { right: true, label: '更新时间', key: 'latest_time' },
          ]}
          sortMap={sortMap}
          filterMap={filterMap}
          onFilter={value => this.onFilter(value)}
          onSort={value => this.onSort(value)}
          right={
            <div className="email">
              邮箱订阅{' '}
              <Switch
                checked={info.dataEmailSubscribe}
                onChange={() => {
                  this.subscribe(!info.dataEmailSubscribe);
                }}
              />
            </div>
          }
        />
        <div className="data-layout">
          {list.map(item => {
            return (
              <div className="data-item">
                <Assets name="sun_blue" src={item.cover} />
                <div className="fixed">
                  <div className="btns">
                    <Button
                      size="small"
                      radius
                      onClick={() => {
                        openLink(item.resource);
                      }}
                    >
                      阅读
                    </Button>
                    <div
                      className="white"
                      onClick={() => {
                        openLink(item.resource);
                      }}
                    >
                      下载
                    </div>
                  </div>
                </div>
                <div className="title">
                  <span>版本{item.version}</span>
                  {item.title}
                </div>
                <div className="date">{formatDate(item.latestTime, 'YYYY-MM-DD HH:mm:ss')}</div>
                <More
                  menu={[
                    { label: '纠错', key: 'feedback' },
                    { label: '评价', key: 'comment' },
                    { label: '更新', key: 'update' },
                  ]}
                  onClick={value => {
                    const { key } = value;
                    if (key === 'comment') {
                      this.setState({ showComment: true, comment: { channel: 'course_data', position: item.id } });
                    } else if (key === 'update') {
                      this.setState({ showUpdate: true });
                      this.dataHistory({ dataId: item.id, page: 1, size: 10 });
                    } else if (key === 'feedback') {
                      this.setState({ showFeedbackError: true, feedbackError: { dataId: item.id, title: item.title, position: ['', '', ''] } });
                    }
                  }}
                />
              </div>
            );
          })}
        </div>
        {total > 0 && list.length > 0 && (
          <UserPagination total={total} current={page} pageSize={this.state.search.size} onChange={p => this.onChangePage(p)} />
        )}
      </div>
    );
  }

  renderTabtextbook() {
    const { data = {}, list = [], service } = this.state;
    const { latest = {}, day } = data;
    return (
      <div className="tab-2-layout">
        <UserAction
          left={
            <div className="total-log">
              <span>最新换库</span>
              <span>{latest.startDate ? formatDate(latest.startDate, 'YYYY-MM-DD') : ''}</span>
              <span>
                已换库<b>{day}</b>天
              </span>
            </div>
          }
          right={
            !data.hasService &&
            data.unUseRecord && (
              <div
                className="email"
                onClick={() => {
                  this.recordList({ page: 1, size: 10, service: 'textbook', isUse: false, isExpire: false });
                }}
              >
                待开通
              </div>
            )
          }
        />
        {data.hasService && (
          <div className="data-layout">
            {list.map(item => {
              return (
                <div className="data-item">
                  <Assets name="sun_blue" />
                  <div className="title">
                    已更新至<b>{item.num}</b>题
                  </div>
                  <div className="date">{item.date}</div>
                  <More
                    menu={[
                      { label: '更新', key: 'update' },
                      { label: '反馈', key: 'feedback' },
                      { label: '评价', key: 'comment' },
                    ]}
                    onClick={value => {
                      const { key } = value;
                      if (key === 'comment') {
                        this.setState({ showComment: true, comment: { channel: 'library' } });
                      } else if (key === 'update') {
                        this.setState({ showUpdate: true });
                        this.textbookHistory({ page: 1, size: 100, subject: item.subject });
                      } else if (key === 'feedback') {
                        this.setState({ showFeedback: true, feedback: { questionSubject: item.subject, target: TextbookFeedbackTarget[0].value } });
                      }
                    }}
                  />
                </div>
              );
            })}
          </div>
        )}
        {!data.hasService && !data.unUseRecord && (
          <div className="tip-layout">
            <div className="t1">还未购买本月机经</div>
            <div className="desc">¥ {service && service.package && service.package[0].price}</div>
            <Button radius size="lager" width={150}>
              立即购买
            </Button>
          </div>
        )}
        {data.hasService && (
          <div className="tip-layout">
            <div className="t1">使用中</div>
            <div className="t2">距离到期还有 {data.expireDay} 天</div>
          </div>
        )}
        {!data.hasService && data.unUseRecord && (
          <div className="tip-layout">
            <div className="t2">请于{formatDate(data.unUseRecord.endTime, 'YYYY-MM-DD')}前开通</div>
            <Button
              radius
              size="lager"
              width={150}
              onClick={() => {
                this.open(data.unUseRecord.id);
              }}
            >
              立即开通
            </Button>
          </div>
        )}
      </div>
    );
  }

  renderTabexamination() {
    const { data = {}, service } = this.state;
    return (
      <div className="tab-3-layout">
        <UserAction
          right={
            !data.hasService &&
            data.unUseRecord && (
              <div
                className="email"
                onClick={() => {
                  this.recordList({ page: 1, size: 10, service: 'qx_cat', isUse: false, isExpire: false });
                }}
              >
                待开通
              </div>
            )
          }
        />
        {!data.hasService && !data.unUseRecord && !data.expireTime && (
          <div className="tip-layout">
            <div className="t1">未购买</div>
            <div className="desc">¥ {service && service.package && service.package[0].price}</div>
            <Button radius size="lager" width={150}>
              立即购买
            </Button>
          </div>
        )}
        {!data.hasService && data.unUseRecord && (
          <div className="tip-layout">
            <div className="t2">请于{formatDate(data.unUseRecord.endTime, 'YYYY-MM-DD')}前开通</div>
            <Button
              radius
              size="lager"
              width={150}
              onClick={() => {
                this.open(data.unUseRecord.id);
              }}
            >
              立即开通
            </Button>
          </div>
        )}
        {data.hasService && (
          <div className="tip-layout">
            <div className="t1">使用中</div>
            <div className="t2">距离到期还有 {data.expireDay} 天</div>
          </div>
        )}
        {!data.hasService && !data.unUseRecord && data.expireTime && (
          <div className="tip-layout">
            <div className="t3">已过期</div>
            <div className="date">
              {formatDate(data.startTime, 'YYYY-MM-DD')} ~ {formatDate(data.expireTime, 'YYYY-MM-DD')}
            </div>
            <div className="desc">¥ {service && service.package && service.package[0].price}</div>
            <Button radius size="lager" width={150}>
              立即购买
            </Button>
          </div>
        )}
      </div>
    );
  }

  renderTabvip() {
    const { data } = this.state;
    return (
      <div className="tab-4-layout">
        {!data.hasService && !data.unUseRecord && !data.expireTime && (
          <div className="tip-layout">
            <div className="t2">未购买</div>
            <Button radius size="lager" width={150}>
              立即购买
            </Button>
          </div>
        )}
        {data.hasService && (
          <div className="tip-layout">
            <div className="t1">使用中</div>
            <div className="desc">{formatDate(data.expireTime, 'YYYY-MM-DD')} 到期</div>
            <Button radius size="lager" width={150}>
              续费
            </Button>
          </div>
        )}
        {!data.hasService && !data.unUseRecord && data.expireTime && (
          <div className="tip-layout">
            <div className="t1">已过期</div>
            <div className="desc">
              {formatDate(data.startTime, 'YYYY-MM-DD')} ~ {formatDate(data.expireTime, 'YYYY-MM-DD')}
            </div>
            <Button radius size="lager" width={150}>
              立即购买
            </Button>
          </div>
        )}
      </div>
    );
  }

  renderTabcal() {
    const { data = {} } = this.state;
    return (
      <div className="tab-5-layout">
        <TotalSort
          value={data.value || 650}
          onChange={value => {
            data.value = value;
            this.setState({ data });
          }}
        />
      </div>
    );
  }
}