| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104 | 
							- import React, {
 
-   Component
 
- } from 'react';
 
- import CropBox from './cropBox.jsx';
 
- import './crop.css';
 
- import {Icon,message} from 'antd';
 
- class CropBlock extends Component {
 
- 	constructor(props) {
 
- 		super(props);
 
- 		this.state = {
 
- 			urlArr: this.props.imgArr ? this.props.imgArr : [],
 
- 			number: this.props.number ? this.props.number : '',
 
- 			uploadData: this.props.uploadData ? this.props.uploadData : {},
 
- 			aspectRatio: this.props.aspectRatio ? this.props.aspectRatio : '',
 
- 			url: this.props.url ? this.props.url : '',
 
- 			close: true,
 
- 		}
 
- 		this.getUrl = this.getUrl.bind(this);
 
- 		this.addImg = this.addImg.bind(this);
 
- 		this.delImg = this.delImg.bind(this);
 
- 		this.getAllImg = this.getAllImg.bind(this);
 
- 	}
 
- 	getUrl(url) {
 
- 		let urlArr2 = this.state.urlArr;
 
- 		urlArr2.push(url);
 
- 		this.setState({
 
- 			urlArr: urlArr2,
 
- 			close: true
 
- 		})
 
- 		this.getAllImg(urlArr2);
 
- 	}
 
- 	addImg() {
 
- 		if(!this.state.number || (this.state.urlArr.length < this.state.number)) {
 
- 			this.setState({
 
- 				close: false
 
- 			})
 
- 		}else {
 
- 			message.warning("最多上传"+this.state.number+"张图片!");
 
- 		}
 
- 	}
 
- 	closeFun(state){
 
- 		this.setState({
 
- 			close:state
 
- 		})
 
- 	}
 
- 	delImg(index) {
 
- 		let urlArr2 = this.state.urlArr;
 
- 		urlArr2.splice(index, 1);
 
- 		this.setState({
 
- 			urlArr: urlArr2,
 
- 			close: true
 
- 		})
 
- 		this.getAllImg(urlArr2);
 
- 	}
 
- 	getAllImg(urlArr) {
 
- 		if(this.props.getAllImg) {
 
- 			this.props.getAllImg(urlArr);
 
- 		}
 
- 	}
 
- 	componentWillReceiveProps(data){
 
- 		if(data.urlArr.length>0){
 
- 			this.setState({
 
- 				urlArr:data.urlArr
 
- 			})
 
- 		}
 
- 	}
 
- 	render() {
 
- 		let imgList = this.state.urlArr.map((src, index) =>
 
- 			<div key = {index} className="crop-img-block">
 
- 				<img alt = "图片" className = "crop-img" title ="" src = {globalConfig.avatarHost + '/upload'+src} />
 
- 				<span className="del"><Icon type='delete'  onClick = {this.delImg.bind(this, index)}/></span>
 
- 			</div>
 
- 		)
 
- 		return (
 
- 			<div className = "crop-block">
 
- 			    {imgList}
 
- 				{this.state.urlArr.length < this.state.number&&<div className="crop-add-img" onClick = {this.addImg}>
 
- 					<span>+</span>
 
- 					<p>点击上传</p>
 
- 				</div>}
 
- 				<CropBox closeFun={this.closeFun.bind(this)} getUrl = {this.getUrl} uploadData = {this.state.uploadData} aspectRatio = {this.state.aspectRatio} url = {this.state.url} close = {this.state.close}/>
 
- 			</div>
 
- 		)
 
- 	}
 
- }
 
- export default CropBlock;
 
- /* 
 
-    //调用
 
-  <Crop 
 
-   number = {5} 
 
-   aspectRatio = {1/1}
 
-   url ={globalConfig.context + '/api/admin/banners/uploadPicture'}
 
-   uploadData = {{sign: 'banners'}} 
 
-   urlArr = {[]} 
 
- />
 
- */
 
 
  |