page.js 23 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626
  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { Carousel } from 'antd';
  4. import { Link } from 'react-router-dom';
  5. import Fullscreen from 'react-fullscreen-crossbrowser';
  6. import './index.less';
  7. import Page from '@src/containers/Page';
  8. import { formatSeconds, formatPercent, formatDate, sortListWithOrder } from '@src/services/Tools';
  9. import Assets from '@src/components/Assets';
  10. import Navigation from '../../../components/Navigation';
  11. import Tabs from '../../../components/Tabs';
  12. import Icon from '../../../components/Icon';
  13. import Switch from '../../../components/Switch';
  14. import Select from '../../../components/Select';
  15. import AnswerSelect from '../../../components/AnswerSelect';
  16. import AnswerList from '../../../components/AnswerList';
  17. import AnswerButton from '../../../components/AnswerButton';
  18. import AnswerTable from '../../../components/AnswerTable';
  19. import OtherAnswer from '../../../components/OtherAnswer';
  20. import { AskTarget } from '../../../../Constant';
  21. import { Question } from '../../../stores/question';
  22. import { My } from '../../../stores/my';
  23. import Sentence from '../process/sentence';
  24. export default class extends Page {
  25. initState() {
  26. return {
  27. hideAnalysis: true,
  28. analysisTab: 'official',
  29. showAnswer: false,
  30. noteField: AskTarget[0].key,
  31. showIds: false,
  32. question: {
  33. content: {
  34. typeset: 'one',
  35. },
  36. // questionType: 'awa',
  37. answer: {
  38. subject: [[{ text: 'like', uuid: 'hKyz' }]],
  39. options: ['parallel'],
  40. },
  41. stem: "<p><span uuid='kBJe'>I</span> <span uuid='hKyz'>like</span> <span uuid='fQXh'>book</span></p>",
  42. },
  43. userQuestion: {
  44. userAnswer: {
  45. subject: [{ text: 'I', uuid: 'kBJe' }],
  46. options: ['compare'],
  47. },
  48. no: 2,
  49. },
  50. paper: {
  51. title: '长难句练习',
  52. questionNumber: 20,
  53. },
  54. report: {
  55. paperModule: 'sentence',
  56. },
  57. };
  58. }
  59. initData() {
  60. const { id } = this.params;
  61. Question.getDetailById(id).then(userQuestion => {
  62. const { question, questionNos, paper, note, report, answer, setting } = userQuestion;
  63. let { questionNo } = userQuestion;
  64. if (!questionNo) ([questionNo] = questionNos);
  65. if ((report.setting || {}).disorder) {
  66. const { content } = question;
  67. // 还原做题顺序
  68. content.questions.forEach((q, i) => {
  69. q.select = sortListWithOrder(question.select, setting.questions[i]);
  70. });
  71. answer.questions.forEach((q, i) => {
  72. Object.keys(q).forEach((k) => {
  73. if (q[k]) q[k] = sortListWithOrder(q[k], setting.questions[i]);
  74. });
  75. });
  76. question.answerDistributed.forEach((q, i) => {
  77. Object.keys(q).forEach((k) => {
  78. if (q[k]) q[k] = sortListWithOrder(q[k], setting.questions[i]);
  79. });
  80. });
  81. }
  82. this.setState({ userQuestion, question, questionNo, note, paper });
  83. });
  84. }
  85. prevQuestion() {
  86. const { userQuestion } = this.state;
  87. if (userQuestion.no === 1) return;
  88. Question.getDetailByNo(userQuestion.reportId, userQuestion.no - 1).then((r) => {
  89. linkTo(`/paper/question/${r.id}`);
  90. });
  91. }
  92. nextQuestion() {
  93. const { userQuestion } = this.state;
  94. if (userQuestion.questionNumber === userQuestion.no) return;
  95. Question.getDetailByNo(userQuestion.reportId, userQuestion.no + 1).then((r) => {
  96. linkTo(`/paper/question/${r.id}`);
  97. });
  98. }
  99. submitAsk() {
  100. const { userQuestion = {}, ask = {} } = this.state;
  101. if (ask.originContent === '' || ask.content === '' || ask.target === '') return;
  102. My.addQuestionAsk(ask.target, userQuestion.questionModule, ask.originContent, ask.content).then(() => {
  103. this.setState({ askModal: false, askOkModal: true });
  104. }).catch(err => {
  105. this.setState({ askError: err.message });
  106. });
  107. }
  108. submitFeedbackError() {
  109. const { feedback = {}, question = {}, questionNo = {} } = this.state;
  110. if (feedback.originContent === '' || feedback.content === '' || feedback.target === '') return;
  111. My.addFeedbackErrorQuestion(question.id, questionNo.title, feedback.target, feedback.originContent, feedback.content).then(() => {
  112. this.setState({ feedbackModal: false, feedbackOkModal: true });
  113. }).catch(err => {
  114. this.setState({ feedbackError: err.message });
  115. });
  116. }
  117. submitNote(close) {
  118. const { userQuestion = {}, note = {} } = this.state;
  119. My.updateQuestionNote(userQuestion.questionModule, userQuestion.questionNoId, note).then(() => {
  120. if (close) this.setState({ noteModal: false });
  121. }).catch(err => {
  122. this.setState({ noteError: err.message });
  123. });
  124. }
  125. toggleFullscreen() {
  126. const { isFullscreenEnabled } = this.state;
  127. this.setState({ isFullscreenEnabled: !isFullscreenEnabled });
  128. }
  129. toggleCollect() {
  130. const { userQuestion = {} } = this.state;
  131. if (!userQuestion.collect) {
  132. My.addQuestionCollect(userQuestion.questionModule, userQuestion.questionNoId).then(() => {
  133. userQuestion.collect = true;
  134. this.setState({ userQuestion });
  135. });
  136. } else {
  137. My.delQuestionCollect(userQuestion.questionModule, userQuestion.questionNoId).then(() => {
  138. userQuestion.collect = false;
  139. this.setState({ userQuestion });
  140. });
  141. }
  142. }
  143. formatStem(text) {
  144. if (!text) return '';
  145. const { question = { content: {} } } = this.state;
  146. const { table = {}, questions = [] } = question.content;
  147. text = text.replace(/#select#/g, "<span class='#select#' />");
  148. text = text.replace(/#table#/g, "<span class='#table#' />");
  149. setTimeout(() => {
  150. const selectList = document.getElementsByClassName('#select#');
  151. const tableList = document.getElementsByClassName('#table#');
  152. for (let i = 0; i < selectList.length; i += 1) {
  153. ReactDOM.render(
  154. <AnswerSelect list={questions[i].select} onChange={v => this.onChangeQuestion(i, v)} />,
  155. selectList[i],
  156. );
  157. }
  158. for (let i = 0; i < tableList.length; i += 1) {
  159. ReactDOM.render(<AnswerTable list={table.header} columns={table.header} data={table.data} />, tableList[i]);
  160. }
  161. }, 1);
  162. return text;
  163. }
  164. renderView() {
  165. return (
  166. <Fullscreen
  167. enabled={this.state.isFullscreenEnabled}
  168. onChange={isFullscreenEnabled => this.setState({ isFullscreenEnabled })}
  169. >
  170. {this.renderDetail()}
  171. </Fullscreen>
  172. );
  173. }
  174. renderDetail() {
  175. const { report = {} } = this.state;
  176. switch (report.paperModule) {
  177. case 'sentence':
  178. return <Sentence {...this.state} flow={this} scene='answer' />;
  179. default:
  180. return <div className='base'>{this.renderBase()}</div>;
  181. }
  182. }
  183. renderBase() {
  184. const { questionStatus, userQuestion = {}, questionNo = {}, paper = {}, showIds, questionNos = [] } = this.state;
  185. return <div className="layout" onClick={() => {
  186. if (showIds) this.setState({ showIds: false });
  187. }}>
  188. <div className="layout-header">
  189. <div className="left">
  190. <div className="no">No.{userQuestion.no}</div>
  191. <div className="title"><Assets name='book' />{paper.title}13</div>
  192. </div>
  193. <div className="center">
  194. <div className="menu-wrap">
  195. ID:{questionNo.title}
  196. {questionNos && questionNos.length > 0 && <Icon name="more" onClick={() => {
  197. this.setState({ showIds: true });
  198. }} />}
  199. {showIds && <div className='menu-content'>
  200. <p>题源汇总</p>
  201. {(questionNos || []).map((row) => <p>ID:{row.title}</p>)}
  202. </div>}
  203. </div>
  204. </div>
  205. <div className="right">
  206. <span className="b">
  207. 用时:<span dangerouslySetInnerHTML={{ __html: formatSeconds(userQuestion.userTime).replace(/([0-9]+)([msh])/g, '<span class="s">$1</span>$2') }} />
  208. {/* 用时:<span className="s">1</span>m<span className="s">39</span>s */}
  209. </span>
  210. <span className="b">
  211. 全站:<span dangerouslySetInnerHTML={{ __html: formatSeconds(questionNo.totalTime / questionNo.totalNumber).replace(/([0-9]+)([msh])/g, '<span class="s">$1</span>$2') }} />
  212. {/* 全站:<span className="s">1</span>m<span className="s">39</span>s */}
  213. </span>
  214. <span className="b">
  215. <span className="s">{formatPercent(questionNo.totalCorrect, questionNo.totalNumber)}</span>%
  216. </span>
  217. <Icon name="question" />
  218. <Icon name="star" active={userQuestion.collect} onClick={() => this.toggleCollect()} />
  219. </div>
  220. </div>
  221. <div className="layout-body">{this.renderBody()}</div>
  222. <div className="layout-footer">
  223. <div className="left">
  224. <Icon name={this.state.isFullscreenEnabled ? 'sceen-restore' : 'sceen-full'} onClick={() => this.toggleFullscreen()} />
  225. </div>
  226. <div className="center">
  227. <AnswerButton className="item" onClick={() => this.setState({ noteModal: true })}>笔记</AnswerButton>
  228. <AnswerButton className="item" onClick={() => {
  229. if (questionStatus) {
  230. this.setState({ askModal: true });
  231. } else {
  232. this.setState({ askFailModal: true });
  233. }
  234. }}>提问</AnswerButton>
  235. <AnswerButton className="item" onClick={() => this.setState({ feedbackModal: true })}>纠错</AnswerButton>
  236. </div>
  237. <div className="right">
  238. <Icon name="prev" onClick={() => this.prevQuestion()} />
  239. <Icon name="next" onClick={() => this.nextQuestion()} />
  240. </div>
  241. </div>
  242. {this.state.askModal && this.renderAsk()}
  243. {this.state.askOkModal && this.renderAskOk()}
  244. {this.state.askFailModal && this.renderAskFail()}
  245. {this.state.feedbackModal && this.renderFeedbackError()}
  246. {this.state.feedbackOkModal && this.renderFeedbackErrorOk()}
  247. {this.state.noteModal && this.renderNote()}
  248. </div>;
  249. }
  250. renderBody() {
  251. const { question = { content: {} } } = this.state;
  252. const { typeset = 'one' } = question.content;
  253. const { hideAnalysis } = this.state;
  254. const show = typeset === 'one' ? true : !hideAnalysis;
  255. return (
  256. <div className="layout-content">
  257. <div className='two'>
  258. {this.renderContent()}
  259. {question.questionType !== 'awa' && this.renderAnswer()}
  260. {question.questionType === 'awa' && this.renderAWA()}
  261. </div>
  262. {question.questionType !== 'awa' && this.renderAnalysis()}
  263. {typeset === 'two' && question.questionType !== 'awa' && (
  264. <div className="fixed-analysis" onClick={() => this.setState({ hideAnalysis: !hideAnalysis })}>
  265. {show ? '收起解析 >' : '查看解析 <'}
  266. </div>
  267. )}
  268. </div>
  269. );
  270. }
  271. renderAnalysis() {
  272. const { question = { content: {} }, analysisTab } = this.state;
  273. const { typeset = 'one' } = question.content;
  274. const { hideAnalysis } = this.state;
  275. const show = typeset === 'one' ? true : !hideAnalysis;
  276. return (
  277. <div className={`block block-analysis two-analysis ${show ? 'show' : ''}`}>
  278. <Tabs
  279. type="division"
  280. active={analysisTab}
  281. tabs={[
  282. { key: 'official', name: '官方解析' },
  283. { key: 'qx', name: '千行解析' },
  284. { key: 'association', name: '题源联想' },
  285. { key: 'qa', name: '相关回答' },
  286. ]}
  287. onChange={(key) => {
  288. this.setState({ analysisTab: key });
  289. }}
  290. />
  291. <div className="detail">
  292. {typeset === 'two' && this.renderAnswer()}
  293. {this.renderText()}
  294. </div>
  295. </div>
  296. );
  297. }
  298. renderText() {
  299. const { analysisTab, question = {}, userQuestion = {} } = this.state;
  300. const { asks = [], associations = [] } = userQuestion;
  301. let content;
  302. switch (analysisTab) {
  303. case 'official':
  304. content = <div className="detail-block text-block" dangerouslySetInnerHTML={{ __html: question.officialContent }} />;
  305. break;
  306. case 'qx':
  307. content = <div className="detail-block text-block" dangerouslySetInnerHTML={{ __html: question.qxContent }} />;
  308. break;
  309. case 'association':
  310. content = <div className="detail-block">
  311. <Carousel>
  312. {associations.map(association => {
  313. return <div className="text-block" dangerouslySetInnerHTML={{ __html: association.stem }} />;
  314. })}
  315. </Carousel>
  316. </div>;
  317. break;
  318. case 'qa':
  319. content = <div className="detail-block answer-block">
  320. {asks.map(ask => {
  321. return ask;
  322. })}
  323. </div>;
  324. break;
  325. default:
  326. break;
  327. }
  328. return content;
  329. }
  330. renderOtherAnswer() {
  331. const { otherAnswer = [1, 2, 3, 4, 5] } = this.state;
  332. return (
  333. <div className="other">
  334. {otherAnswer.map(() => {
  335. return <OtherAnswer />;
  336. })}
  337. </div>
  338. );
  339. }
  340. renderAnswer() {
  341. const { question = { content: {} }, showAnswer } = this.state;
  342. const { questions = [] } = question.content;
  343. const { typeset = 'one' } = question.content;
  344. return <div className="block block-answer">
  345. {typeset === 'two' ? <Switch checked={showAnswer} onChange={(value) => {
  346. this.setState({ showAnswer: value });
  347. }}>{showAnswer ? '显示答案' : '关闭答案'}</Switch> : ''}
  348. {questions.map((item) => {
  349. return (
  350. <div>
  351. <div className="text m-b-2">{item.description}</div>
  352. <AnswerList
  353. list={item.select}
  354. type={question.type}
  355. direction={question.direction}
  356. />
  357. </div>
  358. );
  359. })}
  360. </div>;
  361. }
  362. renderContent() {
  363. const { question = { content: {} }, userQuestion = {}, showAnswer, step } = this.state;
  364. const { userAnswer } = userQuestion;
  365. const { typeset = 'one' } = question.content;
  366. const { steps = [] } = question.content;
  367. console.log(userAnswer);
  368. return (
  369. <div className="block block-content">
  370. {typeset === 'one' && question.questionType !== 'awa' ? <Switch checked={showAnswer} onChange={(value) => {
  371. this.setState({ showAnswer: value });
  372. }}>{showAnswer ? '显示答案' : '关闭答案'}</Switch> : ''}
  373. {question.questionType === 'awa' && <h2>Analytical Writing Assessment</h2>}
  374. {steps.length > 0 && <Navigation list={question.content.steps} active={step} onChange={() => { }} />}
  375. <div className="text" style={{ height: 2000 }} dangerouslySetInnerHTML={{ __html: this.formatStem(steps.length > 0 ? steps[step].stem : question.stem) }} />
  376. </div>
  377. );
  378. }
  379. renderAWA() {
  380. const { showAnswer, userQuestion = { detail: {}, userAnswer: {} } } = this.state;
  381. return <div className="block block-awa">
  382. <Switch checked={showAnswer} onChange={(value) => {
  383. this.setState({ showAnswer: value });
  384. }}>{showAnswer ? '显示答案' : '关闭答案'}</Switch>
  385. <div className="body">
  386. <h2>Your Response</h2>
  387. {showAnswer && <div className='detail'>
  388. <div className='info'>
  389. <span className="b">
  390. 用时:<span dangerouslySetInnerHTML={{ __html: formatSeconds(userQuestion.userTime).replace(/([0-9]+)([msh])/g, '<span class="s">$1</span>$2') }} />
  391. {/* 用时:<span className="s">1</span>m<span className="s">39</span>s */}
  392. </span>
  393. <span className="b">
  394. 单词数:<span className="s">{Number((userQuestion.detail || {}).words || 0)}</span>词
  395. </span>
  396. </div>
  397. <div className='content-awa' dangerouslySetInnerHTML={{ __html: userQuestion.userAnswer.awa || '' }} />
  398. </div>}
  399. {!showAnswer && <div className='show-awa'>选择「显示答案」查看自己的作文</div>}
  400. </div>
  401. </div>;
  402. }
  403. renderAsk() {
  404. const { ask = {} } = this.state;
  405. return (
  406. <div className="modal ask">
  407. <div className="mask" />
  408. <div className="body">
  409. <div className="title">提问</div>
  410. <div className="desc">
  411. <div className="select-inline">我想对<Select excludeSelf size="small" theme="white" value={ask.target} list={AskTarget} onChange={(item) => {
  412. ask.target = item.value;
  413. this.setState({ ask });
  414. }} />进行提问</div>
  415. <div className="label">有疑问的具体内容是:</div>
  416. <textarea className="textarea" value={ask.originContent} placeholder="请复制粘贴有疑问的内容。" onChange={(e) => {
  417. ask.originContent = e.target.value;
  418. this.setState({ ask });
  419. }} />
  420. <div className="label">针对以上内容的问题是:</div>
  421. <textarea className="textarea" value={ask.content} placeholder="提问频率高的问题会被优先回答哦。" onChange={(e) => {
  422. ask.content = e.target.value;
  423. this.setState({ ask });
  424. }} />
  425. </div>
  426. <div className="bottom">
  427. <AnswerButton theme="cancel" size="lager" onClick={() => this.setState({ askModal: false })}>
  428. 取消
  429. </AnswerButton>
  430. <AnswerButton size="lager" onClick={() => this.submitAsk()}>提交</AnswerButton>
  431. </div>
  432. </div>
  433. </div>
  434. );
  435. }
  436. renderAskOk() {
  437. return (
  438. <div className="modal ask-ok">
  439. <div className="mask" />
  440. <div className="body">
  441. <div className="title">提问</div>
  442. <div className="content">
  443. <div className="left">
  444. <div className="text">已提交成功!</div>
  445. <div className="text">关注公众号,老师回答后会立即收到通知。</div>
  446. <div className="text">我们也会通过站内信的方式通知你。</div>
  447. <div className="small">成为学员享受极速答疑特权。<Link>了解更多</Link></div>
  448. </div>
  449. <div className="right">
  450. <div className="text">扫码关注公众号</div>
  451. <div className="text">千行GMAT</div>
  452. </div>
  453. </div>
  454. <div className="confirm">
  455. <AnswerButton size="lager" theme="confirm" onClick={() => {
  456. this.setState({ askOkModal: false });
  457. }}>
  458. 好的,知道了
  459. </AnswerButton>
  460. </div>
  461. </div>
  462. </div>
  463. );
  464. }
  465. renderAskFail() {
  466. return (
  467. <div className="modal ask-ok">
  468. <div className="mask" />
  469. <div className="body">
  470. <div className="title">提问</div>
  471. <div className="content">
  472. <div className="left">
  473. <div className="text">提问功能正在维护中。</div>
  474. <div className="text">可先查阅“相关问答” 或 成为学员享受极速 答疑特权。</div>
  475. <Link to="/">了解更多></Link>
  476. </div>
  477. <div className="right">
  478. <div className="text">扫码关注公众号</div>
  479. <div className="text">千行GMAT</div>
  480. </div>
  481. </div>
  482. <div className="confirm">
  483. <AnswerButton size="lager" theme="confirm" onClick={() => {
  484. this.setState({ askFailModal: false });
  485. }}>
  486. 好的,知道了
  487. </AnswerButton>
  488. </div>
  489. </div>
  490. </div>
  491. );
  492. }
  493. renderFeedbackError() {
  494. const { feedback = {} } = this.state;
  495. return (
  496. <div className="modal error">
  497. <div className="mask" />
  498. <div className="body">
  499. <div className="title">纠错</div>
  500. <div className="desc">
  501. <div className="select-inline">我想对<Select excludeSelf size="small" theme="white" value={feedback.target} list={AskTarget} onChange={(item) => {
  502. feedback.target = item.value;
  503. this.setState({ feedback });
  504. }} />进行提问</div>
  505. <div className="label">错误内容是:</div>
  506. <textarea className="textarea" value={feedback.originContent} placeholder="你可以适当扩大复制范围以使我们准确定位,感谢。" />
  507. <div className="label">应该改为:</div>
  508. <textarea className="textarea" placeholder="只需提供正确内容即可" />
  509. </div>
  510. <div className="bottom">
  511. <AnswerButton theme="cancel" size="lager" onClick={() => {
  512. this.setState({ feedbackModal: false });
  513. }}>
  514. 取消
  515. </AnswerButton>
  516. <AnswerButton size="lager" onClick={() => {
  517. this.submitFeedbackError();
  518. }}>提交</AnswerButton>
  519. </div>
  520. </div>
  521. </div>
  522. );
  523. }
  524. renderFeedbackErrorOk() {
  525. return (
  526. <div className="modal error-ok">
  527. <div className="mask" />
  528. <div className="body">
  529. <div className="title">纠错</div>
  530. <div className="content">
  531. <div className="left">
  532. <div className="text"><Assets name='right' svg />已提交成功!</div>
  533. <div className="text">感谢您的耐心反馈,我们会尽快核实并以站内信的方式告知结果。</div>
  534. <div className="text">您也可以关注公众号及时获取结果。</div>
  535. </div>
  536. <div className="right">
  537. <div className="text">扫码关注公众号</div>
  538. <div className="text">千行GMAT</div>
  539. </div>
  540. </div>
  541. <div className="confirm">
  542. <AnswerButton size="lager" theme="confirm" onClick={() => {
  543. this.setState({ feedbackOkModal: false });
  544. }}>
  545. 好的,知道了
  546. </AnswerButton>
  547. </div>
  548. </div>
  549. </div>
  550. );
  551. }
  552. renderNote() {
  553. const { noteField, note = {} } = this.state;
  554. return (
  555. <div className="modal note">
  556. <div className="mask" />
  557. <div className="body">
  558. <div className="title">笔记</div>
  559. <div className="content">
  560. <div className="tabs">
  561. {AskTarget.map(item => {
  562. return (
  563. <div className={`tab ${noteField === item.key ? 'active' : ''}`} onClick={() => {
  564. this.setState({ noteField: item.key });
  565. }}>
  566. <div className="text">{item.label}</div>
  567. <div className="date">{note[`${item.key}Time`] ? formatDate(note[`${item.key}Time`]) : ''}</div>
  568. </div>
  569. );
  570. })}
  571. </div>
  572. <div className="input">
  573. <textarea className="textarea" value={note[`${noteField}Content`] || ''} placeholder="记下笔记,方便以后复习" onChange={(e) => {
  574. note[`${noteField}Time`] = new Date();
  575. note[`${noteField}Content`] = e.target.value;
  576. this.setState({ note });
  577. }} />
  578. <div className="bottom">
  579. <AnswerButton theme="cancel" size="lager" onClick={() => {
  580. this.setState({ noteModal: false });
  581. }}>
  582. 取消
  583. </AnswerButton>
  584. <AnswerButton size="lager" onClick={() => {
  585. this.submitNote();
  586. }}>编辑</AnswerButton>
  587. <AnswerButton size="lager" onClick={() => {
  588. this.submitNote(true);
  589. }}>保存</AnswerButton>
  590. </div>
  591. </div>
  592. </div>
  593. </div>
  594. </div>
  595. );
  596. }
  597. }