125 lines
3.3 KiB
JavaScript
125 lines
3.3 KiB
JavaScript
const { inject, observer } = mobxReact;
|
|
const ProductItem = ecodeSDK.imp(ProductItem);
|
|
const ProductDialog = ecodeSDK.imp(ProductDialog);
|
|
const { toJS } = mobx;
|
|
// const { product } = ecodeSDK.imp(productDataSource);
|
|
const { WeaDialog } = ecCom;
|
|
const { createRef } = React;
|
|
|
|
@inject("projectStore")
|
|
@observer
|
|
class ProductIndex extends React.Component {
|
|
constructor() {
|
|
super();
|
|
this.state = {
|
|
dialogParams: {
|
|
visible: false,
|
|
productId: "",
|
|
},
|
|
dialogWidth: 1200,
|
|
dialogHeight: 100,
|
|
};
|
|
this.productRef = createRef();
|
|
}
|
|
componentDidMount() {
|
|
window.addEventListener("resize", this.resizeWidthHeight);
|
|
this.resizeWidthHeight();
|
|
this.init();
|
|
}
|
|
conponentWillUnmount() {
|
|
window.removeEventListener("resize", this.resizeWidthHeight);
|
|
}
|
|
|
|
resizeWidthHeight = () => {
|
|
requestAnimationFrame(() => {
|
|
if (!this.productRef.current) {
|
|
return;
|
|
}
|
|
const { offsetWidth, offsetHeight } = this.productRef.current;
|
|
this.setState({
|
|
dialogWidth: offsetWidth - 100,
|
|
// offsetHeight / 2
|
|
dialogHeight: 80,
|
|
});
|
|
});
|
|
};
|
|
|
|
init = () => {
|
|
const {
|
|
projectStore: { init },
|
|
} = this.props;
|
|
init();
|
|
};
|
|
|
|
handlePickProduct = async (productId) => {
|
|
const {
|
|
projectStore: { viewProject, init },
|
|
} = this.props;
|
|
const { api_status } = await viewProject(productId);
|
|
if (api_status) init();
|
|
this.setState({
|
|
dialogParams: { ...this.state.dialogParams, visible: true, productId },
|
|
});
|
|
};
|
|
|
|
render() {
|
|
const { dialogParams, dialogHeight, dialogWidth } = this.state;
|
|
const {
|
|
projectStore: { product },
|
|
} = this.props;
|
|
return (
|
|
<div className="product-demo-wapper" ref={this.productRef}>
|
|
<div className="product-container">
|
|
{_.map(toJS(product), (item, index) => {
|
|
const { id, title, subTitle, products } = item;
|
|
return (
|
|
<div className="product-box" key={id}>
|
|
{/* <h2 className="product-title">{title}</h2>
|
|
<p className="product-subtitle">{subTitle}</p> */}
|
|
<ProductItem
|
|
products={products}
|
|
onPickProduct={this.handlePickProduct}
|
|
/>
|
|
</div>
|
|
);
|
|
})}
|
|
{/* <a
|
|
href="https://www.e-cology.com.cn/spa/document/index.jsp?id=7258131&router=1#/main/document/detail"
|
|
target="_blank"
|
|
className="product-link">
|
|
<span>
|
|
演示
|
|
<br />
|
|
脚本
|
|
</span>
|
|
</a> */}
|
|
</div>
|
|
{/* 弹框 */}
|
|
{dialogParams.visible && (
|
|
<WeaDialog
|
|
onCancel={() => {
|
|
this.resizeWidthHeight();
|
|
this.setState({
|
|
dialogParams: {
|
|
...this.state.dialogParams,
|
|
visible: false,
|
|
productId: "",
|
|
},
|
|
});
|
|
}}
|
|
visible={dialogParams.visible}
|
|
style={{ width: dialogWidth }}>
|
|
<div
|
|
className="product-dialog"
|
|
style={{ height: dialogHeight + "vh" }}>
|
|
<ProductDialog productId={dialogParams.productId} />
|
|
</div>
|
|
</WeaDialog>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
ecodeSDK.exp(ProductIndex);
|