react-app-shell/activity/src/views/bargain/camp/index.js

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

import React, {Component} from 'react';
import {observer, inject} from 'mobx-react';
import queryString from 'query-string';
import {Button} from 'antd-mobile';

import {message} from '../../../utils';
import {bargainService} from '../../../service';
import {BARGAIN_OWNER, AccountsType} from '../../../constants';
import {WeiXinModal} from '../../component';

import styles from './camp.less';

import warn from '../../../public/images/bargain/camp-warn.png';
import title from '../../../public/images/bargain/camp-title.png';
import CheckUserAuth from '../../../components/auth/check-user-auth';

/**
 * 砍价训练营进入教室页
 */
@inject(({bargainStore}) => {
    return {
        // 数据
        bargainOwner: bargainStore.state.status.bargainOwner, // 当前砍价ID鱼微信用户之间的所属关系
    };
})

@observer
@CheckUserAuth({account: AccountsType.ACTIVITY})
export default class Camp extends Component {
    constructor(props) {
        super(props);
        this.urlParams = queryString.parse(window.location.search);
        const activeId = this.props.match.params.id;
        this.state = {
            activeId,
            isSubscribe: false, // 是否关注公众号
            showCode: false, // 展示公众号二维码
        };
        this.loadSubscribeStatus();
    }

    componentWillReceiveProps(nextProps) {
        if (this.props.bargainOwner !== nextProps.bargainOwner && nextProps.bargainOwner !== BARGAIN_OWNER.MY_BARGAIN) {
            // 当前砍价ID并非当前微信用户发起则需要跳转至该砍价ID首页
            this.jumpToHomePage();
        }
        return;
    }

    /**
     * 跳转至首页
     */
    jumpToHomePage = () => {
        const {activeId} = this.state;
        const {recordId, rf} = this.urlParams;
        let searchObj = {
            recordId: recordId,
            rf: rf,
        };
        // 跳转至首页
        this.props.history.replace(`/bargain/${activeId}?${queryString.stringify(searchObj)}`);
    }

    /**
     * 获取是否关注公众号
     */
    loadSubscribeStatus = () => {
        // 获取是否关注公众号
        bargainService.isSubscribe().then(res => {
            this.setState({
                isSubscribe: res
            });

        }).catch(error => {
            message.error(error.msg);
        });
    }

    /**
     * 查看公众号二维码
     */
    handelViewCode = () => {
        this.setState({
            showCode: true
        });
    };

    /**
     * 关闭弹窗
     */
    handleHideModal = () => {
        this.setState({
            showCode: false
        });
    };

    render() {
        const {isSubscribe, showCode} = this.state;
        return (
            <div className={styles['address-content']}>
                {
                    isSubscribe ? '' : (
                        <div>
                            <div className={styles['header']}>
                                <img src={warn}/>
                                <p>务必关注【魔力耳朵跟读训练营】微信公众号，才能顺利接收大礼包哦~</p>
                                <Button className={styles['header-btn']} onClick={this.handelViewCode}>点击关注魔力耳朵训练营</Button>
                            </div>
                            <div className={styles['line']}/>
                        </div>
                    )
                }

                <div className={styles['content']}>
                    <div className={styles['content-tltle']}>
                        <img src={title}/>
                        <div className={styles['titlt-shadow']}/>
                        <p>训练营上课方法</p>
                    </div>
                    <div className={styles['camp-method']}>
                        <ul>
                            <li>1、报名后扫码进入对应班级</li>
                            <li>2、课程开始后，外教学习内容每天推送到【魔力耳朵跟读训练营】服务号</li>
                            <li>3、根据课程要求，录制跟读视频且发送到微信群</li>
                            <li>4、中教纠音老师将开始1对1纠音点评</li>
                        </ul>
                    </div>
                    <div className={styles['camp-code']}>
                        <p className={styles['camp-code-title']}>请扫描二维码进入对应班级</p>
                        <img src={warn}/>
                    </div>
                </div>
                {showCode ? (<WeiXinModal
                    header={(
                        <div>
                            <p>关注【魔力耳朵跟读训练营】微信公众号</p>
                        </div>
                    )}
                    imageUrl={warn}
                    onCancel={this.handleHideModal}
                />) : ''}
            </div>
        );
    }
}