|
@@ -0,0 +1,648 @@
|
|
|
+import React from 'react';
|
|
|
+import ReactDOM from 'react-dom';
|
|
|
+import { Carousel, Tooltip } from 'antd';
|
|
|
+import { Link } from 'react-router-dom';
|
|
|
+import Fullscreen from 'react-fullscreen-crossbrowser';
|
|
|
+import './index.less';
|
|
|
+import Page from '@src/containers/Page';
|
|
|
+import { formatSeconds, formatPercent, formatDate, sortListWithOrder } from '@src/services/Tools';
|
|
|
+import Assets from '@src/components/Assets';
|
|
|
+import Navigation from '../../../components/Navigation';
|
|
|
+import Tabs from '../../../components/Tabs';
|
|
|
+import Icon from '../../../components/Icon';
|
|
|
+import Switch from '../../../components/Switch';
|
|
|
+import Select from '../../../components/Select';
|
|
|
+import AnswerSelect from '../../../components/AnswerSelect';
|
|
|
+import AnswerList from '../../../components/AnswerList';
|
|
|
+import AnswerButton from '../../../components/AnswerButton';
|
|
|
+import AnswerTable from '../../../components/AnswerTable';
|
|
|
+import OtherAnswer from '../../../components/OtherAnswer';
|
|
|
+import { AskTarget } from '../../../../Constant';
|
|
|
+import { Question } from '../../../stores/question';
|
|
|
+import { My } from '../../../stores/my';
|
|
|
+import Sentence from '../../paper/process/sentence';
|
|
|
+
|
|
|
+export default class extends Page {
|
|
|
+ initState() {
|
|
|
+ return {
|
|
|
+ step: 0,
|
|
|
+ hideAnalysis: true,
|
|
|
+ analysisTab: 'official',
|
|
|
+ showAnswer: false,
|
|
|
+ noteField: AskTarget[0].key,
|
|
|
+ showIds: false,
|
|
|
+
|
|
|
+ // question: {
|
|
|
+ // content: {
|
|
|
+ // typeset: 'one',
|
|
|
+ // },
|
|
|
+ // // questionType: 'awa',
|
|
|
+ // answer: {
|
|
|
+ // subject: [[{ text: 'like', uuid: 'hKyz' }]],
|
|
|
+ // options: ['parallel'],
|
|
|
+ // },
|
|
|
+ // stem: "<p><span uuid='kBJe'>I</span> <span uuid='hKyz'>like</span> <span uuid='fQXh'>book</span></p>",
|
|
|
+ // },
|
|
|
+ // userQuestion: {
|
|
|
+ // userAnswer: {
|
|
|
+ // subject: [{ text: 'I', uuid: 'kBJe' }],
|
|
|
+ // options: ['compare'],
|
|
|
+ // },
|
|
|
+ // no: 2,
|
|
|
+ // },
|
|
|
+ // paper: {
|
|
|
+ // title: '长难句练习',
|
|
|
+ // questionNumber: 20,
|
|
|
+ // },
|
|
|
+ // report: {
|
|
|
+ // paperModule: 'sentence',
|
|
|
+ // },
|
|
|
+
|
|
|
+ };
|
|
|
+ }
|
|
|
+
|
|
|
+ initData() {
|
|
|
+ const { id } = this.params;
|
|
|
+ Question.getDetailById(id).then(userQuestion => {
|
|
|
+ const { question, questionNos, paper, note, report, setting } = userQuestion;
|
|
|
+ let { questionNo } = userQuestion;
|
|
|
+ if (!questionNo) ([questionNo] = questionNos);
|
|
|
+ if (!question.answer) question.answer = { questions: [] };
|
|
|
+ if (!question.answerDistributed) question.answerDistributed = { questions: [] };
|
|
|
+ if (!userQuestion.userAnswer) userQuestion.userAnswer = { questions: [] };
|
|
|
+ if ((report.setting || {}).disorder) {
|
|
|
+ const { content } = question;
|
|
|
+ // 还原做题顺序
|
|
|
+ content.questions.forEach((q, i) => {
|
|
|
+ q.select = sortListWithOrder(question.select, setting.questions[i]);
|
|
|
+ });
|
|
|
+ question.answer.questions.forEach((q, i) => {
|
|
|
+ Object.keys(q).forEach((k) => {
|
|
|
+ if (q[k]) q[k] = sortListWithOrder(q[k], setting.questions[i]);
|
|
|
+ });
|
|
|
+ });
|
|
|
+ question.answerDistributed.questions.forEach((q, i) => {
|
|
|
+ Object.keys(q).forEach((k) => {
|
|
|
+ if (q[k]) q[k] = sortListWithOrder(q[k], setting.questions[i]);
|
|
|
+ });
|
|
|
+ });
|
|
|
+ userQuestion.userAnswer.questions.forEach((q, i) => {
|
|
|
+ Object.keys(q).forEach((k) => {
|
|
|
+ if (q[k]) q[k] = sortListWithOrder(q[k], setting.questions[i]);
|
|
|
+ });
|
|
|
+ });
|
|
|
+ }
|
|
|
+ this.setState({ userQuestion, question, questionNo, note, paper, questionNos });
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ prevQuestion() {
|
|
|
+ const { userQuestion } = this.state;
|
|
|
+ if (userQuestion.no === 1) return;
|
|
|
+ Question.getDetailByNo(userQuestion.reportId, userQuestion.no - 1).then((r) => {
|
|
|
+ linkTo(`/paper/question/${r.id}`);
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ nextQuestion() {
|
|
|
+ const { userQuestion } = this.state;
|
|
|
+ if (userQuestion.questionNumber === userQuestion.no) return;
|
|
|
+ Question.getDetailByNo(userQuestion.reportId, userQuestion.no + 1).then((r) => {
|
|
|
+ linkTo(`/paper/question/${r.id}`);
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ submitAsk() {
|
|
|
+ const { question = {}, questionNo = {}, paper = {}, ask = {} } = this.state;
|
|
|
+ if (ask.originContent === '' || ask.content === '' || ask.target === '') return;
|
|
|
+ My.addQuestionAsk(paper.id, ask.target, question.questionModule, questionNo.id, ask.originContent, ask.content).then(() => {
|
|
|
+ this.setState({ askModal: false, askOkModal: true });
|
|
|
+ }).catch(err => {
|
|
|
+ this.setState({ askError: err.message });
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ submitFeedbackError() {
|
|
|
+ const { feedback = {}, question = {}, questionNo = {} } = this.state;
|
|
|
+ if (feedback.originContent === '' || feedback.content === '' || feedback.target === '') return;
|
|
|
+ My.addFeedbackErrorQuestion(question.questionModule, questionNo.id, questionNo.title, feedback.target, feedback.originContent, feedback.content).then(() => {
|
|
|
+ this.setState({ feedbackModal: false, feedbackOkModal: true });
|
|
|
+ }).catch(err => {
|
|
|
+ this.setState({ feedbackError: err.message });
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ submitNote(close) {
|
|
|
+ const { question = {}, questionNo = {}, note = {} } = this.state;
|
|
|
+ My.updateQuestionNote(question.questionModule, questionNo.id, note).then(() => {
|
|
|
+ if (close) this.setState({ noteModal: false });
|
|
|
+ }).catch(err => {
|
|
|
+ this.setState({ noteError: err.message });
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ toggleFullscreen() {
|
|
|
+ const { isFullscreenEnabled } = this.state;
|
|
|
+ this.setState({ isFullscreenEnabled: !isFullscreenEnabled });
|
|
|
+ }
|
|
|
+
|
|
|
+ toggleCollect() {
|
|
|
+ const { userQuestion = {}, question = {}, questionNo = {} } = this.state;
|
|
|
+ if (!userQuestion.collect) {
|
|
|
+ My.addQuestionCollect(question.questionModule, questionNo.id).then(() => {
|
|
|
+ userQuestion.collect = true;
|
|
|
+ this.setState({ userQuestion });
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ My.delQuestionCollect(question.questionModule, questionNo.id).then(() => {
|
|
|
+ userQuestion.collect = false;
|
|
|
+ this.setState({ userQuestion });
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ formatStem(text) {
|
|
|
+ if (!text) return '';
|
|
|
+ const { showAnswer, question = { content: {} }, userQuestion } = this.state;
|
|
|
+ const { table = {}, questions = [] } = question.content;
|
|
|
+ text = text.replace(/#select#/g, "<span class='#select#' />");
|
|
|
+ text = text.replace(/#table#/g, "<span class='#table#' />");
|
|
|
+ setTimeout(() => {
|
|
|
+ const selectList = document.getElementsByClassName('#select#');
|
|
|
+ const tableList = document.getElementsByClassName('#table#');
|
|
|
+ for (let i = 0; i < selectList.length; i += 1) {
|
|
|
+ if (!questions[i]) break;
|
|
|
+ ReactDOM.render(
|
|
|
+ <AnswerSelect
|
|
|
+ list={questions[i].select}
|
|
|
+ type={'single'}
|
|
|
+ selected={(userQuestion.userAnswer || { questions: [] }).questions[i]}
|
|
|
+ answer={(question.answer || { questions: [] }).questions[i]}
|
|
|
+ fix
|
|
|
+ show={showAnswer} />,
|
|
|
+ selectList[i],
|
|
|
+ );
|
|
|
+ }
|
|
|
+ if (table.row && table.col && table.header) {
|
|
|
+ const columns = table.header.map((title, index) => {
|
|
|
+ return { title, key: index };
|
|
|
+ });
|
|
|
+ for (let i = 0; i < tableList.length; i += 1) {
|
|
|
+ ReactDOM.render(<AnswerTable list={columns} columns={columns} data={table.data} />, tableList[i]);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }, 1);
|
|
|
+ return text;
|
|
|
+ }
|
|
|
+
|
|
|
+ renderView() {
|
|
|
+ return (
|
|
|
+ <Fullscreen
|
|
|
+ enabled={this.state.isFullscreenEnabled}
|
|
|
+ onChange={isFullscreenEnabled => this.setState({ isFullscreenEnabled })}
|
|
|
+ >
|
|
|
+ {this.renderDetail()}
|
|
|
+ </Fullscreen>
|
|
|
+ );
|
|
|
+ }
|
|
|
+
|
|
|
+ renderDetail() {
|
|
|
+ const { report = {} } = this.state;
|
|
|
+ switch (report.paperModule) {
|
|
|
+ case 'sentence':
|
|
|
+ return <Sentence {...this.state} flow={this} scene='answer' mode='question' />;
|
|
|
+ default:
|
|
|
+ return <div className='base'>{this.renderBase()}</div>;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ renderHeader() {
|
|
|
+ const { userQuestion = {}, questionNo = {}, paper = {}, showIds, questionNos = [], question = {} } = this.state;
|
|
|
+ return <div className="layout-header">
|
|
|
+ <div className="left">
|
|
|
+ <div className="no">No.{userQuestion.stageNo || userQuestion.no}</div>
|
|
|
+ <div className="title"><Assets name='book' />{paper.title}</div>
|
|
|
+ </div>
|
|
|
+ <div className="center">
|
|
|
+ <div className="menu-wrap">
|
|
|
+ ID:{questionNo.title}
|
|
|
+ {questionNos && questionNos.length > 0 && <Icon name="more" onClick={() => {
|
|
|
+ this.setState({ showIds: true });
|
|
|
+ }} />}
|
|
|
+ {showIds && <div className='menu-content'>
|
|
|
+ <p>题源汇总</p>
|
|
|
+ {(questionNos || []).map((row) => <p>ID:{row.title}</p>)}
|
|
|
+ </div>}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div className="right" hidden={question.questionType === 'awa'}>
|
|
|
+ <span className="b" hidden={!userQuestion.id}>
|
|
|
+ 用时:<span dangerouslySetInnerHTML={{ __html: formatSeconds(userQuestion.userTime).replace(/([0-9]+)([msh])/g, '<span class="s">$1</span>$2') }} />
|
|
|
+ {/* 用时:<span className="s">1</span>m<span className="s">39</span>s */}
|
|
|
+ </span>
|
|
|
+ <span className="b">
|
|
|
+ 全站:<span dangerouslySetInnerHTML={{ __html: formatSeconds(questionNo.totalTime / questionNo.totalNumber).replace(/([0-9]+)([msh])/g, '<span class="s">$1</span>$2') }} />
|
|
|
+ {/* 全站:<span className="s">1</span>m<span className="s">39</span>s */}
|
|
|
+ </span>
|
|
|
+ <span className="b">
|
|
|
+ <span className="s">{formatPercent(questionNo.totalCorrect, questionNo.totalNumber)}</span>%
|
|
|
+ </span>
|
|
|
+ <Icon name="question" />
|
|
|
+ <Icon name="star" active={userQuestion.collect} onClick={() => this.toggleCollect()} />
|
|
|
+ </div>
|
|
|
+ </div>;
|
|
|
+ }
|
|
|
+
|
|
|
+ renderBase() {
|
|
|
+ const { questionStatus, userQuestion = {}, showIds } = this.state;
|
|
|
+ return <div className="layout" onClick={() => {
|
|
|
+ if (showIds) this.setState({ showIds: false });
|
|
|
+ }}>
|
|
|
+ {this.renderHeader()}
|
|
|
+ <div className="layout-body">{this.renderBody()}</div>
|
|
|
+ <div className="layout-footer">
|
|
|
+ <div className="left">
|
|
|
+ <Tooltip overlayClassName='gray' placement='top' title='全屏'>
|
|
|
+ <a>
|
|
|
+ <Icon name={this.state.isFullscreenEnabled ? 'sceen-restore' : 'sceen-full'} onClick={() => this.toggleFullscreen()} />
|
|
|
+ </a>
|
|
|
+ </Tooltip>
|
|
|
+ </div>
|
|
|
+ <div className="center">
|
|
|
+ <AnswerButton className="item" onClick={() => this.setState({ noteModal: true })}>笔记</AnswerButton>
|
|
|
+ {questionStatus >= 0 && <AnswerButton className="item" onClick={() => {
|
|
|
+ if (questionStatus > 0) {
|
|
|
+ this.setState({ askModal: true });
|
|
|
+ } else {
|
|
|
+ this.setState({ askFailModal: true });
|
|
|
+ }
|
|
|
+ }}>提问</AnswerButton>}
|
|
|
+ <AnswerButton className="item" onClick={() => this.setState({ feedbackModal: true })}>纠错</AnswerButton>
|
|
|
+ </div>
|
|
|
+ <div className="right">
|
|
|
+ {userQuestion.no !== 1 && <Icon name="prev" onClick={() => this.prevQuestion()} />}
|
|
|
+ {userQuestion.questionNumber !== userQuestion.no && <Icon name="next" onClick={() => this.nextQuestion()} />}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ {this.state.askModal && this.renderAsk()}
|
|
|
+ {this.state.askOkModal && this.renderAskOk()}
|
|
|
+ {this.state.askFailModal && this.renderAskFail()}
|
|
|
+ {this.state.feedbackModal && this.renderFeedbackError()}
|
|
|
+ {this.state.feedbackOkModal && this.renderFeedbackErrorOk()}
|
|
|
+ {this.state.noteModal && this.renderNote()}
|
|
|
+ </div>;
|
|
|
+ }
|
|
|
+
|
|
|
+ renderBody() {
|
|
|
+ const { question = { content: {} } } = this.state;
|
|
|
+ const { typeset = 'one' } = question.content;
|
|
|
+ const { hideAnalysis } = this.state;
|
|
|
+ const show = typeset === 'one' ? true : !hideAnalysis;
|
|
|
+ return (
|
|
|
+ <div className="layout-content">
|
|
|
+ <div className='two'>
|
|
|
+ {this.renderContent()}
|
|
|
+ {question.questionType !== 'awa' && this.renderAnswer()}
|
|
|
+ {question.questionType === 'awa' && this.renderAWA()}
|
|
|
+ </div>
|
|
|
+ {question.questionType !== 'awa' && this.renderAnalysis()}
|
|
|
+ {typeset === 'two' && question.questionType !== 'awa' && (
|
|
|
+ <div className="fixed-analysis" onClick={() => this.setState({ hideAnalysis: !hideAnalysis })}>
|
|
|
+ {show ? '收起解析 >' : '查看解析 <'}
|
|
|
+ </div>
|
|
|
+ )}
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+ }
|
|
|
+
|
|
|
+ renderAnalysis() {
|
|
|
+ const { question = { content: {} }, analysisTab } = this.state;
|
|
|
+ const { typeset = 'one' } = question.content;
|
|
|
+ const { hideAnalysis } = this.state;
|
|
|
+ const show = typeset === 'one' ? true : !hideAnalysis;
|
|
|
+ return (
|
|
|
+ <div className={`block block-analysis two-analysis ${show ? 'show' : ''}`}>
|
|
|
+ <Tabs
|
|
|
+ type="division"
|
|
|
+ active={analysisTab}
|
|
|
+ space={2}
|
|
|
+ tabs={[
|
|
|
+ { key: 'official', name: '官方解析' },
|
|
|
+ { key: 'qx', name: '千行解析' },
|
|
|
+ { key: 'association', name: '题源联想' },
|
|
|
+ { key: 'qa', name: '相关回答' },
|
|
|
+ ]}
|
|
|
+ onChange={(key) => {
|
|
|
+ this.setState({ analysisTab: key });
|
|
|
+ }}
|
|
|
+ />
|
|
|
+ <div className="detail">
|
|
|
+ {typeset === 'two' && this.renderAnswer()}
|
|
|
+ {this.renderText()}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+ }
|
|
|
+
|
|
|
+ renderText() {
|
|
|
+ const { analysisTab, question = {}, userQuestion = {} } = this.state;
|
|
|
+ const { asks = [], associations = [] } = userQuestion;
|
|
|
+ let content;
|
|
|
+ switch (analysisTab) {
|
|
|
+ case 'official':
|
|
|
+ content = <div className="detail-block text-block" dangerouslySetInnerHTML={{ __html: question.officialContent }} />;
|
|
|
+ break;
|
|
|
+ case 'qx':
|
|
|
+ content = <div className="detail-block text-block" dangerouslySetInnerHTML={{ __html: question.qxContent }} />;
|
|
|
+ break;
|
|
|
+ case 'association':
|
|
|
+ content = <div className="detail-block">
|
|
|
+ <Carousel>
|
|
|
+ {associations.map(association => {
|
|
|
+ return <div className="text-block" dangerouslySetInnerHTML={{ __html: association.stem }} />;
|
|
|
+ })}
|
|
|
+ </Carousel>
|
|
|
+ </div>;
|
|
|
+ break;
|
|
|
+ case 'qa':
|
|
|
+ content = <div className="detail-block answer-block">
|
|
|
+ {asks.map((ask, index) => {
|
|
|
+ return <OtherAnswer key={index} data={ask} />;
|
|
|
+ })}
|
|
|
+ </div>;
|
|
|
+ break;
|
|
|
+ default:
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ return content;
|
|
|
+ }
|
|
|
+
|
|
|
+ renderAnswer() {
|
|
|
+ const { question = { content: {} }, showAnswer, userQuestion = {} } = this.state;
|
|
|
+ const { questions = [], type, typeset = 'one' } = question.content;
|
|
|
+ return <div className="block block-answer">
|
|
|
+ {typeset === 'two' ? <Switch checked={showAnswer} onChange={(value) => {
|
|
|
+ this.setState({ showAnswer: value });
|
|
|
+ }}>{showAnswer ? '显示答案' : '关闭答案'}</Switch> : ''}
|
|
|
+ {questions.map((item, index) => {
|
|
|
+ return (
|
|
|
+ <div>
|
|
|
+ <div className="text m-b-2">{item.description}</div>
|
|
|
+ <AnswerList
|
|
|
+ show={showAnswer}
|
|
|
+ selected={(userQuestion.userAnswer || { questions: [] }).questions[index]}
|
|
|
+ answer={(question.answer || { questions: [] }).questions[index]}
|
|
|
+ distributed={(question.answerDistributed || { questions: [] }).questions[index]}
|
|
|
+ list={item.select}
|
|
|
+ type={type}
|
|
|
+ first={item.first}
|
|
|
+ second={item.second}
|
|
|
+ direction={item.direction}
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+ })}
|
|
|
+ </div>;
|
|
|
+ }
|
|
|
+
|
|
|
+ renderContent() {
|
|
|
+ const { question = { content: {} }, showAnswer, step } = this.state;
|
|
|
+ const { typeset = 'one' } = question.content;
|
|
|
+ const { steps = [] } = question.content;
|
|
|
+ return (
|
|
|
+ <div className="block block-content">
|
|
|
+ {typeset === 'one' && question.questionType !== 'awa' ? <Switch checked={showAnswer} onChange={(value) => {
|
|
|
+ this.setState({ showAnswer: value });
|
|
|
+ }}>{showAnswer ? '显示答案' : '关闭答案'}</Switch> : ''}
|
|
|
+ {question.questionType === 'awa' && <h2>Analytical Writing Assessment</h2>}
|
|
|
+ {steps.length > 0 && <Navigation theme='detail' list={question.content.steps} active={step} onChange={(v) => this.setState({ step: v })} />}
|
|
|
+ <div className="text" style={{ height: 2000 }} dangerouslySetInnerHTML={{ __html: this.formatStem(steps.length > 0 ? steps[step].stem : question.stem) }} />
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+ }
|
|
|
+
|
|
|
+ renderAWA() {
|
|
|
+ const { showAnswer, userQuestion = { detail: {}, userAnswer: {} } } = this.state;
|
|
|
+ return <div className="block block-awa">
|
|
|
+ <Switch checked={showAnswer} onChange={(value) => {
|
|
|
+ this.setState({ showAnswer: value });
|
|
|
+ }}>{showAnswer ? '显示答案' : '关闭答案'}</Switch>
|
|
|
+ <div className="body">
|
|
|
+ <h2>Your Response</h2>
|
|
|
+ {showAnswer && <div className='detail'>
|
|
|
+ <div className='info'>
|
|
|
+ <span className="b">
|
|
|
+ 用时:<span dangerouslySetInnerHTML={{ __html: formatSeconds(userQuestion.userTime).replace(/([0-9]+)([msh])/g, '<span class="s">$1</span>$2') }} />
|
|
|
+ {/* 用时:<span className="s">1</span>m<span className="s">39</span>s */}
|
|
|
+ </span>
|
|
|
+ <span className="b">
|
|
|
+ 单词数:<span className="s">{Number((userQuestion.detail || {}).words || 0)}</span>词
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div className='content-awa' dangerouslySetInnerHTML={{ __html: userQuestion.userAnswer.awa || '' }} />
|
|
|
+ </div>}
|
|
|
+ {!showAnswer && <div className='show-awa'>选择「显示答案」查看自己的作文</div>}
|
|
|
+ </div>
|
|
|
+ </div>;
|
|
|
+ }
|
|
|
+
|
|
|
+ renderAsk() {
|
|
|
+ const { ask = {} } = this.state;
|
|
|
+ return (
|
|
|
+ <div className="modal ask">
|
|
|
+ <div className="mask" />
|
|
|
+ <div className="body">
|
|
|
+ <div className="title">提问</div>
|
|
|
+ <div className="desc">
|
|
|
+ <div className="select-inline">我想对<Select excludeSelf size="small" theme="white" value={ask.target} list={AskTarget} onChange={(item) => {
|
|
|
+ ask.target = item.value;
|
|
|
+ this.setState({ ask });
|
|
|
+ }} />进行提问</div>
|
|
|
+ <div className="label">有疑问的具体内容是:</div>
|
|
|
+ <textarea className="textarea" value={ask.originContent} placeholder="请复制粘贴有疑问的内容。" onChange={(e) => {
|
|
|
+ ask.originContent = e.target.value;
|
|
|
+ this.setState({ ask });
|
|
|
+ }} />
|
|
|
+ <div className="label">针对以上内容的问题是:</div>
|
|
|
+ <textarea className="textarea" value={ask.content} placeholder="提问频率高的问题会被优先回答哦。" onChange={(e) => {
|
|
|
+ ask.content = e.target.value;
|
|
|
+ this.setState({ ask });
|
|
|
+ }} />
|
|
|
+ </div>
|
|
|
+ <div className="bottom">
|
|
|
+ <AnswerButton theme="cancel" size="lager" onClick={() => this.setState({ askModal: false })}>
|
|
|
+ 取消
|
|
|
+ </AnswerButton>
|
|
|
+ <AnswerButton size="lager" onClick={() => this.submitAsk()}>提交</AnswerButton>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+ }
|
|
|
+
|
|
|
+ renderAskOk() {
|
|
|
+ return (
|
|
|
+ <div className="modal ask-ok">
|
|
|
+ <div className="mask" />
|
|
|
+ <div className="body">
|
|
|
+ <div className="title">提问</div>
|
|
|
+ <div className="content">
|
|
|
+ <div className="left">
|
|
|
+ <div className="text">已提交成功!</div>
|
|
|
+ <div className="text">关注公众号,老师回答后会立即收到通知。</div>
|
|
|
+ <div className="text">我们也会通过站内信的方式通知你。</div>
|
|
|
+ <div className="small">成为学员享受极速答疑特权。<Link>了解更多</Link></div>
|
|
|
+ </div>
|
|
|
+ <div className="right">
|
|
|
+ <div className="text">扫码关注公众号</div>
|
|
|
+ <div className="text">千行GMAT</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div className="confirm">
|
|
|
+ <AnswerButton size="lager" theme="confirm" onClick={() => {
|
|
|
+ this.setState({ askOkModal: false });
|
|
|
+ }}>
|
|
|
+ 好的,知道了
|
|
|
+ </AnswerButton>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+ }
|
|
|
+
|
|
|
+ renderAskFail() {
|
|
|
+ return (
|
|
|
+ <div className="modal ask-ok">
|
|
|
+ <div className="mask" />
|
|
|
+ <div className="body">
|
|
|
+ <div className="title">提问</div>
|
|
|
+ <div className="content">
|
|
|
+ <div className="left">
|
|
|
+ <div className="text">提问功能正在维护中。</div>
|
|
|
+ <div className="text">可先查阅“相关问答” 或 成为学员享受极速 答疑特权。</div>
|
|
|
+ <Link to="/">了解更多></Link>
|
|
|
+ </div>
|
|
|
+ <div className="right">
|
|
|
+ <div className="text">扫码关注公众号</div>
|
|
|
+ <div className="text">千行GMAT</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div className="confirm">
|
|
|
+ <AnswerButton size="lager" theme="confirm" onClick={() => {
|
|
|
+ this.setState({ askFailModal: false });
|
|
|
+ }}>
|
|
|
+ 好的,知道了
|
|
|
+ </AnswerButton>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+ }
|
|
|
+
|
|
|
+ renderFeedbackError() {
|
|
|
+ const { feedback = {} } = this.state;
|
|
|
+ return (
|
|
|
+ <div className="modal error">
|
|
|
+ <div className="mask" />
|
|
|
+ <div className="body">
|
|
|
+ <div className="title">纠错</div>
|
|
|
+ <div className="desc">
|
|
|
+ <div className="select-inline">我想对<Select excludeSelf size="small" theme="white" value={feedback.target} list={AskTarget} onChange={(item) => {
|
|
|
+ feedback.target = item.value;
|
|
|
+ this.setState({ feedback });
|
|
|
+ }} />进行提问</div>
|
|
|
+ <div className="label">错误内容是:</div>
|
|
|
+ <textarea className="textarea" value={feedback.originContent} placeholder="你可以适当扩大复制范围以使我们准确定位,感谢。" />
|
|
|
+ <div className="label">应该改为:</div>
|
|
|
+ <textarea className="textarea" placeholder="只需提供正确内容即可" />
|
|
|
+ </div>
|
|
|
+ <div className="bottom">
|
|
|
+ <AnswerButton theme="cancel" size="lager" onClick={() => {
|
|
|
+ this.setState({ feedbackModal: false });
|
|
|
+ }}>
|
|
|
+ 取消
|
|
|
+ </AnswerButton>
|
|
|
+ <AnswerButton size="lager" onClick={() => {
|
|
|
+ this.submitFeedbackError();
|
|
|
+ }}>提交</AnswerButton>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+ }
|
|
|
+
|
|
|
+ renderFeedbackErrorOk() {
|
|
|
+ return (
|
|
|
+ <div className="modal error-ok">
|
|
|
+ <div className="mask" />
|
|
|
+ <div className="body">
|
|
|
+ <div className="title">纠错</div>
|
|
|
+ <div className="content">
|
|
|
+ <div className="left">
|
|
|
+ <div className="text"><Assets name='right' svg />已提交成功!</div>
|
|
|
+ <div className="text">感谢您的耐心反馈,我们会尽快核实并以站内信的方式告知结果。</div>
|
|
|
+ <div className="text">您也可以关注公众号及时获取结果。</div>
|
|
|
+ </div>
|
|
|
+ <div className="right">
|
|
|
+ <div className="text">扫码关注公众号</div>
|
|
|
+ <div className="text">千行GMAT</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div className="confirm">
|
|
|
+ <AnswerButton size="lager" theme="confirm" onClick={() => {
|
|
|
+ this.setState({ feedbackOkModal: false });
|
|
|
+ }}>
|
|
|
+ 好的,知道了
|
|
|
+ </AnswerButton>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+ }
|
|
|
+
|
|
|
+ renderNote() {
|
|
|
+ const { noteField, note = {} } = this.state;
|
|
|
+ return (
|
|
|
+ <div className="modal note">
|
|
|
+ <div className="mask" />
|
|
|
+ <div className="body">
|
|
|
+ <div className="title">笔记</div>
|
|
|
+ <div className="content">
|
|
|
+ <div className="tabs">
|
|
|
+ {AskTarget.map(item => {
|
|
|
+ return (
|
|
|
+ <div className={`tab ${noteField === item.key ? 'active' : ''}`} onClick={() => {
|
|
|
+ this.setState({ noteField: item.key });
|
|
|
+ }}>
|
|
|
+ <div className="text">{item.label}</div>
|
|
|
+ <div className="date">{note[`${item.key}Time`] ? formatDate(note[`${item.key}Time`]) : ''}</div>
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+ })}
|
|
|
+ </div>
|
|
|
+ <div className="input">
|
|
|
+ <textarea className="textarea" value={note[`${noteField}Content`] || ''} placeholder="记下笔记,方便以后复习" onChange={(e) => {
|
|
|
+ note[`${noteField}Time`] = new Date();
|
|
|
+ note[`${noteField}Content`] = e.target.value;
|
|
|
+ this.setState({ note });
|
|
|
+ }} />
|
|
|
+ <div className="bottom">
|
|
|
+ <AnswerButton theme="cancel" size="lager" onClick={() => {
|
|
|
+ this.setState({ noteModal: false });
|
|
|
+ }}>
|
|
|
+ 取消
|
|
|
+ </AnswerButton>
|
|
|
+ <AnswerButton size="lager" onClick={() => {
|
|
|
+ this.submitNote();
|
|
|
+ }}>编辑</AnswerButton>
|
|
|
+ <AnswerButton size="lager" onClick={() => {
|
|
|
+ this.submitNote(true);
|
|
|
+ }}>保存</AnswerButton>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+ }
|
|
|
+}
|