react-app-shell
Version:
react打包脚本和example, 这里的版本请忽略
148 lines (135 loc) • 4.96 kB
JavaScript
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';
(({SpecialGroupStore}) => {
const groupInfo = SpecialGroupStore.groupInfo;
return {
// 数据
ruleImages: ',,,,' + groupInfo.activityRuleImage || '', // 活动规则图片
productImages: groupInfo.productInfoImage || '', // 产品介绍图片
videoTitle: groupInfo.videoTitle,
videoUrl: groupInfo.videoUrl
};
})
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 >);
}
}