newICSS/src/components/PushItems/DetailsModal/index.jsx

import React, { Component } from "react";
import styles from "./index.less";
import NewPortal from './NewPortal'
import close from "./../img/close.png";
import $ from "jquery";
class DetailsModal extends Component {
    constructor(props) {
        super(props);
        this.state = {
            currentIndex: 0
        }
        this.hideTips = this.hideTips.bind(this)
    }
    hideTips() {
        const { hideTips } = this.props;
        hideTips && hideTips();
    }
    handleClickMenu(index, item, tipsDetails) {
        const that = this
        setTimeout(function(){
            that.setState({
                currentIndex: index
            })
        },0)
        
        let scrollTop = 0
        tipsDetails.introduceDetailList.map((it, ii) => {
            if( ii < index) {
                scrollTop = scrollTop + parseInt($('#' + it.title).css('height'))
            }
        })
        $('#detailsContent').scrollTop(scrollTop)
    }
    handleScrollModal(tipsDetails) {
        const scrollTop = $('#detailsContent').scrollTop()
        let divHeight = 0;
        for (let i = 0; i < tipsDetails.introduceDetailList.length; i++) {
            divHeight = divHeight + parseInt($('#' + tipsDetails.introduceDetailList[i].title).css('height'))
            if(divHeight > scrollTop) {
                this.setState({
                    currentIndex: i
                })
                return
            }
        }
    }
    
    

    render() {
        const {showTipsDetails, tipsDetails} = this.props;
        const { currentIndex } = this.state
        const imageUrlPrefix = 'http://192.168.2.241:82'; //图片服务器地址
        return (<NewPortal visible={showTipsDetails}>
        <div className={styles['details-wrapper']}>
           <div className={styles['details-content-wrapper']}>
                <h1 className={styles['details-content-name']} >{tipsDetails && tipsDetails.name} <img className={styles['details-close']} onClick={this.hideTips} src={close} /></h1>
                <div className={styles['details-content']} id= 'detailsContent' onScroll={this.handleScrollModal.bind(this, tipsDetails)}>
                    {tipsDetails && tipsDetails.introduceDetailList && tipsDetails.introduceDetailList.map((item, index) => {
                        return (<div id={item.title}>
                            <div className={styles['details-content-title-box']} >
                                <span className={styles['details-content-title-name']}>{item.title}</span>
                                <div className={styles['details-content-title-line']}></div>
                            </div>
                            <div dangerouslySetInnerHTML ={{__html: item.content.replace(/{imageUrlPrefix}/g, imageUrlPrefix)}}></div>
                        </div>)
                    })}
                    
                </div>
                <div className={styles['content-menu-box']}>
                    <div className={styles['content-menu']}>
                        {tipsDetails && tipsDetails.introduceDetailList && tipsDetails.introduceDetailList.map((item, index) => {
                                return (<div>
                                    <div className={styles['details-menu-title-box']}>
                                        {index === 0 ? '' : <div className={styles['details-content-menu-line']}></div>}
                                        <span onClick={this.handleClickMenu.bind(this, index, item, tipsDetails)} className={styles['details-content-menu-name']} style = {index === currentIndex ? {color:'#0089be'} : ''}>
                                            <span className={styles['details-content-menu-circle']} style = {index === currentIndex ? {background:'#0089be'} : ''}></span>{item.title}
                                        </span>
                                    </div>
                                </div>)
                            })}
                    </div>
                </div>
               
           </div>
           <div className={styles['details-mask']} onClick={this.hideTips}>
           </div>
        </div>
    </NewPortal>)
    }
}

export default DetailsModal;