react-app-shell/activity/src/views/rabbit/component/push-btn.js

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

// 功能方法>>>引用:
import React, { Component } from 'react';
import { inject, observer } from 'mobx-react';

// 公用方法 配置项 接口 枚举>>>引用:
import { message, myToast, monitor } from '../../../utils';
import { PROCESS_STATUS, CAMP_TYPE, RABBIT_BUY_STATUS } from '../../../constants';
import { appConfig } from '../../../config';
import { rabbitPageService } from '../../../service';
import { RabbitPayBtn } from '../../component';

// 组件 引用:
import { ModalLogin } from '../../../components';

// 样式>>>引用:
import styles from '../rabbit.less';

// 跳转页面常量赋值
const urlByAgain = `${appConfig.basename}/rabbit/again`;

/**
 * 魔小兔-按钮-支付样式组件
 */
@inject(({ rabbitStore }) => {
  return {
    // 数据
    id: rabbitStore.state.id, // id
    productId: rabbitStore.state.productId,
    processStatus: rabbitStore.state.processStatus, // 活动状态
    startTimeMonth: rabbitStore.state.startTimeMonth, // 按钮的开始时间(月)
    startTimeDay: rabbitStore.state.startTimeDay, // 按钮的开始时间(日)
    campType: rabbitStore.state.campType, // 按钮文案
    balancePeople: rabbitStore.state.balancePeople, // 剩余人数
    // 函数
    initData: rabbitStore.state.initData // 初始化页面数据方法
  };
})
@observer
export default class PushBtn extends Component {
  constructor(props) {
    super(props);
    this.refByPayBtn = React.createRef();
    this.state = {
      modalKey: ''
    };
  }

  /**
   * 前置校验
   * 1. 校验登录, 如果不通过, 返回 Promise<false>
   * 2. 校验是否可以购买, 如果不通过, 返回 Promise<false>
   * 3. 如果都通过 返回 Promise<true>
   */
  handlePreCheck = () => {
    const { id } = this.props;
    monitor.log('', 'rabbit >> 点击魔小兔购买活动按钮');
    return this.getRabbitPayAfterCheck(id);
  };

  renderBtnByActivityState = () => {};

  /**
   * 弹窗render
   */
  renderModal = () => {
    const { modalKey } = this.state;
    const { id } = this.props;
    switch (modalKey) {
      case 'login':
        return (
          <ModalLogin
            source="ma_bonny"
            actId={id}
            actType="bunny"
            onOk={this.handleLoginCallBack}
            onCancel={this.handleHideModal}
            hearderBg="rabbit"
          ></ModalLogin>
        );
    }
  };

  /**
   * 校验用户是否参与
   */
  getRabbitPayAfterCheck = async (id) => {
    return rabbitPageService
      .getRabbitPageCheck(id)
      .then(() => {
        return true;
      })
      .catch(({ code, msg }) => {
        switch (code) {
          case RABBIT_BUY_STATUS.LOGIN_REQUIRED:
            this.setState({
              modalKey: 'login'
            });
            return;
          case RABBIT_BUY_STATUS.BIZ_STUDENT_NOT_EXIST:
            monitor.log('', 'rabbit >> 点击魔小兔购买活动按钮 >> 异常:学生不存在');
            myToast.warning('学生不存在');
            return;
          case RABBIT_BUY_STATUS.BIZ_BUNNY_CAMP_IS_NOT_EXIST:
            monitor.log('', 'rabbit >> 点击魔小兔购买活动按钮 >> 异常:该营期不存在');
            myToast.warning('该营期不存在');
            return;
          case RABBIT_BUY_STATUS.BIZ_BUNNY_IS_JOINING_CAMP:
            monitor.log('', 'rabbit >> 点击魔小兔购买活动按钮 >> 异常:已成功参加本期课程');
            myToast.warning('您已成功参加本期课程', 1500, () => {
              window.location.href = urlByAgain;
            });
            return;
          case RABBIT_BUY_STATUS.BIZ_BUNNY_IS_JOINING_EXPERIENCE_CAMP:
            monitor.log('', 'rabbit >> 点击魔小兔购买活动按钮 >> 异常:已参加过魔小兔体验营');
            myToast.warning('您已参加过魔小兔体验营');
            return;
          case RABBIT_BUY_STATUS.BIZ_BUNNY_CAMP_JOIN_FULL:
            monitor.log('', 'rabbit >> 点击魔小兔购买活动按钮 >> 异常:魔小兔营期已爆满');
            myToast.warning('对不起,您来晚了,本期魔小兔营期已经爆满了哦~');
            return;
          case RABBIT_BUY_STATUS.BIZ_BUNNY_IS_JOINING_OTHER_CAMP:
            monitor.log('', 'rabbit >> 点击魔小兔购买活动按钮 >> 异常:学习时间和已有课程重合');
            myToast.warning('时间冲突啦，学习时间和已有课程重合');
            return;
          case RABBIT_BUY_STATUS.BIZ_BUNNY_IS_JOINING_FORMAL_CAMP:
            monitor.log('', 'rabbit >> 点击魔小兔购买活动按钮 >> 异常:已购买过正式课程');
            myToast.warning('您已购买过正式课程，无法参与体验');
            return;
          default:
            monitor.log('', `rabbit >> 校验用户异常 >> ${msg}`);
            message.error(msg || '发生错误!');
        }
        return false;
      });
  };

  /**
   * 登陆弹窗: 点击确认回调
   */
  handleLoginCallBack = async () => {
    this.handleHideModal(); // 关闭弹窗
    const res = await this.handlePreCheck();
    if (!res) {
      return;
    }
    // 执行子组件的支付方法
    this.refByPayBtn.current.handleClick();
  };

  /**
   * 登陆弹窗: 关闭后回调
   */
  handleHideModal = () => {
    this.setState({
      modalKey: ''
    });
  };

  /**
   * 支付成功后回调
   */
  successReplace = (num) => {
    const { id, productId } = this.props;
    monitor.log('', 'rabbit >> 魔小兔购买成功');
    window.location.replace(
      `${appConfig.basename}/rabbit/result?productId=${productId}&orderNo=${num}&campId=${id}`
    );
  };

  /**
   * 取消支付后回调
   */
  payOnCancel = () => {
    const { id, initData } = this.props;
    monitor.log('', 'rabbit >> 魔小兔取消购买');
    initData(id);
  };

  /**
   * 支付失败后回调
   */
  payOnFail = () => {
    const { id, initData } = this.props;
    monitor.log('', 'rabbit >> 魔小兔购买失败');
    initData(id);
  };

  render() {
    const {
      processStatus,
      startTimeMonth,
      startTimeDay,
      campType,
      id,
      productId,
      balancePeople
    } = this.props;

    if (processStatus === PROCESS_STATUS.ACTIVITY_NOT_START) {
      // 活动未开始
      return (
        <div className={styles.payBtnDisabled}>
          {startTimeMonth}月{startTimeDay}日开营 等待开售
        </div>
      );
    } else if (processStatus === PROCESS_STATUS.ACTIVITY_PROCESSING) {
      // 活动进行中, balancePeople对活动人数进行过滤，如果为0人显示已售完
      return (
        <>
          {balancePeople === 0 ? (
            <div className={styles.payBtnDisabled}>已售完</div>
          ) : (
            <RabbitPayBtn
              ref={this.refByPayBtn}
              campId={id}
              productId={productId}
              preCheck={this.handlePreCheck}
              onSuccess={this.successReplace}
              onCancel={this.payOnCancel}
              onFail={this.payOnFail}
            >
              <div className={styles.payBtn}>
                {startTimeMonth}月{startTimeDay}日开营 立即
                {campType === CAMP_TYPE.EXPERIENCE ? '体验' : '购课'}
              </div>
            </RabbitPayBtn>
          )}
          {this.renderModal()}
        </>
      );
    } else {
      return null;
    }
  }
}