sourcecode/front/project/www/routes/page/cart/page.js

import React, { Component } from 'react';
import './index.less';
import { Icon, Radio } from 'antd';
import Assets from '@src/components/Assets';
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="gift-list content">
          {_list.map(item => {
            return <GiftItem 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 GiftItem extends Component {
  render() {
    return (
      <div className="gift-item">
        {this.renderInfo()}
        {this.renderDetail()}
      </div>
    );
  }

  renderInfo() {
    return (
      <div className="gift-item-info">
        <Assets name="gift2" className="gift" width={20} height={20} />
        <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>
    );
  }

  renderDetail() {
    return (
      <div className="gift-item-detail l-h-20">
        <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>
    );
  }
}

class OrderItem extends Component {
  constructor(props) {
    super(props);
    this.state = { open: false };
  }

  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() {
    const { open } = this.state;
    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
                hidden={!open}
                className="t-10 c-p"
                type="caret-up"
                onClick={() => this.setState({ open: !open })}
              />
              <Icon
                hidden={open}
                className="t-10 c-p"
                type="caret-down"
                onClick={() => this.setState({ open: !open })}
              />
            </span>
            <span hidden={open} 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 hidden={!open} 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>
    );
  }
}