UNPKG

react-app-shell

Version:

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

148 lines (135 loc) 4.96 kB
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 >); } }