| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166 | 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 (            <div className='ImgListComponent'>                <div className='ImgList'>                    <Upload                      className="demandDetailShow-upload"                      listType="picture-card"                      fileList={                          this.state.seeMore?                              fileList :                              fileList.slice(0,10)                      }                      onPreview={(file) => {                        this.setState({                            previewImage: file.url || file.thumbUrl,                            previewVisible: true,                            selectImgIndex: file.index,                        })                      }}                    />                </div>                {fileList.length > 10 ? <div className='seeMore' onClick={()=>{this.setState({seeMore:!this.state.seeMore})}}>                    {this.state.seeMore ? '收起' : '查看更多'}                </div> : <div/>}                <Modal                    maskClosable={false}                    footer={null}                    width={'80%'}                    visible={this.state.previewVisible}                    onCancel={this.handleCancel}                >                    <div className='actionBar'>                        <div                            style={{                                cursor:"pointer",                                background:'rgba(0,0,0,0)'                            }}                            onClick={this.upImg}>                            <Icon                                type="left-circle-o"                                style={{                                    fontSize:'50px',                                    marginRight:'20px'                                }}                            />                        </div>                        <div style={{                            flex:1                        }}>                            <img                                alt=""                                style={{                                    width: '100%',                                    marginTop: '15px',                                    transform: `rotate(${this.state.rotateDeg}deg)`,                                }}                                src={this.state.previewImage || ''}                            />                        </div>                        <div                            style={{                                cursor:"pointer",                                background:'rgba(0,0,0,0)'                            }}                            onClick={this.downImg}>                            <Icon                                type="right-circle-o"                                style={{                                    fontSize:'50px',                                    marginLeft:'20px'                                }}                            />                        </div>                    </div>                    <div style={{                        display:'flex',                        flexFlow:'row',                        marginTop:'20px',                        justifyContent:'center'                    }}>                        <Button onClick={this.rotate}>                            旋转                        </Button>                    </div>                </Modal>            </div>        )    }}export default ImgList;
 |