react-app-shell/activity/src/views/rabbit/component/sign-up.js

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

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

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

/**
 * 魔小兔-活动信息提示组件
 */
@inject(({ rabbitStore }) => {
  return {
    // 数据
    balancePeople: rabbitStore.state.balancePeople, // 剩余人数
    purchaseStartTimeMonth: rabbitStore.state.purchaseStartTimeMonth, // 活动未开始(月) -- 文案展示
    purchaseStartTimeDay: rabbitStore.state.purchaseStartTimeDay // 活动未开始(日) -- 文案展示
  };
})
@observer
export default class SignUp extends Component {
  renderSignUpContent = () => {
    const {
      processStatus,
      purchaseStartTimeMonth,
      purchaseStartTimeDay,
      balancePeople
    } = this.props;
    if (processStatus === PROCESS_STATUS.ACTIVITY_NOT_START) {
      // 活动未开始
      return (
        <p className={styles.notStartTip}>
          {purchaseStartTimeMonth}月{purchaseStartTimeDay}日可购买
        </p>
      );
    } else if (processStatus === PROCESS_STATUS.ACTIVITY_PROCESSING) {
      // 活动进行中
      return (
        <div className={styles.signUp}>
          <p className={styles.title}>距离报名结束</p>
          <p className={styles.surplus}>
            剩余<span>{balancePeople}</span>人
          </p>
        </div>
      );
    }
  };

  render() {
    return <>{this.renderSignUpContent()}</>;
  }
}