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 Money from '../../../components/Money';
import Button from '../../../components/Button';
import Tag from '../../../components/Tag';
import { Course } from '../../../stores/course';

export default class extends Page {
  initData() {
    const { id } = this.state;
    Course.getData(id)
      .then((data) => {
        this.setState({ data });
      });
  }

  renderView() {
    return (
      <div>
        <div className="detail">
          <Assets className="info-img" name="d_b" />
          <div className="info">
            <div className="title">OG16/17/18/19语法千行OG16/ 17/18/19语法千行</div>
            <div className="tags">
              <Tag size="small">原创</Tag>
              <Tag size="small">适合新手</Tag>
            </div>
            <div className="data">页数: 30页</div>
            <div className="data">格式: PDF</div>
            <div className="data">2019-06-20 10:21 更新</div>
            <Money value="200" size="lager" theme="sell" />
          </div>
        </div>
        <div className="desc">
          对“忽略有效考点”的解析进行补充，同时讲解OG不够精准的解析，帮助考生明确重点、避开误区，节省大量的时间和精力，刷OG必备。
        </div>
        <Tabs
          tabs={[
            { title: '资料介绍', key: 'd' },
            { title: '作者介绍', key: 'a' },
            { title: '获取方式', key: 'h' },
            { title: 'FAQs', key: 'f' },
            { title: '用户评价', key: 'u' },
          ]}
        />
        <div className="fixed">
          <div className="fee">
            总额: <Money value="1200" size="lager" />
          </div>
          <Button width={110} className="f-r" radius>
            立即购买
          </Button>
        </div>
      </div>
    );
  }
}