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, formatDate } from '@src/services/Tools';
import { CrowdList, ServiceParamMap } from '../../../Constant';
import Tag from '../Tag';
import Money from '../Money';
import Button from '../Button';

const CrowdMap = getMap(CrowdList, 'value', 'label');
const ServiceParamRelation = getMap(Object.keys(ServiceParamMap).map(key => {
  const list = (ServiceParamMap[key] || []).map((row, index) => {
    row.index = index;
    return row;
  });
  return { map: getMap(list, 'value'), key };
}), 'key', 'map');

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

export class TagBlock extends Component {
  render() {
    const { className = '', theme = 'default', tag, children, onClick } = this.props;
    return (
      <div className={`g-tag-block ${className} ${theme}`} onClick={() => onClick && onClick()}>
        <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;
    const comment = data.comments ? data.comments[0] : {};
    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">{comment.content}</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 CoursePackageBlock extends Component {
  render() {
    const { theme, data } = this.props;
    const comment = data.comments ? data.comments[0] : {};
    return (
      <TagBlock className="course-co-block" theme={theme} tag={data.tag} onClick={() => {
        linkTo(`/product/course/package/${data.id}`);
      }}>
        <div className="title">{data.title}</div>
        <div className="info">
          <div className="teacher">授课老师{(data.courses || []).map(row => {
            return <span>{row.teacher}</span>;
          })}
          </div>
          {CrowdMap[data.crowd] && <Tag size="small">适合{CrowdMap[data.crowd]}</Tag>}
        </div>
        <div className="desc">
          {comment.content}
        </div>
      </TagBlock>
    );
  }
}

export class DataBlock extends Component {
  render() {
    const { data } = this.props;
    const comment = data.comments ? data.comments[0] : {};
    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">{comment.content}</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, data, onBuy, onOpen, onRead } = this.props;
    const now = new Date().getTime();
    let { title, price } = data;
    if (data.productType === 'course') {
      ({ title, price } = (data.course || {}));
    }
    if (data.productType === 'data') {
      ({ title, price } = (data.data || {}));
    }
    if (data.productType === 'service') {
      const p = ServiceParamRelation[data.service][data.param];
      const index = p ? p.index : 0;
      ({ title, price } = (data.serviceInfo || {}).package[index]);
    }
    const expire = data.useEndTime && new Date(data.useEndTime).getTime() < now.getTime();
    return (
      <TopBlock className="buy-block" theme={theme}>
        <div className="block-left">
          <div className="title">
            {expire && < Tag theme="border" radius size="small">
              已到期
            </Tag>}
            {!expire && data.productType !== 'data' && data.isUsed && < Tag theme="border" radius size="small">
              已开通
            </Tag>}
            {!expire && data.productType !== 'data' && !data.isUsed && < Tag theme="border" radius size="small">
              未开通
            </Tag>}
            {title}
          </div>
          {((data.useEndTime || data.endTime) && data.productType === 'service') && <div className="date">有效期:{formatDate(data.useEndTime || data.endTime, 'YYYY-MM-DD')}</div>}
          {data.productType === 'data' && <div className="date">最新更新:{formatDate(data.data.latestTime, 'YYYY-MM-DD HH:mm:ss')}</div>}
          {data.productType === 'course' && !data.isUsed && <div className="date">有效期:{formatDate(data.endTime, 'YYYY-MM-DD')}</div>}
          {data.productType === 'course' && data.isUsed && <div className="date">课程学习时间:{formatDate(data.useStartTime, 'YYYY-MM-DD')}-{formatDate(data.useEndTime, 'YYYY-MM-DD')}</div>}
          {data.service !== 'textbook' && !data.isUsed && <div className="desc">请访问千行 GMAT 官网开通使用</div>}
          {data.service === 'textbook' && expire && <div className="desc">您可至PC端「我的工具」查看往期机经</div>}
        </div>
        <div className="block-right">
          <div className="btn">
            {data.service === 'textbook' && !data.isUsed && <Button radius onClick={() => onOpen && onOpen(data)}>开通</Button>}
            {expire && data.service !== 'vip' && <Button radius onClick={() => onBuy && onBuy(data)}>续费</Button>}
            {data.service === 'vip' && <Button radius onClick={() => onBuy && onBuy(data)}>续费</Button>}
            {data.productType === 'data' && data.data.resource && <Button radius onClick={() => onRead && onRead(data)}>阅读</Button>}
            {!expire && data.service === 'textbook' && <Button radius onClick={() => onRead && onRead(data)}>阅读</Button>}
          </div>
          {data.service === 'vip' && <div className="tip">¥{price}/{title}</div>}
        </div>
      </TopBlock >
    );
  }
}