react-app-shell/activity/src/views/bargain/component/customerService.js

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

import React, {Component} from 'react';

import {BARGAIN_MODAL_KEY} from '../../../constants';
import {CustomServiceModal, WeiXinModal} from '../../component';
import customer from '../../../public/images/bargain/customer.png';
import campCode from '../../../public/images/bargain/campCode.png';

import styles from './styles.less';

/**
 * 客服
 */
class CustomerService extends Component {
    state= {
        modalKey: ''
    }

    /**
     * 关闭modal
     */
    handleHideModal = () => {
        this.setState({
            modalKey: '',
        });
    };

    /**
     * 打开客服弹窗
     */
    handleOpenCustom = () => {
        // monitor.log('', '客服弹窗');
        this.setState({
            modalKey: BARGAIN_MODAL_KEY.CUSTOM_SERVICE_MODAL
        });
    };

    /**
     * 打开微信弹窗
     */
    handleOpenWeiXinModal = () => {
        // monitor.log('', '打开微信公众号弹窗');
        this.setState({
            modalKey: BARGAIN_MODAL_KEY.WEIXIN_MODAL
        });
    };

    /**
     * 显示弹窗
     * @returns {*}
     */
    renderModal = () => {
        const {modalKey} = this.state;
        switch (modalKey) {
            case BARGAIN_MODAL_KEY.CUSTOM_SERVICE_MODAL: { // 底部客服弹窗类型
                return (
                    <CustomServiceModal
                        onOpenWeiXinModal={this.handleOpenWeiXinModal}
                        onCancel={this.handleHideModal}
                    />
                );
            }
            case BARGAIN_MODAL_KEY.WEIXIN_MODAL: { // 微信客服弹窗类型
                return (
                    <WeiXinModal
                        header={(
                            <div>
                                <p>关注【魔力耳朵跟读训练营】微信公众号</p>
                            </div>
                        )}
                        imageUrl={campCode}
                        onCancel={this.handleHideModal}
                    />

                );
            }
        }
        return null;
    };

    render() {
        return (
            <div>
                <div className={styles['customer']} onClick={this.handleOpenCustom}>
                    <img src={customer}/>
                    <span>客服</span>
                </div>

                {this.renderModal()}
            </div>
        );
    }
}

export default CustomerService;