react-app-shell/activity/src/views/special-group/component/group-tabs.js

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

import React, {Component} from 'react';
import {observer, inject} from 'mobx-react';
import classNames from 'classnames';
import _ from 'lodash';
import VideoPlayer from './videoPlay';

import styles from './styles.less';

@inject(({SpecialGroupStore}) => {
    const groupInfo = SpecialGroupStore.groupInfo;
    return {
        // 数据
        ruleImages: ',,,,' + groupInfo.activityRuleImage || '', // 活动规则图片
        productImages: groupInfo.productInfoImage || '', // 产品介绍图片
        videoTitle: groupInfo.videoTitle,
        videoUrl: groupInfo.videoUrl
    };
})
@observer
export default class GroupTabs extends Component {

    constructor(props) {
        super(props);
        this.leftTabpane = '';
        this.rightTabpane = '';
        this.isMoving = false;
        this.sollTime = null;
        this.state = {
            currentTab: 'product', // 当前选中的tab页面 rule:活动规则 product:产品介绍
            imageHeight: null,
            fixedMenu: false,
        };
    }

    componentDidMount() {
        window.addEventListener('scroll', this.handleScroll);
    }

    componentWillUnmount() {
        window.removeEventListener('scroll', this.handleScroll);
    }

    handleScroll = () => {
        if (this.isMoving) return false;
        let tabsTop = this.refs.grouptabs.offsetTop - window.pageYOffset;
        let {fixedMenu} = this.state;
        fixedMenu = tabsTop < 0;
        this.setState({
            fixedMenu
        });
    };

    /**
     * 滚动条运动
     */
    move = iTarget => {
        window.scrollTo(0, iTarget);
    };

    /**
     * 切换tabs
     */
    handleTabsClick = (key, value) => {
        this.setState({
            [key]: value,
        }, () => {
            let tabsTop = this.refs.grouptabs.offsetTop;
            if (this.state.fixedMenu) {
                this.move(tabsTop);
            }
        });

    };

    renderRule = () => {
        let {ruleImages} = this.props;
        ruleImages = _.remove(ruleImages.split(','), (o) => !!o);
        return ruleImages.map((item, index) => {
            if (item) {
                return <img key={`rule${index}`} src={item} alt="活动规则"/>;
            }
            return null;
        });
    }

    renderProduct = () => {
        let {productImages} = this.props;
        productImages = _.remove(productImages.split(','), (o) => !!o);
        return productImages.map((item, index) => {
            return <img key={`product${index}`} src={item} alt="产品介绍"/>;
        });
    }

    render() {
        const {currentTab, fixedMenu} = this.state;
        const {videoTitle, videoUrl} = this.props;
        return (
            <div
                className={styles['group-tabs']}
                ref="grouptabs"
            >
                <div
                    className={classNames(styles['group-tabs-nav'], 'clearfix', {
                        [styles['fixedMenu']]: fixedMenu
                    })}
                >
                    <div
                        onClick={this.handleTabsClick.bind(null, 'currentTab', 'product')}
                        className={
                            classNames(styles['group-tabs-tab'], {
                                [styles['group-tabs-tab-active']]: currentTab === 'product'
                            })}
                    >
                        产品介绍
                    </div>
                    <div
                        onClick={this.handleTabsClick.bind(null, 'currentTab', 'rule')}
                        className={classNames(styles['group-tabs-tab'], {
                            [styles['group-tabs-tab-active']]: currentTab === 'rule'
                        })}>活动规则
                    </div>
                </div>
                {fixedMenu && <div className={styles['tabs-content-hold']}/>}
                <div
                    className={styles['group-tabs-content']}>
                    <div
                        className={classNames(styles['tabs-content-slide'])}
                    >
                        <div
                            className={classNames(styles['group-tabs-tabpane'], {
                                [styles['group-tabs-active']]: currentTab === 'product'
                            })}>
                            {videoUrl ? (<VideoPlayer videoTitle={videoTitle} videoUrl={videoUrl}/>) : null}
                            {this.renderProduct()}
                        </div>
                        <div
                            className={classNames(styles['group-tabs-tabpane'], {
                                [styles['group-tabs-active']]: currentTab === 'rule'
                            })}>
                            {this.renderRule()}
                        </div>
                    </div>
                </div>
                <div className={styles['group-tabs-footer']}/>
            </div >);
    }
}