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';

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 });
  }

  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] }} />
        <FAQItem data={{ title: '123', desc: '12312312321321' }} />
        <FAQItem data={{ title: '123', desc: '12312312321321' }} />
        <CommentItem data={{ name: '123', desc: '12312312321', date: '1231231231' }} />
        <CommentItem data={{ name: '123', desc: '12312312321', date: '1231231231' }} />
        <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>
    );
  }
}