react-app-shell/activity/src/views/rabbit/payResult/index.js

react打包脚本和example, 这里的版本请忽略

// 功能方法>>>引用:
import React, { Component } from 'react';
import classNames from 'classnames';

// 公用方法 配置项 接口 枚举>>>引用:
import { appConfig } from '../../../config';
import { tools, myToast } from '../../../utils';
import { rabbitPageService } from '../../../service';
import { DocumentTitle } from '../../../components';

// 样式 静态资源>>>引用:
import styles from './payResult.less';

import productionQrcode from '../../../public/images/rabbit/pruduction-fllow-qrcode.jpg';
import stagingQrcode from '../../../public/images/rabbit/staging-fllow-qrcode.jpg';

const appEnv = appConfig.env === 'production' ? productionQrcode : stagingQrcode;

/**
 * 魔小兔-购买成功结果页
 */
export default class PayResult extends Component {
  constructor(props) {
    super(props);
    this.state = {
      productId: tools.getQueryString('productId'), // 从url中获取productId, 初始化数据使用
      orderNo: tools.getQueryString('orderNo'), // 从url中获取orderNo, 初始化数据使用
      campId: tools.getQueryString('campId'), // 从url中获取campId, 初始化数据使用
      courseName: '', // 课程名称
      courseTime: '', // 课程时间 包括共几天在内 后台一起返回
      price: 0 // 支付金额(分)
    };
    // 初始化数据
    this.getRabbitOrderPayResult();
  }

  /**
   * 初始化购买成功结果页数据
   */
  getRabbitOrderPayResult = () => {
    const { productId, orderNo, campId } = this.state;
    rabbitPageService
      .getRabbitOrderPayResult(productId, orderNo, campId)
      .then((res) => {
        this.setState({
          courseName: res.courseName,
          courseTime: res.courseTime,
          price: res.price
        });
      })
      .catch(({ msg }) => {
        myToast.warning(msg);
      });
  };

  /**
   * 页面头部render
   */
  renderSuccessfulHeader = () => {
    return (
      <div className={styles.successHeader}>
        <div className={styles.icon}></div>
        <div className={styles.tips}>
          <span>恭喜您</span>
          <span>您已购买成功</span>
        </div>
        <div className={styles.lineCont}>
          <div className={styles.line}></div>
        </div>
      </div>
    );
  };

  /**
   * 页面内容区render
   */
  renderSuccessfulContent = () => {
    const { courseName, courseTime, price } = this.state;
    return (
      <div className={styles.content}>
        <div className={styles.pack}>
          <div>
            <span>课程名称：</span>
            <span>{courseName}</span>
          </div>
        </div>
        <div className={styles.pack}>
          <div>
            <span>课程时间：</span>
            <span>{courseTime}</span>
          </div>
        </div>
        <div className={styles.pack}>
          <div>
            <span>支付金额：</span>
            <span>{tools.convertPenny(price)}元</span>
          </div>
        </div>
        <div className={styles.pack}>
          <div>
            <span>上课方式：</span>
            <span>“魔小兔英语”小程序</span>
          </div>
        </div>
      </div>
    );
  };

  /**
   * 页面二维码render
   */
  renderResultQrcode = () => {
    return (
      <div className={classNames(styles.qrcode)}>
        <span className={styles.title}>公众号二维码</span>
        <img className={styles.img} src={appEnv} />
        <p className={styles.tips}>请扫描上方二维码添加“魔小兔英语”公众号，以便正常上课哦</p>
      </div>
    );
  };

  render() {
    return (
      <div className={styles.payResult}>
        {this.renderSuccessfulHeader()}
        {this.renderSuccessfulContent()}
        {this.renderResultQrcode()}
        <DocumentTitle title="魔小兔英语" />
      </div>
    );
  }
}