|
@@ -1,81 +1,26 @@
|
|
|
import React,{Component} from 'react';
|
|
|
-import {Button, Icon, message, Upload} from 'antd';
|
|
|
+import {Upload} from 'antd';
|
|
|
import './index.less';
|
|
|
+import Viewer from 'viewerjs';
|
|
|
+import 'viewerjs/dist/viewer.css'
|
|
|
|
|
|
-// 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';
|
|
|
+//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';
|
|
|
- })
|
|
|
- }
|
|
|
+ componentDidMount() {
|
|
|
+ this.gallery = new Viewer(document.getElementById('images'));
|
|
|
}
|
|
|
|
|
|
render() {
|
|
@@ -92,127 +37,22 @@ class ImgList extends Component{
|
|
|
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';
|
|
|
- })
|
|
|
+ this.gallery.view(file.index).show();
|
|
|
}}
|
|
|
/>
|
|
|
</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 >
|
|
|
+ <ul id="images" style={{display:'none',zIndex:-1,}}>
|
|
|
+ {
|
|
|
+ fileList.map((value,index)=>(
|
|
|
+ <li key={index}>
|
|
|
+ <img src={value.url || value.thumbUrl}/>
|
|
|
+ </li>
|
|
|
+ ))
|
|
|
+ }
|
|
|
+ </ul>
|
|
|
</div>
|
|
|
)
|
|
|
}
|