index.js 8.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272
  1. import React, { Component } from 'react';
  2. import './index.less';
  3. import { Link } from 'react-router-dom';
  4. import { Checkbox } from 'antd';
  5. import Assets from '@src/components/Assets';
  6. import { formatDate } from '@src/services/Tools';
  7. import Module from '../Module';
  8. import Progress from '../Progress';
  9. import IconButton from '../IconButton';
  10. import Button from '../Button';
  11. export default class Card extends Component {
  12. getBuyBody() {
  13. const { data } = this.props;
  14. return (
  15. <div className="body">
  16. <div className="desc" dangerouslySetInnerHTML={{ __html: data.description }} />
  17. <div className="btn">
  18. <Button size="lager" radius>
  19. 立即购买
  20. </Button>
  21. </div>
  22. </div>
  23. );
  24. }
  25. getOpenBody() {
  26. return (
  27. <div className="body">
  28. <div className="title">请开通预习作业</div>
  29. <div className="text">
  30. <Checkbox />
  31. <span>
  32. 我已阅读并同意<Link to="">《千行 GMAT - Sentence Corretion 课程协议》</Link>
  33. </span>
  34. </div>
  35. <div className="btn">
  36. <Button size="lager" radius>
  37. 立即开通
  38. </Button>
  39. </div>
  40. </div>
  41. );
  42. }
  43. getIngBody() {
  44. const { process, previewAction } = this.props;
  45. return (
  46. <div className="body">
  47. <div className="title">近期待完成</div>
  48. {process.previews.length === 0 ? (
  49. <div className="text">
  50. <div>好棒!</div>
  51. <div>近期的作业都完成啦</div>
  52. </div>
  53. ) : (<div className="list">
  54. {process.previews.map(item => {
  55. return (
  56. <div className="item">
  57. <div className="top">
  58. <div className="date">{item.time}</div>
  59. <div className="action">
  60. {!item.report.id && (
  61. <IconButton
  62. type="start"
  63. tip="Start"
  64. onClick={() => previewAction && previewAction('start', item)}
  65. />
  66. )}
  67. {item.report.id && (
  68. <IconButton
  69. type="continue"
  70. onClick={() => previewAction && previewAction('continue', item)}
  71. tip="Continue"
  72. />
  73. )}
  74. {item.report.id && (
  75. <IconButton
  76. type="restart"
  77. onClick={() => previewAction && previewAction('restart', item)}
  78. tip="Restart"
  79. />
  80. )}
  81. </div>
  82. </div>
  83. <Progress progress={item.report.id ? item.repport.userNumber / item.report.questionNumber : 0} />
  84. </div>
  85. );
  86. })}
  87. </div>)}
  88. </div>
  89. );
  90. }
  91. getBody() {
  92. const { process = {} } = this.props;
  93. if (!process.payed && !process.startTime) return this.getBuyBody();
  94. if (process.payed) return this.getOpenBody();
  95. if (process.startTime) return this.getIngBody();
  96. return <div />;
  97. }
  98. render() {
  99. const { style, data = {}, process = {} } = this.props;
  100. return (
  101. <Module
  102. style={style}
  103. className={`card ${!process.payed && !process.startTime ? 'buy' : ''} ${process.payed ? 'open' : ''} ${process.startTime ? 'ing' : ''}`}
  104. >
  105. <div className="header">
  106. {`${data.titleZh} ${data.titleEn}`}
  107. {!process.payed && !process.startTime && <span className="sub-title">未购买</span>}
  108. {(process.payed || process.startTime) && <span className="sub-title">已购买</span>}
  109. </div>
  110. {this.getBody()}
  111. </Module>
  112. );
  113. }
  114. }
  115. export class Card1 extends Component {
  116. getEndBody() {
  117. const { data, onPreview } = this.props;
  118. const { useStartTime, useEndTime } = data;
  119. return (
  120. <div className="body">
  121. <div className="text">
  122. <div className="t-1">课程已经结束啦</div>
  123. </div>
  124. <div className="bottom">
  125. 有效期: {useStartTime && formatDate(useStartTime, 'YYYY-MM-DD')}至{useEndTime && formatDate(useEndTime, 'YYYY-MM-DD')} <a onClick={() => onPreview && onPreview()}>全部作业></a>
  126. </div>
  127. </div>
  128. );
  129. }
  130. getStopBody() {
  131. return (
  132. <div className="body">
  133. <div className="text">
  134. <div className="t-1">停课中</div>
  135. <div className="t-2">您可至「我的-课程」恢复学习</div>
  136. </div>
  137. </div>
  138. );
  139. }
  140. getOpenBody() {
  141. const { checked } = this.state;
  142. const { data, onOpen, contract } = this.props;
  143. const { teacher, endTime, courseModule } = data;
  144. switch (courseModule) {
  145. case 'video':
  146. return <div className="body">
  147. <div className="text">
  148. <span>
  149. 请于{endTime && formatDate(endTime, 'YYYY-MM-DD')}前开通课程
  150. </span>
  151. </div>
  152. <div className="btn">
  153. <Button size="lager" radius onClick={() => onOpen && onOpen()}>
  154. 开通作业
  155. </Button>
  156. </div>
  157. </div>;
  158. case 'online':
  159. return <div className="body">
  160. <div className="text">
  161. <Checkbox checked={checked} onChange={() => {
  162. this.setState({ checked: !checked });
  163. }} />
  164. <span>
  165. 我已阅读并同意<a href={`/contract/${contract.key}`} target="_blank">{contract.title}</a>
  166. </span>
  167. </div>
  168. <div className="btn">
  169. <Button size="lager" disabled={!checked} radius onClick={() => checked && onOpen && onOpen()}>
  170. 开通作业
  171. </Button>
  172. </div>
  173. </div>;
  174. case 'vs':
  175. return <div className="body">
  176. <div className="t-1">请尽快与老师预约上课时间</div>
  177. <div className="t-2">请于 {endTime && formatDate(endTime, 'YYYY-MM-DD')} 前开通课程</div>
  178. <div className="qr-code">
  179. {teacher && <Assets name="qrcode" src={teacher.qr} />}
  180. </div>
  181. </div>;
  182. default:
  183. return <div />;
  184. }
  185. }
  186. getIngBody() {
  187. const { data, list = [], previewAction, onPreview } = this.props;
  188. const { useStartTime, useEndTime } = data;
  189. return (
  190. <div className="body">
  191. {list.length > 0 && <div className="title">近期待完成</div>}
  192. {list.length === 0 ? (
  193. <div className="text">
  194. <div className="t-1">好棒!</div>
  195. <div className="t-2">近期的作业都完成啦</div>
  196. </div>
  197. ) : (<div className="list">
  198. {list.map(item => {
  199. return (
  200. <div className="item">
  201. <div className="top">
  202. <div className="title">{item.title}</div>
  203. </div>
  204. <div className="detail">
  205. <Progress size="small" progress={item.progress} />
  206. <div className="action">
  207. {item.progress === 0 && (
  208. <IconButton
  209. type="start"
  210. tip="Start"
  211. onClick={() => previewAction && previewAction('start', item)}
  212. />
  213. )}
  214. {item.progress > 0 && (
  215. <IconButton
  216. type="continue"
  217. onClick={() => previewAction && previewAction('continue', item)}
  218. tip="Continue"
  219. />
  220. )}
  221. {item.progress > 0 && (
  222. <IconButton
  223. type="restart"
  224. onClick={() => previewAction && previewAction('restart', item)}
  225. tip="Restart"
  226. />
  227. )}
  228. </div>
  229. </div>
  230. </div>
  231. );
  232. })}
  233. </div>)}
  234. <div className="bottom">
  235. 有效期: {useStartTime && formatDate(useStartTime, 'YYYY-MM-DD')}至{useEndTime && formatDate(useEndTime, 'YYYY-MM-DD')} <a onClick={() => onPreview && onPreview()}>全部作业></a>
  236. </div>
  237. </div>
  238. );
  239. }
  240. getBody() {
  241. const { status } = this.props;
  242. if (status === 'end') return this.getEndBody();
  243. if (status === 'stop') return this.getStopBody();
  244. if (status === 'open') return this.getOpenBody();
  245. if (status === 'ing') return this.getIngBody();
  246. return <div />;
  247. }
  248. render() {
  249. const { style, title, tag, status } = this.props;
  250. return (
  251. <Module style={style} className={`card1 ${status}`}>
  252. <div className="header">
  253. {tag && <div className="tag">{tag}</div>}
  254. {title}
  255. </div>
  256. {this.getBody()}
  257. </Module>
  258. );
  259. }
  260. }