React管理系统-商品详情detail组件

React后端管理系统-商品详情detail组件

 

1. import React from 'react';
2. import MUtil from 'util/mm.jsx'
3. import Product from 'service/product-service.jsx'
4. import PageTitle from 'component/page-title/index.jsx';
5. import CategorySelector from './category-selector.jsx';
6.  
7. import './save.scss';
8.  
9. const _mm = new MUtil();
10. const _product = new Product();
11.  
12. class ProductDetail extends React.Component{
13.     constructor(props){
14.         super(props);
15.         this.state = {
16.             id : this.props.match.params.pid,
17.             name : '',
18.             subtitle : '',
19.             categoryId : 0,
20.             parentCategoryId : 0,
21.             subImages : [],
22.             price : '',
23.             stock : '',
24.             detail : '',
25.             status : 1 //商品状态1为在售
26.         }
27.     }
28.     componentDidMount(){
29.         this.loadProduct();
30.     }
31.     // 加载商品详情
32.     loadProduct(){
33.         // 有id的时候，表示是编辑功能，需要表单回填
34.         if(this.state.id){
35.             _product.getProduct(this.state.id).then((res) => {
36.                 let images = res.subImages.split(',');
37.                 res.subImages = images.map((imgUri) => {
38.                     return {
39.                         uri: imgUri,
40.                         url: res.imageHost + imgUri
41.                     }
42.                 });
43.                 this.setState(res);
44.             }, (errMsg) => {
45.                 _mm.errorTips(errMsg);
46.             });
47.         }
48.     }
49.     render(){
50.         return (
51.             <div id="page-wrapper">
52.                 <PageTitle title="添加商品" />
53.                 <div className="form-horizontal">
54.                     <div className="form-group">
55.                         <label className="col-md-2 control-label">商品名称</label>
56.                         <div className="col-md-5">
57.                             <p className="form-control-static">{this.state.name}</p>
58.                         </div>
59.                     </div>
60.                     <div className="form-group">
61.                         <label className="col-md-2 control-label">商品描述</label>
62.                         <div className="col-md-5">
63.                             <p className="form-control-static">{this.state.subtitle}</p>
64.                         </div>
65.                     </div>
66.                     <div className="form-group">
67.                         <label className="col-md-2 control-label">所属分类</label>
68.                         <CategorySelector
69.                             readOnly
70.                             categoryId={this.state.categoryId}
71.                             parentCategoryId={this.state.parentCategoryId}/>
72.                     </div>
73.                     <div className="form-group">
74.                         <label className="col-md-2 control-label">商品价格</label>
75.                         <div className="col-md-3">
76.                             <div className="input-group">
77.                                 <input type="number" className="form-control"
78.                                     value={this.state.price} readOnly/>
79.                                 <span className="input-group-addon">元</span>
80.                             </div>
81.                         </div>
82.                     </div>
83.                     <div className="form-group">
84.                         <label className="col-md-2 control-label">商品库存</label>
85.                         <div className="col-md-3">
86.                             <div className="input-group">
87.                                 <input type="number" className="form-control"
88.                                     value={this.state.stock} readOnly/>
89.                                 <span className="input-group-addon">件</span>
90.                             </div>
91.  
92.                         </div>
93.                     </div>
94.                     <div className="form-group">
95.                         <label className="col-md-2 control-label">商品图片</label>
96.                         <div className="col-md-10">
97.                             {
98.                                 this.state.subImages.length ? this.state.subImages.map(
99.                                     (image, index) => (
100.                                     <div className="img-con" key={index}>
101.                                         <img className="img" src={image.url} />
102.                                     </div>)
103.                                 ) : (<div>暂无图片</div>)
104.                             }
105.                         </div>
106.                     </div>
107.                     <div className="form-group">
108.                         <label className="col-md-2 control-label">商品详情</label>
109.                         <div className="col-md-10" dangerouslySetInnerHTML={{__html: this.state.detail}}></div>
110.                     </div>
111.                 </div>
112.             </div>
113.         )
114.     }
115. }
116. export default ProductDetail;