提示信息疾病详情页右侧菜单

src/components/PushItems/DetailsModal/index.jsx

@@ -2,33 +2,82 @@ 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']}>
+                <div className={styles['details-content']} id= 'detailsContent' onScroll={this.handleScrollModal.bind(this, tipsDetails)}>
                     {tipsDetails && tipsDetails.introduceDetailList && tipsDetails.introduceDetailList.map((item, index) => {
-                        return (<div>
-                            <div className={styles['details-content-title-box']}>
+                        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']}>
+                    {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 className={styles['details-mask']}>

src/components/PushItems/DetailsModal/index.less

@@ -15,6 +15,7 @@
     left: 10%;
     top: 10%;
     background: #fff;
+    overflow: hidden;
     z-index: 10;
 }
 
@@ -55,10 +56,41 @@
     right: 0;
 }
 .details-content {
+    position: relative;
     height: 100%;
-    padding: 0 40px;
+    padding: 0 180px 0 40px;
     overflow-y: auto;
 }
+.content-menu {
+    position: absolute;
+    top: 50px;
+    right: 20px;
+    background: #eee;
+    border: 1px solid #eee;
+    width: 160px;
+    padding: 15px 18px;
+}
+.details-content-menu-line {
+    height: 15px;
+    width: 0;
+    border: 1px solid #ccc;
+    background-color: #ccc;
+    margin-left: 4px
+}
+.details-content-menu-name {
+    color: #33475f;
+    font-size: 13px;
+}
+.details-content-menu-circle {
+    display: inline-block;
+    width: 8px;
+    height: 8px;
+    border-radius: 5px;
+    border: 1px solid #ccc;
+    margin-top: 5px;
+    background-color: #eee;
+    margin-right: 10px;
+}
 .details-mask {
     position: fixed;
     width: 100%;