|
@@ -2,14 +2,19 @@ import React, {Component} from 'react';
|
|
import style from './index.less'
|
|
import style from './index.less'
|
|
import showImg from "@common/images/show.png";
|
|
import showImg from "@common/images/show.png";
|
|
import hideImg from "@common/images/close.png";
|
|
import hideImg from "@common/images/close.png";
|
|
|
|
+import infoShow from '@common/images/info-show.png';
|
|
|
|
+import infoMove from '@common/images/info-move.png';
|
|
|
|
|
|
|
|
|
|
class RecommendInspect extends Component {
|
|
class RecommendInspect extends Component {
|
|
constructor(props) {
|
|
constructor(props) {
|
|
super(props)
|
|
super(props)
|
|
this.state = {
|
|
this.state = {
|
|
- showAll: false
|
|
|
|
|
|
+ showAll: false,
|
|
|
|
+ hasEnterItem: -1,
|
|
|
|
+ hasEnterImg: false
|
|
}
|
|
}
|
|
|
|
+
|
|
this.renderItem = this.renderItem.bind(this)
|
|
this.renderItem = this.renderItem.bind(this)
|
|
}
|
|
}
|
|
changeShowFlag() {
|
|
changeShowFlag() {
|
|
@@ -17,9 +22,15 @@ class RecommendInspect extends Component {
|
|
showAll: !this.state.showAll
|
|
showAll: !this.state.showAll
|
|
})
|
|
})
|
|
}
|
|
}
|
|
|
|
+ getTips(item) {
|
|
|
|
+ const { getInfomation, type } = this.props
|
|
|
|
+ const name = type === 12 ? item.uniqueName :item.name
|
|
|
|
+ getInfomation && getInfomation({ name: name || '', type: type, position: 1 })
|
|
|
|
+ }
|
|
|
|
|
|
- renderItem(item) {
|
|
|
|
- const { changeFlag } = this.props
|
|
|
|
|
|
+ renderItem(item, index) {
|
|
|
|
+ const { changeFlag,getInfomation } = this.props
|
|
|
|
+ const { hasEnterItem,hasEnterImg } = this.state
|
|
return <span className={style['itemLabelBox']} title={item.name}>
|
|
return <span className={style['itemLabelBox']} title={item.name}>
|
|
<input
|
|
<input
|
|
id={item.id + item.name}
|
|
id={item.id + item.name}
|
|
@@ -27,15 +38,49 @@ class RecommendInspect extends Component {
|
|
type="checkbox"
|
|
type="checkbox"
|
|
checked={item.checked}
|
|
checked={item.checked}
|
|
/>
|
|
/>
|
|
- <label for={item.id + item.name}>{item.name}</label>
|
|
|
|
|
|
+ <span className={style['itemLabelNameBox']}
|
|
|
|
+ onMouseEnter={this.handleMouseEnterDrug.bind(this , index)}
|
|
|
|
+ onMouseLeave = {this.handleMouseLeaveDrug.bind(this, index)}
|
|
|
|
+ >
|
|
|
|
+ <label className={style['itemLabel']} for={item.id + item.name}>{item.name}</label>
|
|
|
|
+ <img
|
|
|
|
+ className={style['info-img']}
|
|
|
|
+ title='点击i图标可查看详细说明'
|
|
|
|
+ style ={hasEnterItem ===index ? {display: "inline-block"} : {display: "none"}}
|
|
|
|
+ src={hasEnterImg ? infoMove : infoShow}
|
|
|
|
+ onMouseEnter={this.handleMouseEnterImg.bind(this)}
|
|
|
|
+ onMouseLeave = {this.handleMouseLeaveImg.bind(this)}
|
|
|
|
+ onClick={this.getTips.bind(this,item)}
|
|
|
|
+ />
|
|
|
|
+ </span>
|
|
</span>
|
|
</span>
|
|
}
|
|
}
|
|
|
|
+ handleMouseEnterDrug(index) {
|
|
|
|
+ this.setState({
|
|
|
|
+ hasEnterItem: index,
|
|
|
|
+ })
|
|
|
|
+ }
|
|
|
|
+ handleMouseLeaveDrug() {
|
|
|
|
+ this.setState({
|
|
|
|
+ hasEnterItem: -1,
|
|
|
|
+ })
|
|
|
|
+ }
|
|
|
|
+ handleMouseEnterImg() {
|
|
|
|
+ this.setState({
|
|
|
|
+ hasEnterImg: true
|
|
|
|
+ })
|
|
|
|
+ }
|
|
|
|
+ handleMouseLeaveImg() {
|
|
|
|
+ this.setState({
|
|
|
|
+ hasEnterImg: false
|
|
|
|
+ })
|
|
|
|
+ }
|
|
|
|
|
|
render() {
|
|
render() {
|
|
const { title,list, changeFlag, border } = this.props
|
|
const { title,list, changeFlag, border } = this.props
|
|
const { showAll } = this.state
|
|
const { showAll } = this.state
|
|
- const listAll = list.map(item => {
|
|
|
|
- return this.renderItem(item)
|
|
|
|
|
|
+ const listAll = list.map((item,index) => {
|
|
|
|
+ return this.renderItem(item,index)
|
|
});
|
|
});
|
|
let firstLineNum = 0; //第一行字数
|
|
let firstLineNum = 0; //第一行字数
|
|
let secondLineNum = 0; //第二行字数
|
|
let secondLineNum = 0; //第二行字数
|
|
@@ -53,11 +98,11 @@ class RecommendInspect extends Component {
|
|
if(secondLineNum > 20) {
|
|
if(secondLineNum > 20) {
|
|
return;
|
|
return;
|
|
} else {
|
|
} else {
|
|
- return this.renderItem(item)
|
|
|
|
|
|
+ return this.renderItem(item, index)
|
|
}
|
|
}
|
|
} else {
|
|
} else {
|
|
|
|
|
|
- return this.renderItem(item)
|
|
|
|
|
|
+ return this.renderItem(item, index)
|
|
}
|
|
}
|
|
});
|
|
});
|
|
|
|
|