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

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

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

import {message} from '../../../utils';
import {ADS_STATUS, BARGAIN_OWNER, AccountsType} from '../../../constants';
import BargainShare from '../component/share';
import AddressAdd from './addressAdd';
import AddressView from './addressView';

import styles from './address.less';
import warn from '../../../public/images/bargain/ifm-warn.png';
import success from '../../../public/images/bargain/ads-success.png';
import {checkUserAuth} from '../../../components';

/**
 * 砍价地址页
 */
@inject(({bargainStore}) => {
    return {
        // 数据
        activeInfo: bargainStore.activeInfo,
        adsStatus: bargainStore.state.status.adsStatus, // 地址状态
        bargainOwner: bargainStore.state.status.bargainOwner, // 当前砍价ID鱼微信用户之间的所属关系
        loading: bargainStore.state.loading, // 加载中
        // 函数
        loadData: bargainStore.loadData
    };
})
@observer
@checkUserAuth({account: AccountsType.ACTIVITY})
export default class Address extends Component {
    constructor(props) {
        super(props);
        this.urlParams = queryString.parse(window.location.search);
        const activeId = this.props.match.params.id;
        const {recordId} = this.urlParams;
        const {activeInfo, loadData} = this.props;
        if (!activeInfo || Object.keys(activeInfo).length === 0) {
            // 初始化数据
            loadData(activeId, recordId);
        }

        this.state = {
            activeId
        };
    }

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

    /**
     * 加载中。。。。
     */
    componentDidUpdate(prevProps) {
        const {loading} = this.props;
        if (prevProps.loading !== loading) {
            if (loading) {
                message.showLoading();
            } else {
                message.closeLoading();
            }

        }
    }

    /**
     * 跳转至首页
     */
    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)}`);
    }

    render() {
        const {adsStatus} = this.props;
        const className = adsStatus === ADS_STATUS.ADD_ADS ? 'banner-img-warn' : 'banner-img-success';
        return (
            <div className={styles['address-content']}>
                <BargainShare/>
                {/* {this.renderLoading(loading)} */}
                <div className={styles['banner']}>
                    <img className={styles[className]} src={adsStatus === 'ADD_ADS' ? warn : success}/>
                    <p>
                        {
                            adsStatus === ADS_STATUS.ADD_ADS ? '务必关注【魔力耳朵跟读训练营】，以免造成无法填写地址信息，无法接收大礼包的情况~' : '地址填写成功，我们会尽快将礼物寄出，感谢您的参与~'
                        }
                    </p>
                </div>
                <div className={styles['line']}/>
                {
                    adsStatus === ADS_STATUS.ADD_ADS ? <AddressAdd/> : <AddressView/>
                }
            </div>
        );
    }
}