index.js 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116
  1. import React from 'react';
  2. import './index.less';
  3. import { Link } from 'react-router-dom';
  4. import { Checkbox } from 'antd';
  5. import Module from '../Module';
  6. import Progress from '../Progress';
  7. import IconButton from '../IconButton';
  8. import Button from '../Button';
  9. function getBuyBody(data) {
  10. const desc = data.desc || [];
  11. return (
  12. <div className="body">
  13. <div className="desc">
  14. {desc.map(item => {
  15. return <div className="item">{item}</div>;
  16. })}
  17. </div>
  18. <div className="btn">
  19. <Button size="lager" radius>
  20. 立即购买
  21. </Button>
  22. </div>
  23. </div>
  24. );
  25. }
  26. function getOpenBody() {
  27. return (
  28. <div className="body">
  29. <div className="title">请开通预习作业</div>
  30. <div className="text">
  31. <Checkbox />
  32. <span>
  33. 我已阅读并同意<Link to="">《千行 GMAT - Sentence Corretion 课程协议》</Link>
  34. </span>
  35. </div>
  36. <div className="btn">
  37. <Button size="lager" radius>
  38. 立即开通
  39. </Button>
  40. </div>
  41. </div>
  42. );
  43. }
  44. function getIngBody(data) {
  45. const list = data.list || [];
  46. return (
  47. <div className="body">
  48. <div className="title">近期待完成</div>
  49. {list.length === 0 ? (
  50. <div className="text">
  51. <div>好棒!</div>
  52. <div>近期的作业都完成啦</div>
  53. </div>
  54. ) : (
  55. <div className="list">
  56. {list.map(item => {
  57. return (
  58. <div className="item">
  59. <div className="top">
  60. <div className="date">{item.date}</div>
  61. <div className="action">
  62. {item.status === 'start' && <IconButton type="start" tip="Start" />}
  63. {item.status === 'ing' && <IconButton type="continue" tip="Continue" />}
  64. {item.status === 'ing' && <IconButton type="restart" tip="Restart" />}
  65. </div>
  66. </div>
  67. <Progress progress={item.progress} />
  68. </div>
  69. );
  70. })}
  71. </div>
  72. )}
  73. </div>
  74. );
  75. }
  76. function getEndBody() {
  77. return (
  78. <div className="body">
  79. <div className="title">课程已经结束啦</div>
  80. </div>
  81. );
  82. }
  83. function getBody(data) {
  84. switch (data.status) {
  85. case 'buy':
  86. return getBuyBody(data);
  87. case 'open':
  88. return getOpenBody(data);
  89. case 'ing':
  90. return getIngBody(data);
  91. case 'end':
  92. return getEndBody(data);
  93. default:
  94. return '';
  95. }
  96. }
  97. function Card(props) {
  98. const { style, data = {}, title } = props;
  99. return (
  100. <Module style={style} className={`card ${data.status}`}>
  101. <div className="header">
  102. {title}
  103. {data.status === 'buy' && <span className="sub-title">未购买</span>}
  104. {data.status === 'open' && <span className="sub-title">已购买</span>}
  105. </div>
  106. {getBody(data)}
  107. </Module>
  108. );
  109. }
  110. Card.propTypes = {};
  111. export default Card;