123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221 |
- import React,{Component} from 'react';
- import {Button, Icon, message, Upload} from 'antd';
- import './index.less';
- // const url1 = 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1601012352754&di=d33308119328f5ed987bd90031f98cfa&imgtype=0&src=http%3A%2F%2Fa2.att.hudong.com%2F27%2F81%2F01200000194677136358818023076.jpg';
- // const url2 = 'https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1601001245&di=60b5e1a42beb791524b46d7e3677f1f4&src=http://a2.att.hudong.com/13/86/01300001285722131043860050752.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(e) {
- e.stopPropagation();
- this.setState({
- previewVisible:false,
- previewImage: '',
- rotateDeg: 0,
- selectImgIndex: 0,
- },()=>{
- document.getElementsByClassName('imgBox')[0].style.backgroundSize = 'contain';
- })
- }
- 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.warn('已经是第一张了哦')
- }else{
- let file = fileList[index];
- this.setState({
- previewImage: file.url || file.thumbUrl,
- selectImgIndex: index,
- rotateDeg: 0,
- },()=>{
- document.getElementsByClassName('imgBox')[0].style.backgroundSize = 'contain';
- })
- }
- }
- downImg() {
- const {fileList} = this.state;
- let index = this.state.selectImgIndex + 1;
- if(index >= fileList.length){
- message.warn('已经是最后一张了哦')
- }else{
- let file = fileList[index];
- this.setState({
- previewImage: file.url || file.thumbUrl,
- selectImgIndex: index,
- rotateDeg: 0,
- },()=>{
- document.getElementsByClassName('imgBox')[0].style.backgroundSize = 'contain';
- })
- }
- }
- 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,
- },()=>{
- document.getElementsByClassName('imgBox')[0].style.backgroundSize = 'contain';
- })
- }}
- />
- </div>
- {fileList.length > 10 ? <div className='seeMore' onClick={()=>{this.setState({seeMore:!this.state.seeMore})}}>
- {this.state.seeMore ? '收起' : '查看更多'}
- </div> : <div/>}
- <div className={'imgModal'} style={{display:this.state.previewVisible ? 'flex' : 'none'}}>
- <div className='floatingLayer' onClick={this.handleCancel}/>
- <div style={{
- position:"absolute",
- zIndex:99998,
- width:'calc(100vh - 40px)',
- height:'calc(100vh - 40px)',
- transform: `rotate(${this.state.rotateDeg}deg)`,
- padding:'20px',
- }}>
- <div className='imgBox' style={{
- width:'100%',
- height:'100%',
- background: `rgba(0,0,0,0) url('${this.state.previewImage}') no-repeat center`,
- backgroundSize: 'contain',
- }}/>
- </div>
- <div className='actionBar'>
- <div
- style={{
- cursor:"pointer",
- background:'rgba(0,0,0,.5)',
- position: 'fixed',
- top: '30px',
- left: '0',
- right: '0',
- textAlign:'center',
- zIndex: '99999',
- color:'#FFFFFF',
- fontSize:'50px',
- fontWeight:"bolder",
- }}
- >
- {this.state.selectImgIndex + 1}/{fileList.length}
- </div>
- <div
- style={{
- cursor:"pointer",
- background:'rgba(0,0,0,0)',
- position: 'fixed',
- top: '60px',
- right: '60px',
- zIndex: '99999',
- color:'#FFFFFF',
- }}
- onClick={this.handleCancel}
- >
- <Icon
- type="close"
- style={{
- fontSize:'50px',
- color:'#FFFFFF'
- }}
- />
- </div>
- <div
- style={{
- cursor:"pointer",
- background:'rgba(0,0,0,0)',
- position: 'fixed',
- top: 'calc(50vh - 50px)',
- left: '4%',
- zIndex: '99999',
- }}
- onClick={this.upImg}>
- <Icon
- type="left-circle-o"
- style={{
- fontSize:'50px',
- color:'#FFFFFF'
- }}
- />
- </div>
- <div
- style={{
- cursor:"pointer",
- background:'rgba(0,0,0,0)',
- position: 'fixed',
- top: 'calc(50vh - 50px)',
- right: '4%',
- zIndex: '99999',
- }}
- onClick={this.downImg}>
- <Icon
- type="right-circle-o"
- style={{
- fontSize:'50px',
- color:'#FFFFFF'
- }}
- />
- </div>
- </div>
- <div style={{
- display:'flex',
- flexFlow:'row',
- marginTop:'20px',
- justifyContent:'center',
- position: 'fixed',
- bottom: '7px',
- zIndex: '99999',
- left:0,
- right:0,
- }}>
- <Button onClick={this.rotate}>
- 旋转
- </Button>
- </div>
- </div >
- </div>
- )
- }
- }
- export default ImgList;
|