import React, { Component } from 'react'; import './index.less'; import { Icon, Radio } from 'antd'; import Page from '@src/containers/Page'; import CheckboxItem from '../../../components/CheckboxItem'; import Button from '../../../components/Button'; export default class extends Page { renderView() { const { _list = [{}, {}, {}] } = this.state; return ( <div style={{ paddingTop: 50 }}> <div className="content"> <div className="t-1 m-b-2 f-w-b t-s-24">购物车</div> </div> <div className="content"> <div className="m-b-1 t-8">您看中的课程已构成套餐,结算有优惠</div> </div> <div className="list content"> {_list.map(item => { return <OrderItem data={item} />; })} </div> <div className="footer"> <div className="content"> <div className="d-i-b m-t-1 m-r-2"> <CheckboxItem className="v-a-m m-r-5" theme="white" checked /> 全选 </div> <div style={{ marginRight: 50 }} className="d-i-b m-t-1"> <Button size="small" radius disabled={false}> 删除 </Button> </div> <div style={{ marginTop: 15 }} className="d-i-b t-9 t-s-12 m-r-5"> 优惠活动: </div> <div style={{ marginTop: 15 }} className="d-i-b t-s-12"> <div>单项课程 2门9折,3门88折,4门及以上85折。</div> <div>1VS1私教 满30课时享95折优惠。</div> </div> <div className="f-r"> <div className="d-i-b m-r-1 m-t-1"> <div className="t-1 t-s-16 f-w-b"> 实付<span className="m-l-5 t-7 t-s-20"> ¥ 15000</span> </div> <div className="t-1"> 原价<span className="m-l-5 t-8 t-d-l-t">¥15200</span> <span className="m-l-5 t-8">(优惠活动-¥200)</span> </div> </div> <Button className="submit">立即付款</Button> </div> </div> </div> </div> ); } } class OrderItem extends Component { render() { return ( <div className="order-item"> {this.renderInfo()} {this.renderDetail()} </div> ); } renderInfo() { return ( <div className="order-item-info"> <CheckboxItem theme="white" className="select" /> <Icon className="close" type="close-circle" theme="filled" /> <div style={{ width: 360 }} className="d-i-b t-1 t-s-16"> OG 20 套餐 </div> <div style={{ width: 400 }} className="d-i-b t-8 t-s-12"> 实付金额满20000元赠送 </div> <div style={{ width: 120 }} className="d-i-b t-8 t-s-12 p-r"> 数量 <input style={{ width: 32 }} className="m-l-5 t-c" /> <Icon className="up" type="caret-up" /> <Icon className="down" type="caret-down" /> </div> <div className="d-i-b t-7 t-s-16"> ¥ 15000</div> </div> ); } renderDetail() { return ( <div className="order-item-detail l-h-20"> <div className="contain"> <div style={{ width: 880 }} className="d-i-b t-1 t-s-12"> <span className="d-i-b f-w-b m-r-5"> 包含 <Icon className="t-10 c-p" type="caret-up" /> <Icon className="t-10 c-p" type="caret-down" /> </span> <span style={{ width: 300 }} className="d-i-b nowrap"> OG 20 语法 SC +OG 20 语法 SC +OG 20 语法 SC +OG 20 语法 SC + </span> </div> <div className="d-i-b t-1 t-s-12 t-d-l-t"> ¥ 123022</div> </div> <div className="contain-list m-b-5 l-h-16"> <div> <div style={{ width: 360 }} className="d-i-b t-1 t-s-12"> <span className="d-i-b m-r-5">OG 20 语法 SC</span> </div> <div className="d-i-b t-8 t-s-12"> <span className="m-r-2">开通有效期: 3个月</span> <span className="m-l-2">使用有效期: 3个月</span> </div> </div> <div> <div style={{ width: 360 }} className="d-i-b t-1 t-s-12"> <span className="d-i-b m-r-5">OG 20 语法 SC</span> </div> <div className="d-i-b t-8 t-s-12"> <span className="m-r-2">开通有效期: 3个月</span> <span className="m-l-2">使用有效期: 3个月</span> </div> </div> <div> <div style={{ width: 360 }} className="d-i-b t-1 t-s-12"> <span className="d-i-b m-r-5">OG 20 语法 SC</span> </div> <div className="d-i-b t-8 t-s-12"> <span className="m-r-2">开通有效期: 3个月</span> <span className="m-l-2">使用有效期: 3个月</span> </div> </div> </div> <div className="service"> <div className="d-i-b t-1 t-s-12"> <span className="d-i-b f-w-b m-r-5">赠送服务</span> <span className="d-i-b"> 机经券×1+VIP×3 月+模考×1 <Icon className="m-l-5 close" type="exclamation-circle" theme="filled" /> </span> </div> </div> <div className="select"> <div style={{ width: 360 }} className="d-i-b t-1 t-s-12"> <span className="d-i-b f-w-b m-r-5">请选择</span> </div> <div className="d-i-b t-1 t-s-12">可至「个人中心-课程」预约辅导时间。</div> </div> <div className="select-list m-b-5 l-h-16"> <div> <div style={{ width: 360 }} className="d-i-b t-1 t-s-12"> <span className="d-i-b m-r-5"> <Radio className="m-r-5" /> OG 20 语法 SC </span> </div> <div className="d-i-b t-8 t-s-12">适合未参加过实战的考生</div> </div> <div> <div style={{ width: 360 }} className="d-i-b t-1 t-s-12"> <span className="d-i-b m-r-5"> <Radio className="m-r-5" /> OG 20 语法 SC </span> </div> <div className="d-i-b t-8 t-s-12">适合未参加过实战的考生</div> </div> </div> </div> ); } }