page.js 6.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186
  1. import React, { Component } from 'react';
  2. import './index.less';
  3. import { Icon, Radio } from 'antd';
  4. import Page from '@src/containers/Page';
  5. import CheckboxItem from '../../../components/CheckboxItem';
  6. import Button from '../../../components/Button';
  7. import { Order } from '../../../stores/order';
  8. export default class extends Page {
  9. init() {
  10. }
  11. initData() {
  12. Order.allCheckout()
  13. .then(order => {
  14. this.setState({ order });
  15. });
  16. }
  17. renderView() {
  18. const { _list = [{}, {}, {}] } = this.state;
  19. return (
  20. <div style={{ paddingTop: 50 }}>
  21. <div className="content">
  22. <div className="t-1 m-b-2 f-w-b t-s-24">购物车</div>
  23. </div>
  24. <div className="content">
  25. <div className="m-b-1 t-8">您看中的课程已构成套餐,结算有优惠</div>
  26. </div>
  27. <div className="list content">
  28. {_list.map(item => {
  29. return <OrderItem data={item} />;
  30. })}
  31. </div>
  32. <div className="footer">
  33. <div className="content">
  34. <div className="d-i-b m-t-1 m-r-2">
  35. <CheckboxItem className="v-a-m m-r-5" theme="white" checked />
  36. 全选
  37. </div>
  38. <div style={{ marginRight: 50 }} className="d-i-b m-t-1">
  39. <Button size="small" radius disabled={false}>
  40. 删除
  41. </Button>
  42. </div>
  43. <div style={{ marginTop: 15 }} className="d-i-b t-9 t-s-12 m-r-5">
  44. 优惠活动:
  45. </div>
  46. <div style={{ marginTop: 15 }} className="d-i-b t-s-12">
  47. <div>单项课程 2门9折,3门88折,4门及以上85折。</div>
  48. <div>1VS1私教 满30课时享95折优惠。</div>
  49. </div>
  50. <div className="f-r">
  51. <div className="d-i-b m-r-1 m-t-1">
  52. <div className="t-1 t-s-16 f-w-b">
  53. 实付<span className="m-l-5 t-7 t-s-20"> ¥ 15000</span>
  54. </div>
  55. <div className="t-1">
  56. 原价<span className="m-l-5 t-8 t-d-l-t">¥15200</span>
  57. <span className="m-l-5 t-8">(优惠活动-¥200)</span>
  58. </div>
  59. </div>
  60. <Button className="submit">立即付款</Button>
  61. </div>
  62. </div>
  63. </div>
  64. </div>
  65. );
  66. }
  67. }
  68. class OrderItem extends Component {
  69. render() {
  70. return (
  71. <div className="order-item">
  72. {this.renderInfo()}
  73. {this.renderDetail()}
  74. </div>
  75. );
  76. }
  77. renderInfo() {
  78. return (
  79. <div className="order-item-info">
  80. <CheckboxItem theme="white" className="select" />
  81. <Icon className="close" type="close-circle" theme="filled" />
  82. <div style={{ width: 360 }} className="d-i-b t-1 t-s-16">
  83. OG 20 套餐
  84. </div>
  85. <div style={{ width: 400 }} className="d-i-b t-8 t-s-12">
  86. 实付金额满20000元赠送
  87. </div>
  88. <div style={{ width: 120 }} className="d-i-b t-8 t-s-12 p-r">
  89. 数量
  90. <input style={{ width: 32 }} className="m-l-5 t-c" />
  91. <Icon className="up" type="caret-up" />
  92. <Icon className="down" type="caret-down" />
  93. </div>
  94. <div className="d-i-b t-7 t-s-16"> ¥ 15000</div>
  95. </div>
  96. );
  97. }
  98. renderDetail() {
  99. return (
  100. <div className="order-item-detail l-h-20">
  101. <div className="contain">
  102. <div style={{ width: 880 }} className="d-i-b t-1 t-s-12">
  103. <span className="d-i-b f-w-b m-r-5">
  104. 包含
  105. <Icon className="t-10 c-p" type="caret-up" />
  106. <Icon className="t-10 c-p" type="caret-down" />
  107. </span>
  108. <span style={{ width: 300 }} className="d-i-b nowrap">
  109. OG 20 语法 SC +OG 20 语法 SC +OG 20 语法 SC +OG 20 语法 SC +
  110. </span>
  111. </div>
  112. <div className="d-i-b t-1 t-s-12 t-d-l-t"> ¥ 123022</div>
  113. </div>
  114. <div className="contain-list m-b-5 l-h-16">
  115. <div>
  116. <div style={{ width: 360 }} className="d-i-b t-1 t-s-12">
  117. <span className="d-i-b m-r-5">OG 20 语法 SC</span>
  118. </div>
  119. <div className="d-i-b t-8 t-s-12">
  120. <span className="m-r-2">开通有效期: 3个月</span>
  121. <span className="m-l-2">使用有效期: 3个月</span>
  122. </div>
  123. </div>
  124. <div>
  125. <div style={{ width: 360 }} className="d-i-b t-1 t-s-12">
  126. <span className="d-i-b m-r-5">OG 20 语法 SC</span>
  127. </div>
  128. <div className="d-i-b t-8 t-s-12">
  129. <span className="m-r-2">开通有效期: 3个月</span>
  130. <span className="m-l-2">使用有效期: 3个月</span>
  131. </div>
  132. </div>
  133. <div>
  134. <div style={{ width: 360 }} className="d-i-b t-1 t-s-12">
  135. <span className="d-i-b m-r-5">OG 20 语法 SC</span>
  136. </div>
  137. <div className="d-i-b t-8 t-s-12">
  138. <span className="m-r-2">开通有效期: 3个月</span>
  139. <span className="m-l-2">使用有效期: 3个月</span>
  140. </div>
  141. </div>
  142. </div>
  143. <div className="service">
  144. <div className="d-i-b t-1 t-s-12">
  145. <span className="d-i-b f-w-b m-r-5">赠送服务</span>
  146. <span className="d-i-b">
  147. 机经券×1+VIP×3 月+模考×1
  148. <Icon className="m-l-5 close" type="exclamation-circle" theme="filled" />
  149. </span>
  150. </div>
  151. </div>
  152. <div className="select">
  153. <div style={{ width: 360 }} className="d-i-b t-1 t-s-12">
  154. <span className="d-i-b f-w-b m-r-5">请选择</span>
  155. </div>
  156. <div className="d-i-b t-1 t-s-12">可至「个人中心-课程」预约辅导时间。</div>
  157. </div>
  158. <div className="select-list m-b-5 l-h-16">
  159. <div>
  160. <div style={{ width: 360 }} className="d-i-b t-1 t-s-12">
  161. <span className="d-i-b m-r-5">
  162. <Radio className="m-r-5" /> OG 20 语法 SC
  163. </span>
  164. </div>
  165. <div className="d-i-b t-8 t-s-12">适合未参加过实战的考生</div>
  166. </div>
  167. <div>
  168. <div style={{ width: 360 }} className="d-i-b t-1 t-s-12">
  169. <span className="d-i-b m-r-5">
  170. <Radio className="m-r-5" /> OG 20 语法 SC
  171. </span>
  172. </div>
  173. <div className="d-i-b t-8 t-s-12">适合未参加过实战的考生</div>
  174. </div>
  175. </div>
  176. </div>
  177. );
  178. }
  179. }