|
@@ -1,10 +1,9 @@
|
|
|
import React,{Component} from 'react';
|
|
|
-import {Button, Icon, message, Modal, Upload} from 'antd';
|
|
|
+import {Button, Icon, message, 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';
|
|
|
+// 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);
|
|
@@ -26,12 +25,15 @@ class ImgList extends Component{
|
|
|
this.rotate = this.rotate.bind(this);
|
|
|
}
|
|
|
|
|
|
- handleCancel() {
|
|
|
+ handleCancel(e) {
|
|
|
+ e.stopPropagation();
|
|
|
this.setState({
|
|
|
previewVisible:false,
|
|
|
previewImage: '',
|
|
|
rotateDeg: 0,
|
|
|
selectImgIndex: 0,
|
|
|
+ },()=>{
|
|
|
+ document.getElementsByClassName('imgBox')[0].style.backgroundSize = 'contain';
|
|
|
})
|
|
|
}
|
|
|
|
|
@@ -46,13 +48,15 @@ class ImgList extends Component{
|
|
|
const {fileList} = this.state;
|
|
|
let index = this.state.selectImgIndex - 1;
|
|
|
if(index < 0){
|
|
|
- message.info('已经是第一张了哦')
|
|
|
+ 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';
|
|
|
})
|
|
|
}
|
|
|
}
|
|
@@ -61,13 +65,15 @@ class ImgList extends Component{
|
|
|
const {fileList} = this.state;
|
|
|
let index = this.state.selectImgIndex + 1;
|
|
|
if(index >= fileList.length){
|
|
|
- message.info('已经是最后一张了哦')
|
|
|
+ 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';
|
|
|
})
|
|
|
}
|
|
|
}
|
|
@@ -90,6 +96,8 @@ class ImgList extends Component{
|
|
|
previewImage: file.url || file.thumbUrl,
|
|
|
previewVisible: true,
|
|
|
selectImgIndex: file.index,
|
|
|
+ },()=>{
|
|
|
+ document.getElementsByClassName('imgBox')[0].style.backgroundSize = 'contain';
|
|
|
})
|
|
|
}}
|
|
|
/>
|
|
@@ -97,52 +105,94 @@ class ImgList extends Component{
|
|
|
{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={'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,0)'
|
|
|
+ background:'rgba(0,0,0,.5)',
|
|
|
+ position: 'fixed',
|
|
|
+ top: '30px',
|
|
|
+ left: '0',
|
|
|
+ right: '0',
|
|
|
+ textAlign:'center',
|
|
|
+ zIndex: '99999',
|
|
|
+ color:'#FFFFFF',
|
|
|
+ fontSize:'50px',
|
|
|
+ fontWeight:"bolder",
|
|
|
}}
|
|
|
- onClick={this.upImg}>
|
|
|
+ >
|
|
|
+ {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="left-circle-o"
|
|
|
+ type="close"
|
|
|
style={{
|
|
|
fontSize:'50px',
|
|
|
- marginRight:'20px'
|
|
|
+ color:'#FFFFFF'
|
|
|
}}
|
|
|
/>
|
|
|
</div>
|
|
|
- <div style={{
|
|
|
- flex:1
|
|
|
- }}>
|
|
|
- <img
|
|
|
- alt=""
|
|
|
+ <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={{
|
|
|
- width: '100%',
|
|
|
- marginTop: '15px',
|
|
|
- transform: `rotate(${this.state.rotateDeg}deg)`,
|
|
|
+ fontSize:'50px',
|
|
|
+ color:'#FFFFFF'
|
|
|
}}
|
|
|
- src={this.state.previewImage || ''}
|
|
|
/>
|
|
|
</div>
|
|
|
<div
|
|
|
style={{
|
|
|
cursor:"pointer",
|
|
|
- background:'rgba(0,0,0,0)'
|
|
|
+ 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',
|
|
|
- marginLeft:'20px'
|
|
|
+ color:'#FFFFFF'
|
|
|
}}
|
|
|
/>
|
|
|
</div>
|
|
@@ -151,13 +201,18 @@ class ImgList extends Component{
|
|
|
display:'flex',
|
|
|
flexFlow:'row',
|
|
|
marginTop:'20px',
|
|
|
- justifyContent:'center'
|
|
|
+ justifyContent:'center',
|
|
|
+ position: 'fixed',
|
|
|
+ bottom: '7px',
|
|
|
+ zIndex: '99999',
|
|
|
+ left:0,
|
|
|
+ right:0,
|
|
|
}}>
|
|
|
<Button onClick={this.rotate}>
|
|
|
旋转
|
|
|
</Button>
|
|
|
</div>
|
|
|
- </Modal>
|
|
|
+ </div >
|
|
|
</div>
|
|
|
)
|
|
|
}
|