index.js 37 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303
  1. import React, { Component } from 'react';
  2. import Cropper from 'react-cropper';
  3. import 'cropperjs/dist/cropper.css';
  4. import './index.less';
  5. import { Checkbox, Icon } from 'antd';
  6. import FileUpload from '@src/components/FileUpload';
  7. import Assets from '@src/components/Assets';
  8. import scale from '@src/services/Scale';
  9. import { asyncSMessage } from '@src/services/AsyncTools';
  10. import { SelectInput, VerificationInput, Input } from '../Login';
  11. import { MobileArea, TextbookFeedbackTarget, TextbookSubject } from '../../../Constant';
  12. import Invite from '../Invite';
  13. import Modal from '../Modal';
  14. import { Common } from '../../stores/common';
  15. import { User } from '../../stores/user';
  16. import { My } from '../../stores/my';
  17. import Select from '../Select';
  18. import { formatDate, getMap } from '../../../../src/services/Tools';
  19. const TextbookFeedbackTargetMap = getMap(TextbookFeedbackTarget, 'value', 'tip');
  20. export class BindPhone extends Component {
  21. constructor(props) {
  22. super(props);
  23. this.validNumber = 0;
  24. this.props.data = this.props.data || {};
  25. this.state = Object.assign({ step: 0, data: {}, empty: {} }, this.initState(this.props));
  26. this.stepProp = {
  27. 0: {
  28. title: '绑定手机',
  29. onConfirm: props.onConfirm,
  30. },
  31. 1: {
  32. title: '绑定手机',
  33. onConfirm: () => {
  34. this.submit();
  35. },
  36. onCancel: props.onCancel,
  37. confirmText: '提交',
  38. },
  39. };
  40. }
  41. initState(props) {
  42. if (!props.show || this.props.show) return {};
  43. const data = Object.assign({}, props.data);
  44. if (!data.area) data.area = MobileArea[0].value;
  45. return { step: props.data.mobile ? 0 : 1, data, validError: '', empty: {} };
  46. }
  47. componentWillReceiveProps(nextProps) {
  48. this.setState(this.initState(nextProps));
  49. }
  50. onNext() {
  51. this.setState({ step: 1, validError: '', mobileError: '', empty: {} });
  52. }
  53. changeData(field, value) {
  54. let { data, empty } = this.state;
  55. data = data || {};
  56. empty = empty || {};
  57. data[field] = value;
  58. if (value) empty[field] = !value;
  59. this.setState({ data, empty, mobileError: null });
  60. }
  61. validMobile() {
  62. const { data } = this.state;
  63. const { area, mobile } = data;
  64. if (!area || !mobile) return;
  65. this.validNumber += 1;
  66. const number = this.validNumber;
  67. if (mobile === this.props.data.mobile) {
  68. this.setState({ mobileError: '' });
  69. return;
  70. }
  71. User.validMobile(area, mobile)
  72. .then(result => {
  73. if (number !== this.validNumber) return Promise.resolve();
  74. if (result) {
  75. this.setState({ mobileError: '' });
  76. return Promise.resolve();
  77. }
  78. return Promise.reject(new Error('该手机已绑定其他账号,请更换手机号码'));
  79. })
  80. .catch(err => {
  81. this.setState({ mobileError: err.message });
  82. });
  83. }
  84. sendValid() {
  85. const { data, mobileError } = this.state;
  86. const { area, mobile } = data;
  87. if (mobileError) return Promise.reject();
  88. if (!area || !mobile) {
  89. this.setState({ empty: { area: !data.area, mobile: !data.mobile } });
  90. return Promise.reject();
  91. }
  92. return Common.sendSms(area, mobile)
  93. .then(result => {
  94. if (result) {
  95. asyncSMessage('发送成功');
  96. this.setState({ mobileError: '', validError: '' });
  97. } else {
  98. throw new Error('发送失败');
  99. }
  100. })
  101. .catch(err => {
  102. this.setState({ mobileError: err.message });
  103. throw err;
  104. });
  105. }
  106. submit() {
  107. const { data, validError, mobileError } = this.state;
  108. if (validError || mobileError) return;
  109. const { area, mobile, mobileVerifyCode } = data;
  110. if (!area || !mobile || !mobileVerifyCode) {
  111. this.setState({ empty: { area: !data.area, mobile: !data.mobile, mobileVerifyCode: !mobileVerifyCode } });
  112. return;
  113. }
  114. My.bindMobile(area, mobile, mobileVerifyCode)
  115. .then(() => {
  116. asyncSMessage('操作成功');
  117. this.setState({ step: 0, validError: '', mobileError: '' });
  118. User.infoHandle(Object.assign(this.props.data, { area, mobile }));
  119. this.props.onConfirm();
  120. })
  121. .catch(err => {
  122. if (err.message.indexOf('验证码') >= 0) {
  123. this.setState({ validError: err.message });
  124. } else {
  125. this.setState({ mobileError: err.message });
  126. }
  127. });
  128. }
  129. render() {
  130. const { show } = this.props;
  131. const { step = 0 } = this.state;
  132. return (
  133. <Modal className="bind-phone-modal" show={show} width={630} {...this.stepProp[step]}>
  134. <div className="bind-phone-modal-wrapper">{this[`renderStep${step}`]()}</div>
  135. </Modal>
  136. );
  137. }
  138. renderStep0() {
  139. const { data } = this.state;
  140. return (
  141. <div className="step-0-layout t-2">
  142. 已绑定手机 {data.mobile}
  143. <a onClick={() => this.onNext()}>修改</a>
  144. </div>
  145. );
  146. }
  147. renderStep1() {
  148. return (
  149. <div className="step-1-layout">
  150. <div className="label">手机号</div>
  151. <div className="input-layout">
  152. <SelectInput
  153. className="w-10"
  154. placeholder="请输入手机号"
  155. selectValue={this.state.data.area}
  156. select={MobileArea}
  157. value={this.state.data.mobile}
  158. error={this.state.mobileError}
  159. empty={this.state.empty.mobile}
  160. onSelect={value => {
  161. this.changeData('area', value);
  162. this.validMobile();
  163. }}
  164. onChange={e => {
  165. this.changeData('mobile', e.target.value);
  166. this.validMobile();
  167. }}
  168. />
  169. <VerificationInput
  170. className="w-10"
  171. placeholder="请输入验证码"
  172. value={this.state.data.mobileVerifyCode}
  173. error={this.state.validError}
  174. empty={this.state.empty.mobileVerifyCode}
  175. onSend={() => {
  176. return this.sendValid();
  177. }}
  178. onChange={e => {
  179. this.changeData('mobileVerifyCode', e.target.value);
  180. this.setState({ validError: '' });
  181. }}
  182. />
  183. </div>
  184. </div>
  185. );
  186. }
  187. }
  188. export class BindEmail extends Component {
  189. constructor(props) {
  190. super(props);
  191. this.validNumber = 0;
  192. this.props.data = this.props.data || {};
  193. this.state = Object.assign({ step: 0, data: {}, empty: {} }, this.initState(this.props));
  194. this.stepProp = {
  195. 0: {
  196. title: '绑定邮箱',
  197. onConfirm: props.onConfirm,
  198. },
  199. 1: {
  200. title: '绑定邮箱',
  201. onConfirm: () => {
  202. this.submit();
  203. },
  204. onCancel: props.onCancel,
  205. confirmText: '提交',
  206. },
  207. };
  208. }
  209. initState(props) {
  210. if (!props.show || this.props.show) return {};
  211. return { step: props.data.email ? 0 : 1, data: Object.assign({}, props.data) };
  212. }
  213. componentWillReceiveProps(nextProps) {
  214. this.setState(this.initState(nextProps));
  215. }
  216. onNext() {
  217. this.setState({ step: 1, error: '', empty: {} });
  218. }
  219. changeData(field, value) {
  220. let { data, empty } = this.state;
  221. data = data || {};
  222. empty = empty || {};
  223. data[field] = value;
  224. if (value) empty[field] = !value;
  225. this.setState({ data, empty, error: null });
  226. }
  227. validEmail() {
  228. const { data } = this.state;
  229. const { email } = data;
  230. if (!email) return;
  231. this.validNumber += 1;
  232. const number = this.validNumber;
  233. if (email === this.props.data.email) {
  234. this.setState({ error: '' });
  235. return;
  236. }
  237. User.validEmail(email)
  238. .then(result => {
  239. if (number !== this.validNumber) return Promise.resolve();
  240. if (result) {
  241. this.setState({ error: '' });
  242. return Promise.resolve();
  243. }
  244. return Promise.reject(new Error('该邮箱已绑定其他账号,请更换邮箱地址'));
  245. })
  246. .catch(err => {
  247. this.setState({ error: err.message });
  248. });
  249. }
  250. submit() {
  251. const { data, error } = this.state;
  252. if (error) return;
  253. if (!data.email) {
  254. this.setState({ empty: { email: !data.email } });
  255. return;
  256. }
  257. const { email } = data;
  258. My.bindEmail(email)
  259. .then(() => {
  260. asyncSMessage('操作成功');
  261. this.setState({ step: 0, error: '' });
  262. User.infoHandle(Object.assign(this.props.data, { email }));
  263. this.props.onConfirm();
  264. })
  265. .catch(e => {
  266. this.setState({ error: e.message });
  267. });
  268. }
  269. render() {
  270. const { show } = this.props;
  271. const { step = 0 } = this.state;
  272. return (
  273. <Modal className="bind-email-modal" show={show} width={630} {...this.stepProp[step]}>
  274. <div className="bind-email-modal-wrapper">{this[`renderStep${step}`]()}</div>
  275. </Modal>
  276. );
  277. }
  278. renderStep0() {
  279. const { data } = this.state;
  280. return (
  281. <div className="step-0-layout t-2">
  282. 已绑定邮箱 {data.email}
  283. <a onClick={() => this.onNext()}>修改</a>
  284. </div>
  285. );
  286. }
  287. renderStep1() {
  288. return (
  289. <div className="step-1-layout">
  290. <div className="label">邮箱地址</div>
  291. <div className="input-layout">
  292. <Input
  293. className="w-10"
  294. placeholder="请输入邮箱"
  295. value={this.state.data.email}
  296. error={this.state.error}
  297. empty={this.state.empty.email}
  298. onChange={e => {
  299. this.changeData('email', e.target.value);
  300. this.validEmail();
  301. }}
  302. />
  303. </div>
  304. </div>
  305. );
  306. }
  307. }
  308. export class EditInfo extends Component {
  309. constructor(props) {
  310. super(props);
  311. this.props.data = this.props.data || {};
  312. this.state = Object.assign({ data: {}, empty: {} }, this.initState(this.props));
  313. }
  314. initState(props) {
  315. if (props.image && this.waitImage) {
  316. const { state } = this;
  317. Common.upload(props.image)
  318. .then(result => {
  319. const { data } = this.state;
  320. data.avatar = result.url;
  321. this.setState({ data, uploading: false });
  322. })
  323. .catch(e => {
  324. this.setState({ imageError: e.message });
  325. });
  326. state.uploading = true;
  327. this.waitImage = false;
  328. return state;
  329. }
  330. if (!props.show || this.props.show) return {};
  331. return { data: Object.assign({}, props.data) };
  332. }
  333. componentWillReceiveProps(nextProps) {
  334. this.setState(this.initState(nextProps));
  335. }
  336. changeData(field, value) {
  337. let { data, empty } = this.state;
  338. data = data || {};
  339. empty = empty || {};
  340. data[field] = value;
  341. if (value) empty[field] = !value;
  342. this.setState({ data, empty, nicknameError: null });
  343. }
  344. submit() {
  345. const { data, nicknameError } = this.state;
  346. if (nicknameError) return;
  347. if (!data.nickname) {
  348. this.setState({ empty: { nickname: !data.nickname } });
  349. return;
  350. }
  351. if (data.nickname.length < 2 || data.nickname.length > 20) {
  352. this.setState({ nicknameError: '用户名长度不足2个自负或超过20个字符' });
  353. return;
  354. }
  355. const { nickname, avatar } = data;
  356. My.editInfo({ nickname, avatar })
  357. .then(() => {
  358. asyncSMessage('操作成功');
  359. User.infoHandle(Object.assign(this.props.data, { nickname, avatar }));
  360. this.props.onConfirm();
  361. this.setState({ nicknameError: '' });
  362. })
  363. .catch(e => {
  364. this.setState({ nicknameError: e.message });
  365. });
  366. }
  367. render() {
  368. const { show, onCancel, onSelectImage } = this.props;
  369. return (
  370. <Modal
  371. className="edit-info-modal"
  372. show={show}
  373. width={630}
  374. title="修改资料"
  375. confirmText="保存"
  376. onCancel={onCancel}
  377. onConfirm={() => {
  378. this.submit();
  379. }}
  380. >
  381. <div className="edit-info-modal-wrapper">
  382. <div className="edit-info-modal-block">
  383. <div className="label">用户名</div>
  384. <div className="input-layout">
  385. <Input
  386. className="w-10"
  387. placeholder="2-20位,不可使用特殊字符。"
  388. value={this.state.data.nickname || ''}
  389. error={this.state.nicknameError}
  390. empty={this.state.empty.nickname}
  391. onChange={e => {
  392. this.changeData('nickname', e.target.value);
  393. }}
  394. />
  395. </div>
  396. </div>
  397. <div className="edit-info-modal-block">
  398. <div className="label">头像</div>
  399. <div className="input-layout">
  400. <FileUpload
  401. uploading={this.state.uploading}
  402. value={this.state.data.avatar}
  403. onUpload={({ file }) => {
  404. this.waitImage = true;
  405. onSelectImage(file);
  406. return Promise.reject();
  407. }}
  408. />
  409. {this.state.imageError || ''}
  410. </div>
  411. </div>
  412. </div>
  413. </Modal>
  414. );
  415. }
  416. }
  417. export class RealAuth extends Component {
  418. constructor(props) {
  419. super(props);
  420. this.state = { data: {} };
  421. }
  422. render() {
  423. const { show, onConfirm } = this.props;
  424. return (
  425. <Modal
  426. className="real-auth-modal"
  427. show={show}
  428. width={630}
  429. title="实名认证"
  430. confirmText="好的,知道了"
  431. btnAlign="center"
  432. onConfirm={onConfirm}
  433. >
  434. <div className="real-auth-modal-wrapper">
  435. <div className="real-auth-text">
  436. <div className="t1">完成实名认证即可领取:</div>
  437. <div className="t2">6个月VIP权限 和 5折机经优惠劵。</div>
  438. <div className="t3">扫码关注公众号,点击“我的-实名认证”</div>
  439. </div>
  440. <div className="real-auth-qrcode">
  441. <Assets name="qrcode" />
  442. </div>
  443. </div>
  444. </Modal>
  445. );
  446. }
  447. }
  448. export class EditAvatar extends Component {
  449. constructor(props) {
  450. super(props);
  451. this.state = Object.assign({ data: {} }, this.initState(this.props));
  452. }
  453. initState(props) {
  454. if (props.image) this.loadImage(props.image);
  455. if (!props.show || this.props.show) return {};
  456. return { data: {} };
  457. }
  458. componentWillReceiveProps(nextProps) {
  459. this.setState(this.initState(nextProps));
  460. }
  461. loadImage(file) {
  462. this.defaultZoomValue = 1;
  463. if (window.FileReader) {
  464. const reader = new FileReader();
  465. reader.readAsDataURL(file);
  466. // 渲染文件
  467. reader.onload = arg => {
  468. this.setState({ image: arg.target.result, fileName: file.name, zoomValue: 1 });
  469. };
  470. } else {
  471. const img = new Image();
  472. img.onload = function () {
  473. const canvas = document.createElement('canvas');
  474. canvas.height = img.height;
  475. canvas.width = img.width;
  476. const ctx = canvas.getContext('2d');
  477. ctx.drawImage(img, 0, 0);
  478. this.setState({ image: canvas.toDataURL() });
  479. };
  480. img.src = '1.gif';
  481. }
  482. }
  483. computerZoom() {
  484. const data = this.cropRef.getImageData();
  485. this.defaultZoomValue = 200 / parseFloat(Math.max(data.naturalWidth, data.naturalHeight));
  486. }
  487. crop() {
  488. // image in dataUrl
  489. // console.log(this.cropRef.getCroppedCanvas().toDataURL())
  490. // const canvas = this.cropRef.getCroppedCanvas();
  491. // const avatar = scale(this.props.crop, canvas, 'png-src');
  492. // let scaleCanvas = this.cropRef.getCroppedCanvas(this.props.crop)
  493. // this.setState({ avatar });
  494. }
  495. select() {
  496. const { fileName } = this.state;
  497. const { onConfirm } = this.props;
  498. const canvas = this.cropRef.getCroppedCanvas();
  499. const scaleCanvas = scale(this.props.crop, canvas);
  500. // let scaleCanvas = this.cropRef.getCroppedCanvas(this.props.crop)
  501. scaleCanvas.toBlob(blob => {
  502. const file = new File([blob], fileName);
  503. onConfirm(file);
  504. });
  505. }
  506. render() {
  507. const { show, onCancel } = this.props;
  508. const { image } = this.state;
  509. return (
  510. <Modal
  511. className="edit-avatar-modal"
  512. show={show}
  513. width={630}
  514. title="调整头像"
  515. confirmText="保存头像"
  516. onConfirm={() => {
  517. this.select();
  518. }}
  519. onCancel={onCancel}
  520. >
  521. <div className="edit-avatar-modal-wrapper">
  522. <div className="edit-avatar-o">
  523. <Cropper
  524. ref={ref => {
  525. this.cropRef = ref;
  526. }}
  527. src={image}
  528. ready={() => {
  529. this.computerZoom();
  530. }}
  531. style={{ height: 360, width: 360 }}
  532. // Cropper.js options
  533. aspectRatio={1}
  534. viewMode={0}
  535. // autoCropArea={0.8}
  536. preview=".img-preview"
  537. // dragMode='move'
  538. guides={false}
  539. movable={false}
  540. rotatable={false}
  541. scalable={false}
  542. // zoom={(value) => {
  543. // console.log('zoom', value);
  544. // const zoomValue = value * this.defaultZoomValue / 50;
  545. // this.cropRef.zoomTo(zoomValue);
  546. // }}
  547. cropmove={() => {
  548. this.crop();
  549. }}
  550. toggleDragModeOnDblclick={false}
  551. cropBoxResizable
  552. />
  553. </div>
  554. <div className="edit-avatar-r">
  555. <div className="text">头像预览</div>
  556. <div className="img-preview" style={{ width: 100, height: 100, overflow: 'hidden' }} />
  557. </div>
  558. </div>
  559. </Modal>
  560. );
  561. }
  562. }
  563. export class InviteModal extends Component {
  564. constructor(props) {
  565. super(props);
  566. this.state = { data: {} };
  567. }
  568. render() {
  569. const { show, onClose, data } = this.props;
  570. return (
  571. <Modal className="invite-modal" show={show} width={630} title="邀请好友" onClose={onClose}>
  572. <div className="invite-modal-wrapper">
  573. <div className="tip">每邀请一位小伙伴加入“千行GMAT”, 您的VIP权限会延长7天,可累加 无上限!赶紧行动吧~</div>
  574. <Invite data={data} />
  575. </div>
  576. </Modal>
  577. );
  578. }
  579. }
  580. // 模考选择下载
  581. export class DownloadModal extends Component {
  582. constructor(props) {
  583. super(props);
  584. this.state = { checkMap: {} };
  585. }
  586. onConfirm() {
  587. const { onConfirm, data } = this.props;
  588. if (onConfirm) onConfirm();
  589. const { checkMap } = this.state;
  590. Object.keys(checkMap).forEach(key => {
  591. if (!checkMap[key]) return;
  592. const link = data[`${key}`];
  593. if (link) {
  594. openLink(link);
  595. }
  596. });
  597. this.setState({ checkList: [] });
  598. }
  599. render() {
  600. const { show, data = {}, onCancel } = this.props;
  601. const { checkMap = {} } = this.state;
  602. const quantVersion = data.quantVersion || 0;
  603. const irVersion = data.irVersion || 0;
  604. const rcVersion = data.rcVersion || 0;
  605. return (
  606. <Modal
  607. className="download-modal"
  608. show={show}
  609. width={570}
  610. title="下载"
  611. confirmText="下载"
  612. onConfirm={() => this.onConfirm()}
  613. onCancel={onCancel}
  614. >
  615. <div className="download-modal-wrapper">
  616. <div className="t-2 t-s-18 m-b-1">请选择下载科目</div>
  617. <div className="m-b-1">
  618. {quantVersion > 0 && (
  619. <div className="t-2 t-s-16">
  620. <Checkbox
  621. checked={checkMap.quant}
  622. onChange={() => {
  623. checkMap.quant = !checkMap.quant;
  624. this.setState({ checkMap });
  625. }}
  626. />
  627. <span className="m-l-5">数学</span>
  628. <span className="t-8">
  629. (版本{quantVersion} 最后更新:{formatDate(data.quantTime, 'YYYY-MM-DD HH:mm:ss')})
  630. </span>
  631. </div>
  632. )}
  633. {irVersion > 0 && (
  634. <div className="t-2 t-s-16">
  635. <Checkbox
  636. checked={checkMap.ir}
  637. onChange={() => {
  638. checkMap.ir = !checkMap.ir;
  639. this.setState({ checkMap });
  640. }}
  641. />
  642. <span className="m-l-5">逻辑</span>
  643. <span className="t-8">
  644. (版本{irVersion} 最后更新:{formatDate(data.irTime, 'YYYY-MM-DD HH:mm:ss')})
  645. </span>
  646. </div>
  647. )}
  648. {rcVersion > 0 && (
  649. <div className="t-2 t-s-16">
  650. <Checkbox
  651. checked={checkMap.rc}
  652. onChange={() => {
  653. checkMap.rc = !checkMap.rc;
  654. this.setState({ checkMap });
  655. }}
  656. />
  657. <span className="m-l-5">阅读</span>
  658. <span className="t-8">
  659. (版本{rcVersion} 最后更新:{formatDate(data.rcTime, 'YYYY-MM-DD HH:mm:ss')})
  660. </span>
  661. </div>
  662. )}
  663. </div>
  664. </div>
  665. </Modal>
  666. );
  667. }
  668. }
  669. // 模考开通确认
  670. export class OpenConfirmModal extends Component {
  671. render() {
  672. const { show, onConfirm, onCancel, data = {} } = this.props;
  673. return (
  674. <Modal
  675. className="open-confirm-modal"
  676. show={show}
  677. width={570}
  678. title="开通确认"
  679. confirmText="开通"
  680. cancelText="暂不开通"
  681. onConfirm={onConfirm}
  682. onCancel={onCancel}
  683. >
  684. <div className="open-confirm-modal-wrapper m-b-2">
  685. <div className="t-2 t-s-18">您正在开通「{data.title}」。</div>
  686. <div className="t-2 t-s-18">模考有效期至:{data.endTime && formatDate(data.endTime, 'YYYY-MM-DD')}</div>
  687. </div>
  688. </Modal>
  689. );
  690. }
  691. }
  692. // 模考重置确认
  693. export class RestartConfirmModal extends Component {
  694. render() {
  695. const { show, onConfirm, onCancel } = this.props;
  696. return (
  697. <Modal
  698. className="restart-confirm-modal"
  699. show={show}
  700. width={570}
  701. title="重置确认"
  702. confirmText="立即重置"
  703. cancelText="暂不重置"
  704. onConfirm={onConfirm}
  705. onCancel={onCancel}
  706. >
  707. <div className="restart-confirm-modal-wrapper m-b-2">
  708. <div className="t-2 t-s-18">重置后,可进行新一轮的模考。 </div>
  709. <div className="t-2 t-s-18 m-b-2">本轮模考的成绩和报告可在本页面或「我的报告」查看。 </div>
  710. <div className="t-2 t-s-18 m-b-1">只有 1 次重置机会。</div>
  711. </div>
  712. </Modal>
  713. );
  714. }
  715. }
  716. export class FeedbackErrorDataModal extends Component {
  717. constructor(props) {
  718. super(props);
  719. this.state = { data: { position: ['', '', ''], content: '', originContent: '' } };
  720. }
  721. componentWillReceiveProps(nextProps) {
  722. if (nextProps.show && nextProps.defaultData) {
  723. this.setState({ data: Object.assign({}, nextProps.defaultData, this.state.data) });
  724. }
  725. }
  726. onConfirm() {
  727. const { onConfirm } = this.props;
  728. const { data } = this.state;
  729. if (!data.content || !data.originContent) return;
  730. My.addFeedbackErrorData(data.dataId, data.title, data.position.join(','), data.originContent, data.content).then(
  731. () => {
  732. this.setState({ data: { position: ['', '', ''], content: '', originContent: '' } });
  733. if (onConfirm) onConfirm();
  734. },
  735. );
  736. }
  737. onCancel() {
  738. const { onCancel } = this.props;
  739. this.setState({ data: { position: ['', '', ''], content: '', originContent: '' } });
  740. if (onCancel) onCancel();
  741. }
  742. render() {
  743. const { show } = this.props;
  744. const { data } = this.state;
  745. return (
  746. <Modal
  747. show={show}
  748. title="纠错"
  749. btnType="link"
  750. width={630}
  751. onConfirm={() => this.onConfirm()}
  752. onCancel={() => this.onCancel()}
  753. >
  754. <div className="t-2 m-b-1 t-s-16">
  755. 定位:
  756. <input
  757. value={data.position[0]}
  758. className="t-c b-c-1 m-r-5"
  759. style={{ width: 56 }}
  760. onChange={e => {
  761. data.position[0] = e.target.value;
  762. this.setState({ data });
  763. }}
  764. />
  765. <span className="require">页</span>
  766. <input
  767. value={data.position[1]}
  768. className="t-c b-c-1 m-r-5"
  769. style={{ width: 56 }}
  770. onChange={e => {
  771. data.position[1] = e.target.value;
  772. this.setState({ data });
  773. }}
  774. />
  775. <span className="require">行</span> , 题号
  776. <input
  777. value={data.position[2]}
  778. className="t-c b-c-1"
  779. style={{ width: 56 }}
  780. onChange={e => {
  781. data.position[2] = e.target.value;
  782. this.setState({ data });
  783. }}
  784. />
  785. </div>
  786. <div className="t-2 t-s-16">错误内容是:</div>
  787. <textarea
  788. value={data.originContent}
  789. className="b-c-1 w-10 p-10"
  790. rows={10}
  791. placeholder={'可简单描述您发现的问题'}
  792. onChange={e => {
  793. data.originContent = e.target.value;
  794. this.setState({ data });
  795. }}
  796. />
  797. <div className="t-2 t-s-16">应该更改为:</div>
  798. <textarea
  799. value={data.content}
  800. className="b-c-1 w-10 p-10"
  801. rows={10}
  802. placeholder={'提供您认为正确的内容即可'}
  803. onChange={e => {
  804. data.content = e.target.value;
  805. this.setState({ data });
  806. }}
  807. />
  808. <div className="b-b m-t-2" />
  809. </Modal>
  810. );
  811. }
  812. }
  813. export class AskCourseModal extends Component {
  814. constructor(props) {
  815. super(props);
  816. this.state = { data: { position: [], content: '', originContent: '' } };
  817. }
  818. componentWillReceiveProps(nextProps) {
  819. if (nextProps.show && nextProps.defaultData) {
  820. this.setState({ data: Object.assign({}, nextProps.defaultData, this.state.data) });
  821. }
  822. }
  823. onConfirm() {
  824. const { course, courseNo, onConfirm } = this.props;
  825. const { data } = this.state;
  826. if (!data.position || !data.originContent || !data.content) return;
  827. My.addCourseAsk(course.id, courseNo.id, data.position.join(','), data.originContent, data.content).then(() => {
  828. this.setState({ data: { position: [], content: '', originContent: '' } });
  829. if (onConfirm) onConfirm();
  830. });
  831. }
  832. onCancel() {
  833. const { onCancel } = this.props;
  834. this.setState({ data: { position: [], content: '', originContent: '' } });
  835. if (onCancel) onCancel();
  836. }
  837. render() {
  838. const { show, selectList, courseNo, getContainer } = this.props;
  839. const { data } = this.state;
  840. return (
  841. <Modal
  842. show={show}
  843. title="提问"
  844. btnType="link"
  845. width={630}
  846. getContainer={getContainer}
  847. confirmText="提交"
  848. onConfirm={() => this.onConfirm()}
  849. onCancel={() => this.onCancel()}
  850. >
  851. <div className="t-2 m-b-1 t-s-16">
  852. 针对<span className="t-4">课时{courseNo.no}</span>的{' '}
  853. <Select
  854. value={data.position}
  855. theme="white"
  856. list={selectList}
  857. onChange={item => {
  858. data.position = item.key;
  859. this.setState({ data });
  860. }}
  861. />
  862. 进行提问.
  863. </div>
  864. <div className="t-2 t-s-16">老师讲解的内容是:</div>
  865. <textarea
  866. value={data.originContent}
  867. className="b-c-1 w-10 p-10"
  868. rows={4}
  869. placeholder={'请简单描述,以便老师准确定位。'}
  870. onChange={e => {
  871. data.originContent = e.target.value;
  872. this.setState({ data });
  873. }}
  874. />
  875. <div className="t-2 t-s-16">您的问题是:</div>
  876. <textarea
  877. value={data.content}
  878. className="b-c-1 w-10 p-10"
  879. rows={4}
  880. placeholder={'老师会在n小时内回答你的问题。'}
  881. onChange={e => {
  882. data.content = e.target.value;
  883. this.setState({ data });
  884. }}
  885. />
  886. <div className="b-b m-t-2" />
  887. </Modal>
  888. );
  889. }
  890. }
  891. export class CourseNoteModal extends Component {
  892. constructor(props) {
  893. super(props);
  894. this.state = { data: { content: '' } };
  895. }
  896. componentWillReceiveProps(nextProps) {
  897. if (nextProps.show && nextProps.defaultData) {
  898. this.setState({ data: Object.assign({}, nextProps.defaultData, this.state.data) });
  899. }
  900. }
  901. onConfirm() {
  902. const { course, onConfirm } = this.props;
  903. const { data } = this.state;
  904. if (!data.content) return;
  905. My.updateCourseNote(course.id, data.courseNoId, data.content).then(() => {
  906. this.setState({ data: { content: '' } });
  907. if (onConfirm) onConfirm();
  908. });
  909. }
  910. onCancel() {
  911. const { onCancel } = this.props;
  912. this.setState({ data: { content: '' } });
  913. if (onCancel) onCancel();
  914. }
  915. render() {
  916. const { show, course = {}, courseNos = [], noteMap = {}, getContainer } = this.props;
  917. const { data } = this.state;
  918. return (
  919. <Modal
  920. show={show}
  921. title="笔记"
  922. width={630}
  923. getContainer={getContainer}
  924. confirmText="提交"
  925. onConfirm={() => this.onConfirm()}
  926. onCancel={() => this.onCancel()}
  927. >
  928. <div className="t-2 m-b-1 t-s-16">
  929. {course.title}
  930. <Select
  931. theme="white"
  932. value={data.courseNoId}
  933. list={courseNos.map(row => {
  934. return {
  935. title: `课时${row.no}`,
  936. key: row.id,
  937. };
  938. })}
  939. onChange={item => {
  940. if (data.courseNoId !== item.key) {
  941. data.courseNoId = item.key;
  942. data.content = noteMap[item.key] ? noteMap[item.key].content : '';
  943. }
  944. this.setState({ data });
  945. }}
  946. />
  947. </div>
  948. <textarea
  949. value={data.content}
  950. className="b-c-1 w-10 p-10"
  951. rows={10}
  952. placeholder={'写下笔记,方便以后复习。'}
  953. onChange={e => {
  954. data.content = e.target.value;
  955. this.setState({ data });
  956. }}
  957. />
  958. <div className="b-b m-t-2" />
  959. </Modal>
  960. );
  961. }
  962. }
  963. export class TextbookFeedbackModal extends Component {
  964. constructor(props) {
  965. super(props);
  966. this.state = {
  967. data: { content: '' },
  968. targetList: TextbookFeedbackTarget.map(row => {
  969. return {
  970. title: row.label,
  971. key: row.value,
  972. };
  973. }),
  974. textbookSubject: TextbookSubject.map(row => {
  975. return {
  976. title: row.label,
  977. key: row.value,
  978. };
  979. }),
  980. };
  981. }
  982. componentWillReceiveProps(nextProps) {
  983. if (nextProps.show && nextProps.defaultData) {
  984. this.setState({ data: Object.assign({}, nextProps.defaultData, this.state.data) });
  985. }
  986. }
  987. onConfirm() {
  988. const { onConfirm } = this.props;
  989. const { data } = this.state;
  990. if (!data.content) return;
  991. if (data.target !== 'new' && !data.no) return;
  992. My.addTextbookFeedback(data.textbookSubject, data.target, data.no, data.content)
  993. .then(() => {
  994. this.setState({ data: { content: '' } });
  995. if (onConfirm) onConfirm();
  996. })
  997. .catch((e) => {
  998. asyncSMessage(e.message, 'error');
  999. });
  1000. }
  1001. onCancel() {
  1002. const { onCancel } = this.props;
  1003. this.setState({ data: { content: '' } });
  1004. if (onCancel) onCancel();
  1005. }
  1006. render() {
  1007. const { show } = this.props;
  1008. const { data, targetList, textbookSubject } = this.state;
  1009. return (
  1010. <Modal show={show} title="反馈" width={630} onConfirm={() => this.onConfirm()} onCancel={() => this.onCancel()}>
  1011. <div className="t-2 t-s-16 m-b-1">
  1012. 机经类别:{' '}
  1013. <Select
  1014. value={data.textbookSubject}
  1015. theme="white"
  1016. list={textbookSubject}
  1017. onChange={value => {
  1018. data.textbookSubject = value;
  1019. this.setState({ data });
  1020. }}
  1021. />
  1022. 反馈类型:{' '}
  1023. <Select
  1024. value={data.target}
  1025. theme="white"
  1026. list={targetList}
  1027. onChange={({ key }) => {
  1028. data.target = key;
  1029. this.setState({ data });
  1030. }}
  1031. />
  1032. <span hidden={data.target === 'new'}>
  1033. {' '}
  1034. 题号是{' '}
  1035. <input
  1036. value={data.no}
  1037. style={{ width: 80 }}
  1038. className="m-l-1 b-c-1 t-c"
  1039. onChange={e => {
  1040. data.no = e.target.value;
  1041. this.setState({ data });
  1042. }}
  1043. />
  1044. </span>
  1045. </div>
  1046. <div className="t-2 t-s-16">{TextbookFeedbackTargetMap[data.target]}:</div>
  1047. <textarea
  1048. value={data.content}
  1049. className="b-c-1 w-10 p-10"
  1050. rows={10}
  1051. placeholder={TextbookFeedbackTargetMap[data.target]}
  1052. onChange={e => {
  1053. data.content = e.target.value;
  1054. this.setState({ data });
  1055. }}
  1056. />
  1057. <div className="b-b m-t-2" />
  1058. </Modal>
  1059. );
  1060. }
  1061. }
  1062. export class FaqModal extends Component {
  1063. constructor(props) {
  1064. super(props);
  1065. this.state = { data: { content: '' } };
  1066. }
  1067. componentWillReceiveProps(nextProps) {
  1068. if (nextProps.defaultData && nextProps.show) {
  1069. this.setState({ data: Object.assign({}, nextProps.defaultData, this.state.data) });
  1070. }
  1071. }
  1072. onConfirm() {
  1073. const { onConfirm } = this.props;
  1074. const { data } = this.state;
  1075. if (!data.content) return;
  1076. My.addFaq(data.channel, data.position, data.content).then(() => {
  1077. this.setState({ data: { content: '' } });
  1078. if (onConfirm) onConfirm();
  1079. });
  1080. }
  1081. onCancel() {
  1082. const { onCancel } = this.props;
  1083. this.setState({ data: { content: '' } });
  1084. if (onCancel) onCancel();
  1085. }
  1086. render() {
  1087. const { show } = this.props;
  1088. const { data } = this.state;
  1089. return (
  1090. <Modal show={show} title="咨询" onConfirm={() => this.onConfirm()} onCancel={() => this.onCancel()}>
  1091. <textarea
  1092. className="b-c-1 w-10 p-10"
  1093. value={data.content}
  1094. rows={6}
  1095. placeholder="请输入您的问题!"
  1096. onChange={e => {
  1097. data.content = e.target.value;
  1098. this.setState({ data });
  1099. }}
  1100. />
  1101. <div className="b-b m-t-2" />
  1102. </Modal>
  1103. );
  1104. }
  1105. }
  1106. export class CommentModal extends Component {
  1107. constructor(props) {
  1108. super(props);
  1109. this.state = { data: { content: '' } };
  1110. }
  1111. componentWillReceiveProps(nextProps) {
  1112. if (nextProps.show && nextProps.defaultData) {
  1113. this.setState({ data: Object.assign({}, nextProps.defaultData, this.state.data) });
  1114. }
  1115. }
  1116. onConfirm() {
  1117. const { onConfirm } = this.props;
  1118. const { data } = this.state;
  1119. if (!data.content) return;
  1120. My.addComment(data.channel, data.position, data.content).then(() => {
  1121. this.setState({ data: { content: '' } });
  1122. if (onConfirm) onConfirm();
  1123. });
  1124. }
  1125. onCancel() {
  1126. const { onCancel } = this.props;
  1127. this.setState({ data: { content: '' } });
  1128. if (onCancel) onCancel();
  1129. }
  1130. render() {
  1131. const { show } = this.props;
  1132. const { data } = this.state;
  1133. return (
  1134. <Modal show={show} title="评价" onConfirm={() => this.onConfirm()} onCancel={() => this.onCancel()}>
  1135. <textarea
  1136. value={data.content}
  1137. className="b-c-1 w-10 p-10"
  1138. rows={6}
  1139. placeholder="您的看法对我们来说很重要!"
  1140. onChange={e => {
  1141. data.content = e.target.value;
  1142. this.setState({ data });
  1143. }}
  1144. />
  1145. <div className="b-b m-t-2" />
  1146. </Modal>
  1147. );
  1148. }
  1149. }
  1150. export class FinishModal extends Component {
  1151. render() {
  1152. const { show, onConfirm } = this.props;
  1153. return (
  1154. <Modal show={show} title="提交成功" confirmText="好的,知道了" btnAlign="center" onConfirm={() => onConfirm()}>
  1155. <div className="t-2 t-s-18">
  1156. <Icon type="check" className="t-5 m-r-5" />
  1157. 您的每一次反馈都是千行进步的动力。
  1158. </div>
  1159. </Modal>
  1160. );
  1161. }
  1162. }
  1163. export class SuppleModal extends Component {
  1164. constructor(props) {
  1165. super(props);
  1166. this.state = { data: { content: '' } };
  1167. }
  1168. componentWillReceiveProps(nextProps) {
  1169. if (nextProps.show && nextProps.defaultData) {
  1170. this.setState({ data: Object.assign({}, nextProps.defaultData, this.state.data) });
  1171. }
  1172. }
  1173. onConfirm() {
  1174. const { onConfirm } = this.props;
  1175. const { data } = this.state;
  1176. if (!data.content) return;
  1177. My.addRoomFeedback(data.roomId, data.content).then(() => {
  1178. this.setState({ data: { content: '' } });
  1179. if (onConfirm) onConfirm();
  1180. });
  1181. }
  1182. onCancel() {
  1183. const { onCancel } = this.props;
  1184. this.setState({ data: { content: '' } });
  1185. if (onCancel) onCancel();
  1186. }
  1187. render() {
  1188. const { show, info = {} } = this.props;
  1189. const { data } = this.state;
  1190. return (
  1191. <Modal show={show} title="考场信息" onConfirm={() => this.onConfirm()} onCancel={() => this.onCancel()}>
  1192. <div className="t-2 t-s-16">考场位置: {info.isOverseas ? '海外' : '中国'}{info.area ? ` ${info.area}` : ''} {info.title}</div>
  1193. <div className="t-2 t-s-16">补充内容:</div>
  1194. <textarea
  1195. value={data.content}
  1196. className="b-c-1 w-10 p-10"
  1197. rows={6}
  1198. onChange={e => {
  1199. data.content = e.target.value;
  1200. this.setState({ data });
  1201. }}
  1202. />
  1203. <div className="b-b m-t-2" />
  1204. </Modal>
  1205. );
  1206. }
  1207. }
  1208. export class SuppleFinishModal extends Component {
  1209. render() {
  1210. const { show, onConfirm } = this.props;
  1211. return (
  1212. <Modal show={show} title="提交成功" confirmText="好的,知道了" btnAlign="center" onConfirm={() => onConfirm()}>
  1213. <div className="t-2 t-s-18">
  1214. <Icon type="check" className="t-5 m-r-5" />
  1215. 内容将在审核通过后发布,感谢您的参与。
  1216. </div>
  1217. </Modal>
  1218. );
  1219. }
  1220. }