import React,{Component} from 'react'; import {Button, Icon, message, Modal, Upload} from 'antd'; import './index.less'; import $ from "jquery"; // const url1 = 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1600944413153&di=0b64017df8b86076cdba052010ee7516&imgtype=0&src=http%3A%2F%2Fa0.att.hudong.com%2F70%2F91%2F01300000261284122542917592865.jpg'; // const url2 = 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1600944610499&di=e72ee8d92fa8ce27c09abb2a50aa5f9d&imgtype=0&src=http%3A%2F%2Fa4.att.hudong.com%2F22%2F59%2F19300001325156131228593878903.jpg'; class ImgList extends Component{ constructor(props) { super(props); this.state={ seeMore: false, previewVisible: false, previewImage: '', rotateDeg: 0, fileList: props.fileList.map((v,i)=>{ v.index = i; // v.url = i%2 ? url1 : url2; return v }) || [], selectImgIndex: 0, //选择的图片索引 } this.handleCancel = this.handleCancel.bind(this); this.downImg = this.downImg.bind(this); this.upImg = this.upImg.bind(this); this.rotate = this.rotate.bind(this); } handleCancel() { this.setState({ previewVisible:false, previewImage: '', rotateDeg: 0, selectImgIndex: 0, }) } rotate() { let rotateDeg = this.state.rotateDeg + 90; this.setState({ rotateDeg, }) } upImg() { const {fileList} = this.state; let index = this.state.selectImgIndex - 1; if(index < 0){ message.info('已经是第一张了哦') }else{ let file = fileList[index]; this.setState({ previewImage: file.url || file.thumbUrl, selectImgIndex: index, rotateDeg: 0, }) } } downImg() { const {fileList} = this.state; let index = this.state.selectImgIndex + 1; if(index >= fileList.length){ message.info('已经是最后一张了哦') }else{ let file = fileList[index]; this.setState({ previewImage: file.url || file.thumbUrl, selectImgIndex: index, rotateDeg: 0, }) } } render() { const {fileList} = this.state; return (
{ this.setState({ previewImage: file.url || file.thumbUrl, previewVisible: true, selectImgIndex: file.index, }) }} />
{fileList.length > 10 ?
{this.setState({seeMore:!this.state.seeMore})}}> {this.state.seeMore ? '收起' : '查看更多'}
:
}
) } } export default ImgList;