sourcecode/front/project/h5/components/Block/index.js

import React, { Component } from 'react';
import './index.less';
import { Icon } from 'antd-mobile';
import Assets from '@src/components/Assets';
import { getMap } from '@src/services/Tools';
import { CrowdList } from '../../../Constant';
import Tag from '../Tag';
import Money from '../Money';
import Button from '../Button';

const CrowdMap = getMap(CrowdList, 'value', 'label');

export class Block extends Component {
  render() {
    const { className = '', children } = this.props;
    return <div className={`g-block ${className}`}>{children}</div>;
  }
}
export class TopBlock extends Component {
  render() {
    const { className = '', theme = 'default', children } = this.props;
    return <div className={`g-top-block ${className} ${theme}`}>{children}</div>;
  }
}

export class TagBlock extends Component {
  render() {
    const { className = '', theme = 'default', tag, children } = this.props;
    return (
      <div className={`g-tag-block ${className} ${theme}`}>
        <div className="g-tag-block-tag">{tag}</div>
        {children}
      </div>
    );
  }
}

export class LinkBlock extends Component {
  render() {
    const { className = '', theme = 'default', title, sub, onClick } = this.props;
    return (
      <div className={`g-link-block ${className} ${theme}`} onClick={() => onClick && onClick()}>
        <div className="g-link-block-title">{title}</div>
        <div className="g-link-block-sub">{sub}</div>
        <div className="g-link-block-icon">
          <Icon type="right" size="xxs" color="#fff" />
        </div>
      </div>
    );
  }
}

export class CourseBlock extends Component {
  render() {
    const { data } = this.props;
    return (
      <Block className="course-block" onClick={() => {
        linkTo(`/product/course/detail/${data.id}`);
      }}>
        <div className="title">{data.title}</div>
        <div className="block-body">
          <Assets name="c_b" src={data.cover} />
          <div className="info">
            <div className="teacher">
              授课老师<span>{data.teacher}</span>
            </div>
            <div className="desc">
              {data.comment}
            </div>
            <div className="division" />
            <div className="data">
              {CrowdMap[data.crowd] && <Tag size="small">适合{CrowdMap[data.crowd]}</Tag>}
              <div className="result">
                优质回答<span>{data.askNumber}</span>
              </div>
            </div>
          </div>
        </div>
      </Block>
    );
  }
}

export class CourseCoBlock extends Component {
  render() {
    const { theme, data } = this.props;
    return (
      <TagBlock className="course-co-block" theme={theme} tag={''} onClick={() => {
        linkTo(`/product/course/detail/${data.id}`);
      }}>
        <div className="title">{data.title}</div>
        <div className="info">
          <div className="teacher">
            授课老师<span>{data.teacher}</span>
          </div>
          {CrowdMap[data.crowd] && <Tag size="small">适合{CrowdMap[data.crowd]}</Tag>}
        </div>
        <div className="desc">
          {data.comment}
        </div>
      </TagBlock>
    );
  }
}

export class DataBlock extends Component {
  render() {
    const { data } = this.props;
    return (
      <Block className="data-block" onClick={() => {
        linkTo(`/product/data/detail/${data.id}`);
      }}>
        <Assets name="d_b" src={data.cover} />
        <div className="info">
          <div className="title">{data.title}</div>
          <div className="desc">{data.comment}</div>
          <div className="division" />
          <div className="data">
            <div className="people">{data.saleNumber}人已购</div>
            <Money value={data.price} />
          </div>
        </div>
      </Block>
    );
  }
}

export class BuyBlock extends Component {
  render() {
    const { theme } = this.props;
    return (
      <TopBlock className="buy-block" theme={theme}>
        <div className="block-left">
          <div className="title">
            <Tag theme="border" radius size="small">
              已到期
            </Tag>
            VIP会员
          </div>
          <div className="date">有效期:2019-11-20</div>
          <div className="desc">请访问千行 GMAT 官网开通使用</div>
        </div>
        <div className="block-right">
          <div className="btn">
            <Button radius>开通</Button>
          </div>
          <div className="tip">¥888/ 3个月</div>
        </div>
      </TopBlock>
    );
  }
}