sourcecode/front/project/h5/routes/product/dataDetail/page.js

import React from 'react';
import './index.less';
import { Tabs } from 'antd-mobile';
import Page from '@src/containers/Page';
import Assets from '@src/components/Assets';
import { formatDate, getMap } from '@src/services/Tools';
import Money from '../../../components/Money';
import Button from '../../../components/Button';
import Tag from '../../../components/Tag';
import { Course } from '../../../stores/course';
import { Order } from '../../../stores/order';
import { DataType } from '../../../../Constant';
import { FAQItem, CommentItem } from '../../../components/Item';
import Icon from '../../../components/Icon';

const DataTypeMap = getMap(DataType, 'value', 'label');

export default class extends Page {
  initState() {
    return { tab: 'content' };
  }

  initData() {
    const { id } = this.state;
    Course.getData(id).then(data => {
      this.setState({ data });
    });
  }

  buy() {
    Order.speedPay({ productType: 'data', productId: this.params.id });
  }

  renderText() {
    const { tab, data } = this.state;
    let content;
    switch (tab) {
      case 'content':
      case 'authorContent':
      case 'methodContent':
        content = <div dangerouslySetInnerHTML={{ __html: data[tab] }} />;
        break;
      case 'faq':
        content = (
          <div>
            {(data.faqs || []).map(row => (
              <FAQItem data={row} />
            ))}
          </div>
        );
        break;
      case 'comment':
        content = (
          <div>
            {(data.comments || []).map(row => (
              <CommentItem data={row} />
            ))}
          </div>
        );
        break;
      default:
        break;
    }
    return content;
  }

  renderView() {
    const { data = {}, tab } = this.state;
    return (
      <div>
        <div className="detail">
          <Assets className="info-img" name="d_b" src={data.cover} />
          <div className="info">
            <div className="title">{data.title}</div>
            <div className="tags">
              {data.isOriginal && <Tag size="small">原创</Tag>}
              {data.isNovice && <Tag size="small">适合新手</Tag>}
            </div>
            <div className="data">页数: {data.page}页</div>
            <div className="data">格式: {DataTypeMap[data.dataType]}</div>
            <div className="data">{formatDate(data.updateTime, 'YYYY-MM-DD HH:mm')} 更新</div>
            <Money value={data.price} size="lager" theme="sell" />
          </div>
        </div>
        <div className="desc" dangerouslySetInnerHTML={{ __html: data.description }} />
        <Tabs
          page={tab}
          tabs={[
            { title: '资料介绍', key: 'content' },
            { title: '作者介绍', key: 'authorContent' },
            { title: '获取方式', key: 'methodContent' },
            { title: 'FAQs', key: 'faq' },
            { title: '用户评价', key: 'comment' },
          ]}
          onChange={value => {
            this.setState({ tab: value.key });
          }}
        />
        {this.renderText()}
        <div className="fixed">
          <div className="action">
            <div className="minus">
              <Icon type="minus" />
            </div>
            <div className="num">10</div>
            <div className="add">
              <Icon type="plus" />
            </div>
          </div>
          <div className="fee">
            总额: <Money value={data.price} size="lager" />
          </div>
          <Button
            width={110}
            className="f-r"
            radius
            onClick={() => {
              this.buy();
            }}
          >
            立即购买
          </Button>
        </div>
      </div>
    );
  }
}