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 { DataType } from '../../../../Constant';

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() {

  }

  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: 'author_content' },
            { title: '获取方式', key: 'method_content' },
            { title: 'FAQs', key: 'faq' },
            { title: '用户评价', key: 'comment' },
          ]}
          onChange={(value) => {
            this.setState({ tab: value.key });
          }}
        />
        <div dangerouslySetInnerHTML={{ __html: data[tab] }} />
        <div className="fixed">
          <div className="fee">
            总额: <Money value={data.price} size="lager" />
          </div>
          <Button width={110} className="f-r" radius onClick={() => {
            this.buy();
          }}>
            立即购买
          </Button>
        </div>
      </div>
    );
  }
}