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

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

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

// 公用方法 配置项 接口 枚举>>>引用:
import { monitor } from '../../utils';
import { checkUserAuth, WechatConfig, DocumentTitle } from '../../components'; // 魔小兔授权, 签名分享, title组件
import { shareConfig } from '../../config';
import { AccountsType } from '../../constants'; // 魔小兔授权枚举
import { BONNY } from '../../constants/accounts-type';

// 组件 公用组件>>>引用:
import SignUp from './component/sign-up'; // 距离报名结束 组件
import CountDown from './component/count-down'; // 倒计时 组件
import PushBtn from './component/push-btn'; // 按钮 组件
import RabbitServiceError from './component/rabbit-service-error';

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

// 分享默认参数
const defaultShareOptions = shareConfig.rabbit;

/**
 * 魔小兔-购买活动页
 */
@inject(({ rabbitStore }) => {
  return {
    // 数据
    serviceError: rabbitStore.state.serviceError, // 页面暂无数据 或 没有该活动
    id: rabbitStore.state.id, // 页面id
    processStatus: rabbitStore.state.processStatus, // 活动状态
    startTimeMonth: rabbitStore.state.startTimeMonth, // 按钮的开始时间(月)
    startTimeDay: rabbitStore.state.startTimeDay, // 按钮的开始时间(日)
    purchaseEndTime: rabbitStore.state.purchaseEndTime, // 倒计时结束时间
    nowTime: rabbitStore.state.nowTime, // 倒计时现在时间
    detailImgList: rabbitStore.state.detailImgList, // 详情页一组图

    // 函数
    initData: rabbitStore.initData // 初始化方法
  };
})
@observer
@checkUserAuth({ account: AccountsType.BONNY }) // 活动相关的微信授权公众号--魔小兔公众号（待定）
export default class Rabbit extends Component {
  constructor(props) {
    super(props);
    this.state = {
      shareOptions: {
        ...defaultShareOptions
      },
      urlId: this.props.match.params.id // 获取url上的值
    };
    // 初始化数据
    this.props.initData(this.state.urlId);
  }

  componentDidMount() {
    monitor.log('', 'rabbit >> 浏览魔小兔购买活动页面');
  }

  /**
   * 页面详情图render
   */
  renderBannerContent = () => {
    const { detailImgList } = this.props;
    return (
      <div className={styles.imgContent}>
        {detailImgList.map((item, index) => {
          return <img key={index} className={styles.img} src={item} />;
        })}
        <div className={styles.compatibleSafeArea}></div>
      </div>
    );
  };

  /**
   * 页面底部导航render
   */
  renderFooterContent = () => {
    const { purchaseEndTime, nowTime, processStatus, initData } = this.props;

    return (
      <div className={styles.footer}>
        <div className={styles.footerLeft}>
          <SignUp processStatus={processStatus} />
          <CountDown
            id={this.state.urlId}
            countDownTime={purchaseEndTime}
            nowTime={nowTime}
            processStatus={processStatus}
            onFinish={initData}
          />
        </div>
        <div className={styles.footerRight}>
          <PushBtn processStatus={processStatus} />
        </div>
      </div>
    );
  };

  render() {
    const { serviceError } = this.props;

    // 获取信息时发生异常, 阻塞掉代码不往下走了
    if (serviceError) {
      return <RabbitServiceError />;
    }

    // 分享参数
    const { shareOptions } = this.state;
    return (
      <div className={styles.rabbit}>
        {this.renderBannerContent()}
        {this.renderFooterContent()}

        <div className={styles.compatibleFooter}></div>
        <DocumentTitle title="魔小兔英语" />
        <WechatConfig showShare={true} shareOptions={shareOptions} account={BONNY} />
      </div>
    );
  }
}