sourcecode/front/project/www/routes/course/vs/page.js

import React from 'react';
import './index.less';
import { Icon } from 'antd';
import Page from '@src/containers/Page';
import Assets from '@src/components/Assets';
import Footer from '../../../components/Footer';
import { Contact } from '../../../components/Other';
import Tabs from '../../../components/Tabs';
import Button from '../../../components/Button';
import { Main } from '../../../stores/main';
import { Order } from '../../../stores/order';
import { User } from '../../../stores/user';
import { Course } from '../../../stores/course';
import { CourseVsType } from '../../../../Constant';

export default class extends Page {
  initState() {
    return {
      info: '1',
      number: 0,
    };
  }

  init() {
    this.courseVsMap = {};
    this.faqMap = {};
    this.faqs = [];
    this.commentMap = {};
    this.comments = [];
    this.promote = [];
    this.teacherMap = {};
    Main.getPromote()
      .then(result => {
        this.promote = result.vs_list || [];
        this.setState({ promote: result });
      });
    Main.getBase()
      .then(result => {
        this.setState({ base: result });
      });
  }

  initData() {
    Course.allVs()
      .then(result => {
        result.forEach((row) => {
          this.courseVsMap[row.vsType] = row;
        });
        this.onChangeItem(CourseVsType[0].value);
      });
  }

  onChangeTab(tab) {
    this.setState({ tab });
  }

  onChangeItem(key) {
    const item = this.courseVsMap[key];
    if (!this.faqs) {
      Main.listFaq({ page: 1, size: 100, channel: 'course-vs_index' }).then(result => {
        this.faqs = result.list;
        this.setState({ faqs: result.list });
      });
    }
    if (!this.commentMap[key]) {
      Main.listComment({ page: 1, size: 100, channel: 'course-vs', position: item.id }).then(result => {
        this.commentMap[key] = result.list;
        this.setState({ comments: result.list });
      });
    }
    if (!this.teacherMap[key]) {
      Course.allTeacher(item.id).then(result => {
        this.teacherMap[key] = result.list;
        this.setState({ teachers: result.list });
      });
    }
    this.setState({ key, data: item, faqs: this.faqs, comments: this.commentMap[key], teachers: this.teacherMap[key] });
    this.changeNumber(item.minNumber || 1);
  }

  changeNumber(number) {
    const { data } = this.state;
    let price = data.price * number;
    let max = 0;
    let maxIndex = -1;
    this.promote.forEach((row, i) => {
      if (row.number <= number) {
        if (row.number > max) {
          max = number;
          maxIndex = i;
        }
      }
    });
    if (maxIndex >= 0) {
      price *= this.promote[maxIndex].percent / 100;
    }
    this.setState({ number, price });
  }

  buy() {
    const { data } = this.props;
    Order.speedPay({ productType: 'course', productId: data.id })
      .then(result => {
        User.needPay(result)
          .then(() => {
            linkTo('/my/course');
          });
      });
  }

  add() {
    const { data } = this.props;
    Order.addCheckout({ productType: 'course', productId: data.id })
      .then(() => {
        this.setState({ add: true });
      });
  }

  renderView() {
    const { number } = this.props.order;
    const { promote = {}, base = {} } = this.state;
    return (
      <div>
        <div className="top content">
          <Tabs type="text" active={'vs'} tabs={[{ title: '在线课程', key: 'online', path: '/course/online' }, { title: '1v1私教', key: 'vs', path: '/course/vs' }]} />
          <div className="f-r">
            <span className="t-2 m-r-1">{(promote.vs || {}).text ? `优惠活动：${promote.vs.text}` : ''}</span>
            <Assets name="cart" onClick={() => linkTo('/cart')} />
            <span className="t-2">（ {number || 0} ）</span>
          </div>
        </div>
        {this.renderDetail()}
        <Contact data={base.contact} />
        <Footer />
      </div>
    );
  }

  renderDetail() {
    const { info, key, data, number, price } = this.state;
    return [
      <div className="center">
        <div className="content">
          <Assets className="m-b-2" width={1140} name="s" />
          <div className="item-list">
            {CourseVsType.map(t => {
              const course = this.courseVsMap[t.value] || {};
              return <div className={`item ${key === t.value ? 'active' : ''}`} onClick={() => this.onChangeItem(t.value)}>
                <Assets name={t.icon} />
                <div className="t-1 t-s-20 f-w-b">{course.title}</div>
                <div className="t-2">{course.comment}</div>
              </div>;
            })}
          </div>
          <div className="item-detail">
            <div className="left">
              <Assets name={data.cover} />
            </div>
            <div className="right">
              <div className="t-1 t-s-16 m-b-2" dangerouslySetInnerHTML={{ __html: data.serviceContent }} />
              <div className="m-b-5">
                <div style={{ width: 120 }} className="d-i-b t-2">
                  适合人群
                </div>
                <div className="d-i-b t-1" dangerouslySetInnerHTML={{ __html: data.crowdContent }} />
              </div>
              <div className="m-b-5">
                <div style={{ width: 120 }} className="d-i-b t-2">
                  课时数
                </div>
                <div className="d-i-b t-1" dangerouslySetInnerHTML={{ __html: data.courseNoContent }} />
              </div>
              <div className="m-b-5">
                <div style={{ width: 120 }} className="d-i-b t-2">
                  授课流程
                </div>
                <div className="d-i-b t-1" dangerouslySetInnerHTML={{ __html: data.processContent }} />
              </div>
              <div className="m-b-5">
                <div style={{ width: 120 }} className="d-i-b t-2">
                  课程有效期
                </div>
                <div className="d-i-b t-1">{data.expirePreDays}天/10课时</div>
              </div>
              <div className="m-b-5 input">
                <div style={{ width: 120 }} className="d-i-b t-2">
                  购买课时
                </div>
                <div className="d-i-b t-1">
                  <input value={number} style={{ width: 32 }} className="m-l-5 t-c" />
                  <Icon className="up" type="caret-up" onClick={() => number < data.maxNumber && this.setState({ number: number + 1 })} />
                  <Icon className="down" type="caret-down" onClick={() => number !== 1 && number > data.minNumber && this.setState({ number: number - 1 })} />
                </div>
              </div>
              <div className="m-b-5">
                <div style={{ width: 120 }} className="d-i-b t-2">
                  课程总价
                </div>
                <div className="d-i-b t-7 t-s-20 f-w-b"> ¥ {price}</div>
              </div>
              <div className="action">
                <Button className="m-r-1" radius size="lager" onClick={() => this.buy()}>
                  立即购买
                </Button>
                <Button theme="default" radius size="lager" onClick={() => this.add()}>
                  <Assets name="add" />
                </Button>
              </div>
            </div>
          </div>
        </div>
      </div>,
      <div className="bottom">
        <div className="content">
          <Tabs
            type="full"
            border
            active={info}
            tabs={[
              { title: '老师资料', key: '1' },
              { title: '咨询方式', key: '2' },
              { title: 'FAQs', key: '3' },
              { title: '学员评价', key: '4' },
            ]}
          />
          {this[`renderTab${info}`]()}
        </div>
      </div>,
    ];
  }

  renderTab1() {
    return <div />;
  }

  renderTab2() {
    return <div />;
  }

  renderTab3() {
    return <div />;
  }

  renderTab4() {
    return <div />;
  }
}