weaver_trunk_cli/pc4mobx/esearch/components/childComponents/ImagesContent.js

50 lines
1.6 KiB
JavaScript

import React from 'react';
import {inject, observer} from 'mobx-react';
import {WeaZmage} from 'ecCom';
import {toJS} from 'mobx';
@inject('weesoStore')
@observer
export default class ImagesContent extends React.Component {
constructor(props) {
super(props);
this.state = {
img: this.props.values && this.props.values.imgUrl
}
}
render() {
let {values, weesoStore, index} = this.props;
let {imageResult, addSubdomainUrl} = weesoStore;
imageResult = toJS(imageResult);
values = toJS(values);
let
imgWidth = Number(values.width),
imgHeight = Number(values.height);
let imgSet = [];
imageResult && imageResult.length != 0 && imageResult.map(item => {
imgSet.push({
src: item.imgUrl,
onError: () => {
this.setState({img: '/spa/esearch/images/default.png'})
}
})
})
return (
<div className="content-images-image"
style={{width: imgHeight== '' ? 240 : (imgHeight>160 ? (imgWidth*160)/imgHeight : imgWidth)}}>
<WeaZmage ecId={`${this && this.props && this.props.ecId || ''}_WeaZmage@8qjcf5`} src={addSubdomainUrl(this.state.img)}
imageSet={imgSet}
onError={() => {
this.setState({img: '/spa/esearch/images/default.png'})
}}
page={index}
/>
<p className="image-title-bg"></p>
<p title={values && values.title} className="image-title-content" dangerouslySetInnerHTML={{__html: `<span>${values && values.title}</span>`}} ></p>
</div>
)
}
}