react-app-shell/activity/src/views/component/custom-service-modal/index.js

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

import React from 'react';

import style from './style.less';

/**
 * 选择客服底部弹窗
 */

function CustomServiceModal(props) {
    const {showTel = true} = props;
    const handleOpenIphone = () => {
        setTimeout(() => {
            handelCancel();
        }, 600);
    };

    const handleOpenWeiXin = () => {
        const {onOpenWeiXinModal = null} = props;
        onOpenWeiXinModal && onOpenWeiXinModal();
    };

    const handelCancel = () => {
        const {onCancel = null} = props;
        onCancel && onCancel();
    };

    return (
        <div className={style['custom-modal']} style={{display: 'block'}}>
            <div className={style['custom-container']}>
                <div className={style['container-row']} onClick={handleOpenWeiXin}>
                    <span className={style['wx-logo']}></span>
                    <span className={style['text']}>微信客服</span>
                </div>
                {showTel && (
                    <a href="tel:400-626-1626">
                        <div className={style['container-row']} onClick={handleOpenIphone}>
                            <span className={style['iphone-logo']}></span>
                            <span className={style['text']}>电话客服</span>
                        </div>
                    </a>
                )}
                <div className={style['container-row']} onClick={handelCancel}>
                    <span className={style['text']}>取消</span>
                </div>
            </div>
        </div>
    );
}

export default CustomServiceModal;