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 { asyncSMessage } from '@src/services/AsyncTools';
import CheckboxItem from '../../../components/CheckboxItem';
import Button from '../../../components/Button';
import Modal from '../../../components/Modal';
import UserTable from '../../../components/UserTable';
import { Order } from '../../../stores/order';
import { Course } from '../../../stores/course';
import { User } from '../../../stores/user';
import { getMap } from '../../../../../src/services/Tools';
import { CourseVsType } from '../../../../Constant';

const CourseVsTypeMap = getMap(CourseVsType, 'value', 'tips');

export default class extends Page {
  initState() {
    return { courses: [] };
  }

  init() {
    Course.allVs()
      .then(result => {
        // 赠送选择选择
        this.setState({ courses: result.filter(row => ['novice', 'coach'].indexOf(row.vsType) >= 0) });
      });
  }

  initData() {
    Order.getOrder(34)
      .then((order) => {
        User.needPay(order);
      });
    Order.allCheckout()
      .then(result => {
        User.formatOrder(result);
        this.setState({ order: result, list: result.checkouts });
      });
  }

  onAll(checked) {
    const selectList = [];
    if (checked) {
      const { list = [] } = this.state;
      list.forEach(item => {
        if (selectList.indexOf(item.key) >= 0) return;
        selectList.push(item.key);
      });
    }
    this.setState({ selectList, allChecked: checked });
  }

  onSelect(key, checked) {
    const { selectList = [] } = this.state;
    if (checked) {
      selectList.push(key);
    } else {
      selectList.splice(selectList.indexOf(key), 1);
    }
    this.setState({ selectList });
  }

  onDelete(list) {
    Promise.all(list.map(row => {
      return Order.removeCheckout(row);
    }))
      .then(() => {
        this.refresh();
      });
  }

  onChangeNumber(id, number) {
    Order.changeCheckout(id, number)
      .then(() => {
        this.refresh();
      });
  }

  pay() {
    const { courseId, list, order } = this.state;
    if (list.length === 0) return;
    if (order.gift && order.gift.filter(row => row.key === 'vs').length > 0 && !courseId) {
      // 请选择课程
      asyncSMessage('请选择赠送的课程', 'warn');
      return;
    }
    Order.confirmPay(courseId)
      .then(result => {
        return User.needPay(result)
          .then(() => {
            linkTo(`/order/${result.id}`);
          })
          .catch(() => {
            this.refresh();
          });
      });
  }

  renderView() {
    const { courses = [], order = {}, list = [], allChecked, selectList = [], courseId } = 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="list content">
          {(list || []).map(item => {
            return [
              item.productType === 'course_package' && <div className="content">
                <div className="m-b-1 t-8">您看中的课程已构成套餐，结算有优惠</div>
              </div>,
              <OrderItem
                data={item}
                checked={selectList.indexOf(item.id) >= 0}
                onDelete={() => this.onDelete([item.id])}
                onCheck={(checked) => this.onSelect(item.id, checked)}
                onChangeNumber={(number) => this.onChangeNumber(item.id, number)}
              />,
            ];
          })}
        </div>
        <div className="gift-list content">
          {(order.gift || []).map(item => {
            return <GiftItem
              data={item}
              courses={courses}
              courseId={courseId}
              onSelectCourse={(id) => item.key === 'vs' && this.setState({ courseId: id })}
            />;
          })}
        </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={allChecked} onClick={() => this.onAll(!allChecked)} />
              全选
            </div>
            <div style={{ marginRight: 50 }} className="d-i-b m-t-1">
              <Button size="small" radius disabled={selectList.length === 0} onClick={() => this.onDelete(selectList)}>
                删除
              </Button>
            </div>
            {order.promote && order.promote.length > 0 && [
              <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">
                {order.promote.map(row => {
                  return <div>{row.message}</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"> ¥ {order.money || 0}</span>
                </div>
                <div className="t-1">
                  原价<span className="m-l-5 t-8 t-d-l-t">¥ {order.originMoney || 0}</span>
                  <span hidden={!((order.originMoney || 0) - (order.money || 0))} className="m-l-5  t-8">（优惠活动-¥{(order.originMoney || 0) - (order.money || 0)}）</span>
                </div>
              </div>
              <Button className="submit" onClick={() => this.pay()}>立即付款</Button>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

class GiftItem extends Component {
  render() {
    const { data } = this.props;
    return (
      <div className="gift-item">
        {this.renderInfo()}
        {data.key === 'vs' && this.renderVs()}
      </div>
    );
  }

  renderInfo() {
    const { data } = this.props;
    let message = '';
    if (data.money) {
      message = `实付金额满${data.money}元赠送`;
    } else if (data.from === 'vsNumber') {
      message = `1VS1课程满${data.number}节赠送`;
    }
    return (
      <div className="gift-item-info">
        <Assets name="gift2" className="gift" width={20} height={20} />
        <div style={{ width: 350 }} className="d-i-b t-1 t-s-16">
          {data.message}
        </div>
        <div style={{ width: 400 }} className="d-i-b t-8 t-s-12">
          {message}
        </div>
      </div>
    );
  }

  renderVs() {
    const { courses, courseId, onSelectCourse } = this.props;
    return (
      <div className="gift-item-detail l-h-20">
        <div className="select">
          <div style={{ width: 350 }} 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">
          {courses.map(course => {
            return <div>
              <div style={{ width: 350 }} className="d-i-b t-1 t-s-12">
                <span className="d-i-b m-r-5">
                  <Radio className="m-r-5" checked={courseId === course.id} onChange={() => onSelectCourse(course.id)} /> {course.title}
                </span>
              </div>
              <div className="d-i-b t-8 t-s-12">{CourseVsTypeMap[course.vsType]}</div>
            </div>;
          })}
        </div>
      </div>
    );
  }
}

class OrderItem extends Component {
  constructor(props) {
    super(props);
    this.state = { open: false, showList: false };
    this.columns = [{
      key: 'label',
      title: '服务',
    }, {
      key: 'expireDays',
      title: '开通有效期',
      render: (text, checkout) => {
        return checkout.expireDays ? `${checkout.expireDays}天` : '付款后立即生效';
      },
    }, {
      key: 'useExpireDays',
      title: '使用有效期',
      render: (text, checkout) => {
        return checkout.useExpireDays ? `${checkout.useExpireDays}天` : '永久';
      },
    }];
  }

  render() {
    const { data } = this.props;
    const { showList } = this.state;
    return (
      <div className="order-item">
        {this.renderInfo()}
        {(data.children || data.gift) && this.renderDetail()}

        <Modal
          show={showList}
          maskClosable
          close={false}
          body={false}
          width={630}
          onClose={() => this.setState({ showList: false })}
        >
          <UserTable
            size="small"
            theme="top"
            columns={this.columns}
            data={data.gift}
          />
        </Modal>
      </div>
    );
  }

  renderInfo() {
    const { data, onCheck, onDelete, onChangeNumber, checked } = this.props;
    const checkout = data;
    return (
      <div className="order-item-info">
        <CheckboxItem theme="white" className="select" checked={checked} onClick={() => onCheck(!checked)} />
        <Icon className="close" type="close-circle" theme="filled" onClick={() => onDelete()} />
        <div style={{ width: 350 }} className="d-i-b t-1 t-s-16">
          {data.title}
        </div>
        <div style={{ width: 430 }} className="d-i-b t-8 t-s-12">
          <span className="m-r-2">开通有效期: {checkout.expireDays ? `${checkout.expireDays}天` : '付款后立即生效'}</span>
          <span className="m-l-2">使用有效期: {checkout.useExpireDays ? `${checkout.useExpireDays}天` : '永久'}</span>
        </div>
        <div style={{ width: 120 }} className="d-i-b t-8 t-s-12 p-r">
          {data.number > 0 && ['数量',
            <input value={data.number} style={{ width: 32 }} className="m-l-5 t-c" />,
            <Icon className="up" type="caret-up" onClick={() => data.number < data.maxNumber && onChangeNumber(data.number + 1)} />,
            <Icon className="down" type="caret-down" onClick={() => data.number > 1 && data.number > data.minNumber && onChangeNumber(data.number - 1)} />]}
        </div>
        <div className="d-i-b t-7 t-s-16"> ¥ {data.money}</div>
      </div>
    );
  }

  renderDetail() {
    const { data = {} } = this.props;
    const { children = [], gift } = data;
    const { open } = this.state;
    return (
      <div className="order-item-detail l-h-20">
        <div hidden={!children || children.length === 0} 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">
              {(children || []).map(checkout => checkout.title).join(' + ')}
            </span>
          </div>
          <div className="d-i-b t-1 t-s-12 t-d-l-t"> ¥ {data.originMoney}</div>
        </div>
        <div hidden={!open} className="contain-list m-b-5 l-h-16">
          {(children || []).map(checkout => {
            return <div>
              <div style={{ width: 350 }} className="d-i-b t-1 t-s-12">
                <span className="d-i-b m-r-5">{checkout.title}</span>
              </div>
              <div className="d-i-b t-8 t-s-12">
                <span className="m-r-2">开通有效期: {checkout.expireDays ? `${checkout.expireDays}天` : '付款后立即生效'}</span>
                <span className="m-l-2">使用有效期: {checkout.useExpireDays ? `${checkout.useExpireDays}天` : '永久'}</span>
              </div>
            </div>;
          })}
        </div>
        {gift && <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">
              {gift.map(row => {
                return `${row.label}x${row.param ? row.param.label : row.number}`;
              }).join(' ')}
              <Icon className="m-l-5 close" type="exclamation-circle" theme="filled" onClick={() => {
                this.setState({ showList: true });
              }} />
            </span>
          </div>
        </div>}
      </div>
    );
  }
}