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

import React from 'react';
import './index.less';
import Page from '@src/containers/Page';
import Money from '../../../components/Money';
import Button from '../../../components/Button';
import { SpecialRadioGroup } from '../../../components/Radio';
import { Main } from '../../../stores/main';
import { Order } from '../../../stores/order';
import { ServiceParamMap } from '../../../../Constant';

export default class extends Page {
  initState() {
    return {
      index: 0,
    };
  }

  initData() {
    const { service } = this.params;
    Main.getService(service)
      .then(result => {
        result.package = (result.package || []).map((row, index) => {
          row.label = `¥${row.price}/${row.title}`;
          row.value = index;
          return row;
        });
        this.setState({ data: result });
      });
  }

  buy() {
    const { service } = this.params;
    const { index } = this.state;
    const param = ServiceParamMap[service] ? ServiceParamMap[service][index].value : '';
    Order.speedPay({ productType: 'service', service, param });
  }

  //   expire_info: '',
  renderView() {
    const { data = {}, index } = this.state;
    data.package = data.package || [];
    const item = data.package[index] || {};
    return (
      <div>
        <div className="b-g" style={{ backgroundImage: `url(${data.image})` }}>
          <div className="title">{item.title}</div>
        </div>
        <div className="detail">
          {data.package.length > 1 && <div className="title">可选套餐</div>}

          {data.package.length > 1 && (
            <SpecialRadioGroup
              theme="theme"
              list={data.package}
              value={index}
              onChange={value => this.setState({ index: value })}
            />
          )}
          {data.package.length > 1 && <div className="division" />}
          <div className="title">服务介绍</div>
          <h3>服务</h3>
          <p>
            {item.description} {item.expire_info}
          </p>
          <h3>退款政策</h3>
          <p>{item.refund_policy}</p>
          <h3>版权说明</h3>
          <p>{item.copyright_nnotes}</p>
        </div>
        <div className="fixed">
          <div className="fee">
            总额: <Money value={item.price} size="lager" />
          </div>
          <Button
            width={110}
            className="f-r"
            radius
            onClick={() => {
              this.buy();
            }}
          >
            立即购买
          </Button>
        </div>
      </div>
    );
  }
}