add modal

front/project/www/components/OtherModal/index.js

@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import Cropper from 'react-cropper';
 import 'cropperjs/dist/cropper.css';
 import './index.less';
+import { Checkbox } from 'antd';
 import FileUpload from '@src/components/FileUpload';
 import Assets from '@src/components/Assets';
 import scale from '@src/services/Scale';
@@ -13,6 +14,7 @@ import Modal from '../Modal';
 import { Common } from '../../stores/common';
 import { User } from '../../stores/user';
 import { My } from '../../stores/my';
+import Select from '../Select';
 
 export class BindPhone extends Component {
   constructor(props) {
@@ -538,3 +540,294 @@ export class InviteModal extends Component {
     );
   }
 }
+
+// 模考选择下载
+export class DownloadModal extends Component {
+  render() {
+    const { show, onConfirm, onCancel } = this.props;
+    return (
+      <Modal
+        className="download-modal"
+        show={show}
+        width={570}
+        title="下载"
+        confirmText="下载"
+        onConfirm={onConfirm}
+        onCancel={onCancel}
+      >
+        <div className="download-modal-wrapper">
+          <div className="t-2 t-s-18 m-b-1">请选择下载科目</div>
+          <div className="m-b-1">
+            <div className="t-2 t-s-16">
+              <Checkbox />
+              <span className="m-l-5">数学</span>
+              <span className="t-8">（版本7 最后更新：2019-07-16 11:41:13）</span>
+            </div>
+            <div className="t-2 t-s-16">
+              <Checkbox />
+              <span className="m-l-5">数学</span>
+              <span className="t-8">（版本7 最后更新：2019-07-16 11:41:13）</span>
+            </div>
+            <div className="t-2 t-s-16">
+              <Checkbox />
+              <span className="m-l-5">数学</span>
+              <span className="t-8">（版本7 最后更新：2019-07-16 11:41:13）</span>
+            </div>
+          </div>
+        </div>
+      </Modal>
+    );
+  }
+}
+
+// 模考开通确认
+export class OpenConfirmModal extends Component {
+  render() {
+    const { show, onConfirm, onCancel } = this.props;
+    return (
+      <Modal
+        className="open-confirm-modal"
+        show={show}
+        width={570}
+        title="开通确认"
+        confirmText="开通"
+        cancelText="暂不开通"
+        onConfirm={onConfirm}
+        onCancel={onCancel}
+      >
+        <div className="open-confirm-modal-wrapper m-b-2">
+          <div className="t-2 t-s-18">您正在开通「千行CAT模考」。</div>
+          <div className="t-2 t-s-18">模考有效期至：2019-11-17</div>
+        </div>
+      </Modal>
+    );
+  }
+}
+
+// 模考重置确认
+export class RestartConfirmModal extends Component {
+  render() {
+    const { show, onConfirm, onCancel } = this.props;
+    return (
+      <Modal
+        className="restart-confirm-modal"
+        show={show}
+        width={570}
+        title="重置确认"
+        confirmText="立即重置"
+        cancelText="暂不重置"
+        onConfirm={onConfirm}
+        onCancel={onCancel}
+      >
+        <div className="restart-confirm-modal-wrapper m-b-2">
+          <div className="t-2 t-s-18">重置后，可进行新一轮的模考。 </div>
+          <div className="t-2 t-s-18 m-b-2">本轮模考的成绩和报告可在本页面或「我的报告」查看。 </div>
+          <div className="t-2 t-s-18 m-b-1">只有 1 次重置机会。</div>
+        </div>
+      </Modal>
+    );
+  }
+}
+
+export class CheckErrorModal extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { data: { position: [] } };
+  }
+
+  onConfirm() {
+    const { onConfirm } = this.props;
+    if (onConfirm) onConfirm(this.state.data);
+    this.setState({ data: { position: [] } });
+  }
+
+  onCancel() {
+    const { onCancel } = this.props;
+    if (onCancel) onCancel();
+    this.setState({ data: { position: [] } });
+  }
+
+  render() {
+    const { show } = this.props;
+    const { data } = this.state;
+    return (
+      <Modal
+        show={show}
+        title="纠错"
+        btnType="link"
+        width={630}
+        onConfirm={() => this.onConfirm()}
+        onCancel={() => this.onCancel()}
+      >
+        <div className="t-2 m-b-1 t-s-16">
+          定位:
+          <input
+            value={data.position[0]}
+            className="t-c b-c-1 m-r-5"
+            style={{ width: 56 }}
+            onChange={e => {
+              data.position[0] = e.target.value;
+              this.setState({ data });
+            }}
+          />
+          <span className="require">页</span>
+          <input
+            value={data.position[1]}
+            className="t-c b-c-1 m-r-5"
+            style={{ width: 56 }}
+            onChange={e => {
+              data.position[1] = e.target.value;
+              this.setState({ data });
+            }}
+          />
+          <span className="require">行</span> , 题号
+          <input
+            value={data.position[2]}
+            className="t-c b-c-1"
+            style={{ width: 56 }}
+            onChange={e => {
+              data.position[2] = e.target.value;
+              this.setState({ data });
+            }}
+          />
+        </div>
+        <div className="t-2 t-s-16">错误内容是:</div>
+        <textarea
+          value={data.originContent}
+          className="b-c-1 w-10 p-10"
+          rows={10}
+          placeholder={'可简单描述您发现的问题'}
+          onChange={e => {
+            data.originContent = e.target.value;
+            this.setState({ data });
+          }}
+        />
+        <div className="t-2 t-s-16">应该更改为:</div>
+        <textarea
+          value={data.content}
+          className="b-c-1 w-10 p-10"
+          rows={10}
+          placeholder={'提供您认为正确的内容即可'}
+          onChange={e => {
+            data.content = e.target.value;
+            this.setState({ data });
+          }}
+        />
+        <div className="b-b m-t-2" />
+      </Modal>
+    );
+  }
+}
+
+export class QuestionModal extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { data: {} };
+  }
+
+  onConfirm() {
+    const { onConfirm } = this.props;
+    if (onConfirm) onConfirm(this.state.data);
+    this.setState({ data: {} });
+  }
+
+  onCancel() {
+    const { onCancel } = this.props;
+    if (onCancel) onCancel();
+    this.setState({ data: {} });
+  }
+
+  render() {
+    const { show, selectList } = this.props;
+    const { data } = this.state;
+    return (
+      <Modal
+        show={show}
+        title="提问"
+        btnType="link"
+        width={630}
+        confirmText="提交"
+        onConfirm={() => this.onConfirm()}
+        onCancel={() => this.onCancel()}
+      >
+        <div className="t-2 m-b-1 t-s-16">
+          针对<span className="t-4">课时1</span>的 <Select theme="white" list={selectList} />
+          进行提问.
+        </div>
+        <div className="t-2 t-s-16">老师讲解的内容是:</div>
+        <textarea
+          value={data.originContent}
+          className="b-c-1 w-10 p-10"
+          rows={4}
+          placeholder={'请简单描述，以便老师准确定位。'}
+          onChange={e => {
+            data.originContent = e.target.value;
+            this.setState({ data });
+          }}
+        />
+        <div className="t-2 t-s-16">您的问题是：</div>
+        <textarea
+          value={data.content}
+          className="b-c-1 w-10 p-10"
+          rows={4}
+          placeholder={'老师会在n小时内回答你的问题。'}
+          onChange={e => {
+            data.content = e.target.value;
+            this.setState({ data });
+          }}
+        />
+        <div className="b-b m-t-2" />
+      </Modal>
+    );
+  }
+}
+
+export class NoteModal extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { data: {} };
+  }
+
+  onConfirm() {
+    const { onConfirm } = this.props;
+    if (onConfirm) onConfirm(this.state.data);
+    this.setState({ data: {} });
+  }
+
+  onCancel() {
+    const { onCancel } = this.props;
+    if (onCancel) onCancel();
+    this.setState({ data: {} });
+  }
+
+  render() {
+    const { show, selectList } = this.props;
+    const { data } = this.state;
+    return (
+      <Modal
+        show={show}
+        title="笔记"
+        width={630}
+        confirmText="提交"
+        onConfirm={() => this.onConfirm()}
+        onCancel={() => this.onCancel()}
+      >
+        <div className="t-2 m-b-1 t-s-16">
+          OG20 刷题 语文 SC
+          <Select theme="white" list={selectList} />
+        </div>
+        <textarea
+          value={data.originContent}
+          className="b-c-1 w-10 p-10"
+          rows={10}
+          placeholder={'写下笔记，方便以后复习。'}
+          onChange={e => {
+            data.originContent = e.target.value;
+            this.setState({ data });
+          }}
+        />
+        <div className="b-b m-t-2" />
+      </Modal>
+    );
+  }
+}

front/project/www/routes/index.js

@@ -9,5 +9,17 @@ import Preview from './preview';
 import Question from './question';
 import Sentence from './sentence';
 import Textbook from './textbook';
+import Room from './room';
 
-export default [...Page, ...Examination, ...Exercise, ...My, ...Paper, ...Preview, ...Question, ...Sentence, ...Textbook];
+export default [
+  ...Page,
+  ...Examination,
+  ...Exercise,
+  ...My,
+  ...Paper,
+  ...Preview,
+  ...Question,
+  ...Sentence,
+  ...Textbook,
+  ...Room,
+];

front/project/www/routes/room/index.js

@@ -0,0 +1,3 @@
+import main from './main';
+
+export default [main];

front/project/www/routes/room/main/index.js

@@ -0,0 +1,9 @@
+export default {
+  path: '/room',
+  key: 'room-main',
+  title: '课堂',
+  needLogin: false,
+  component() {
+    return import('./page');
+  },
+};

front/project/www/routes/room/main/index.less

@@ -0,0 +1,3 @@
+@charset "utf-8";
+
+#room-main {}

front/project/www/routes/room/main/page.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import './index.less';
+import Page from '@src/containers/Page';
+import { NoteModal } from '../../../components/OtherModal';
+
+export default class extends Page {
+  initState() {
+    return {};
+  }
+
+  renderView() {
+    return (
+      <div>
+        <NoteModal selectList={[{ title: '123', key: '123' }]} show onConfirm={() => {}} onCancel={() => {}} />
+      </div>
+    );
+  }
+}