react-app-shell/activity/src/views/bunny/index.js

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

import React, { Component } from 'react';
import { message, monitor } from '../../utils';
import style from './index.less';
import { bunnyService } from '../../service';
import Login from '../../components/login/modal-login';
import noCodeImg from '../../public/images/bunny/noCode.png';
import { AccountsType } from '../../constants'; // 魔小兔授权枚举
import { checkUserAuth, DocumentTitle } from '../../components'; // 魔小兔授权, 签名分享, title组件
/**
 * 魔小兔订单结果页
 */
@checkUserAuth({ account: AccountsType.BONNY }) // 活动相关的微信授权公众号--魔小兔公众号（待定）
export default class BunnyTwoCode extends Component {
  constructor(props) {
    super(props);
    this.type = props.match.params.type;
    this.state = {
      codeUrl: '',
      isShowLogin: false
    };
  }

  componentDidMount() {
    if (this.type) {
      this.getCode();
    }
    monitor.log('', {
      type: this.type
    });
  }

  /**
   * 获取二维码
   */
  getCode = () => {
    bunnyService
      .getTwoCodeUrl(this.type)
      .then((res) => {
        this.setState({
          codeUrl: res
        });
      })
      .catch((rej) => {
        console.log('rej', rej);
        switch (rej.code) {
          case 'LOGIN_REQUIRED':
            message.error('请登录后再试');
            this.setState({
              isShowLogin: true
            });
            return;
        }
        message.error('获取二维码失败');
        monitor.log('', {
          rej,
          type: this.type
        });
      });
  };

  /**
   * 登录成功后关闭登录弹窗
   */
  onOk = () => {
    this.setState({
      isShowLogin: false
    });
    this.getCode();
  };

  render() {
    const { codeUrl, isShowLogin } = this.state;
    const type = this.type;
    return (
      <div>
        <div className={style.bgImg}></div>
        <div className={style.resultContent}>
          <div className={style.logo}></div>
          <div className={style.codeInfo}>
            <div className={style.codeTitle}>
              <div className={style.titleLeft}></div>
              <div className={style.titleContent}>
                {type === 'cc' ? '专属课程老师' : '班级二维码'}
              </div>
              <div className={style.titleRight}></div>
            </div>
            <img src={codeUrl || noCodeImg} />
            <div className={style.promptInfo}>
              {codeUrl
                ? `请扫描上方二维码添加${type === 'cc' ? '老师' : '班级'}，以便正常完成学习。`
                : `${type === 'cc' ? '暂无老师二维码' : '班级暂未开放'}`}
            </div>
          </div>
        </div>
        <DocumentTitle title="魔小兔英语" />
        {isShowLogin ? <Login closeBtn={false} onOk={this.onOk} hearderBg="rabbit" /> : null}
      </div>
    );
  }
}